chore(site): Improve the e2e setup (#5840)

.gitignore

@@ -25,7 +25,7 @@ site/coverage/
 site/storybook-static/
 site/test-results/*
 site/e2e/test-results/*
-site/e2e/storageState.json
+site/e2e/states/*.json
 site/playwright-report/*
 
 # Make target for updating golden files.

.prettierignore

@@ -28,7 +28,7 @@ site/coverage/
 site/storybook-static/
 site/test-results/*
 site/e2e/test-results/*
-site/e2e/storageState.json
+site/e2e/states/*.json
 site/playwright-report/*
 
 # Make target for updating golden files.

site/.eslintignore

@@ -28,7 +28,7 @@ coverage/
 storybook-static/
 test-results/*
 e2e/test-results/*
-e2e/storageState.json
+e2e/states/*.json
 playwright-report/*
 
 # Make target for updating golden files.

site/.prettierignore

@@ -28,7 +28,7 @@ coverage/
 storybook-static/
 test-results/*
 e2e/test-results/*
-e2e/storageState.json
+e2e/states/*.json
 playwright-report/*
 
 # Make target for updating golden files.

site/e2e/constants.ts

@@ -1,8 +1,7 @@
-// Our base port. It's important to run on 3000,
-// which matches our api server
-export const basePort = 3000
+// Default port from the server
+export const defaultPort = 3000
 
-// Credentials for the default user when running in dev mode.
-export const username = "developer"
+// Credentials for the first user
+export const username = "admin"
 export const password = "password"
 export const email = "admin@coder.com"

site/e2e/globalSetup.ts

@@ -1,16 +1,35 @@
 import axios from "axios"
+import { request } from "playwright"
 import { createFirstUser } from "../src/api/api"
 import * as constants from "./constants"
+import { getStatePath } from "./helpers"
 
 const globalSetup = async (): Promise<void> => {
-  axios.defaults.baseURL = `http://localhost:${constants.basePort}`
-  // Create a user
+  axios.defaults.baseURL = `http://localhost:${constants.defaultPort}`
+
+  // Create first user
   await createFirstUser({
     email: constants.email,
     username: constants.username,
     password: constants.password,
     trial: false,
   })
+
+  // Authenticated storage
+  const authenticatedRequestContext = await request.newContext()
+  await authenticatedRequestContext.post(
+    `http://localhost:${constants.defaultPort}/api/v2/users/login`,
+    {
+      data: {
+        email: constants.email,
+        password: constants.password,
+      },
+    },
+  )
+  await authenticatedRequestContext.storageState({
+    path: getStatePath("authState"),
+  })
+  await authenticatedRequestContext.dispose()
 }
 
 export default globalSetup

site/e2e/helpers.ts

@@ -1,4 +1,5 @@
 import { Page } from "@playwright/test"
+import path from "path"
 
 export const buttons = {
   starterTemplates: "Starter templates",
@@ -22,3 +23,9 @@ export const fillInput = async (
 ): Promise<void> => {
   await page.fill(`text=${label}`, value)
 }
+
+const statesDir = path.join(__dirname, "./states")
+
+export const getStatePath = (name: string): string => {
+  return path.join(statesDir, `${name}.json`)
+}

site/e2e/playwright.config.ts

@@ -1,32 +1,23 @@
 import { PlaywrightTestConfig } from "@playwright/test"
-import * as path from "path"
-import { basePort } from "./constants"
+import path from "path"
+import { defaultPort } from "./constants"
+
+const port = process.env.CODER_E2E_PORT
+  ? Number(process.env.CODER_E2E_PORT)
+  : defaultPort
+
+const coderMain = path.join(__dirname, "../../enterprise/cmd/coder/main.go")
 
 const config: PlaywrightTestConfig = {
   testDir: "tests",
   globalSetup: require.resolve("./globalSetup"),
-
-  // Create junit report file for upload to DataDog
-  reporter: [["junit", { outputFile: "test-results/junit.xml" }]],
-
-  // NOTE: if Playwright complains about the port being taken
-  // do not change the basePort (it must match our api server).
-  // Instead, simply run the test suite without running our local server.
   use: {
-    baseURL: `http://localhost:${basePort}`,
+    baseURL: `http://localhost:${port}`,
     video: "retain-on-failure",
   },
-
-  // `webServer` tells Playwright to launch a test server - more details here:
-  // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
-    // Run the coder daemon directly.
-    command: `go run -tags embed ${path.join(
-      __dirname,
-      "../../enterprise/cmd/coder/main.go",
-    )} server --in-memory --access-url http://127.0.0.1:${basePort}`,
-    port: basePort,
-    timeout: 120 * 10000,
+    command: `go run -tags embed ${coderMain} server --global-config $(mktemp -d -t e2e-XXXXXXXXXX)`,
+    port,
     reuseExistingServer: false,
   },
 }

site/e2e/tests/listTemplates.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test"
+import { getStatePath } from "../helpers"
+
+test.use({ storageState: getStatePath("authState") })
+
+test("list templates", async ({ page, baseURL }) => {
+  await page.goto(`${baseURL}/templates`, { waitUntil: "networkidle" })
+  await expect(page).toHaveTitle("Templates – Coder")
+})