119 lines
4.5 KiB
TypeScript
119 lines
4.5 KiB
TypeScript
import { expect, test, type Locator } from "@playwright/test";
|
|
import { createQuestions } from "../../src/game";
|
|
|
|
test("전체 음량은 설정 흐름 안에 들어가며 키보드로 조절된다", async ({
|
|
page,
|
|
}) => {
|
|
await page.goto("/");
|
|
const volume = page.getByRole("slider", { name: "전체 음량" });
|
|
// 문서상 소속뿐 아니라 컨트롤 전체가 카드 경계 안에 그려지는지 검증한다.
|
|
const expectInside = async (panel: Locator) => {
|
|
const bounds = (await panel.boundingBox())!;
|
|
const control = (await page.locator(".volume-row").boundingBox())!;
|
|
expect.soft(control.x).toBeGreaterThanOrEqual(bounds.x);
|
|
expect.soft(control.y).toBeGreaterThanOrEqual(bounds.y);
|
|
expect
|
|
.soft(control.x + control.width)
|
|
.toBeLessThanOrEqual(bounds.x + bounds.width);
|
|
expect
|
|
.soft(control.y + control.height)
|
|
.toBeLessThanOrEqual(bounds.y + bounds.height);
|
|
};
|
|
await expectInside(page.getByRole("region", { name: "나의 소리 탐험 준비" }));
|
|
const start = page.getByRole("button", {
|
|
name: "게임 시작 · 소리 듣기",
|
|
});
|
|
const control = (await page.locator(".volume-row").boundingBox())!;
|
|
expect
|
|
.soft(control.y + control.height)
|
|
.toBeLessThanOrEqual((await start.boundingBox())!.y);
|
|
await volume.focus();
|
|
await volume.press("ArrowRight");
|
|
await expect(volume).toHaveValue("36");
|
|
await volume.press("Tab");
|
|
await expect(start).toBeFocused();
|
|
await start.click();
|
|
await expectInside(page.getByRole("complementary"));
|
|
await expect(volume).toHaveValue("36");
|
|
await volume.focus();
|
|
await volume.press("ArrowLeft");
|
|
await expect(volume).toHaveValue("35");
|
|
// 음량을 패널로 옮겨도 카드와 바닥글이 맞붙지 않도록 기존 화면 구분을 유지한다.
|
|
const cards = (await page.locator(".game-columns").boundingBox())!;
|
|
const footer = (await page.getByRole("contentinfo").boundingBox())!;
|
|
expect(footer.y - (cards.y + cards.height)).toBeGreaterThanOrEqual(24);
|
|
expect(
|
|
await page.evaluate(
|
|
() => document.documentElement.scrollWidth <= innerWidth,
|
|
),
|
|
).toBe(true);
|
|
});
|
|
|
|
test("난이도 설명은 모바일에서도 보인다", async ({ page }) => {
|
|
await page.goto("/");
|
|
await page.getByRole("button", { name: "게임 시작 · 소리 듣기" }).click();
|
|
// DOM에만 설명을 남기고 모바일 CSS로 숨기면 컴포넌트 검증은 통과하므로
|
|
// 실제 화면에서 난이도 배지와 쉬운 설명을 모두 읽을 수 있는지 확인한다.
|
|
await expect.soft(page.locator(".db-note")).toBeVisible({ timeout: 1000 });
|
|
await expect
|
|
.soft(page.getByText("1단계 · SNR +6 dB"))
|
|
.toBeVisible({ timeout: 1000 });
|
|
await expect
|
|
.soft(page.locator(".db-note"))
|
|
.toContainText("음성이 배경보다 6 dB 커요.", { timeout: 1000 });
|
|
});
|
|
|
|
// jsdom은 줄바꿈을 계산하지 않는다. 실제 Chrome에서 한국어 제목의
|
|
// computed style을 확인하고 360px에서도 질문과 페이지가 넘치지 않게 한다.
|
|
test("한국어 제목은 단어 중간에서 줄바꿈하지 않는다", async ({
|
|
page,
|
|
}, info) => {
|
|
await page.addInitScript(() => {
|
|
Date.now = () => 42;
|
|
});
|
|
await page.goto("/");
|
|
const wordBreaks = () =>
|
|
page.getByRole("heading").evaluateAll((headings) =>
|
|
headings.map((heading) => ({
|
|
title: heading.textContent,
|
|
wordBreak: getComputedStyle(heading).wordBreak,
|
|
})),
|
|
);
|
|
const homeHeadings = await wordBreaks();
|
|
expect.soft(homeHeadings).toEqual(
|
|
homeHeadings.map((heading) => ({
|
|
...heading,
|
|
wordBreak: "keep-all",
|
|
})),
|
|
);
|
|
await page.getByRole("button", { name: "게임 시작 · 소리 듣기" }).click();
|
|
const question = page.getByRole("heading", {
|
|
name: createQuestions(42, "mixed")[0]!.pattern.question,
|
|
});
|
|
await expect(question).toBeVisible();
|
|
// 전체 화면 캡처 전에 스크롤을 맞춰 화면 밖의 fixed 건너뛰기 링크가
|
|
// 이미지 안으로 들어오는 Chrome 캡처 아티팩트를 방지한다. 초점은 유지한다.
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
await page.screenshot({
|
|
path: info.outputPath("heading.png"),
|
|
fullPage: true,
|
|
});
|
|
const gameHeadings = await wordBreaks();
|
|
expect.soft(gameHeadings).toEqual(
|
|
gameHeadings.map((heading) => ({
|
|
...heading,
|
|
wordBreak: "keep-all",
|
|
})),
|
|
);
|
|
expect(
|
|
await question.evaluate(
|
|
(heading) => heading.scrollWidth <= heading.clientWidth,
|
|
),
|
|
).toBe(true);
|
|
expect(
|
|
await page.evaluate(
|
|
() => document.documentElement.scrollWidth <= innerWidth,
|
|
),
|
|
).toBe(true);
|
|
});
|