From 4b703cbd4d339d21f893bf8e1cd1f521c996bc15 Mon Sep 17 00:00:00 2001
From: Joe Previte <jjprevite@gmail.com>
Date: Thu, 1 Apr 2021 10:57:44 -0700
Subject: [PATCH] refactor: e2e tests based on jest-playwright

---
 test/e2e/login.test.ts         | 28 ++++++----------------------
 test/e2e/logout.test.ts        | 25 ++++---------------------
 test/e2e/openHelpAbout.test.ts | 27 ++++-----------------------
 test/utils/globalSetup.ts      |  4 ++++
 4 files changed, 18 insertions(+), 66 deletions(-)

diff --git a/test/e2e/login.test.ts b/test/e2e/login.test.ts
index ca0989043..1caf40b01 100644
--- a/test/e2e/login.test.ts
+++ b/test/e2e/login.test.ts
@@ -1,36 +1,20 @@
-import { chromium, Page, Browser, BrowserContext } from "playwright"
+/// <reference types="jest-playwright-preset" />
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
 
 describe("login", () => {
-  let browser: Browser
-  let page: Page
-  let context: BrowserContext
-
-  beforeAll(async () => {
-    browser = await chromium.launch()
-    context = await browser.newContext()
-  })
-
-  afterAll(async () => {
-    await browser.close()
-  })
-
   beforeEach(async () => {
-    page = await context.newPage()
-  })
-
-  afterEach(async () => {
-    await page.close()
-    // Remove password from local storage
-    await context.clearCookies()
+    await jestPlaywright.resetContext()
+    await page.goto(CODE_SERVER_ADDRESS)
   })
 
   it("should be able to login", async () => {
-    await page.goto(CODE_SERVER_ADDRESS)
     // Type in password
     await page.fill(".password", PASSWORD)
     // Click the submit button and login
     await page.click(".submit")
+    // For some reason, it wasn't waiting for the click and navigation before checking
+    // so adding a timeout ensures that we allow the editor time to load
+    await page.waitForTimeout(1000)
     // See the editor
     const codeServerEditor = await page.isVisible(".monaco-workbench")
     expect(codeServerEditor).toBeTruthy()
diff --git a/test/e2e/logout.test.ts b/test/e2e/logout.test.ts
index da26ece35..c717a5f75 100644
--- a/test/e2e/logout.test.ts
+++ b/test/e2e/logout.test.ts
@@ -1,28 +1,9 @@
-import { chromium, Page, Browser, BrowserContext } from "playwright"
+/// <reference types="jest-playwright-preset" />
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
 
 describe("logout", () => {
-  let browser: Browser
-  let page: Page
-  let context: BrowserContext
-
-  beforeAll(async () => {
-    browser = await chromium.launch()
-    context = await browser.newContext()
-  })
-
-  afterAll(async () => {
-    await browser.close()
-  })
-
   beforeEach(async () => {
-    page = await context.newPage()
-  })
-
-  afterEach(async () => {
-    await page.close()
-    // Remove password from local storage
-    await context.clearCookies()
+    await jestPlaywright.resetContext()
   })
 
   it("should be able login and logout", async () => {
@@ -31,6 +12,8 @@ describe("logout", () => {
     await page.fill(".password", PASSWORD)
     // Click the submit button and login
     await page.click(".submit")
+    // Allow time to navigate
+    await page.waitForTimeout(1000)
     // See the editor
     const codeServerEditor = await page.isVisible(".monaco-workbench")
     expect(codeServerEditor).toBeTruthy()
diff --git a/test/e2e/openHelpAbout.test.ts b/test/e2e/openHelpAbout.test.ts
index 31bad066a..c8830bfe6 100644
--- a/test/e2e/openHelpAbout.test.ts
+++ b/test/e2e/openHelpAbout.test.ts
@@ -1,15 +1,11 @@
-import { chromium, Page, Browser, BrowserContext, Cookie } from "playwright"
+/// <reference types="jest-playwright-preset" />
+import { Cookie } from "playwright"
 import { hash } from "../../src/node/util"
 import { CODE_SERVER_ADDRESS, PASSWORD, STORAGE } from "../utils/constants"
 import { createCookieIfDoesntExist } from "../utils/helpers"
 
 describe("Open Help > About", () => {
-  let browser: Browser
-  let page: Page
-  let context: BrowserContext
-
-  beforeAll(async () => {
-    browser = await chromium.launch()
+  beforeEach(async () => {
     // Create a new context with the saved storage state
     const storageState = JSON.parse(STORAGE) || {}
 
@@ -42,22 +38,7 @@ describe("Open Help > About", () => {
     // See discussion: https://github.com/cdr/code-server/pull/2648#discussion_r575434946
 
     const maybeUpdatedCookies = createCookieIfDoesntExist(cookies, cookieToStore)
-
-    context = await browser.newContext({
-      storageState: { cookies: maybeUpdatedCookies },
-    })
-  })
-
-  afterAll(async () => {
-    // Remove password from local storage
-    await context.clearCookies()
-
-    await context.close()
-    await browser.close()
-  })
-
-  beforeEach(async () => {
-    page = await context.newPage()
+    await jestPlaywright.resetBrowser({ storageState: { cookies: maybeUpdatedCookies } })
   })
 
   it("should see a 'Help' then 'About' button in the Application Menu that opens a dialog", async () => {
diff --git a/test/utils/globalSetup.ts b/test/utils/globalSetup.ts
index 36b242d7d..498d21a3a 100644
--- a/test/utils/globalSetup.ts
+++ b/test/utils/globalSetup.ts
@@ -21,6 +21,10 @@ module.exports = async () => {
   await page.fill(".password", PASSWORD)
   // Click the submit button and login
   await page.click(".submit")
+  // After logging in, we store a cookie in localStorage
+  // we need to wait a bit to make sure that happens
+  // before we grab the storage and save it
+  await page.waitForTimeout(1000)
 
   // Save storage state and store as an env variable
   // More info: https://playwright.dev/docs/auth?_highlight=authe#reuse-authentication-state