refactor: use playwright-test syntax for e2e tests

Author: jsjoeio

test/e2e/browser.test.ts

@@ -1,35 +1,22 @@
-/// <reference types="jest-playwright-preset" />
+import { test, expect } from "@playwright/test"
 
-// This test is for nothing more than to make sure
-// tests are running in multiple browsers
-describe("Browser gutcheck", () => {
-  beforeEach(async () => {
-    await jestPlaywright.resetBrowser({
-      logger: {
-        isEnabled: (name) => name === "browser",
-        log: (name, severity, message, args) => console.log(`${name} ${message}`),
-      },
-    })
-  })
+test("should display correct browser based on userAgent", async ({ page, browserName }) => {
+  const displayNames = {
+    chromium: "Chrome",
+    firefox: "Firefox",
+    webkit: "Safari",
+  }
+  const userAgent = await page.evaluate("navigator.userAgent")
 
-  test("should display correct browser based on userAgent", async () => {
-    const displayNames = {
-      chromium: "Chrome",
-      firefox: "Firefox",
-      webkit: "Safari",
-    }
-    const userAgent = await page.evaluate("navigator.userAgent")
+  if (browserName === "chromium") {
+    expect(userAgent).toContain(displayNames[browserName])
+  }
 
-    if (browserName === "chromium") {
-      expect(userAgent).toContain(displayNames[browserName])
-    }
+  if (browserName === "firefox") {
+    expect(userAgent).toContain(displayNames[browserName])
+  }
 
-    if (browserName === "firefox") {
-      expect(userAgent).toContain(displayNames[browserName])
-    }
-
-    if (browserName === "webkit") {
-      expect(userAgent).toContain(displayNames[browserName])
-    }
-  })
+  if (browserName === "webkit") {
+    expect(userAgent).toContain(displayNames[browserName])
+  }
 })

test/e2e/globalSetup.test.ts

@@ -1,20 +1,19 @@
-/// <reference types="jest-playwright-preset" />
+import { test, expect } from "@playwright/test"
 import { CODE_SERVER_ADDRESS, STORAGE } from "../utils/constants"
 
 // This test is to make sure the globalSetup works as expected
 // meaning globalSetup ran and stored the storageState in STORAGE
-describe("globalSetup", () => {
-  beforeEach(async () => {
-    // Create a new context with the saved storage state
-    // so we don't have to logged in
-    const storageState = JSON.parse(STORAGE) || {}
-    await jestPlaywright.resetContext({
+test.describe("globalSetup", () => {
+  // Create a new context with the saved storage state
+  // so we don't have to logged in
+  const storageState = JSON.parse(STORAGE) || {}
+  const options = {
+    contextOptions: {
       storageState,
-    })
+    },
+  }
+  test("should keep us logged in using the storageState", options, async ({ page }) => {
     await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
-  })
-
-  it("should keep us logged in using the storageState", async () => {
     // Make sure the editor actually loaded
     expect(await page.isVisible("div.monaco-workbench"))
   })

test/e2e/login.test.ts

@@ -1,13 +1,13 @@
-/// <reference types="jest-playwright-preset" />
+import { test, expect } from "@playwright/test"
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
 
-describe("login", () => {
-  beforeEach(async () => {
-    await jestPlaywright.resetBrowser()
+test.describe("login", () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO@jsjoeio reset the browser
     await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
   })
 
-  it("should be able to login", async () => {
+  test("should be able to login", async ({ page }) => {
     // Type in password
     await page.fill(".password", PASSWORD)
     // Click the submit button and login

test/e2e/loginPage.test.ts

@@ -1,19 +1,13 @@
-/// <reference types="jest-playwright-preset" />
-
+import { test, expect } from "@playwright/test"
 import { CODE_SERVER_ADDRESS } from "../utils/constants"
 
-describe("login page", () => {
-  beforeEach(async () => {
-    await jestPlaywright.resetContext({
-      logger: {
-        isEnabled: (name, severity) => name === "browser",
-        log: (name, severity, message, args) => console.log(`${name} ${message}`),
-      },
-    })
+test.describe("login page", () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO@jsjoeio reset context somehow
     await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
   })
 
-  it("should see the login page", async () => {
+  test("should see the login page", async ({ page }) => {
     // It should send us to the login page
     expect(await page.title()).toBe("code-server login")
   })

test/e2e/logout.test.ts

@@ -1,13 +1,13 @@
-/// <reference types="jest-playwright-preset" />
+import { test, expect } from "@playwright/test"
 import { CODE_SERVER_ADDRESS, PASSWORD } from "../utils/constants"
 
-describe("logout", () => {
-  beforeEach(async () => {
-    await jestPlaywright.resetBrowser()
+test.describe("logout", () => {
+  test.beforeEach(async ({ page }) => {
+    // TODO@jsjoeio reset context
     await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
   })
 
-  it("should be able login and logout", async () => {
+  test("should be able login and logout", async ({ page }) => {
     // Type in password
     await page.fill(".password", PASSWORD)
     // Click the submit button and login

test/e2e/openHelpAbout.test.ts

@@ -1,18 +1,16 @@
-/// <reference types="jest-playwright-preset" />
+import { test, expect } from "@playwright/test"
 import { CODE_SERVER_ADDRESS, STORAGE } from "../utils/constants"
 
-describe("Open Help > About", () => {
-  beforeEach(async () => {
+test.describe("Open Help > About", () => {
+  test.beforeEach(async ({ page }) => {
     // Create a new context with the saved storage state
     // so we don't have to logged in
+    // TODO@jsjoeio reset context and use storageState
     const storageState = JSON.parse(STORAGE) || {}
-    await jestPlaywright.resetContext({
-      storageState,
-    })
     await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "networkidle" })
   })
 
-  it("should see a 'Help' then 'About' button in the Application Menu that opens a dialog", async () => {
+  test("should see a 'Help' then 'About' button in the Application Menu that opens a dialog", async ({ page }) => {
     // Make sure the editor actually loaded
     expect(await page.isVisible("div.monaco-workbench"))