247 lines
13 KiB
TypeScript
247 lines
13 KiB
TypeScript
import AxeBuilder from "@axe-core/playwright";
|
|
import { expect, test } from "@playwright/test";
|
|
import type { Locator, Page } from "@playwright/test";
|
|
|
|
async function expectNoHorizontalOverflow(page: Page): Promise<void> {
|
|
const hasHorizontalOverflow = await page.evaluate(
|
|
() => document.documentElement.scrollWidth > document.documentElement.clientWidth,
|
|
);
|
|
|
|
expect(hasHorizontalOverflow).toBe(false);
|
|
}
|
|
|
|
async function zoomTo200Percent(page: Page): Promise<void> {
|
|
await page.evaluate(() => {
|
|
document.documentElement.style.zoom = "2";
|
|
});
|
|
}
|
|
|
|
async function expectNoCriticalOrSeriousAxeViolations(page: Page): Promise<void> {
|
|
const results = await new AxeBuilder({ page }).analyze();
|
|
const blockingViolations = results.violations.filter(
|
|
(violation) => violation.impact === "critical" || violation.impact === "serious",
|
|
);
|
|
|
|
expect(blockingViolations).toEqual([]);
|
|
}
|
|
|
|
async function pressTabUntilFocused(page: Page, target: Locator): Promise<void> {
|
|
for (let attempt = 0; attempt < 50; attempt += 1) {
|
|
if (await target.evaluate((element) => element === document.activeElement || element.contains(document.activeElement))) {
|
|
return;
|
|
}
|
|
|
|
await page.keyboard.press("Tab");
|
|
}
|
|
|
|
await expect(target).toBeFocused();
|
|
}
|
|
|
|
async function loginThroughMockMode(page: Page): Promise<void> {
|
|
await page.goto("/login");
|
|
await page.getByLabel("이메일").fill("admin@test.com");
|
|
await page.getByLabel("비밀번호").fill("password");
|
|
await page.getByRole("button", { name: "로그인" }).click();
|
|
await expect(page).toHaveURL(/\/ai-characters$/);
|
|
await expect(page.getByRole("heading", { name: "AI 캐릭터", exact: true })).toBeVisible();
|
|
}
|
|
|
|
async function openFirstUnansweredFanTalk(page: Page): Promise<Locator> {
|
|
await page.getByRole("button", { name: "첫 번째 응원입니다. 답변하기" }).click();
|
|
|
|
return page.getByRole("dialog", { name: "FanTalk 답변" });
|
|
}
|
|
|
|
async function expectFanTalkListReady(page: Page): Promise<void> {
|
|
await expect(page.getByRole("heading", { name: "FanTalk", exact: true })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "첫 번째 응원입니다. 답변하기" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "두 번째로 온 응원입니다. 답변 보기" })).toBeVisible();
|
|
await expect(page.getByRole("searchbox", { name: "검색어" })).toBeHidden();
|
|
}
|
|
|
|
test("FanTalk mock journey creates edits and deletes through list-backed endpoints", async ({ page }) => {
|
|
// Given
|
|
const fanTalkRequests: { readonly body: string | null; readonly method: string; readonly path: string; readonly search: string }[] = [];
|
|
page.on("request", (request) => {
|
|
const url = new URL(request.url());
|
|
if (url.pathname.startsWith("/api/v2/admin/") && url.pathname.includes("/fan-talks")) {
|
|
fanTalkRequests.push({ body: request.postData(), method: request.method(), path: url.pathname, search: url.search });
|
|
}
|
|
});
|
|
await loginThroughMockMode(page);
|
|
|
|
// When
|
|
await page.goto("/ai-characters/101/fan-talks?page=0&size=20&status=pending&sort=createdAt");
|
|
|
|
// Then
|
|
await expect(page.getByRole("heading", { name: "FanTalk", exact: true })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "첫 번째 응원입니다. 답변하기" })).toBeVisible();
|
|
await expect(page.getByRole("button", { name: "두 번째로 온 응원입니다. 답변 보기" })).toBeVisible();
|
|
await expect(page.getByRole("searchbox", { name: "검색어" })).toBeHidden();
|
|
await expect(page.locator("body")).toContainText("2026. 07. 28. 10:00");
|
|
await expect(page.locator("body")).toContainText("2026. 07. 28. 11:00");
|
|
await expect(page.locator("body")).not.toContainText("2026-07-28T01:00:00Z");
|
|
await expect(page.locator("body")).not.toContainText("2026-07-28T02:00:00Z");
|
|
expect(fanTalkRequests).toContainEqual({ body: null, method: "GET", path: "/api/v2/admin/ai-characters/101/fan-talks", search: "?page=0&size=20" });
|
|
|
|
// When
|
|
await page.getByRole("button", { name: "첫 번째 응원입니다. 답변하기" }).click();
|
|
const dialog = page.getByRole("dialog", { name: "FanTalk 답변" });
|
|
await dialog.getByLabel("답변 내용").fill("응원 고마워요.");
|
|
await dialog.getByRole("button", { name: "답변 등록" }).click();
|
|
|
|
// Then
|
|
const createStatus = dialog.getByRole("status", { name: "답변 저장 성공" });
|
|
await expect(createStatus).toContainText("답변이 등록되었습니다.");
|
|
await expect(createStatus).not.toContainText("fanTalk");
|
|
await expect(createStatus).not.toContainText("reply");
|
|
await expect(createStatus).not.toContainText("creator");
|
|
await expect(createStatus).not.toContainText("2026-07-28T04:00:00Z");
|
|
await expect(dialog).toContainText("응원 고마워요.");
|
|
await expect(dialog).toContainText("2026. 07. 28. 13:00");
|
|
await expect(dialog).not.toContainText("2026-07-28T04:00:00Z");
|
|
await expect(dialog.getByLabel("답변 내용")).toBeHidden();
|
|
await dialog.getByRole("button", { name: "닫기" }).click();
|
|
expect(fanTalkRequests.filter((request) => request.method === "POST" && request.path === "/api/v2/admin/ai-characters/101/fan-talks/7001/replies" && request.body === JSON.stringify({ content: "응원 고마워요." }))).toHaveLength(1);
|
|
|
|
// When
|
|
await page.getByRole("button", { name: "첫 번째 응원입니다. 답변 보기" }).click();
|
|
const createdReplyDialog = page.getByRole("dialog", { name: "FanTalk 답변" });
|
|
await createdReplyDialog.getByLabel("답변 내용").fill("방금 등록한 답변을 수정합니다.");
|
|
await createdReplyDialog.getByRole("button", { name: "답변 수정" }).click();
|
|
|
|
// Then
|
|
await expect(createdReplyDialog.getByRole("status", { name: "답변 저장 성공" })).toContainText("답변이 수정되었습니다.");
|
|
await createdReplyDialog.getByRole("button", { name: "닫기" }).click();
|
|
await expect(page.getByRole("button", { name: "첫 번째 응원입니다. 답변 보기" })).toBeVisible();
|
|
expect(fanTalkRequests.filter((request) => request.method === "PUT" && request.path === "/api/v2/admin/ai-characters/101/fan-talks/7001/replies/9001" && request.body === JSON.stringify({ content: "방금 등록한 답변을 수정합니다." }))).toHaveLength(1);
|
|
|
|
// When
|
|
await page.getByRole("button", { name: "두 번째로 온 응원입니다. 답변 보기" }).click();
|
|
const editDialog = page.getByRole("dialog", { name: "FanTalk 답변" });
|
|
await expect(editDialog.getByLabel("답변 내용")).toHaveValue("이미 답변했습니다.");
|
|
await editDialog.getByLabel("답변 내용").fill("수정한 답변입니다.");
|
|
await editDialog.getByRole("button", { name: "답변 수정" }).click();
|
|
|
|
// Then
|
|
const updateStatus = editDialog.getByRole("status", { name: "답변 저장 성공" });
|
|
await expect(updateStatus).toContainText("답변이 수정되었습니다.");
|
|
await expect(updateStatus).not.toContainText("reply");
|
|
await expect(updateStatus).not.toContainText("2026-07-28T05:00:00Z");
|
|
expect(fanTalkRequests.filter((request) => request.method === "PUT" && request.path === "/api/v2/admin/ai-characters/101/fan-talks/7002/replies/7102" && request.body === JSON.stringify({ content: "수정한 답변입니다." }))).toHaveLength(1);
|
|
expect(fanTalkRequests.every((request) => request.body === null || !request.body.includes("isActive"))).toBe(true);
|
|
|
|
// When
|
|
await editDialog.getByRole("button", { name: "FanTalk 원글 삭제" }).click();
|
|
await page.getByRole("button", { name: "삭제 확인" }).click();
|
|
|
|
// Then
|
|
await expect(editDialog).toBeHidden();
|
|
await expect(page.getByRole("button", { name: "두 번째로 온 응원입니다. 답변 보기" })).toBeHidden();
|
|
expect(fanTalkRequests.filter((request) => request.method === "DELETE" && request.path === "/api/v2/admin/ai-characters/101/fan-talks/7002" && request.body === null)).toHaveLength(1);
|
|
expect(fanTalkRequests.some((request) => request.method === "GET" && request.path === "/api/v2/admin/ai-characters/101/fan-talks/7001")).toBe(false);
|
|
expect(fanTalkRequests.every((request) => !request.search.includes("status=") && !request.search.includes("sort="))).toBe(true);
|
|
});
|
|
|
|
for (const width of [320, 768, 1280] as const) {
|
|
test(`FanTalk create edit and delete stay available at ${width}px`, async ({ page }) => {
|
|
// Given
|
|
await page.setViewportSize({ width, height: 640 });
|
|
await loginThroughMockMode(page);
|
|
|
|
// When / Then
|
|
await page.goto("/ai-characters/101/fan-talks");
|
|
await expectFanTalkListReady(page);
|
|
await expectNoHorizontalOverflow(page);
|
|
|
|
const dialog = await openFirstUnansweredFanTalk(page);
|
|
await expect(dialog).toBeVisible();
|
|
await expect(dialog.getByLabel("답변 내용")).toBeVisible();
|
|
await expect(dialog.getByRole("button", { name: "답변 등록" })).toBeVisible();
|
|
|
|
await dialog.getByLabel("답변 내용").fill(`${width}px 응답입니다.`);
|
|
await dialog.getByRole("button", { name: "답변 등록" }).click();
|
|
await expect(dialog).toContainText(`${width}px 응답입니다.`);
|
|
await expect(dialog.getByLabel("답변 내용")).toBeHidden();
|
|
await dialog.getByRole("button", { name: "닫기" }).click();
|
|
|
|
await page.getByRole("button", { name: "두 번째로 온 응원입니다. 답변 보기" }).click();
|
|
const editDialog = page.getByRole("dialog", { name: "FanTalk 답변" });
|
|
await expect(editDialog.getByRole("button", { name: "답변 수정" })).toBeVisible();
|
|
await expect(editDialog.getByRole("button", { name: "FanTalk 원글 삭제" })).toBeVisible();
|
|
await editDialog.getByLabel("답변 내용").fill(`${width}px 수정입니다.`);
|
|
await editDialog.getByRole("button", { name: "답변 수정" }).click();
|
|
await expect(editDialog.getByRole("status", { name: "답변 저장 성공" })).toContainText("답변이 수정되었습니다.");
|
|
await editDialog.getByRole("button", { name: "FanTalk 원글 삭제" }).click();
|
|
await page.getByRole("button", { name: "삭제 확인" }).click();
|
|
await expect(editDialog).toBeHidden();
|
|
});
|
|
}
|
|
|
|
test("320px FanTalk reply sheet keeps input and submit usable in a keyboard viewport", async ({ page }) => {
|
|
// Given
|
|
await page.setViewportSize({ width: 320, height: 480 });
|
|
await loginThroughMockMode(page);
|
|
await page.goto("/ai-characters/101/fan-talks");
|
|
|
|
// When / Then
|
|
const dialog = await openFirstUnansweredFanTalk(page);
|
|
const replyInput = dialog.getByLabel("답변 내용");
|
|
const submitButton = dialog.getByRole("button", { name: "답변 등록" });
|
|
await expect(replyInput).toBeInViewport();
|
|
await replyInput.focus();
|
|
await expect(submitButton).toBeInViewport();
|
|
await replyInput.fill("좁은 화면에서도 등록합니다.");
|
|
await submitButton.click();
|
|
await expect(dialog).toContainText("좁은 화면에서도 등록합니다.");
|
|
await expectNoHorizontalOverflow(page);
|
|
});
|
|
|
|
test("keyboard-only FanTalk flow opens sheet creates reply and restores focus", async ({ browserName, page }) => {
|
|
test.skip(browserName === "webkit", "WebKit does not consistently tab-focus buttons in this keyboard path.");
|
|
|
|
// Given
|
|
await page.setViewportSize({ width: 1280, height: 900 });
|
|
await loginThroughMockMode(page);
|
|
await page.goto("/ai-characters/101/fan-talks");
|
|
const opener = page.getByRole("button", { name: "첫 번째 응원입니다. 답변하기" });
|
|
|
|
// When / Then
|
|
await pressTabUntilFocused(page, opener);
|
|
await page.keyboard.press("Enter");
|
|
const dialog = page.getByRole("dialog", { name: "FanTalk 답변" });
|
|
const closeButton = dialog.getByRole("button", { name: "닫기" });
|
|
await expect(closeButton).toBeFocused();
|
|
|
|
const replyInput = dialog.getByLabel("답변 내용");
|
|
await pressTabUntilFocused(page, replyInput);
|
|
await page.keyboard.type("키보드로 작성한 답변입니다.");
|
|
await pressTabUntilFocused(page, dialog.getByRole("button", { name: "답변 등록" }));
|
|
await page.keyboard.press("Enter");
|
|
|
|
await expect(dialog.getByRole("status", { name: "답변 저장 성공" })).toBeVisible();
|
|
await expect(dialog).toContainText("키보드로 작성한 답변입니다.");
|
|
await expect(replyInput).toBeHidden();
|
|
await pressTabUntilFocused(page, closeButton);
|
|
await page.keyboard.press("Enter");
|
|
await expect(dialog).toBeHidden();
|
|
await expect(page.getByRole("button", { name: "첫 번째 응원입니다. 답변 보기" })).toBeFocused();
|
|
});
|
|
|
|
test("FanTalk route keeps 200 percent zoom and axe coverage across viewport widths", async ({ page }) => {
|
|
// Given
|
|
await loginThroughMockMode(page);
|
|
|
|
for (const width of [320, 768, 1280] as const) {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.goto("/ai-characters/101/fan-talks");
|
|
|
|
// When
|
|
await zoomTo200Percent(page);
|
|
|
|
// Then
|
|
await expectNoHorizontalOverflow(page);
|
|
await expectNoCriticalOrSeriousAxeViolations(page);
|
|
}
|
|
});
|