feat(testing): add isConnected check

test/e2e/codeServer.test.ts

@@ -38,6 +38,10 @@ test.describe("CodeServer", () => {
     expect(await codeServer.isEditorVisible()).toBe(true)
   })
 
+  test("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)

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)
   })

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)
 

test/e2e/models/CodeServer.ts

@@ -20,26 +20,29 @@ 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/
       await this.page.waitForLoadState("load")
       // 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()
@@ -56,6 +59,19 @@ export class CodeServer {
     return await this.page.isVisible(this.editorSelector)
   }
 
+  /**
+   * Checks if the editor is visible
+   */
+  async isConnected() {
+    await this.page.waitForLoadState("networkidle")
+
+    const host = new URL(CODE_SERVER_ADDRESS).host
+    const hostSelector = `[title="Editing on ${host}"]`
+    await this.page.waitForSelector(hostSelector)
+
+    return await this.page.isVisible(hostSelector)
+  }
+
   /**
    * Focuses Integrated Terminal
    * by using "Terminal: Focus Terminal"
@@ -90,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()
   }
 }