대시보드, GNB 추가
CI / test (push) Successful in 4m58s
CI / e2e (push) Has been skipped
CI / pr_and_merge (push) Successful in 1m45s

This commit is contained in:
2025-12-08 06:59:52 +09:00
parent b40be693ee
commit 9d8c4538c7
18 changed files with 1595 additions and 86 deletions
+220
View File
@@ -0,0 +1,220 @@
import "dotenv/config";
import { describe, it, expect, beforeEach, vi } from "vitest";
import { signAccessToken } from "@/features/auth/authCrypto";
// /api/dashboard/overview TDD
// - 로그인한 사용자가 자신의 프로젝트/폼 제출 통계를 조회할 수 있어야 한다.
// - 로그인하지 않은 경우 401 을 반환해야 한다.
// - 프로젝트/제출 내역이 없는 경우 0 값과 빈 배열을 반환해야 한다.
const BASE_URL = "http://localhost";
const inMemoryProjects: any[] = [];
const inMemoryFormSubmissions: any[] = [];
vi.mock("@prisma/client", () => {
class PrismaClientMock {
project = {
findMany: async (args: any = {}) => {
const where = args.where ?? {};
let items = [...inMemoryProjects];
if (where.userId) {
items = items.filter((p) => p.userId === where.userId);
}
return items;
},
};
formSubmission = {
findMany: async (args: any = {}) => {
const where = args.where ?? {};
let items = [...inMemoryFormSubmissions];
if (where.userId) {
items = items.filter((s) => s.userId === where.userId);
}
return items;
},
};
}
return { PrismaClient: PrismaClientMock };
});
const TEST_USER = { id: "user-1", email: "dashboard@example.com", tokenVersion: 1 };
const OTHER_USER = { id: "user-2", email: "dashboard2@example.com", tokenVersion: 1 };
async function buildAuthHeadersFor(user: { id: string; email: string; tokenVersion: number }) {
const token = await signAccessToken(user);
return { cookie: `pb_access=${token}` };
}
async function buildAuthHeaders() {
return buildAuthHeadersFor(TEST_USER);
}
beforeEach(() => {
process.env.AUTH_JWT_SECRET = "test-jwt-secret-dashboard";
inMemoryProjects.length = 0;
inMemoryFormSubmissions.length = 0;
});
describe("/api/dashboard/overview", () => {
it("로그인한 사용자가 자신의 프로젝트/폼 제출 통계를 조회할 수 있어야 한다", async () => {
const project1 = {
id: "proj-1",
userId: TEST_USER.id,
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
};
const project2 = {
id: "proj-2",
userId: TEST_USER.id,
title: "테스트 프로젝트 B",
slug: "test-project-b",
status: "PUBLISHED",
};
const projectOther = {
id: "proj-3",
userId: OTHER_USER.id,
title: "다른 유저 프로젝트",
slug: "other-project",
status: "DRAFT",
};
inMemoryProjects.push(project1, project2, projectOther);
const now = new Date("2025-01-03T12:00:00.000Z");
const yesterday = new Date("2025-01-02T12:00:00.000Z");
const eightDaysAgo = new Date("2024-12-26T12:00:00.000Z");
inMemoryFormSubmissions.push(
{
id: "sub-1",
projectId: project1.id,
projectSlug: project1.slug,
userId: TEST_USER.id,
createdAt: now,
payloadJson: { message: "A-1" },
sensitiveEnc: undefined,
metaJson: null,
},
{
id: "sub-2",
projectId: project1.id,
projectSlug: project1.slug,
userId: TEST_USER.id,
createdAt: yesterday,
payloadJson: { message: "A-2" },
sensitiveEnc: undefined,
metaJson: null,
},
{
id: "sub-3",
projectId: project2.id,
projectSlug: project2.slug,
userId: TEST_USER.id,
createdAt: eightDaysAgo,
payloadJson: { message: "B-1" },
sensitiveEnc: undefined,
metaJson: null,
},
{
id: "sub-4",
projectId: projectOther.id,
projectSlug: projectOther.slug,
userId: OTHER_USER.id,
createdAt: now,
payloadJson: { message: "OTHER" },
sensitiveEnc: undefined,
metaJson: null,
},
);
const { GET: getDashboardOverview } = await import("@/app/api/dashboard/overview/route");
const headers = await buildAuthHeaders();
const res = await getDashboardOverview(
new Request(`${BASE_URL}/api/dashboard/overview`, {
headers,
}),
);
expect(res.status).toBe(200);
const json = (await res.json()) as any;
expect(json.summaryStats.totalProjects).toBe(2);
expect(json.summaryStats.totalSubmissions).toBe(3);
expect(Array.isArray(json.projectStats)).toBe(true);
expect(json.projectStats.length).toBe(2);
const proj1Stats = json.projectStats.find((p: any) => p.slug === project1.slug);
const proj2Stats = json.projectStats.find((p: any) => p.slug === project2.slug);
expect(proj1Stats).toBeTruthy();
expect(proj1Stats.totalSubmissions).toBe(2);
expect(proj1Stats.lastSubmissionAt).toBe(now.toISOString());
expect(proj2Stats).toBeTruthy();
expect(proj2Stats.totalSubmissions).toBe(1);
expect(proj2Stats.lastSubmissionAt).toBe(eightDaysAgo.toISOString());
const daily = (json as any).dailySubmissions;
expect(Array.isArray(daily)).toBe(true);
expect(daily.length).toBe(3);
const dates = daily.map((item: any) => item.date).sort();
expect(dates).toEqual(["2024-12-26", "2025-01-02", "2025-01-03"]);
const countsByDate = (daily as any[]).reduce((acc: Record<string, number>, item: any) => {
acc[item.date] = item.count;
return acc;
}, {} as Record<string, number>);
expect(countsByDate["2025-01-03"]).toBe(1);
expect(countsByDate["2025-01-02"]).toBe(1);
expect(countsByDate["2024-12-26"]).toBe(1);
});
it("로그인하지 않은 경우 401 을 반환해야 한다", async () => {
const { GET: getDashboardOverview } = await import("@/app/api/dashboard/overview/route");
const res = await getDashboardOverview(
new Request(`${BASE_URL}/api/dashboard/overview`),
);
expect(res.status).toBe(401);
});
it("프로젝트와 제출 내역이 없는 경우 0 값과 빈 배열을 반환해야 한다", async () => {
const { GET: getDashboardOverview } = await import("@/app/api/dashboard/overview/route");
const headers = await buildAuthHeaders();
const res = await getDashboardOverview(
new Request(`${BASE_URL}/api/dashboard/overview`, {
headers,
}),
);
expect(res.status).toBe(200);
const json = (await res.json()) as any;
expect(json.summaryStats.totalProjects).toBe(0);
expect(json.summaryStats.totalSubmissions).toBe(0);
expect(Array.isArray(json.projectStats)).toBe(true);
expect(json.projectStats.length).toBe(0);
});
});
+4 -4
View File
@@ -48,7 +48,7 @@ test("비로그인 사용자가 /preview 에 접근하면 /login 으로 리다
await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
});
test("회원가입 후에는 /projects, /editor, /preview 에 정상 접근할 수 있어야 한다", async ({ page }) => {
test("회원가입 후에는 /dashboard, /editor, /preview 에 정상 접근할 수 있어야 한다", async ({ page }) => {
const email = `e2e+${Date.now()}@example.com`;
const password = "securePass1";
@@ -98,9 +98,9 @@ test("회원가입 후에는 /projects, /editor, /preview 에 정상 접근할
await page.getByLabel("비밀번호").fill(password);
await page.getByRole("button", { name: "회원가입" }).click();
// /projects 로 이동했는지, 헤더가 보이는지 확인
await expect(page).toHaveURL(/\/projects/);
await expect(page.getByRole("heading", { name: "프로젝트 목록" })).toBeVisible();
// /dashboard 로 이동했는지, 헤더가 보이는지 확인
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
// 2) /editor 접근 확인 – 로그인 페이지로 리다이렉트되면 안 된다.
await page.goto("/editor");
+140
View File
@@ -0,0 +1,140 @@
import { test, expect } from "@playwright/test";
// 대시보드 E2E TDD
// - 비로그인 사용자는 /dashboard 접근 시 /login 으로 리다이렉트되어야 한다.
// - 로그인 사용자는 /dashboard 에서 요약 지표 + 프로젝트 카드 리스트를 볼 수 있어야 한다.
// - 백엔드/DB 에 의존하지 않도록 /api/dashboard/overview 를 Playwright 라우팅으로 목킹한다.
test("비로그인 사용자가 /dashboard 에 접근하면 /login 으로 리다이렉트되어야 한다", async ({ page }) => {
await page.route("**/api/dashboard/overview", async (route) => {
await route.fulfill({
status: 401,
contentType: "application/json",
body: JSON.stringify({ message: "로그인이 필요합니다." }),
});
});
await page.goto("/dashboard");
await expect(page.getByRole("heading", { name: "로그인" })).toBeVisible();
});
test("로그인 사용자가 /dashboard 에 접근하면 요약 지표와 프로젝트 카드 리스트, 일별 그래프를 볼 수 있어야 한다", async ({ page }) => {
await page.route("**/api/dashboard/overview", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify({
summaryStats: {
totalProjects: 2,
totalSubmissions: 3,
todaySubmissions: 1,
last7DaysSubmissions: 3,
},
projectStats: [
{
projectId: "proj-1",
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
totalSubmissions: 2,
lastSubmissionAt: "2025-01-02T12:00:00.000Z",
},
{
projectId: "proj-2",
title: "테스트 프로젝트 B",
slug: "test-project-b",
status: "PUBLISHED",
totalSubmissions: 1,
lastSubmissionAt: "2025-01-03T09:30:00.000Z",
},
],
dailySubmissions: [
{ date: "2024-12-26", count: 1 },
{ date: "2025-01-02", count: 1 },
{ date: "2025-01-03", count: 1 },
],
}),
});
});
await page.goto("/dashboard");
// 대시보드 헤더가 보여야 한다.
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
// 상단 헤더 내비게이션이 보여야 한다.
const dashboardLink = page.getByRole("link", { name: "대시보드" });
await expect(dashboardLink).toBeVisible();
const projectsLink = page.getByRole("link", { name: "프로젝트 목록" });
await expect(projectsLink).toBeVisible();
const submissionsLink = page.getByRole("link", { name: "전체 제출 내역" });
await expect(submissionsLink).toBeVisible();
const menuButton = page.getByRole("button", { name: "메뉴" });
await expect(menuButton).toBeVisible();
// 상단 요약 위젯의 지표들이 기대 값으로 렌더되어야 한다.
const totalProjects = page.getByTestId("dashboard-summary-total-projects");
await expect(totalProjects).toContainText("2");
const totalSubmissions = page.getByTestId("dashboard-summary-total-submissions");
await expect(totalSubmissions).toContainText("3");
const todaySubmissions = page.getByTestId("dashboard-summary-today-submissions");
await expect(todaySubmissions).toContainText("1");
const last7DaysSubmissions = page.getByTestId(
"dashboard-summary-last7days-submissions",
);
await expect(last7DaysSubmissions).toContainText("3");
// 프로젝트 카드 리스트가 2개 렌더링되어야 한다.
const projectCards = page.getByTestId("dashboard-project-card");
await expect(projectCards).toHaveCount(2);
await expect(projectCards.nth(0)).toContainText("테스트 프로젝트 A");
await expect(projectCards.nth(0)).toContainText("test-project-a");
await expect(projectCards.nth(0)).toContainText("2");
await expect(projectCards.nth(1)).toContainText("테스트 프로젝트 B");
await expect(projectCards.nth(1)).toContainText("test-project-b");
await expect(projectCards.nth(1)).toContainText("1");
// 일별 제출 수 그래프가 렌더링되어야 한다.
const dailyChart = page.getByTestId("dashboard-daily-chart");
await expect(dailyChart).toBeVisible();
const dailyBars = page.getByTestId("dashboard-daily-chart-bar");
await expect(dailyBars).toHaveCount(3);
// 메뉴 버튼을 클릭하면 로그아웃 항목이 보여야 한다.
await menuButton.click();
await expect(page.getByRole("button", { name: "로그아웃" })).toBeVisible();
});
test("로그인 사용자가 / 에 접속하면 대시보드로 진입해야 한다", async ({ page }) => {
await page.route("**/api/dashboard/overview", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify({
summaryStats: {
totalProjects: 1,
totalSubmissions: 0,
todaySubmissions: 0,
last7DaysSubmissions: 0,
},
projectStats: [],
dailySubmissions: [],
}),
});
});
await page.goto("/");
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
});
+104 -1
View File
@@ -219,7 +219,110 @@ test("프로젝트 목록에서 '폼 제출 내역' 링크를 클릭하면 해
await expect(page.getByText("홍길동")).toBeVisible();
await expect(page.getByText("user@example.com")).toBeVisible();
await expect(page.getByText("010-1234-5678")).toBeVisible();
await expect(page.getByText("message: 안녕하세요")).toBeVisible();
await expect(page.getByText("1990-01-01")).toBeVisible();
await expect(page.getByText("message: 안녕하세요")).toBeVisible();
});
test("프로젝트 목록 헤더에서 대시보드로 이동할 수 있어야 한다", async ({ page }) => {
await page.route("**/api/auth/me", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify({ id: "user-e2e", email: "e2e@example.com", tokenVersion: 1 }),
});
});
await page.route("**/api/projects", async (route) => {
const request = route.request();
const url = new URL(request.url());
const method = request.method();
if (url.pathname === "/api/projects" && method === "GET") {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify([
{
id: "1",
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
createdAt: new Date("2025-01-01T00:00:00.000Z").toISOString(),
updatedAt: new Date("2025-01-01T00:00:00.000Z").toISOString(),
},
]),
});
return;
}
await route.fulfill({
status: 404,
contentType: "application/json",
body: JSON.stringify({ message: "Not implemented in E2E mock" }),
});
});
await page.route("**/api/dashboard/overview", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify({
summaryStats: {
totalProjects: 1,
totalSubmissions: 0,
todaySubmissions: 0,
last7DaysSubmissions: 0,
},
projectStats: [],
dailySubmissions: [],
}),
});
});
await page.goto("/projects");
await expect(page.getByText("테스트 프로젝트 A")).toBeVisible();
await page.getByRole("link", { name: "대시보드" }).click();
await expect(page).toHaveURL(/\/dashboard/);
await expect(page.getByRole("heading", { name: "대시보드" })).toBeVisible();
});
test("전체 제출 내역 페이지에서 공통 GNB와 메뉴가 보여야 한다", async ({ page }) => {
await page.route("**/api/projects/submissions", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify([]),
});
});
await page.route("**/api/auth/logout", async (route) => {
await route.fulfill({
status: 200,
contentType: "application/json",
body: JSON.stringify({ message: "ok" }),
});
});
await page.goto("/projects/submissions");
await expect(page.getByRole("heading", { name: "전체 폼 제출 내역" })).toBeVisible();
const dashboardLink = page.getByRole("link", { name: "대시보드" });
await expect(dashboardLink).toBeVisible();
const projectsLink = page.getByRole("link", { name: "프로젝트 목록" });
await expect(projectsLink).toBeVisible();
const submissionsLink = page.getByRole("link", { name: "전체 제출 내역" });
await expect(submissionsLink).toBeVisible();
const menuButton = page.getByRole("button", { name: "메뉴" });
await expect(menuButton).toBeVisible();
await menuButton.click();
await expect(page.getByRole("button", { name: "로그아웃" })).toBeVisible();
});
+87 -2
View File
@@ -146,11 +146,96 @@ describe("AllProjectSubmissionsPage - 전체 폼 제출 내역", () => {
const backLink = await screen.findByRole("link", { name: "프로젝트 목록" });
expect(backLink).toBeTruthy();
expect(backLink.closest("a")?.getAttribute("href")).toBe("/projects");
});
backLink.click();
it("상단 GNB 에 대시보드/프로젝트 목록/전체 제출 내역 링크가 있어야 한다", async () => {
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify([]), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock as any);
render(<AllProjectSubmissionsPage />);
const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
expect(dashboardLink.closest("a")?.getAttribute("href")).toBe("/dashboard");
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects");
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
expect(submissionsLink.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
});
it("GNB에서 현재 페이지인 '전체 제출 내역' 탭에 aria-current=\"page\"가 설정되어야 한다", async () => {
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify([]), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock as any);
render(<AllProjectSubmissionsPage />);
await waitFor(() => {
expect(pushMock).toHaveBeenCalledWith("/projects");
expect(fetchMock).toHaveBeenCalledTimes(1);
});
const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
expect(submissionsLink.getAttribute("href")).toBe("/projects/submissions");
expect(submissionsLink.getAttribute("aria-current")).toBe("page");
expect(dashboardLink.getAttribute("aria-current")).toBeNull();
expect(projectsLink.getAttribute("aria-current")).toBeNull();
});
it("상단 메뉴 안 '로그아웃' 버튼을 클릭하면 /api/auth/logout 으로 POST 요청을 보내고 /login 으로 이동해야 한다", async () => {
const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
const url = typeof input === "string" ? input : input.url;
const method = init?.method ?? "GET";
if (url === "/api/projects/submissions" && method === "GET") {
return Promise.resolve(
new Response(JSON.stringify([]), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
}
if (url === "/api/auth/logout" && method === "POST") {
return Promise.resolve(new Response(JSON.stringify({ message: "ok" }), { status: 200 }));
}
return Promise.resolve(new Response(null, { status: 500 }));
});
vi.stubGlobal("fetch", fetchMock as any);
render(<AllProjectSubmissionsPage />);
const menuButton = await screen.findByRole("button", { name: "메뉴" });
menuButton.click();
const logoutButton = await screen.findByRole("button", { name: "로그아웃" });
logoutButton.click();
await waitFor(() => {
const logoutCall = fetchMock.mock.calls.find(([url, options]) => {
return url === "/api/auth/logout" && options?.method === "POST";
});
expect(logoutCall).toBeDefined();
expect(pushMock).toHaveBeenCalledWith("/login");
});
});
});
+94
View File
@@ -0,0 +1,94 @@
import { describe, it, expect, afterEach, vi } from "vitest";
import { render, screen, cleanup, waitFor } from "@testing-library/react";
import DashboardPage from "@/app/dashboard/page";
export const pushMock = vi.fn();
vi.mock("next/navigation", () => {
return {
__esModule: true,
useRouter: () => ({ push: pushMock }),
};
});
afterEach(() => {
cleanup();
vi.unstubAllGlobals();
vi.clearAllMocks();
});
describe("DashboardPage - GNB와 테마", () => {
it("GNB에서 현재 페이지인 '대시보드' 탭에 aria-current=\"page\"가 설정되어야 한다", async () => {
const overview = {
summaryStats: {
totalProjects: 0,
totalSubmissions: 0,
todaySubmissions: 0,
last7DaysSubmissions: 0,
},
projectStats: [],
dailySubmissions: [],
};
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(overview), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock);
render(<DashboardPage />);
const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
expect(dashboardLink.getAttribute("href")).toBe("/dashboard");
expect(dashboardLink.getAttribute("aria-current")).toBe("page");
expect(projectsLink.getAttribute("aria-current")).toBeNull();
expect(submissionsLink.getAttribute("aria-current")).toBeNull();
});
it("헤더에 테마 전환 버튼이 있고 클릭 시 html 요소의 dark 클래스가 토글되어야 한다", async () => {
const overview = {
summaryStats: {
totalProjects: 0,
totalSubmissions: 0,
todaySubmissions: 0,
last7DaysSubmissions: 0,
},
projectStats: [],
dailySubmissions: [],
};
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(overview), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock);
render(<DashboardPage />);
const html = document.documentElement;
html.classList.remove("dark");
const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" });
expect(html.classList.contains("dark")).toBe(false);
themeToggleButton.click();
expect(html.classList.contains("dark")).toBe(true);
themeToggleButton.click();
expect(html.classList.contains("dark")).toBe(false);
});
});
+4 -4
View File
@@ -24,7 +24,7 @@ describe("LoginPage", () => {
vi.clearAllMocks();
});
it("올바른 이메일/비밀번호로 로그인하면 /api/auth/login 으로 요청을 보내고 /projects 로 이동해야 한다", async () => {
it("올바른 이메일/비밀번호로 로그인하면 /api/auth/login 으로 요청을 보내고 /dashboard 로 이동해야 한다", async () => {
const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
const url = typeof input === "string" ? input : input.url;
const method = init?.method ?? "GET";
@@ -82,7 +82,7 @@ describe("LoginPage", () => {
expect(body.password).toBe("securePass1");
await waitFor(() => {
expect(pushMock).toHaveBeenCalledWith("/projects");
expect(pushMock).toHaveBeenCalledWith("/dashboard");
});
});
@@ -129,7 +129,7 @@ describe("LoginPage", () => {
expect(errorText).toBeTruthy();
});
it("이미 로그인된 상태에서 /login 에 접근하면 /projects 로 리다이렉트해야 한다", async () => {
it("이미 로그인된 상태에서 /login 에 접근하면 /dashboard 로 리다이렉트해야 한다", async () => {
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify({ id: "1", email: "user@example.com", tokenVersion: 1 }), {
status: 200,
@@ -144,7 +144,7 @@ describe("LoginPage", () => {
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
expect(fetchMock.mock.calls[0][0]).toBe("/api/auth/me");
expect(pushMock).toHaveBeenCalledWith("/projects");
expect(pushMock).toHaveBeenCalledWith("/dashboard");
});
});
});
+155 -1
View File
@@ -112,6 +112,119 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(link.closest("a")?.getAttribute("href")).toBe("/projects/submissions");
});
it("헤더에 대시보드 페이지(/dashboard)로 이동하는 링크가 있어야 한다", async () => {
const projects = [
{
id: "1",
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
createdAt: "2025-01-01T00:00:00.000Z",
updatedAt: "2025-01-01T00:00:00.000Z",
},
];
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(projects), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock);
render(<ProjectsPage />);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
});
const link = screen.getByText("대시보드");
expect(link).toBeTruthy();
expect(link.closest("a")?.getAttribute("href")).toBe("/dashboard");
});
it("GNB에서 현재 페이지인 '프로젝트 목록' 탭에 aria-current=\"page\"가 설정되어야 한다", async () => {
const projects = [
{
id: "1",
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
createdAt: "2025-01-01T00:00:00.000Z",
updatedAt: "2025-01-01T00:00:00.000Z",
},
];
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(projects), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock);
render(<ProjectsPage />);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
});
const dashboardLink = await screen.findByRole("link", { name: "대시보드" });
const projectsLink = await screen.findByRole("link", { name: "프로젝트 목록" });
const submissionsLink = await screen.findByRole("link", { name: "전체 제출 내역" });
expect(projectsLink.closest("a")?.getAttribute("href")).toBe("/projects");
expect(projectsLink.closest("a")?.getAttribute("aria-current")).toBe("page");
expect(dashboardLink.closest("a")?.getAttribute("aria-current")).toBeNull();
expect(submissionsLink.closest("a")?.getAttribute("aria-current")).toBeNull();
});
it("헤더에 테마 전환 버튼이 있고 클릭 시 html 요소의 dark 클래스가 토글되어야 한다", async () => {
const projects = [
{
id: "1",
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
createdAt: "2025-01-01T00:00:00.000Z",
updatedAt: "2025-01-01T00:00:00.000Z",
},
];
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(projects), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock);
render(<ProjectsPage />);
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
});
const html = document.documentElement;
html.classList.remove("dark");
const themeToggleButton = await screen.findByRole("button", { name: "테마 전환" });
expect(html.classList.contains("dark")).toBe(false);
themeToggleButton.click();
expect(html.classList.contains("dark")).toBe(true);
themeToggleButton.click();
expect(html.classList.contains("dark")).toBe(false);
});
it("각 프로젝트 행에는 폼 제출 내역 페이지(/projects/[slug]/submissions)로 이동하는 링크가 있어야 한다", async () => {
const projects = [
{
@@ -227,6 +340,44 @@ describe("ProjectsPage - 프로젝트 목록", () => {
confirmSpy.mockRestore();
});
it("프로젝트 목록 상단 툴바에 '새 프로젝트 만들기' 버튼과 '선택 삭제' 버튼이 함께 보여야 한다", async () => {
const projects = [
{
id: "1",
title: "테스트 프로젝트 A",
slug: "test-project-a",
status: "DRAFT",
createdAt: "2025-01-01T00:00:00.000Z",
updatedAt: "2025-01-01T00:00:00.000Z",
},
{
id: "2",
title: "테스트 프로젝트 B",
slug: "test-project-b",
status: "PUBLISHED",
createdAt: "2025-01-02T00:00:00.000Z",
updatedAt: "2025-01-02T00:00:00.000Z",
},
];
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify(projects), {
status: 200,
headers: { "Content-Type": "application/json" },
}),
);
vi.stubGlobal("fetch", fetchMock);
render(<ProjectsPage />);
// 상단 툴바에서 선택 삭제와 새 프로젝트 만들기 버튼이 함께 보여야 한다.
const toolbar = await screen.findByTestId("projects-toolbar");
expect(toolbar.querySelector("button[type='button']")?.textContent).toContain("선택 삭제");
expect(toolbar.querySelector("a[href='/editor?new=1']")?.textContent).toContain("새 프로젝트 만들기");
});
it("체크박스로 여러 프로젝트를 선택한 뒤 '선택 삭제' 버튼으로 일괄 삭제할 수 있어야 한다", async () => {
const projects = [
{
@@ -336,7 +487,7 @@ describe("ProjectsPage - 프로젝트 목록", () => {
});
});
it("헤더의 '로그아웃' 버튼을 클릭하면 /api/auth/logout 으로 POST 요청을 보내고 /login 으로 이동해야 한다", async () => {
it("헤더의 메뉴 안 '로그아웃' 버튼을 클릭하면 /api/auth/logout 으로 POST 요청을 보내고 /login 으로 이동해야 한다", async () => {
const projects = [
{
id: "1",
@@ -376,6 +527,9 @@ describe("ProjectsPage - 프로젝트 목록", () => {
expect(fetchMock).toHaveBeenCalled();
});
const menuButton = await screen.findByRole("button", { name: "메뉴" });
fireEvent.click(menuButton);
const logoutButton = await screen.findByRole("button", { name: "로그아웃" });
fireEvent.click(logoutButton);
+4 -4
View File
@@ -24,7 +24,7 @@ describe("SignupPage", () => {
vi.clearAllMocks();
});
it("새 이메일/비밀번호로 회원가입하면 /api/auth/signup 으로 요청을 보내고 /projects 로 이동해야 한다", async () => {
it("새 이메일/비밀번호로 회원가입하면 /api/auth/signup 으로 요청을 보내고 /dashboard 로 이동해야 한다", async () => {
const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
const url = typeof input === "string" ? input : input.url;
const method = init?.method ?? "GET";
@@ -82,7 +82,7 @@ describe("SignupPage", () => {
expect(body.password).toBe("securePass1");
await waitFor(() => {
expect(pushMock).toHaveBeenCalledWith("/projects");
expect(pushMock).toHaveBeenCalledWith("/dashboard");
});
});
@@ -129,7 +129,7 @@ describe("SignupPage", () => {
expect(errorText).toBeTruthy();
});
it("이미 로그인된 상태에서 /signup 에 접근하면 /projects 로 리다이렉트해야 한다", async () => {
it("이미 로그인된 상태에서 /signup 에 접근하면 /dashboard 로 리다이렉트해야 한다", async () => {
const fetchMock = vi.fn().mockResolvedValue(
new Response(JSON.stringify({ id: "1", email: "user@example.com", tokenVersion: 1 }), {
status: 200,
@@ -144,7 +144,7 @@ describe("SignupPage", () => {
await waitFor(() => {
expect(fetchMock).toHaveBeenCalledTimes(1);
expect(fetchMock.mock.calls[0][0]).toBe("/api/auth/me");
expect(pushMock).toHaveBeenCalledWith("/projects");
expect(pushMock).toHaveBeenCalledWith("/dashboard");
});
});
});