564 lines
22 KiB
TypeScript
564 lines
22 KiB
TypeScript
import {
|
|
act,
|
|
fireEvent,
|
|
render,
|
|
screen,
|
|
waitFor,
|
|
within,
|
|
} from "@testing-library/react";
|
|
import userEvent from "@testing-library/user-event";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
import App from "../src/App";
|
|
import type { AudioPort } from "../src/audio/engine";
|
|
import { createQuestions } from "../src/game";
|
|
|
|
// 사용자가 보는 의미 역할로만 화면을 조작한다. 오디오 완료를 수동 제어하여
|
|
// 재생 중에는 문제·선택지가 노출되지 않는지, 오류 뒤 재시도가 가능한지 본다.
|
|
function fixture(startImmediately = true) {
|
|
let resolve!: () => void;
|
|
let reject!: (reason: Error) => void;
|
|
const audio: AudioPort = {
|
|
play: vi.fn((_q, _intro, started) => {
|
|
if (startImmediately) started();
|
|
return new Promise<void>((yes, no) => {
|
|
resolve = yes;
|
|
reject = no;
|
|
});
|
|
}),
|
|
stop: vi.fn(),
|
|
dispose: vi.fn(),
|
|
setVolume: vi.fn(),
|
|
};
|
|
const user = userEvent.setup();
|
|
const view = render(<App audio={audio} seed={42} />);
|
|
return {
|
|
audio,
|
|
user,
|
|
...view,
|
|
finish: async () => {
|
|
await act(async () => resolve());
|
|
},
|
|
fail: async () => {
|
|
await act(async () => reject(new Error("파일 로드 실패")));
|
|
},
|
|
};
|
|
}
|
|
|
|
describe("시작부터 결과까지 사용자 흐름", () => {
|
|
it("시작 안내는 장식 번호 대신 8가지 환경을 표시한다", () => {
|
|
fixture();
|
|
expect(screen.getByText("8가지 환경", { exact: true })).toBeInTheDocument();
|
|
expect(screen.queryByText("01 / 08")).not.toBeInTheDocument();
|
|
});
|
|
it("시작 안내의 현재 페이지 링크는 아래 화살표를 표시한다", () => {
|
|
fixture();
|
|
const link = screen.getByRole("link", { name: "플레이 방법" });
|
|
expect(link).toHaveAttribute("href", "#howto");
|
|
expect(link).toHaveTextContent("플레이 방법 ↓");
|
|
expect(within(link).getByText("↓")).toHaveAttribute("aria-hidden", "true");
|
|
});
|
|
it("시작 안내의 CTA는 게임 시작과 소리 재생을 함께 알린다", async () => {
|
|
const f = fixture();
|
|
const start = screen.getByRole("button", {
|
|
name: "게임 시작 · 소리 듣기",
|
|
});
|
|
expect(start).toHaveTextContent("게임 시작 · 소리 듣기");
|
|
expect(f.audio.play).not.toHaveBeenCalled();
|
|
await f.user.click(start);
|
|
expect(f.audio.play).toHaveBeenCalledTimes(1);
|
|
await f.finish();
|
|
});
|
|
it("전체 음량을 시작 CTA 앞 설정 카드와 게임 환경 패널에 배치하고 값을 유지한다", async () => {
|
|
const f = fixture();
|
|
const setup = screen.getByRole("region", {
|
|
name: "나의 소리 탐험 준비",
|
|
});
|
|
const volume = screen.getByRole("slider", { name: "전체 음량" });
|
|
const start = screen.getByRole("button", {
|
|
name: "게임 시작 · 소리 듣기",
|
|
});
|
|
expect.soft(setup).toContainElement(volume);
|
|
// CSS 배치만 바꾸지 않고 키보드·스크린리더도 음량→시작 순서로 읽어야 한다.
|
|
expect
|
|
.soft(
|
|
volume.compareDocumentPosition(start) &
|
|
Node.DOCUMENT_POSITION_FOLLOWING,
|
|
)
|
|
.not.toBe(0);
|
|
fireEvent.change(volume, { target: { value: "20" } });
|
|
await f.user.click(start);
|
|
const gameVolume = screen.getByRole("slider", { name: "전체 음량" });
|
|
expect.soft(screen.getByRole("complementary")).toContainElement(gameVolume);
|
|
expect(screen.getAllByRole("slider", { name: "전체 음량" })).toHaveLength(
|
|
1,
|
|
);
|
|
expect(gameVolume).toHaveValue("20");
|
|
fireEvent.change(gameVolume, { target: { value: "60" } });
|
|
expect(f.audio.setVolume).toHaveBeenLastCalledWith(0.6);
|
|
await f.finish();
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
await f.user.click(screen.getByRole("button", { name: "처음 화면으로" }));
|
|
expect(screen.getByRole("slider", { name: "전체 음량" })).toHaveValue("60");
|
|
});
|
|
it("다섯 난이도의 SNR과 음성·배경 크기 관계를 설명하고 결과에도 표시한다", async () => {
|
|
const f = fixture();
|
|
const questions = createQuestions(42, "choice");
|
|
// 양수·0·음수를 각각 명시해 부호만 바꾸고 설명은 그대로인 회귀도 잡는다.
|
|
const levels = [
|
|
["SNR +6 dB", "음성이 기준보다 6 dB 커요."],
|
|
["SNR +3 dB", "음성이 기준보다 3 dB 커요."],
|
|
["SNR 0 dB", "음성을 기준 크기로 들려줘요."],
|
|
["SNR -3 dB", "음성이 기준보다 3 dB 작아요."],
|
|
["SNR -6 dB", "음성이 기준보다 6 dB 작아요."],
|
|
] as const;
|
|
await f.user.click(screen.getByRole("radio", { name: "보기에서 선택" }));
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
for (const [index, question] of questions.entries()) {
|
|
if (index)
|
|
await f.user.click(screen.getByRole("button", { name: /문장 듣기/ }));
|
|
await f.finish();
|
|
const [label, description] = levels[0]!;
|
|
expect
|
|
.soft(screen.queryByText(`${question.level}단계 · ${label}`))
|
|
.toBeInTheDocument();
|
|
expect
|
|
.soft(screen.queryByText(description, { exact: false }))
|
|
.toBeInTheDocument();
|
|
await f.user.click(
|
|
screen.getByRole("button", {
|
|
name: new RegExp(question.word.answer),
|
|
}),
|
|
);
|
|
await f.user.click(
|
|
screen.getByRole("button", {
|
|
name: index === questions.length - 1 ? /결과 보기/ : /다음 문제/,
|
|
}),
|
|
);
|
|
}
|
|
const table = within(screen.getByRole("table", { name: "난이도별 결과" }));
|
|
expect
|
|
.soft(table.queryByRole("columnheader", { name: "SNR" }))
|
|
.toBeInTheDocument();
|
|
for (const [label] of levels) {
|
|
expect
|
|
.soft(table.queryByRole("cell", { name: label }))
|
|
.toBeInTheDocument();
|
|
}
|
|
});
|
|
it("한글 조합 도중 처음으로 돌아가도 새 세션의 입력은 정상 제출된다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(screen.getByRole("radio", { name: "직접 입력" }));
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.finish();
|
|
fireEvent.compositionStart(
|
|
screen.getByRole("textbox", { name: "들은 단어" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
await f.user.click(screen.getByRole("button", { name: "처음 화면으로" }));
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.finish();
|
|
fireEvent.compositionStart(
|
|
screen.getByRole("textbox", { name: "들은 단어" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: /다시 듣기/ }));
|
|
await f.finish();
|
|
await f.user.type(
|
|
screen.getByRole("textbox", { name: "들은 단어" }),
|
|
createQuestions(43, "text")[0]!.word.answer,
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "정답 확인" }));
|
|
expect(screen.getByText("정답이에요!")).toBeInTheDocument();
|
|
});
|
|
it("한글 조합을 확정하는 Enter는 채점하지 않고 다음 제출을 기다린다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(screen.getByRole("radio", { name: "직접 입력" }));
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.finish();
|
|
const textbox = screen.getByRole("textbox", { name: "들은 단어" });
|
|
fireEvent.compositionStart(textbox);
|
|
fireEvent.change(textbox, {
|
|
target: { value: createQuestions(42, "text")[0]!.word.answer },
|
|
});
|
|
fireEvent.submit(textbox.closest("form")!);
|
|
expect(screen.queryByText("정답이에요!")).not.toBeInTheDocument();
|
|
fireEvent.compositionEnd(textbox);
|
|
fireEvent.submit(textbox.closest("form")!);
|
|
expect(screen.getByText("정답이에요!")).toBeInTheDocument();
|
|
});
|
|
it("브랜드·버전·크레딧을 보여주며 직접 시작하기 전에는 재생하지 않는다", () => {
|
|
const f = fixture();
|
|
expect(
|
|
screen.getByRole("heading", { name: "단어를 맞춰라" }),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText("Designed by OZ at Heat-T Medical Inc.", {
|
|
exact: true,
|
|
}),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByText("v0.2.5")).toBeInTheDocument();
|
|
expect(f.audio.play).not.toHaveBeenCalled();
|
|
expect(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
).toBeEnabled();
|
|
});
|
|
it("재생 동안 답을 숨기고 중복 클릭을 막으며 끝나면 네 선택지에 접근할 수 있다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
expect(f.audio.play).toHaveBeenCalledTimes(1);
|
|
expect(
|
|
screen.queryByRole("group", { name: "답 선택" }),
|
|
).not.toBeInTheDocument();
|
|
expect(
|
|
screen.queryByText(createQuestions(42, "mixed")[0]!.sentence),
|
|
).not.toBeInTheDocument();
|
|
expect(screen.getByRole("button", { name: /듣는 중/ })).toBeDisabled();
|
|
fireEvent.click(screen.getByRole("button", { name: /듣는 중/ }));
|
|
expect(f.audio.play).toHaveBeenCalledTimes(1);
|
|
await f.finish();
|
|
const group = screen.getByRole("group", { name: "답 선택" });
|
|
expect(group.querySelectorAll("button")).toHaveLength(4);
|
|
expect(
|
|
screen.getByRole("heading", {
|
|
name: createQuestions(42, "mixed")[0]!.pattern.question,
|
|
}),
|
|
).toHaveFocus();
|
|
await f.user.click(screen.getByRole("button", { name: /다시 듣기/ }));
|
|
expect(f.audio.play).toHaveBeenCalledTimes(2);
|
|
await f.finish();
|
|
});
|
|
it("혼합 모드 세 문제를 키보드·텍스트로 풀고 결과에서 다시 시작한다", async () => {
|
|
const f = fixture();
|
|
const questions = createQuestions(42, "mixed");
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
for (let i = 0; i < questions.length; i++) {
|
|
if (i)
|
|
await f.user.click(screen.getByRole("button", { name: /문장 듣기/ }));
|
|
await f.finish();
|
|
const q = questions[i]!;
|
|
if (q.mode === "choice") {
|
|
screen.getByRole("button", { name: new RegExp(q.word.answer) }).focus();
|
|
await f.user.keyboard("{Enter}");
|
|
} else {
|
|
await f.user.type(
|
|
screen.getByRole("textbox", { name: "들은 단어" }),
|
|
` ${q.word.answer} `,
|
|
);
|
|
await f.user.keyboard("{Enter}");
|
|
}
|
|
expect(screen.getByText("정답이에요!")).toBeInTheDocument();
|
|
expect(screen.getByText(q.sentence)).toBeInTheDocument();
|
|
await f.user.click(
|
|
screen.getByRole("button", {
|
|
name: i === questions.length - 1 ? /결과 보기/ : /다음 문제/,
|
|
}),
|
|
);
|
|
}
|
|
expect(
|
|
screen.getByRole("heading", { name: /1단계 문제 풀이를 마쳤어요/ }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByText("100%")).toBeInTheDocument();
|
|
expect(
|
|
screen.getByRole("table", { name: "난이도별 결과" }),
|
|
).toBeInTheDocument();
|
|
await f.user.click(screen.getByRole("button", { name: "처음 화면으로" }));
|
|
expect(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
).toBeEnabled();
|
|
expect(f.audio.stop).toHaveBeenCalled();
|
|
});
|
|
it("오디오 오류를 알리고 재시도하며 나가면 장치를 정리한다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.fail();
|
|
expect(screen.getByRole("alert")).toHaveTextContent(
|
|
/소리를 재생하지 못했어요/,
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "다시 시도" }));
|
|
expect(f.audio.play).toHaveBeenCalledTimes(2);
|
|
await f.finish();
|
|
f.unmount();
|
|
expect(f.audio.dispose).toHaveBeenCalled();
|
|
});
|
|
it("선택한 주관식·배경 환경으로 시작하고 빈 답변을 제출하지 않는다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(screen.getByRole("radio", { name: /직접 입력/ }));
|
|
await f.user.selectOptions(screen.getByLabelText("배경 환경"), "rain");
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.finish();
|
|
expect(f.audio.play).toHaveBeenCalledWith(
|
|
expect.objectContaining({
|
|
mode: "text",
|
|
environment: expect.objectContaining({ id: "rain" }),
|
|
}),
|
|
true,
|
|
expect.any(Function),
|
|
);
|
|
expect(screen.getByRole("button", { name: "정답 확인" })).toBeDisabled();
|
|
await f.user.type(
|
|
screen.getByRole("textbox", { name: "들은 단어" }),
|
|
"<img src=x>",
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "정답 확인" }));
|
|
expect(screen.getByText("다음엔 찾을 수 있어요.")).toBeInTheDocument();
|
|
expect(document.querySelector("img")).toBeNull();
|
|
});
|
|
it("음량 조절이 엔진에 전달되고 세션 종료 뒤 늦은 완료는 무시한다", async () => {
|
|
const f = fixture();
|
|
fireEvent.change(screen.getByRole("slider", { name: "전체 음량" }), {
|
|
target: { value: "20" },
|
|
});
|
|
expect(f.audio.setVolume).toHaveBeenCalledWith(0.2);
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
await f.user.click(screen.getByRole("button", { name: "처음 화면으로" }));
|
|
await f.finish();
|
|
await waitFor(() =>
|
|
expect(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
).toBeEnabled(),
|
|
);
|
|
});
|
|
});
|
|
|
|
// 새 라운드의 시작 단계와 수동 SNR은 서로 독립적이다. 다음 단계에서도 명시적
|
|
// SNR은 유지하지만 홈으로 돌아온 뒤에는 그 단계의 기본값으로 초기화한다.
|
|
it("시작 단계·SNR 선택, 재청취, 남은 문제와 다음 단계 라운드에 설정을 적용한다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(screen.getByRole("radio", { name: "보기에서 선택" }));
|
|
await f.user.selectOptions(screen.getByLabelText("시작 난이도"), "4");
|
|
expect(screen.getByRole("slider", { name: "목표 음성 SNR" })).toHaveValue(
|
|
"-3",
|
|
);
|
|
fireEvent.change(screen.getByRole("slider", { name: "목표 음성 SNR" }), {
|
|
target: { value: "-8" },
|
|
});
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
expect(f.audio.play).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({ level: 4, db: -8 }),
|
|
true,
|
|
expect.any(Function),
|
|
);
|
|
fireEvent.change(screen.getByRole("slider", { name: "목표 음성 SNR" }), {
|
|
target: { value: "2" },
|
|
});
|
|
await f.finish();
|
|
await f.user.click(screen.getByRole("button", { name: /다시 듣기/ }));
|
|
expect(f.audio.play).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({ db: 2 }),
|
|
false,
|
|
expect.any(Function),
|
|
);
|
|
await f.finish();
|
|
for (let i = 0; i < 3; i++) {
|
|
if (i) {
|
|
await f.user.click(screen.getByRole("button", { name: /문장 듣기/ }));
|
|
await f.finish();
|
|
}
|
|
const question = vi.mocked(f.audio.play).mock.calls.at(-1)![0];
|
|
expect(question).toMatchObject({ level: 4, db: 2 });
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: new RegExp(question.word.answer) }),
|
|
);
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: i === 2 ? /결과 보기/ : /다음 문제/ }),
|
|
);
|
|
}
|
|
expect(screen.getByText("정답률 · 3/3")).toBeInTheDocument();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "다음 난이도 · 5단계" }),
|
|
);
|
|
expect(f.audio.play).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({ level: 5, db: 2 }),
|
|
true,
|
|
expect.any(Function),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
expect(screen.getByText("응답 0문항 · 정답 0문항")).toBeInTheDocument();
|
|
await f.user.click(screen.getByRole("button", { name: "처음 화면으로" }));
|
|
expect(screen.getByRole("slider", { name: "목표 음성 SNR" })).toHaveValue(
|
|
"-3",
|
|
);
|
|
await f.finish();
|
|
});
|
|
|
|
// loading과 playing에서 취소할 때 Promise가 늦게 완료되어도 결과/홈을 지킨다.
|
|
it.each([false, true])(
|
|
"오디오 started=%s 중 종료는 즉시 정지하고 결과를 거쳐 홈으로 간다",
|
|
async (started) => {
|
|
const f = fixture(started);
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
expect(f.audio.stop).toHaveBeenCalledOnce();
|
|
expect(
|
|
screen.getByRole("heading", { name: "문제 풀이를 중간에 종료했어요." }),
|
|
).toHaveFocus();
|
|
expect(screen.getByText("응답 0문항 · 정답 0문항")).toBeInTheDocument();
|
|
expect(
|
|
screen.queryByRole("button", { name: /다음 난이도/ }),
|
|
).not.toBeInTheDocument();
|
|
await f.finish();
|
|
expect(
|
|
screen.getByRole("heading", { name: "문제 풀이를 중간에 종료했어요." }),
|
|
).toBeInTheDocument();
|
|
await f.user.click(screen.getByRole("button", { name: "처음 화면으로" }));
|
|
expect(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
).toBeEnabled();
|
|
},
|
|
);
|
|
|
|
it("답변 피드백에서 종료하면 답한 한 문항만 집계한다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.finish();
|
|
await f.user.click(
|
|
screen.getByRole("button", {
|
|
name: new RegExp(createQuestions(42, "mixed")[0]!.word.answer),
|
|
}),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
expect(screen.getByText("응답 1문항 · 정답 1문항")).toBeInTheDocument();
|
|
expect(screen.getByText("정답률 · 1/1")).toBeInTheDocument();
|
|
});
|
|
|
|
it("5단계 완료는 6단계 대신 같은 단계의 새 세 문항을 시작한다", async () => {
|
|
const f = fixture();
|
|
await f.user.selectOptions(screen.getByLabelText("시작 난이도"), "5");
|
|
await f.user.click(screen.getByRole("radio", { name: "보기에서 선택" }));
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
for (let i = 0; i < 3; i++) {
|
|
if (i)
|
|
await f.user.click(screen.getByRole("button", { name: /문장 듣기/ }));
|
|
await f.finish();
|
|
const q = vi.mocked(f.audio.play).mock.calls.at(-1)![0];
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: new RegExp(q.word.answer) }),
|
|
);
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: i === 2 ? /결과 보기/ : /다음 문제/ }),
|
|
);
|
|
}
|
|
expect(
|
|
screen.queryByRole("button", { name: /다음 난이도/ }),
|
|
).not.toBeInTheDocument();
|
|
await f.user.click(screen.getByRole("button", { name: "5단계 다시 도전" }));
|
|
expect(f.audio.play).toHaveBeenLastCalledWith(
|
|
expect.objectContaining({ level: 5, db: -6 }),
|
|
true,
|
|
expect.any(Function),
|
|
);
|
|
expect(screen.getByRole("progressbar")).toHaveAttribute("max", "3");
|
|
expect(screen.getByRole("progressbar")).toHaveAttribute("value", "1");
|
|
await f.finish();
|
|
});
|
|
|
|
it("환경음 저작자·라이선스 고지를 같은 출처 링크로 제공한다", () => {
|
|
fixture();
|
|
expect(
|
|
screen.getByRole("link", { name: "환경음 출처·라이선스" }),
|
|
).toHaveAttribute("href", "/ambience/AMBIENCE_NOTICES.md");
|
|
});
|
|
|
|
it("결과 헤더에 존재하지 않는 플레이 방법 앵커를 표시하지 않는다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
expect(
|
|
screen.queryByRole("link", { name: "플레이 방법" }),
|
|
).not.toBeInTheDocument();
|
|
await f.finish();
|
|
});
|
|
|
|
it("세 문항 라운드에서 가능한 연속 정답 보너스 상한을 설명한다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
expect(
|
|
screen.getByText(
|
|
"정답마다 단계 × 100점 + 연속 정답 보너스 (문항별 최대 20점, 라운드 합계 최대 30점)",
|
|
),
|
|
).toBeInTheDocument();
|
|
await f.finish();
|
|
});
|
|
|
|
// 답변 전과 피드백 중에도 현재 문제 위치를 표시한다. 완주 점수와 안내를 함께 확인한다.
|
|
it("현재 문항 진행률은 1/3→2/3→3/3이고 1단계 만점은 330점이다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(screen.getByRole("radio", { name: "보기에서 선택" }));
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
for (let index = 0; index < 3; index++) {
|
|
const bar = screen.getByRole("progressbar", { name: "현재 문항 진행률" });
|
|
expect(bar).toHaveAttribute("max", "3");
|
|
expect(bar).toHaveAttribute("value", String(index + 1));
|
|
expect(bar).toHaveAttribute("aria-valuetext", `${index + 1}/3문항`);
|
|
if (index)
|
|
await f.user.click(screen.getByRole("button", { name: /문장 듣기/ }));
|
|
await f.finish();
|
|
const q = vi.mocked(f.audio.play).mock.calls.at(-1)![0];
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: new RegExp(q.word.answer) }),
|
|
);
|
|
expect(bar).toHaveAttribute("value", String(index + 1));
|
|
await f.user.click(
|
|
screen.getByRole("button", {
|
|
name: index === 2 ? /결과 보기/ : /다음 문제/,
|
|
}),
|
|
);
|
|
}
|
|
expect(
|
|
screen.getByRole("heading", { name: "1단계 문제 풀이를 마쳤어요." }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByText("330")).toBeInTheDocument();
|
|
expect(
|
|
screen.getByText(/문항별 최대 20점, 라운드 합계 최대 30점/),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it("무응답 종료는 정답률 대신 미응답 상태와 단계별 미진행을 보여 준다", async () => {
|
|
const f = fixture();
|
|
await f.user.click(
|
|
screen.getByRole("button", { name: "게임 시작 · 소리 듣기" }),
|
|
);
|
|
await f.user.click(screen.getByRole("button", { name: "문제 풀이 종료" }));
|
|
expect(
|
|
screen.getByRole("heading", { name: "문제 풀이를 중간에 종료했어요." }),
|
|
).toBeInTheDocument();
|
|
expect(screen.getByText("—")).toBeInTheDocument();
|
|
expect(screen.getByText("정답률 · 응답 없음")).toBeInTheDocument();
|
|
expect(screen.getAllByRole("cell", { name: "미진행" })).toHaveLength(5);
|
|
expect(document.body.textContent).not.toMatch(/0%|0\s*\/\s*0/);
|
|
await f.finish();
|
|
});
|