🔧 Update Playwright config and tests to use env variables (#1266)

frontend/package-lock.json

@@ -34,6 +34,7 @@
         "@types/react": "^18.2.37",
         "@types/react-dom": "^18.2.15",
         "@vitejs/plugin-react-swc": "^3.5.0",
+        "dotenv": "^16.4.5",
         "typescript": "^5.2.2",
         "vite": "^5.0.13"
       }
@@ -2911,6 +2912,18 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -5829,6 +5842,12 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "dev": true
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",

frontend/package.json

@@ -37,6 +37,7 @@
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "dotenv": "^16.4.5",
     "typescript": "^5.2.2",
     "vite": "^5.0.13"
   }

frontend/playwright.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, devices } from '@playwright/test';
 
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv

frontend/tests/auth.setup.ts

@@ -1,11 +1,13 @@
 import { test as setup } from "@playwright/test"
+import { firstSuperuser, firstSuperuserPassword } from "./config.ts"
 
 const authFile = "playwright/.auth/user.json"
 
+
 setup("authenticate", async ({ page }) => {
   await page.goto("/login")
-  await page.getByPlaceholder("Email").fill("admin@example.com")
+  await page.getByPlaceholder("Email").fill(firstSuperuser)
-  await page.getByPlaceholder("Password").fill("changethis")
+  await page.getByPlaceholder("Password").fill(firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
   await page.waitForURL("/")
   await page.context().storageState({ path: authFile })

frontend/tests/config.ts

@@ -0,0 +1,21 @@
+import dotenv from 'dotenv';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+dotenv.config({ path: path.join(__dirname, '../../.env') });
+
+const { FIRST_SUPERUSER, FIRST_SUPERUSER_PASSWORD } = process.env;
+
+if (typeof FIRST_SUPERUSER !== "string") {
+  throw new Error("Environment variable FIRST_SUPERUSER is undefined");
+}
+
+if (typeof FIRST_SUPERUSER_PASSWORD !== "string") {
+  throw new Error("Environment variable FIRST_SUPERUSER_PASSWORD is undefined");
+}
+
+export const firstSuperuser = FIRST_SUPERUSER as string;
+export const firstSuperuserPassword = FIRST_SUPERUSER_PASSWORD as string;

frontend/tests/login.spec.ts

@@ -1,4 +1,5 @@
 import { type Page, expect, test } from "@playwright/test"
+import { firstSuperuser, firstSuperuserPassword } from "./config.ts"
 
 test.use({ storageState: { cookies: [], origins: [] } })
 
@@ -46,7 +47,7 @@ test("Forgot Password link is visible", async ({ page }) => {
 test("Log in with valid email and password ", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "admin@example.com", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")
@@ -59,7 +60,7 @@ test("Log in with valid email and password ", async ({ page }) => {
 test("Log in with invalid email", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "invalidemail", "changethis")
+  await fillForm(page, "invalidemail", firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await expect(page.getByText("Invalid email address")).toBeVisible()
@@ -67,8 +68,8 @@ test("Log in with invalid email", async ({ page }) => {
 
 test("Log in with invalid password", async ({ page }) => {
   await page.goto("/login")
-
+  // TODO: Add a random password utility
-  await fillForm(page, "admin@example.com", "changethat")
+  await fillForm(page, firstSuperuser, "changethat")
   await page.getByRole("button", { name: "Log In" }).click()
 
   await expect(page.getByText("Incorrect email or password")).toBeVisible()
@@ -79,7 +80,7 @@ test("Log in with invalid password", async ({ page }) => {
 test("Successful log out", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "admin@example.com", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")
@@ -96,7 +97,7 @@ test("Successful log out", async ({ page }) => {
 test("Logged-out user cannot access protected routes", async ({ page }) => {
   await page.goto("/login")
 
-  await fillForm(page, "admin@example.com", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")

frontend/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "*.ts", "**/*.ts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }