fixup: move openHelpAbout

test/e2e/openHelpAbout.test.ts

@@ -0,0 +1,91 @@
+import { chromium, Page, Browser, BrowserContext, Cookie } from "playwright"
+import { hash } from "../../src/node/util"
+import { CODE_SERVER_ADDRESS, PASSWORD, STORAGE, E2E_VIDEO_DIR } 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()
+    // Create a new context with the saved storage state
+    const storageState = JSON.parse(STORAGE) || {}
+
+    const cookieToStore = {
+      sameSite: "Lax" as const,
+      name: "key",
+      value: hash(PASSWORD),
+      domain: "localhost",
+      path: "/",
+      expires: -1,
+      httpOnly: false,
+      secure: false,
+    }
+
+    // For some odd reason, the login method used in globalSetup.ts doesn't always work
+    // I don't know if it's on playwright clearing our cookies by accident
+    // or if it's our cookies disappearing.
+    // This means we need an additional check to make sure we're logged in.
+    // We do this by manually adding the cookie to the browser environment
+    // if it's not there at the time the test starts
+    const cookies: Cookie[] = storageState.cookies || []
+    // If the cookie exists in cookies then
+    // this will return the cookies with no changes
+    // otherwise if it doesn't exist, it will create it
+    // hence the name maybeUpdatedCookies
+    //
+    // TODO(@jsjoeio)
+    // The playwright storage thing sometimes works and sometimes doesn't. We should investigate this further
+    // at some point.
+    // See discussion: https://github.com/cdr/code-server/pull/2648#discussion_r575434946
+
+    const maybeUpdatedCookies = createCookieIfDoesntExist(cookies, cookieToStore)
+
+    context = await browser.newContext({
+      storageState: { cookies: maybeUpdatedCookies },
+      recordVideo: { dir: E2E_VIDEO_DIR },
+    })
+  })
+
+  afterAll(async () => {
+    // Remove password from local storage
+    await context.clearCookies()
+
+    await context.close()
+    await browser.close()
+  })
+
+  beforeEach(async () => {
+    page = await context.newPage()
+  })
+
+  it("should see a 'Help' then 'About' button in the Application Menu that opens a dialog", async () => {
+    // waitUntil: "domcontentloaded"
+    // In case the page takes a long time to load
+    await page.goto(CODE_SERVER_ADDRESS, { waitUntil: "domcontentloaded" })
+
+    // Make sure the editor actually loaded
+    expect(await page.isVisible("div.monaco-workbench"))
+
+    // Click the Application menu
+    await page.click("[aria-label='Application Menu']")
+    // See the Help button
+    const helpButton = "a.action-menu-item span[aria-label='Help']"
+    expect(await page.isVisible(helpButton))
+
+    // Hover the helpButton
+    await page.hover(helpButton)
+
+    // see the About button and click it
+    const aboutButton = "a.action-menu-item span[aria-label='About']"
+    expect(await page.isVisible(aboutButton))
+    // NOTE: it won't work unless you hover it first
+    await page.hover(aboutButton)
+    await page.click(aboutButton)
+
+    const codeServerText = "text=code-server"
+    expect(await page.isVisible(codeServerText))
+  })
+})