마이페이지, 리포트, 메일인증

tests/e2e/mypage.spec.ts

@@ -0,0 +1,126 @@
+import { test, expect } from "@playwright/test";
+
+// 마이페이지(/mypage) E2E
+// - 비로그인 사용자는 /login 으로 리다이렉트되어야 한다.
+// - 로그인 사용자는 My page 헤더와 프로필/계정 관리 섹션을 볼 수 있어야 한다.
+// - 로그인 사용자는 마이페이지에서 이메일 인증 메일을 보낼 수 있어야 한다.
+
+test("비로그인 사용자가 /mypage 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
+  // /api/auth/me 를 401 로 목 처리해 비로그인 상태를 시뮬레이션한다.
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 401,
+      contentType: "application/json",
+      body: JSON.stringify({ message: "인증이 필요합니다." }),
+    });
+  });
+
+  await page.goto("/mypage");
+
+  await expect(page).toHaveURL(/\/login/);
+  await expect(page.getByRole("heading", { name: "Log in" })).toBeVisible();
+});
+
+test("로그인 사용자가 /mypage 에 접근하면 My page 헤더와 프로필/계정 관리 섹션이 보여야 한다", async ({ page }) => {
+  const email = `mypage+${Date.now()}@example.com`;
+
+  // 로그인된 상태를 시뮬레이션하기 위해 /api/auth/me 를 200 으로 목 처리한다.
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-mypage", email, tokenVersion: 1 }),
+    });
+  });
+
+  await page.goto("/mypage");
+
+  // 마이페이지 헤더와 기본 섹션들이 보여야 한다.
+  await expect(page.getByRole("heading", { name: "My page" })).toBeVisible();
+  await expect(page.getByText(email)).toBeVisible();
+
+  // 비밀번호/이메일 변경 섹션의 기본 라벨이 존재하는지만 확인한다.
+  await expect(page.getByText(/Change password/i)).toBeVisible();
+  await expect(page.getByText(/Change email/i)).toBeVisible();
+});
+
+test("마이페이지 헤더에서 대시보드로 이동할 수 있어야 한다", async ({ page }) => {
+  const email = `mypage-nav+${Date.now()}@example.com`;
+
+  // /api/auth/me 를 200 으로 목 처리해 로그인 상태를 시뮬레이션한다.
+  await page.route("**/api/auth/me", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({ id: "user-mypage-nav", email, tokenVersion: 1, emailVerified: true }),
+    });
+  });
+
+  // 대시보드 개요 API 를 목 처리해 /dashboard 진입 시 데이터를 안정적으로 반환한다.
+  await page.route("**/api/dashboard/overview", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify({
+        summaryStats: {
+          totalProjects: 0,
+          totalSubmissions: 0,
+          todaySubmissions: 0,
+          last7DaysSubmissions: 0,
+        },
+        projectStats: [],
+        dailySubmissions: [],
+      }),
+    });
+  });
+
+  await page.goto("/mypage");
+
+  const toDashboard = page.getByRole("link", { name: "Go to dashboard" });
+  await expect(toDashboard).toBeVisible();
+
+  await toDashboard.click();
+
+  await expect(page).toHaveURL(/\/dashboard/);
+  await expect(page.getByRole("heading", { name: "Dashboard" })).toBeVisible();
+});
+
+test("로그인 사용자는 마이페이지에서 이메일 인증 메일을 보낼 수 있어야 한다", async ({ page }) => {
+	const email = `verify+${Date.now()}@example.com`;
+
+	// 로그인된 상태를 시뮬레이션하기 위해 /api/auth/me 를 200 으로 목 처리한다.
+	await page.route("**/api/auth/me", async (route) => {
+		await route.fulfill({
+			status: 200,
+			contentType: "application/json",
+			body: JSON.stringify({ id: "user-verify", email, tokenVersion: 1 }),
+		});
+	});
+
+	// 이메일 인증 메일 전송 API 를 목 처리해 성공 응답을 시뮬레이션한다.
+	await page.route("**/api/auth/request-email-verification", async (route) => {
+		await route.fulfill({
+			status: 200,
+			contentType: "application/json",
+			body: JSON.stringify({
+				message: "Verification email has been sent.",
+				verificationToken: "dummy-token",
+			}),
+		});
+	});
+
+	await page.goto("/mypage");
+
+	// 이메일 인증 안내 텍스트와 버튼이 보여야 한다.
+	await expect(
+		page.getByText(/If your email is not verified yet, you can send a verification email from here\./i),
+	).toBeVisible();
+
+	const button = page.getByRole("button", { name: "Send verification email" });
+	await expect(button).toBeVisible();
+
+	await button.click();
+
+	// 성공 메시지가 노출되어야 한다.
+	await expect(page.getByText(/Verification email has been sent\./i)).toBeVisible();
+});