From 2cb499385a0e36d60161618b3360c25408671e10 Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Fri, 30 Apr 2021 12:33:20 -0700 Subject: [PATCH 1/2] feat: add isConnected method to CodeServer model --- test/e2e/codeServer.test.ts | 4 ++++ test/e2e/models/CodeServer.ts | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/test/e2e/codeServer.test.ts b/test/e2e/codeServer.test.ts index 4b20f69f..7cd74fa7 100644 --- a/test/e2e/codeServer.test.ts +++ b/test/e2e/codeServer.test.ts @@ -38,6 +38,10 @@ test.describe("CodeServer", () => { expect(await codeServer.isEditorVisible()).toBe(true) }) + test.only("should always have a connection", options, async ({ page }) => { + expect(await codeServer.isConnected()).toBe(true) + }) + test("should show the Integrated Terminal", options, async ({ page }) => { await codeServer.focusTerminal() expect(await page.isVisible("#terminal")).toBe(true) diff --git a/test/e2e/models/CodeServer.ts b/test/e2e/models/CodeServer.ts index b833cc7e..6142ce25 100644 --- a/test/e2e/models/CodeServer.ts +++ b/test/e2e/models/CodeServer.ts @@ -56,6 +56,25 @@ export class CodeServer { return await this.page.isVisible(this.editorSelector) } + /** + * Checks if the editor is visible + */ + async isConnected() { + await this.page.waitForLoadState("networkidle") + + // See [aria-label="Remote Host"] + const hostElement = await this.page.$(`[aria-label="Remote Host"]`) + // Returns something like " localhost:8080" + const host = await hostElement?.innerText() + + // Check if host (localhost:8080) is in the CODE_SERVER_ADDRESS + // if it is, we're connected! + // if not, we may need to reload the page + // Make sure to trim whitespace too + const isEditorConnected = host ? CODE_SERVER_ADDRESS.includes(host.trim()) : false + return isEditorConnected + } + /** * Focuses Integrated Terminal * by using "Terminal: Focus Terminal" From cde30579c400f84fdacd6e27f63205f4ec6803be Mon Sep 17 00:00:00 2001 From: Joe Previte Date: Fri, 30 Apr 2021 13:26:25 -0700 Subject: [PATCH 2/2] refactor: change to reloadUntilEditorIsReady --- test/e2e/codeServer.test.ts | 2 +- test/e2e/login.test.ts | 2 +- test/e2e/logout.test.ts | 2 +- test/e2e/models/CodeServer.ts | 31 ++++++++++++++----------------- 4 files changed, 17 insertions(+), 20 deletions(-) diff --git a/test/e2e/codeServer.test.ts b/test/e2e/codeServer.test.ts index 7cd74fa7..d7a9a8b6 100644 --- a/test/e2e/codeServer.test.ts +++ b/test/e2e/codeServer.test.ts @@ -38,7 +38,7 @@ test.describe("CodeServer", () => { expect(await codeServer.isEditorVisible()).toBe(true) }) - test.only("should always have a connection", options, async ({ page }) => { + test("should always have a connection", options, async ({ page }) => { expect(await codeServer.isConnected()).toBe(true) }) diff --git a/test/e2e/login.test.ts b/test/e2e/login.test.ts index 9e2f3da3..4fe4347b 100644 --- a/test/e2e/login.test.ts +++ b/test/e2e/login.test.ts @@ -30,7 +30,7 @@ test.describe("login", () => { await page.waitForLoadState("networkidle") // We do this because occassionally code-server doesn't load on Firefox // but loads if you reload once or twice - await codeServer.reloadUntilEditorIsVisible() + await codeServer.reloadUntilEditorIsReady() // Make sure the editor actually loaded expect(await codeServer.isEditorVisible()).toBe(true) }) diff --git a/test/e2e/logout.test.ts b/test/e2e/logout.test.ts index 5e9dc8f9..54119774 100644 --- a/test/e2e/logout.test.ts +++ b/test/e2e/logout.test.ts @@ -25,7 +25,7 @@ test.describe("logout", () => { await page.waitForLoadState("networkidle") // We do this because occassionally code-server doesn't load on Firefox // but loads if you reload once or twice - await codeServer.reloadUntilEditorIsVisible() + await codeServer.reloadUntilEditorIsReady() // Make sure the editor actually loaded expect(await codeServer.isEditorVisible()).toBe(true) diff --git a/test/e2e/models/CodeServer.ts b/test/e2e/models/CodeServer.ts index 6142ce25..b7cc093f 100644 --- a/test/e2e/models/CodeServer.ts +++ b/test/e2e/models/CodeServer.ts @@ -20,17 +20,20 @@ export class CodeServer { /** * Checks if the editor is visible - * and reloads until it is + * and that we are connected to the host + * + * Reload until both checks pass */ - async reloadUntilEditorIsVisible() { + async reloadUntilEditorIsReady() { const editorIsVisible = await this.isEditorVisible() + const editorIsConnected = await this.isConnected() let reloadCount = 0 // Occassionally code-server timeouts in Firefox // we're not sure why // but usually a reload or two fixes it // TODO@jsjoeio @oxy look into Firefox reconnection/timeout issues - while (!editorIsVisible) { + while (!editorIsVisible && !editorIsConnected) { // When a reload happens, we want to wait for all resources to be // loaded completely. Hence why we use that instead of DOMContentLoaded // Read more: https://thisthat.dev/dom-content-loaded-vs-load/ @@ -38,8 +41,8 @@ export class CodeServer { // Give it an extra second just in case it's feeling extra slow await this.page.waitForTimeout(1000) reloadCount += 1 - if (await this.isEditorVisible()) { - console.log(` Editor became visible after ${reloadCount} reloads`) + if ((await this.isEditorVisible()) && (await this.isConnected)) { + console.log(` Editor became ready after ${reloadCount} reloads`) break } await this.page.reload() @@ -62,17 +65,11 @@ export class CodeServer { async isConnected() { await this.page.waitForLoadState("networkidle") - // See [aria-label="Remote Host"] - const hostElement = await this.page.$(`[aria-label="Remote Host"]`) - // Returns something like " localhost:8080" - const host = await hostElement?.innerText() + const host = new URL(CODE_SERVER_ADDRESS).host + const hostSelector = `[title="Editing on ${host}"]` + await this.page.waitForSelector(hostSelector) - // Check if host (localhost:8080) is in the CODE_SERVER_ADDRESS - // if it is, we're connected! - // if not, we may need to reload the page - // Make sure to trim whitespace too - const isEditorConnected = host ? CODE_SERVER_ADDRESS.includes(host.trim()) : false - return isEditorConnected + return await this.page.isVisible(hostSelector) } /** @@ -109,12 +106,12 @@ export class CodeServer { /** * Navigates to CODE_SERVER_ADDRESS - * and reloads until the editor is visible + * and reloads until the editor is ready * * Helpful for running before tests */ async setup() { await this.navigate() - await this.reloadUntilEditorIsVisible() + await this.reloadUntilEditorIsReady() } }