refactor/optimize e2e test #3
+41
-90
@@ -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,20 +23,19 @@ 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");
|
||||
await recipientInput.waitFor({ state: "visible", timeout: 20000 });
|
||||
// Editor page
|
||||
await expect(page.getByTestId("recipient-input")).toBeVisible();
|
||||
const recipientInput = page.getByTestId("recipient-input");
|
||||
|
||||
const recipientName = "Dear Friend";
|
||||
await recipientInput.fill(recipientName);
|
||||
|
||||
// Initial load: verify textarea value (populated by Fabric when focused)
|
||||
const canvasInput = page.locator("textarea");
|
||||
await canvasInput.waitFor({ state: "attached" });
|
||||
await canvasInput.focus();
|
||||
await expect(canvasInput).toHaveValue(/Take a deep breath/i);
|
||||
|
||||
@@ -46,10 +46,10 @@ 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();
|
||||
await expect(page.getByTestId("save-success-toast")).toBeVisible();
|
||||
|
||||
// Verify URL updated with a UUID
|
||||
await expect(page).toHaveURL(/\/quill\/[0-9a-f-]{36}/);
|
||||
@@ -61,24 +61,16 @@ test.describe("Letter Drafting (Real Backend)", () => {
|
||||
await page.goto(savedUrl);
|
||||
|
||||
// Wait for initial load overlay to appear and then definitely disappear
|
||||
await page
|
||||
.getByText(/opening your draft/i)
|
||||
.waitFor({ state: "visible", timeout: 2000 })
|
||||
.catch(() => {});
|
||||
await expect(page.getByText(/opening your draft/i)).toBeHidden({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByTestId("opening-draft-overlay")).toBeHidden();
|
||||
|
||||
// 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.
|
||||
// toHaveValue will poll until it matches or timeouts.
|
||||
await canvasInput.focus();
|
||||
await expect(canvasInput).toHaveValue(/This is a secret draft/i, {
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(canvasInput).toHaveValue(/This is a secret draft/i);
|
||||
await expect(canvasInput).toHaveValue(/It should persist/i);
|
||||
});
|
||||
|
||||
@@ -92,10 +84,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");
|
||||
await recipientInput.waitFor({ state: "visible", timeout: 10000 });
|
||||
const recipientInput = page.getByTestId("recipient-input");
|
||||
await recipientInput.fill("A Secret Guest");
|
||||
|
||||
const canvasInput = page.locator("textarea");
|
||||
@@ -104,55 +95,41 @@ 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...");
|
||||
await expect(page.getByText(/your letter is sealed/i)).toBeVisible({
|
||||
timeout: 10000,
|
||||
});
|
||||
await expect(page.getByTestId("post-seal-modal")).toBeVisible();
|
||||
|
||||
// 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 });
|
||||
await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/);
|
||||
|
||||
// Open the envelope to reveal the letter
|
||||
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 });
|
||||
await expect(page.getByTestId("decryption-overlay")).toBeHidden();
|
||||
// Flip the envelope to show the seal and reveal the letter
|
||||
await revealEnvelope(page);
|
||||
await expect(page.getByTestId("envelope-letter")).toBeHidden();
|
||||
|
||||
// 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();
|
||||
await expect(page.getByTestId("share-letter-modal")).toBeVisible();
|
||||
const linkInput = page.locator("#share-link-input");
|
||||
const linkValue = await linkInput.inputValue();
|
||||
expect(linkValue).toContain("/read/");
|
||||
expect(linkValue).toContain("#");
|
||||
logger.info(`>> [Seal] Sharing link: ${linkValue}`);
|
||||
|
||||
await expect(page.getByRole("button", { name: /copy/i })).toBeVisible();
|
||||
await page.getByRole("button", { name: /close/i }).click();
|
||||
await expect(page.getByText(/send this letter/i)).toBeHidden();
|
||||
await expect(page.getByTestId("copy-link-btn")).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.getByTestId("modal-close-btn").click();
|
||||
await expect(page.getByTestId("share-letter-modal")).toBeHidden();
|
||||
});
|
||||
|
||||
test("should allow author to access sealed letter from drawer without sharing key", async ({
|
||||
@@ -167,10 +144,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");
|
||||
await recipientInput.waitFor({ state: "visible" });
|
||||
const recipientInput = page.getByTestId("recipient-input");
|
||||
await recipientInput.fill(recipientName);
|
||||
|
||||
const canvasInput = page.locator("textarea");
|
||||
@@ -178,59 +154,34 @@ 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 expect(page.getByTestId("post-seal-modal")).toBeVisible();
|
||||
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...");
|
||||
const keptSection = page.locator("#kept");
|
||||
await keptSection.getByRole("button", { name: /kept/i }).click();
|
||||
await page.getByTestId("drawer-section-kept").click();
|
||||
|
||||
// Find the sealed letter in the drawer by recipient name and click it
|
||||
logger.info(">> [Drawer] Clicking sealed letter in drawer...");
|
||||
const sealedItem = page
|
||||
.getByRole("button", { name: new RegExp(recipientName, "i") })
|
||||
.getByTestId(/^letter-item-/)
|
||||
.filter({ hasText: recipientName })
|
||||
.first();
|
||||
await sealedItem.click();
|
||||
|
||||
// Verify it opens the Reader without a hash
|
||||
logger.info(">> [Drawer] Verifying Reader page...");
|
||||
// Give it a bit more time for decryption
|
||||
await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/, { timeout: 15000 });
|
||||
await expect(page).toHaveURL(/\/read\/[a-f0-9-]{36}$/);
|
||||
// Reveal and check decrypted content in Reader
|
||||
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 });
|
||||
await expect(page.getByTestId("decryption-overlay")).toBeHidden();
|
||||
// Flip the envelope and reveal the letter
|
||||
await revealEnvelope(page);
|
||||
await expect(page.getByTestId("envelope-letter")).toBeHidden();
|
||||
|
||||
// Also check if we are redirected to the Reader if we manually go to the Editor URL
|
||||
const readerUrl = page.url();
|
||||
|
||||
+14
-41
@@ -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/);
|
||||
|
||||
@@ -37,51 +38,23 @@ 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 expect(page.getByTestId("activation-success-header")).toBeVisible();
|
||||
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 };
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
@@ -60,7 +60,8 @@ export default defineConfig({
|
||||
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: {
|
||||
command: "npm run dev -- --mode e2e",
|
||||
// NOTE: using npm here for docker compat mainly
|
||||
command: "npm run build -- --mode e2e && npm run preview -- --mode e2e",
|
||||
url: getBaseUrl(
|
||||
process.env.SSL_ENABLED === "true",
|
||||
process.env.FRONTEND_DOMAIN,
|
||||
|
||||
@@ -35,6 +35,7 @@ export function DrawerSection({
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClick}
|
||||
data-testid={`drawer-section-${id}`}
|
||||
className={`w-full p-[24px_28px] cursor-pointer flex items-center gap-5 transition-all duration-2000 ease-in-out outline-none focus-visible:ring-2 focus-visible:ring-primary/50 border border-base-content/10 text-left bg-linear-to-r from-transparent to-base-100/40`}
|
||||
>
|
||||
<div className="flex-1">
|
||||
|
||||
@@ -33,6 +33,7 @@ export function LetterItem({
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleNavigate}
|
||||
data-testid={`letter-item-${id}`}
|
||||
className={`${isLocked ? "pointer-events-none" : ""} p-4 border-base-content/3 flex items-start gap-4 hover:bg-base-300 transition-all delay-75 duration-100 group text-left cursor-pointer w-9/12 mx-auto hover:scale-120 hover:h-24 hover:-translate-y-3 hover:pb-4 hover:border-x-5 hover:border-t-5 border-t-2 hover:-mb-2`}
|
||||
>
|
||||
<div className="text-[0.85rem] italic text-base-content/40 flex-1 truncate group-hover:text-base-content/60 transition-none animate-[opacity_200ms_linear_forwards]">
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { getWelcomeLetterContent } from "../../config/welcomeLetter";
|
||||
import { formatDate } from "../../utils/dateFormat";
|
||||
import { type CanvasTools, ComposeCanvas } from "../editor/ComposeCanvas";
|
||||
import { EnvelopeReveal } from "../reader/EnvelopeReveal";
|
||||
|
||||
interface WelcomeLetterOverlayProps {
|
||||
export interface WelcomeLetterOverlayProps {
|
||||
onComplete: () => void;
|
||||
userName: string;
|
||||
}
|
||||
@@ -64,6 +64,7 @@ export function WelcomeLetterOverlay({
|
||||
<div className="flex justify-center mt-12">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="dismiss-welcome-letter-btn"
|
||||
onClick={onComplete}
|
||||
className="btn btn-accent opacity-80 px-12 shadow-lg"
|
||||
>
|
||||
|
||||
@@ -15,7 +15,7 @@ export function PostSealModal({
|
||||
type = "KEPT",
|
||||
}: PostSealModalProps) {
|
||||
return (
|
||||
<Modal isOpen={!!sealedTargetId}>
|
||||
<Modal isOpen={!!sealedTargetId} data-testid="post-seal-modal">
|
||||
<LockIcon size={32} weight="duotone" className="text-primary mt-3" />
|
||||
<h3 className="font-serif text-2xl">Your letter is sealed</h3>
|
||||
<p className="text-base-content/60">
|
||||
@@ -53,6 +53,7 @@ export function PostSealModal({
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="keep-it-btn"
|
||||
className="btn btn-ghost btn-sm"
|
||||
onClick={() => navigate(ROUTES.DRAWER)}
|
||||
>
|
||||
@@ -60,6 +61,7 @@ export function PostSealModal({
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="view-letter-btn"
|
||||
className="btn btn-primary btn-sm"
|
||||
onClick={() => navigate(PATHS.read(sealedTargetId!))}
|
||||
>
|
||||
|
||||
@@ -140,6 +140,7 @@ export function ToolBar({
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="draft-btn"
|
||||
className="btn btn-ghost btn-sm text-xxs group tracking-widester uppercase font-bold text-base-content/60 hover:text-base-content"
|
||||
title="Store in your private drawer"
|
||||
onClick={() => onSave("DRAFT")}
|
||||
@@ -155,6 +156,7 @@ export function ToolBar({
|
||||
{/*Seal */}
|
||||
<button
|
||||
type="button"
|
||||
data-testid="seal-trigger-btn"
|
||||
className={`btn btn-primary btn-sm rounded-full px-6 group ${sealBtnClicked ? "invisible" : "visible"}`}
|
||||
onClick={() => setSealBtnClicked(true)}
|
||||
>
|
||||
@@ -176,6 +178,7 @@ export function ToolBar({
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="seal-confirm-btn"
|
||||
className="btn btn-accent btn-sm rounded-full px-6 group"
|
||||
onClick={() => onSave("SEALED")}
|
||||
>
|
||||
|
||||
@@ -65,6 +65,7 @@ export default function WelcomeModal({
|
||||
<div className="modal-action w-full">
|
||||
<button
|
||||
type="button"
|
||||
data-testid="welcome-dismiss-btn"
|
||||
onClick={() => setShowWelcome(false)}
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
>
|
||||
|
||||
@@ -80,6 +80,7 @@ export function EnvelopeReveal({
|
||||
/>
|
||||
</div>
|
||||
<img
|
||||
data-testid="wax-seal"
|
||||
className={
|
||||
"translate-y-24 delay-2000 absolute z-6 peer-has-checked:pointer-events-none peer-has-checked:opacity-0 peer-has-checked:delay-0 transition-opacity duration-1000 cursor-pointer"
|
||||
}
|
||||
@@ -91,6 +92,7 @@ export function EnvelopeReveal({
|
||||
<button
|
||||
type="button"
|
||||
id="letter"
|
||||
data-testid="envelope-letter"
|
||||
className={`absolute mx-auto transition-all peer-has-checked:delay-800 peer-has-checked:duration-1000 duration-1000 mt-2 h-55 w-105 bg-paper peer-has-checked:-mt-12 hover:-mt-24 cursor-pointer ${revealLetter ? "duration-1000 peer-has-checked:duration-3000 w-screen max-w-4xl h-screen z-101 -translate-y-90" : "peer-has-checked:z-1"}`}
|
||||
onClick={handleClick}
|
||||
></button>
|
||||
@@ -112,6 +114,7 @@ export function EnvelopeReveal({
|
||||
|
||||
<button
|
||||
id="env-front"
|
||||
data-testid="envelope-front"
|
||||
type="button"
|
||||
disabled={!isInteractive}
|
||||
className={`text-left p-10 absolute inset-0 backface-hidden w-110 bg-base-200 z-99 rounded-md -translate-x-2 ${isFlipped ? "pointer-events-none" : ""}`}
|
||||
|
||||
@@ -14,7 +14,11 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Modal isOpen={!!shareLink} onClose={() => setShareLink(null)}>
|
||||
<Modal
|
||||
isOpen={!!shareLink}
|
||||
onClose={() => setShareLink(null)}
|
||||
data-testid="share-letter-modal"
|
||||
>
|
||||
<div className="flex flex-col items-center justify-center text-center gap-6 py-4">
|
||||
<div className="space-y-2">
|
||||
<PaperPlaneTiltIcon
|
||||
@@ -47,6 +51,7 @@ export function ShareModal({ shareLink, setShareLink }: ShareModalProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyToClipboard}
|
||||
data-testid="copy-link-btn"
|
||||
className="btn btn-primary font-sans btn-sm rounded-tl-xl rounded-bl-xl rounded-tr-full rounded-br-full"
|
||||
>
|
||||
Copy
|
||||
|
||||
@@ -7,6 +7,7 @@ interface FormFieldProps {
|
||||
registration: UseFormRegisterReturn;
|
||||
error?: string;
|
||||
handleFocus?: () => void;
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export default function FormField({
|
||||
@@ -16,6 +17,7 @@ export default function FormField({
|
||||
registration,
|
||||
error,
|
||||
handleFocus,
|
||||
"data-testid": testId,
|
||||
}: FormFieldProps) {
|
||||
return (
|
||||
<div className="form-control">
|
||||
@@ -28,6 +30,7 @@ export default function FormField({
|
||||
<input
|
||||
{...registration}
|
||||
id={registration.name}
|
||||
data-testid={testId}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
className={`input input-bordered focus:input-primary ${
|
||||
|
||||
@@ -5,17 +5,27 @@ interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose?: () => void;
|
||||
children: ReactNode;
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, children }: ModalProps) {
|
||||
export function Modal({
|
||||
isOpen,
|
||||
onClose,
|
||||
children,
|
||||
"data-testid": testId,
|
||||
}: ModalProps) {
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]">
|
||||
<div
|
||||
data-testid={testId}
|
||||
className="modal modal-open modal-middle backdrop-blur-md before:absolute before:top-0 before:left-0 before:w-full before:h-full before:content-[''] before:opacity-[0.03] before:z-10 before:pointer-events-none before:bg-[url('assets/noise.gif')]"
|
||||
>
|
||||
<div className="modal-box relative bg-base-100/60 flex flex-col items-center text-center gap-6">
|
||||
{onClose && (
|
||||
<button
|
||||
type="button"
|
||||
data-testid="modal-close-btn"
|
||||
className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2 z-20"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
|
||||
@@ -52,17 +52,18 @@ export default function Activate() {
|
||||
className="text-success"
|
||||
/>
|
||||
</div>
|
||||
<h2 className="font-display text-xl text-success">
|
||||
Account Activated!
|
||||
<h2 data-testid="activation-success-header" className="font-display text-xl text-success">
|
||||
You're in.
|
||||
</h2>
|
||||
<p className="opacity-70 leading-relaxed">
|
||||
Welcome to <Logo scale={1} />
|
||||
<br />
|
||||
Your identity is now verified and ready for timeless letters.
|
||||
Just one more step and you can start writing timeless letters.
|
||||
</p>
|
||||
<div className="divider opacity-10 my-0"></div>
|
||||
<button
|
||||
type="button"
|
||||
data-testid="start-writing-btn"
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
onClick={() =>
|
||||
navigate(ROUTES.LOGIN, {
|
||||
@@ -71,7 +72,7 @@ export default function Activate() {
|
||||
})
|
||||
}
|
||||
>
|
||||
Start Writing
|
||||
I'm ready
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -2,13 +2,14 @@ import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import { beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { mockUser } from "../../test/fixtures/user.fixture";
|
||||
import type { WelcomeLetterOverlayProps } from "../components/drawer/WelcomeLetterOverlay";
|
||||
import { useLetters } from "../hooks/useLetters";
|
||||
import { useAuthStore } from "../store/useAuthStore";
|
||||
import Drawer from "./Drawer";
|
||||
|
||||
vi.mock("../hooks/useLetters");
|
||||
vi.mock("../components/drawer/WelcomeLetterOverlay", () => ({
|
||||
WelcomeLetterOverlay: ({ onComplete }: any) => (
|
||||
WelcomeLetterOverlay: ({ onComplete }: WelcomeLetterOverlayProps) => (
|
||||
<div data-testid="welcome-letter-overlay">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -159,6 +159,7 @@ export default function Drawer() {
|
||||
<button
|
||||
type="button"
|
||||
id="write-letter-btn"
|
||||
data-testid="write-letter-btn"
|
||||
className="group mt-15 z-10 bg-transparent border border-dashed border-base-content/10 px-8 py-4 text-base-content/40 italic cursor-pointer transition-all hover:border-primary/40 hover:text-base-content/60 hover:bg-primary/5 hover:-translate-y-0.5 flex items-center gap-2 focus-visible:ring-2 focus-visible:ring-primary/50 duration-500"
|
||||
onClick={() => navigate(PATHS.write(""))}
|
||||
>
|
||||
|
||||
@@ -376,7 +376,10 @@ export default function Editor() {
|
||||
weight="bold"
|
||||
className="animate-spin text-primary"
|
||||
/>
|
||||
<p className="text-xxs uppercase tracking-widester font-bold text-base-content/40">
|
||||
<p
|
||||
data-testid="opening-draft-overlay"
|
||||
className="text-xxs uppercase tracking-widester font-bold text-base-content/40"
|
||||
>
|
||||
Opening your draft...
|
||||
</p>
|
||||
</div>
|
||||
@@ -406,6 +409,7 @@ export default function Editor() {
|
||||
{saveOverlay === "SAVED" && (
|
||||
<div
|
||||
role="alert"
|
||||
data-testid="save-success-toast"
|
||||
className={`alert alert-success shadow-lg transition-all ease-in-out duration-2000 ${
|
||||
showSaveOverlay
|
||||
? "opacity-100 scale-100 translate-y-0"
|
||||
@@ -459,6 +463,7 @@ export default function Editor() {
|
||||
</label>
|
||||
<input
|
||||
id="recipient"
|
||||
data-testid="recipient-input"
|
||||
type="text"
|
||||
placeholder={toPlaceholderList[placeholderIndex]}
|
||||
value={recipient}
|
||||
|
||||
@@ -97,6 +97,7 @@ export default function Login() {
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="f.kafka@wrongtrain.com"
|
||||
data-testid="email-input"
|
||||
registration={register("email")}
|
||||
error={errors.email?.message}
|
||||
handleFocus={() => setSaajanMessage("I remember you.")}
|
||||
@@ -106,6 +107,7 @@ export default function Login() {
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
data-testid="password-input"
|
||||
registration={register("password")}
|
||||
error={errors.password?.message}
|
||||
handleFocus={() =>
|
||||
@@ -119,6 +121,7 @@ export default function Login() {
|
||||
name="login"
|
||||
disabled={isLoading}
|
||||
aria-label="Sign In"
|
||||
data-testid="login-submit-btn"
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
>
|
||||
{isLoading ? (
|
||||
|
||||
@@ -217,7 +217,10 @@ export default function Reader() {
|
||||
<Logo />
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<span className="loading loading-ring loading-md text-primary/40"></span>
|
||||
<p className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse">
|
||||
<p
|
||||
data-testid="decryption-overlay"
|
||||
className="text-xs uppercase tracking-widest text-base-content/20 animate-pulse"
|
||||
>
|
||||
Breaking the seal...
|
||||
</p>
|
||||
</div>
|
||||
@@ -306,6 +309,7 @@ export default function Reader() {
|
||||
<div className="flex justify-center gap-2 mt-8 z-10 relative">
|
||||
<button
|
||||
id="share-letter-btn"
|
||||
data-testid="share-letter-btn"
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm text-base-content/30 hover:text-base-content hover:bg-base-content/10 gap-1.5"
|
||||
onClick={handleShare}
|
||||
@@ -317,6 +321,7 @@ export default function Reader() {
|
||||
</button>
|
||||
<button
|
||||
id="burn-letter-btn"
|
||||
data-testid="burn-letter-btn"
|
||||
type="button"
|
||||
className="btn btn-ghost btn-sm text-error/40 hover:text-error hover:bg-error/10 gap-1.5"
|
||||
onClick={() => setShowBurnModal(true)}
|
||||
|
||||
@@ -89,6 +89,7 @@ export default function Register() {
|
||||
<FormField
|
||||
label="Pen Name"
|
||||
placeholder="Word Smith"
|
||||
data-testid="pen-name-input"
|
||||
registration={register("full_name")}
|
||||
error={errors.full_name?.message}
|
||||
handleFocus={() =>
|
||||
@@ -100,6 +101,7 @@ export default function Register() {
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="f.kafka@wrongtrain.com"
|
||||
data-testid="email-input"
|
||||
registration={register("email")}
|
||||
error={errors.email?.message}
|
||||
handleFocus={() =>
|
||||
@@ -113,6 +115,7 @@ export default function Register() {
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
data-testid="password-input"
|
||||
registration={register("password")}
|
||||
error={errors.password?.message}
|
||||
handleFocus={() =>
|
||||
@@ -126,6 +129,7 @@ export default function Register() {
|
||||
label="Confirm Password"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
data-testid="confirm-password-input"
|
||||
registration={register("confirm_password")}
|
||||
error={errors.confirm_password?.message}
|
||||
handleFocus={() =>
|
||||
@@ -150,6 +154,7 @@ export default function Register() {
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
aria-label="Register"
|
||||
data-testid="register-submit-btn"
|
||||
className="btn btn-primary w-full shadow-lg"
|
||||
>
|
||||
{isLoading ? (
|
||||
|
||||
@@ -46,5 +46,10 @@ export default defineConfig(({ mode }) => {
|
||||
host: env.FRONTEND_DOMAIN,
|
||||
https: isSslEnabled ? sslCerts : undefined,
|
||||
},
|
||||
preview: {
|
||||
port: Number(env.FRONTEND_PORT),
|
||||
host: env.FRONTEND_DOMAIN,
|
||||
https: isSslEnabled ? sslCerts : undefined,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user