fix: use env variables in tests

fastapi/full-stack-fastapi-template#1266

Author: d4vidsha

frontend/package-lock.json

@@ -32,6 +32,7 @@
     "clsx": "^2.1.1",
     "cssnano": "^7.0.3",
     "date-fns": "^3.6.0",
+    "dotenv": "^16.4.5",
     "form-data": "4.0.0",
     "framer-motion": "^10.16.16",
     "lucide-react": "^0.399.0",

frontend/package.json

@@ -1,11 +1,12 @@
 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("[email protected]")
-  await page.getByPlaceholder("Password").fill("changethis")
+  await page.getByPlaceholder("Email").fill(firstSuperuser)
+  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/auth.setup.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/config.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, "[email protected]", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")
@@ -59,16 +60,16 @@ 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()
 })
 
 test("Log in with invalid password", async ({ page }) => {
   await page.goto("/login")
-
-  await fillForm(page, "[email protected]", "changethat")
+  // TODO: Add a random password utility
+  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, "[email protected]", "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, "[email protected]", "changethis")
+  await fillForm(page, firstSuperuser, firstSuperuserPassword)
   await page.getByRole("button", { name: "Log In" }).click()
 
   await page.waitForURL("/")

frontend/tests/login.spec.ts

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