refactor: change to reloadUntilEditorIsReady

This commit is contained in:
Joe Previte 2021-04-30 13:26:25 -07:00
parent 2cb499385a
commit cde30579c4
No known key found for this signature in database
GPG Key ID: 2C91590C6B742C24
4 changed files with 17 additions and 20 deletions

View File

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

View File

@ -30,7 +30,7 @@ test.describe("login", () => {
await page.waitForLoadState("networkidle") await page.waitForLoadState("networkidle")
// We do this because occassionally code-server doesn't load on Firefox // We do this because occassionally code-server doesn't load on Firefox
// but loads if you reload once or twice // but loads if you reload once or twice
await codeServer.reloadUntilEditorIsVisible() await codeServer.reloadUntilEditorIsReady()
// Make sure the editor actually loaded // Make sure the editor actually loaded
expect(await codeServer.isEditorVisible()).toBe(true) expect(await codeServer.isEditorVisible()).toBe(true)
}) })

View File

@ -25,7 +25,7 @@ test.describe("logout", () => {
await page.waitForLoadState("networkidle") await page.waitForLoadState("networkidle")
// We do this because occassionally code-server doesn't load on Firefox // We do this because occassionally code-server doesn't load on Firefox
// but loads if you reload once or twice // but loads if you reload once or twice
await codeServer.reloadUntilEditorIsVisible() await codeServer.reloadUntilEditorIsReady()
// Make sure the editor actually loaded // Make sure the editor actually loaded
expect(await codeServer.isEditorVisible()).toBe(true) expect(await codeServer.isEditorVisible()).toBe(true)

View File

@ -20,17 +20,20 @@ export class CodeServer {
/** /**
* Checks if the editor is visible * 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 editorIsVisible = await this.isEditorVisible()
const editorIsConnected = await this.isConnected()
let reloadCount = 0 let reloadCount = 0
// Occassionally code-server timeouts in Firefox // Occassionally code-server timeouts in Firefox
// we're not sure why // we're not sure why
// but usually a reload or two fixes it // but usually a reload or two fixes it
// TODO@jsjoeio @oxy look into Firefox reconnection/timeout issues // 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 // When a reload happens, we want to wait for all resources to be
// loaded completely. Hence why we use that instead of DOMContentLoaded // loaded completely. Hence why we use that instead of DOMContentLoaded
// Read more: https://thisthat.dev/dom-content-loaded-vs-load/ // 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 // Give it an extra second just in case it's feeling extra slow
await this.page.waitForTimeout(1000) await this.page.waitForTimeout(1000)
reloadCount += 1 reloadCount += 1
if (await this.isEditorVisible()) { if ((await this.isEditorVisible()) && (await this.isConnected)) {
console.log(` Editor became visible after ${reloadCount} reloads`) console.log(` Editor became ready after ${reloadCount} reloads`)
break break
} }
await this.page.reload() await this.page.reload()
@ -62,17 +65,11 @@ export class CodeServer {
async isConnected() { async isConnected() {
await this.page.waitForLoadState("networkidle") await this.page.waitForLoadState("networkidle")
// See [aria-label="Remote Host"] const host = new URL(CODE_SERVER_ADDRESS).host
const hostElement = await this.page.$(`[aria-label="Remote Host"]`) const hostSelector = `[title="Editing on ${host}"]`
// Returns something like " localhost:8080" await this.page.waitForSelector(hostSelector)
const host = await hostElement?.innerText()
// Check if host (localhost:8080) is in the CODE_SERVER_ADDRESS return await this.page.isVisible(hostSelector)
// 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
} }
/** /**
@ -109,12 +106,12 @@ export class CodeServer {
/** /**
* Navigates to CODE_SERVER_ADDRESS * Navigates to CODE_SERVER_ADDRESS
* and reloads until the editor is visible * and reloads until the editor is ready
* *
* Helpful for running before tests * Helpful for running before tests
*/ */
async setup() { async setup() {
await this.navigate() await this.navigate()
await this.reloadUntilEditorIsVisible() await this.reloadUntilEditorIsReady()
} }
} }