chore: moving out user auth out into a util for E2E tests (#1181)

* chore: moving out from user auth out into a util

* chore: missed some updates in the README

* chore: adding logging to better understand why user setup is failing when pushed

.github/workflows/e2e-tests.yml

@@ -46,7 +46,7 @@ jobs:
       NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
       E2E_USER_EMAIL: [email protected]
       E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
-      E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
+      E2E_USER_ONE_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
     steps:
       - name: Checkout repository

README.md

@@ -141,9 +141,9 @@ You shouldn't need to change the default value here. This is a variable used by
 NEXTAUTH_URL=http://localhost:3000/api/auth
 ```
 
-### E2E_USER_SESSION_ID
+### E2E_USER_ONE_SESSION_ID
 
-This is the sessionToken uuid that .
+This is the sessionToken uuid that is used to identify a users current active session.
 This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
 
 ### E2E_USER_ID
@@ -173,7 +173,7 @@ Please ensure you have the following variables set in your `.env` file:
 
 - `E2E_USER_ID`: The id of the E2E user for testing.
 - `E2E_USER_EMAIL`: The email of the E2E user for testing.
-- `E2E_USER_SESSION_ID`: The session id that the user will use to authenticate.
+- `E2E_USER_ONE_SESSION_ID`: The session id that the user will use to authenticate.
 
 
 Note the sample .env [here](./sample.env) is fine to use.

drizzle/seed.ts

@@ -11,7 +11,7 @@ import postgres from "postgres";
 const DATABASE_URL = process.env.DATABASE_URL || "";
 // These can be removed in a follow on PR. Until this hits main we cant add E2E_USER_* stuff to the env.
 const E2E_SESSION_ID =
-  process.env.E2E_USER_SESSION_ID || "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
+  process.env.E2E_USER_ONE_SESSION_ID || "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
 const E2E_USER_ID =
   process.env.E2E_USER_ID || "8e3179ce-f32b-4d0a-ba3b-234d66b836ad";
 const E2E_USER_EMAIL = process.env.E2E_USER_EMAIL || "[email protected]";

e2e/articles.spec.ts

@@ -1,11 +1,8 @@
 import { test, expect } from "playwright/test";
 import { randomUUID } from "crypto";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated Articles Page", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
-
   test("Should show popular tags", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/articles");
     await expect(
@@ -133,6 +130,9 @@ test.describe("Unauthenticated Articles Page", () => {
 });
 
 test.describe("Authenticated Articles Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   test("Should show recent bookmarks", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/articles");
     await expect(

e2e/home.spec.ts

@@ -1,6 +1,10 @@
 import { test, expect } from "@playwright/test";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Authenticated homepage", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   test("Homepage view", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/");
 
@@ -24,9 +28,6 @@ test.describe("Authenticated homepage", () => {
 });
 
 test.describe("Unauthenticated homepage", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
   test("Homepage view", async ({ page }) => {
     await page.goto("http://localhost:3000/");
 

e2e/login.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "playwright/test";
 import "dotenv/config";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated Login Page", () => {
   test.beforeEach(async ({ page }) => {
@@ -31,6 +32,9 @@ test.describe("Unauthenticated Login Page", () => {
 });
 
 test.describe("Authenticated Login Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   test("Sign up page contains sign up links", async ({ page, isMobile }) => {
     // authenticated users are kicked back to the homepage if they try to go to /get-started
     await page.goto("http://localhost:3000/get-started");

e2e/my-posts.spec.ts

@@ -1,14 +1,15 @@
 import test from "@playwright/test";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated my-posts Page", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
   //
   // Replace with tests for unauthenticated users
 });
 
 test.describe("Authenticated my-posts Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   //
   // Replace with tests for authenticated users
 });

e2e/settings.spec.ts

@@ -1,14 +1,15 @@
 import test from "@playwright/test";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated setttings Page", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
   //
   // Replace with tests for unauthenticated users
 });
 
 test.describe("Authenticated settings Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   //
   // Replace with tests for authenticated users
 });

e2e/utils/index.ts

@@ -0,0 +1 @@
+export * from "./utils";

e2e/utils/utils.ts

@@ -0,0 +1,25 @@
+import { expect, Page } from "@playwright/test";
+
+export const loggedInAsUserOne = async (page: Page) => {
+  try {
+    expect(process.env.E2E_USER_ONE_SESSION_ID).toBeDefined();
+
+    await page.context().addCookies([
+      {
+        name: "next-auth.session-token",
+        value: process.env.E2E_USER_ONE_SESSION_ID as string,
+        domain: "localhost",
+        path: "/",
+        sameSite: "Lax",
+      },
+    ]);
+
+    expect(
+      (await page.context().cookies()).find(
+        (cookie) => cookie.name === "next-auth.session-token",
+      ),
+    ).toBeTruthy();
+  } catch (err) {
+    throw Error("Error while authenticating E2E test user one");
+  }
+};

playwright.config.ts

@@ -39,36 +39,26 @@ export default defineConfig({
     { name: "setup", testMatch: /auth.setup\.ts/ },
     {
       name: "Desktop Chrome",
-      use: {
-        storageState: "playwright/.auth/browser.json",
-      },
-      dependencies: ["setup"],
     },
 
     // Example other browsers
     {
       name: "Desktop Firefox",
       use: {
         ...devices["Desktop Firefox"],
-        storageState: "playwright/.auth/browser.json",
       },
-      dependencies: ["setup"],
     },
     {
       name: "Mobile Chrome",
       use: {
         ...devices["Pixel 9"],
-        storageState: "playwright/.auth/browser.json",
       },
-      dependencies: ["setup"],
     },
     {
       name: "Mobile Safari",
       use: {
         ...devices["iPhone 16"],
-        storageState: "playwright/.auth/browser.json",
       },
-      dependencies: ["setup"],
     },
   ],
 

sample.env

@@ -7,4 +7,4 @@ DATABASE_URL=postgresql://postgres:[email protected]:5432/postgres
 
 E2E_USER_EMAIL=[email protected]
 E2E_USER_ID=8e3179ce-f32b-4d0a-ba3b-234d66b836ad
-E2E_USER_SESSION_ID=df8a11f2-f20a-43d6-80a0-a213f1efedc1
+E2E_USER_ONE_SESSION_ID=df8a11f2-f20a-43d6-80a0-a213f1efedc1