diff --git a/frontend/e2e/auth.spec.ts b/frontend/e2e/auth.spec.ts index a313ab6..65234fd 100644 --- a/frontend/e2e/auth.spec.ts +++ b/frontend/e2e/auth.spec.ts @@ -1,5 +1,5 @@ import { expect, test } from "@playwright/test"; -import { MailpitHelper } from "./utils/mailpit"; +import { AuthHelper } from "./utils/auth"; test.describe("Authentication Flow (Real Backend)", () => { // Use unique email for each run to avoid conflicts in shared DB @@ -11,61 +11,8 @@ test.describe("Authentication Flow (Real Backend)", () => { 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/); + // Perform full auth cycle using helper + await AuthHelper.registerAndLogin(page, email, fullName, password); // 5. Verify Zero-Knowledge Artifacts in IndexedDB console.log(">>--- Verifying MasterKey in IndexedDB..."); diff --git a/frontend/e2e/letter.spec.ts b/frontend/e2e/letter.spec.ts new file mode 100644 index 0000000..75bf1f6 --- /dev/null +++ b/frontend/e2e/letter.spec.ts @@ -0,0 +1,101 @@ +import { expect, test } from "@playwright/test"; +import { AuthHelper } from "./utils/auth"; + +test.describe("Letter Drafting (Real Backend)", () => { + const password = "Password123!"; + + test("should create, store as draft, and persist data", async ({ page }) => { + const timestamp = Date.now() + Math.random(); + const email = `draft-${timestamp}@example.com`; + const name = `Draft Author ${timestamp}`; + + await AuthHelper.registerAndLogin(page, email, name, password); + + console.log(">> [Draft] Navigating to Editor via UI..."); + await page.getByRole("button", { name: /write something/i }).click(); + + console.log(`>> [Draft] Current URL after click: ${page.url()}`); + + // Wait for the recipient input to be present in the DOM + const recipientInput = page.locator("#recipient"); + await recipientInput.waitFor({ state: "visible", timeout: 20000 }); + + const recipientName = "Dear Friend"; + await recipientInput.fill(recipientName); + + // Type into the Fabric.js canvas + console.log(">> [Draft] Typing into canvas..."); + const canvasInput = page.getByLabel("Canvas text input"); + await canvasInput.waitFor({ state: "visible" }); + await canvasInput.focus(); + await canvasInput.fill("This is a secret draft created by E2E testing."); + + // Store as draft + console.log(">> [Draft] Clicking Store..."); + await page.getByRole("button", { name: /store/i }).click(); + + // Verify Success Modal/Alert + await expect(page.getByText(/your letter is saved/i)).toBeVisible(); + + // Verify URL updated with a UUID + await expect(page).toHaveURL(/\/quill\/[0-9a-f-]{36}/); + const savedUrl = page.url(); + console.log(`>> [Draft] Saved URL: ${savedUrl}`); + + // Reload and verify persistence + console.log(">> [Draft] Reloading to verify persistence..."); + await page.goto(savedUrl); + + // Wait for initial load overlay to disappear + await expect(page.getByText(/opening your draft/i)).toBeHidden(); + + // Check recipient + await expect(page.locator("#recipient")).toHaveValue(recipientName); + + // Check canvas content + await expect(canvasInput).toHaveValue(/This is a secret draft/); + }); + + test("should seal a letter and show sharing link", async ({ page }) => { + const timestamp = Date.now() + Math.random(); + const email = `seal-${timestamp}@example.com`; + const name = `Seal Author ${timestamp}`; + + await AuthHelper.registerAndLogin(page, email, name, password); + + console.log(">> [Seal] Navigating to Editor via UI..."); + await page.getByRole("button", { name: /write something/i }).click(); + + const recipientInput = page.locator("#recipient"); + await recipientInput.waitFor({ state: "visible", timeout: 20000 }); + await recipientInput.fill("A Secret Guest"); + + const canvasInput = page.getByLabel("Canvas text input"); + await canvasInput.focus(); + await canvasInput.fill("This letter will be sealed and shared."); + + // Click Seal + console.log(">> [Seal] Clicking Seal..."); + await page.getByRole("button", { name: /seal/i }).click(); + + // Verify "Sealed & Ready" modal + console.log(">> [Seal] Verifying sharing modal..."); + await expect(page.getByText(/sealed & ready/i)).toBeVisible(); + + // Verify sharing link contains a hash (the key) + const linkInput = page.locator("input[readOnly]"); + const linkValue = await linkInput.inputValue(); + + expect(linkValue).toContain("/read/"); + expect(linkValue).toContain("#"); + + console.log(`>> [Seal] Sharing link generated: ${linkValue}`); + + // Verify "Copy" button works + await expect(page.getByRole("button", { name: /copy/i })).toBeVisible(); + + // Close modal + await page.getByRole("button", { name: /close/i }).click(); + await expect(page.getByText(/sealed & ready/i)).toBeHidden(); + }); +}); diff --git a/frontend/e2e/utils/auth.ts b/frontend/e2e/utils/auth.ts new file mode 100644 index 0000000..e7be0d6 --- /dev/null +++ b/frontend/e2e/utils/auth.ts @@ -0,0 +1,50 @@ +import { expect, type Page } from "@playwright/test"; +import { MailpitHelper } from "./mailpit"; + +/** + * Completes the full registration -> activation -> login cycle. + */ +export async function registerAndLogin( + page: Page, + email: string, + fullName: string, + password: string, +) { + // 1. Registration + console.log(`[Auth] Registering user: ${email}`); + await page.goto("/onboard"); + 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); + await page.getByRole("button", { name: /^register$/i }).click(); + + await expect(page).toHaveURL(/\/verify-email/); + + // 2. Activation via Mailpit + console.log(`[Auth] Polling Mailpit for activation email...`); + const activationLink = await MailpitHelper.getActivationLink(email); + await page.goto(activationLink); + + await expect(page.getByText(/account activated/i)).toBeVisible(); + await page.getByRole("button", { name: /start writing/i }).click(); + + // 3. Login + console.log(`[Auth] Logging in...`); + await expect(page).toHaveURL(/\/login/); + + const welcomeButton = page.getByRole("button", { name: /i understand/i }); + await welcomeButton.waitFor({ state: "visible", timeout: 10000 }); + await welcomeButton.click(); + await expect(welcomeButton).toBeHidden(); + + await page.getByLabel("Email", { exact: true }).fill(email); + await page.getByLabel("Password", { exact: true }).fill(password); + await page.getByRole("button", { name: /sign in/i }).click(); + + await expect(page).toHaveURL(/\/drawer/); + console.log(`[Auth] Successfully authenticated ${email}`); +} + +// Maintain backward compatibility if needed, or update callers +export const AuthHelper = { registerAndLogin }; diff --git a/frontend/src/pages/Editor.tsx b/frontend/src/pages/Editor.tsx index 055d07e..7198423 100644 --- a/frontend/src/pages/Editor.tsx +++ b/frontend/src/pages/Editor.tsx @@ -273,6 +273,7 @@ export default function Editor() { type="button" className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2" onClick={() => setShareLink(null)} + aria-label="Close" > diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx index 0c6d6a9..9485b93 100644 --- a/frontend/src/pages/Login.tsx +++ b/frontend/src/pages/Login.tsx @@ -57,7 +57,7 @@ export default function Login() { }); // store the auth related data - setAuthStore(authData.access, userData, masterKey); + await setAuthStore(authData.access, userData, masterKey); navigate(ROUTES.DRAWER); } catch (err) {