대시보드, GNB 추가
This commit is contained in:
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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");
|
||||
|
||||
@@ -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
@@ -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();
|
||||
});
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user