me/pi-ku
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

refactor: migrate e2e tests and components to use data-testid attributes

Browse Source
This commit is contained in:
me
2026-05-06 22:48:06 +05:30
parent 8d0ab979f5
commit 548b34fb51
16 changed files with 395 additions and 387 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/e2e/letter.spec.ts
+23 -53
View File
@@ -1,6 +1,7 @@
import { expect, test } from "@playwright/test";
import pino from "pino";
import { AuthHelper } from "./utils/auth";
import { revealEnvelope } from "./utils/envelope";
const logger = pino({
transport: {
@@ -22,12 +23,12 @@ test.describe("Letter Drafting (Real Backend)", () => {
await AuthHelper.registerAndLogin(page, email, name, password);
logger.info(">> [Draft] Navigating to Editor via UI...");
await page.getByRole("button", { name: /write something/i }).click();
await page.getByTestId("write-letter-btn").click();
logger.info(`>> [Draft] Current URL after click: ${page.url()}`);
// Wait for the recipient input to be present in the DOM
const recipientInput = page.locator("#recipient");
const recipientInput = page.getByTestId("recipient-input");
await recipientInput.waitFor({ state: "visible", timeout: 20000 });
const recipientName = "Dear Friend";
@@ -46,7 +47,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
await page.keyboard.press("Enter");
await page.keyboard.type("It should persist.");
logger.info(">> [Draft] Clicking Draft...");
await page.getByRole("button", { name: /draft/i }).click();
await page.getByTestId("draft-btn").click();
// Verify Success Modal/Alert
await expect(page.getByText(/your letter is saved/i)).toBeVisible();
@@ -70,7 +71,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
});
// Check recipient
await expect(page.locator("#recipient")).toHaveValue(recipientName);
await expect(page.getByTestId("recipient-input")).toHaveValue(recipientName);
// Check canvas content
// We wait for the content to appear in the textarea.
@@ -92,9 +93,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
await AuthHelper.registerAndLogin(page, email, name, password);
logger.info(">> [Seal] Navigating to Editor via UI...");
await page.locator("#write-letter-btn").click();
await page.getByTestId("write-letter-btn").click();
const recipientInput = page.locator("#recipient");
const recipientInput = page.getByTestId("recipient-input");
await recipientInput.waitFor({ state: "visible", timeout: 10000 });
await recipientInput.fill("A Secret Guest");
@@ -104,14 +105,8 @@ test.describe("Letter Drafting (Real Backend)", () => {
// Click Seal (open menu, then confirm)
logger.info(">> [Seal] Clicking Seal...");
await page
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page.getByTestId("seal-trigger-btn").click();
await page.getByTestId("seal-confirm-btn").click();
// Should show sealed confirmation modal
logger.info(">> [Seal] Verifying sealed modal...");
@@ -120,7 +115,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
});
// Navigate to Reader via "View letter"
await page.getByRole("button", { name: /view letter/i }).click();
await page.getByTestId("view-letter-btn").click();
// Should be on Reader URL
await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
@@ -129,18 +124,13 @@ test.describe("Letter Drafting (Real Backend)", () => {
await expect(page.getByText(/breaking the seal/i)).toBeHidden({
timeout: 10000,
});
// Flip the envelope to show the seal
await page.locator("#env-front").click();
await page.waitForTimeout(2500); // Wait for flip transition
await page.getByAltText("Seal").click();
await page.waitForTimeout(1500);
await page.locator("#letter").click({ position: { x: 30, y: 15 } });
await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
// Flip the envelope to show the seal and reveal the letter
await revealEnvelope(page);
await expect(page.getByTestId("envelope-letter")).toBeHidden({ timeout: 20000 });
// Share on demand
logger.info(">> [Seal] Clicking Share button in Reader...");
await page.locator("#share-letter-btn").click();
await page.getByTestId("share-letter-btn").click();
// Verify share modal with a valid link
await expect(page.getByText(/send this letter/i)).toBeVisible();
@@ -151,6 +141,7 @@ test.describe("Letter Drafting (Real Backend)", () => {
logger.info(`>> [Seal] Sharing link: ${linkValue}`);
await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
// Assuming Close button in ShareModal might need a testid too, but for now let's use text if unique or add testid
await page.getByRole("button", { name: /close/i }).click();
await expect(page.getByText(/send this letter/i)).toBeHidden();
});
@@ -167,9 +158,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
await AuthHelper.registerAndLogin(page, email, name, password);
logger.info(">> [Drawer] Creating and sealing a letter...");
await page.getByRole("button", { name: /write something/i }).click();
await page.getByTestId("write-letter-btn").click();
const recipientInput = page.locator("#recipient");
const recipientInput = page.getByTestId("recipient-input");
await recipientInput.waitFor({ state: "visible" });
await recipientInput.fill(recipientName);
@@ -178,20 +169,14 @@ test.describe("Letter Drafting (Real Backend)", () => {
await canvasInput.fill(letterContent);
// Click Seal (open menu, then confirm)
await page
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page
.getByRole("button", { name: /seal/i })
.filter({ visible: true })
.click();
await page.getByTestId("seal-trigger-btn").click();
await page.getByTestId("seal-confirm-btn").click();
// Sealed modal should appear — click "Keep it" to go to Drawer
await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
timeout: 10000,
});
await page.getByRole("button", { name: /keep it to myself/i }).click();
await page.getByTestId("keep-it-btn").click();
// Open "Kept" section - search for the section with id='kept' and click its toggle button
logger.info(">> [Drawer] Opening Kept section...");
@@ -213,24 +198,9 @@ test.describe("Letter Drafting (Real Backend)", () => {
await expect(page.getByText(/breaking the seal/i)).toBeHidden({
timeout: 10000,
});
// Check recipient on the front of the envelope
await expect(page.getByText(new RegExp(recipientName, "i"))).toBeVisible();
// Flip the envelope to the back
await page.getByText(new RegExp(recipientName, "i")).click();
// Wait for flip transition (2s)
await page.waitForTimeout(2500);
// Reveal the letter: click seal then click letter
await page.getByAltText("Seal").click();
// Wait for flap transition
await page.waitForTimeout(1500);
// Click the letter to pull it out
await page.locator("#letter").click({ position: { x: 30, y: 15 } });
// Wait for reveal transition
await expect(page.locator("#letter")).toBeHidden({ timeout: 20000 });
// Flip the envelope and reveal the letter
await revealEnvelope(page);
await expect(page.getByTestId("envelope-letter")).toBeHidden({ timeout: 20000 });
// Also check if we are redirected to the Reader if we manually go to the Editor URL
const readerUrl = page.url();
frontend/e2e/utils/auth.ts
+13 -40
View File
@@ -1,6 +1,7 @@
import { expect, type Page } from "@playwright/test";
import pino from "pino";
import { MailpitHelper } from "./mailpit";
import { handleWelcomeLetter } from "./envelope";
const logger = pino({
transport: {
@@ -23,11 +24,11 @@ async function registerAndLogin(
// Register the User
logger.info(`[Auth] Registering user: ${email}`);
await page.goto("/onboard");
await page.getByLabel(/pen 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 page.getByTestId("pen-name-input").fill(fullName);
await page.getByTestId("email-input").fill(email);
await page.getByTestId("password-input").fill(password);
await page.getByTestId("confirm-password-input").fill(password);
await page.getByTestId("register-submit-btn").click();
await expect(page).toHaveURL(/\/verify-email/);
@@ -38,50 +39,22 @@ async function registerAndLogin(
await page.goto(activationLink);
await expect(page.getByText(/account activated/i)).toBeVisible();
await page.getByRole("button", { name: /start writing/i }).click();
await page.getByTestId("start-writing-btn").click();
// Dismiss the Welcom Modal and Perform Login
logger.info(`[Auth] Logging in...`);
await expect(page).toHaveURL(/\/login/);
const welcomeButton = page.getByRole("button", { name: /I'll remember/i });
await welcomeButton.waitFor({ state: "visible", timeout: 10000 });
await welcomeButton.click();
await expect(welcomeButton).toBeHidden();
await page.getByTestId("welcome-dismiss-btn").click();
await expect(page.getByTestId("welcome-dismiss-btn")).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 page.getByTestId("email-input").fill(email);
await page.getByTestId("password-input").fill(password);
await page.getByTestId("login-submit-btn").click();
await expect(page).toHaveURL(/\/drawer/);
await handleWelcomeLetter(page);
logger.info(`[Auth] Successfully authenticated ${email}`);
}
/**
* Handles and dismisses the first welocme letter
*/
async function handleWelcomeLetter(page: Page) {
logger.info("[Auth] Handling Welcome Letter...");
// Click envelope to flip
const envelope = page.locator("#env-front");
await envelope.waitFor({ state: "visible", timeout: 10000 });
await envelope.click();
// Click seal to open flap
const seal = page.getByAltText("Seal");
await seal.waitFor({ state: "visible" });
await seal.click();
// Click letter to reveal
await page.locator("#letter").click({ position: { x: 30, y: 15 } });
// Click "I'll see you" button
const completeButton = page.getByRole("button", { name: /I'll see you/i });
await completeButton.waitFor({ state: "visible", timeout: 10000 });
await completeButton.click();
await expect(completeButton).toBeHidden();
}
export const AuthHelper = { registerAndLogin, handleWelcomeLetter };
export const AuthHelper = { registerAndLogin };
frontend/e2e/utils/envelope.ts
+38
View File
@@ -0,0 +1,38 @@
import { type Page, expect } from "@playwright/test";
import pino from "pino";
const logger = pino({
transport: {
target: "pino-pretty",
options: {
colorize: true,
},
},
});
/**
* Reveal a letter from an envelope.
*/
export async function revealEnvelope(page: Page) {
logger.info("[Envelope] Revealing envelope...");
// Click envelope to flip
await page.getByTestId("envelope-front").click();
// Click seal to open flap
await page.getByTestId("wax-seal").click();
// Click letter to reveal
await page.getByTestId("envelope-letter").click({ position: { x: 30, y: 15 } });
}
/**
* Handles and dismisses the first welcome letter
*/
export async function handleWelcomeLetter(page: Page) {
logger.info("[Envelope] Handling Welcome Letter...");
await revealEnvelope(page);
// Click "I'll see you" button
await page.getByTestId("dismiss-welcome-letter-btn").click();
await expect(page.getByTestId("dismiss-welcome-letter-btn")).toBeHidden();
}