feat: implement end-to-end testing infrastructure with Playwright and automated containerized database setup

2026-05-04 08:56:52 +00:00 · 2026-04-15 01:00:51 +05:30
parent 0fb31b9f0b
commit c259d98acb
11 changed files with 389 additions and 7 deletions
@@ -0,0 +1,94 @@
+import { expect, test } from "@playwright/test";
+import { MailpitHelper } from "./utils/mailpit";
+
+test.describe("Authentication Flow (Real Backend)", () => {
+  // Use unique email for each run to avoid conflicts in shared DB
+  const timestamp = Date.now();
+  const email = `testuser-${timestamp}@example.com`;
+  const fullName = `Test User ${timestamp}`;
+  const password = "Password123!";
+
+  test("should register, activate via email, and login successfully", async ({
+    page,
+  }) => {
+    // 1. Registration
+    console.log(">>--- Navigating to Onboard Page...");
+    await page.goto("/onboard");
+
+    // Fill the registration form
+    await page.getByLabel(/full name/i).fill(fullName);
+    await page.getByLabel("Email", { exact: true }).fill(email);
+    await page.getByLabel("Password", { exact: true }).fill(password);
+    await page.getByLabel(/confirm password/i).fill(password);
+
+    // Submit Registration
+    await page.getByRole("button", { name: /^register$/i }).click();
+
+    // Verify redirect to check-email page
+    console.log(">>--- Verifying redirect to check-email...");
+    await expect(page).toHaveURL(/\/verify-email/);
+    await expect(page.getByText(/check your email/i)).toBeVisible();
+
+    // 2. Activation via Mailpit
+    console.log(`>>--- Polling Mailpit for activation email for ${email}...`);
+    const activationLink = await MailpitHelper.getActivationLink(email);
+    console.log(`>>--- Found activation link: ${activationLink}`);
+
+    // Navigate to the activation link (this should activate and redirect to login)
+    await page.goto(activationLink);
+
+    // Verify activation success
+    console.log(">>--- Verifying activation success...");
+    await expect(page.getByText(/account activated/i)).toBeVisible();
+
+    // Click "Start Writing" to go to Login
+    await page.getByRole("button", { name: /start writing/i }).click();
+
+    // Verify redirect to login
+    console.log(">>--- Verifying redirect to login...");
+    await expect(page).toHaveURL(/\/login/);
+
+    // 3. Login
+    console.log(">>--- Navigated to Login. Handling Welcome Modal...");
+    const welcomeButton = page.getByRole("button", { name: /i understand/i });
+    await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
+    await welcomeButton.click();
+    await expect(welcomeButton).toBeHidden();
+
+    console.log(">>--- Performing Login...");
+    const loginButton = page.getByRole("button", { name: /sign in/i });
+    await expect(loginButton).toBeVisible();
+
+    await page.getByLabel("Email", { exact: true }).fill(email);
+    await page.getByLabel("Password", { exact: true }).fill(password);
+    await loginButton.click();
+
+    // 4. Verify Success - Redirect to Drawer
+    console.log(">>--- Verifying redirect to Drawer...");
+    await expect(page).toHaveURL(/\/drawer/);
+
+    // 5. Verify Zero-Knowledge Artifacts in IndexedDB
+    console.log(">>--- Verifying MasterKey in IndexedDB...");
+    const masterKeyExists = await page.evaluate(async () => {
+      return new Promise((resolve) => {
+        const request = indexedDB.open("piku-keys");
+        request.onsuccess = (event: any) => {
+          const db = event.target.result;
+          try {
+            const transaction = db.transaction(["master-key"], "readonly");
+            const store = transaction.objectStore("master-key");
+            const getReq = store.get("masterKey");
+            getReq.onsuccess = () => resolve(!!getReq.result);
+            getReq.onerror = () => resolve(false);
+          } catch (_e) {
+            resolve(false);
+          }
+        };
+        request.onerror = () => resolve(false);
+      });
+    });
+
+    expect(masterKeyExists).toBe(true);
+    console.log(">>--- E2E Flow Completed Successfully! ✅ ---<<");
+  });
+});
@@ -0,0 +1,46 @@
+import { request } from "@playwright/test";
+
+export interface MailpitMessage {
+  ID: string;
+  Subject: string;
+  Snippet: string;
+  To: { Address: string }[];
+}
+
+const MAILPIT_API_URL = process.env.MAILPIT_API_URL;
+
+export const MailpitHelper = {
+  getActivationLink: async (
+    email: string,
+    timeout = 10000,
+  ): Promise<string> => {
+    const startTime = Date.now();
+    const requestContext = await request.newContext();
+
+    while (Date.now() - startTime < timeout) {
+      // Search specifically for the recipient to reduce data transfer
+      const response = await requestContext.get(`${MAILPIT_API_URL}/search`, {
+        params: { query: `to:${email}`, limit: 1 },
+      });
+
+      if (response.ok()) {
+        const data = await response.json();
+        if (data.messages?.length > 0) {
+          const msgId = data.messages[0].ID;
+          const detailRes = await requestContext.get(
+            `${MAILPIT_API_URL}/message/${msgId}`,
+          );
+          const details = await detailRes.json();
+
+          const body = details.HTML || details.Text || "";
+          const match = body.match(/https?:\/\/\S+activate\/\S+/);
+
+          if (match) return match[0];
+        }
+      }
+      await new Promise((r) => setTimeout(r, 1000));
+    }
+
+    throw new Error(`Timeout: Could not find activation link for ${email}`);
+  },
+};