ui/phase-23: turn-report view with twenty sections and TOC
Replaces the Phase 10 report stub with a scrollable orchestrator that renders every FBS array as a dedicated section (galaxy summary, votes, player status, my/foreign sciences, my/foreign ship classes, battles, bombings, approaching groups, my/foreign/uninhabited/unknown planets, ships in production, cargo routes, my fleets, my/foreign/unidentified ship groups). A sticky table of contents (a <select> on mobile), "back to map" affordance, IntersectionObserver-driven active-section highlight, and SvelteKit Snapshot-based scroll save/restore round out the view. GameReport gains six new fields (players, otherScience, otherShipClass, battleIds, bombings, shipProductions); decodeReport, the synthetic- report loader, the e2e fixture builder, and EMPTY_SHIP_GROUPS extend in lockstep. ~90 new i18n keys land in en + ru together. The legacy-report parser is extended to populate the new sections from the dg/gplus text formats (Your Sciences, <Race> Sciences, <Race> Ship Types, Bombings, Ships In Production). Ships-in-production prod_used is derived through a new pkg/calc.ShipBuildCost helper; the engine's controller.ProduceShip refactors to call the same helper without any behaviour change (engine tests stay unchanged and green). Battles remain in the parser's Skipped list — the legacy text carries no stable per-battle UUID. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,156 @@
|
||||
// Vitest coverage for the Phase 23 Report View's table of contents.
|
||||
// Smokes the anchor list, the active-link state, the back-to-map
|
||||
// navigation, and the mobile <select> fallback. The
|
||||
// IntersectionObserver-driven active-section computation lives in
|
||||
// the orchestrator (`report.svelte`); this test only checks the
|
||||
// presentational pieces of the TOC.
|
||||
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import { fireEvent, render } from "@testing-library/svelte";
|
||||
import { beforeEach, describe, expect, test, vi } from "vitest";
|
||||
|
||||
import { i18n } from "../src/lib/i18n/index.svelte";
|
||||
import type { TranslationKey } from "../src/lib/i18n/index.svelte";
|
||||
|
||||
const gotoMock = vi.hoisted(() => vi.fn());
|
||||
vi.mock("$app/navigation", () => ({
|
||||
goto: gotoMock,
|
||||
}));
|
||||
|
||||
import ReportToc, {
|
||||
type TocEntry,
|
||||
} from "../src/lib/active-view/report/report-toc.svelte";
|
||||
|
||||
const ENTRIES: readonly TocEntry[] = [
|
||||
{ slug: "galaxy-summary", titleKey: "game.report.section.galaxy_summary.title" },
|
||||
{ slug: "votes", titleKey: "game.report.section.votes.title" },
|
||||
{ slug: "bombings", titleKey: "game.report.section.bombings.title" },
|
||||
];
|
||||
|
||||
beforeEach(() => {
|
||||
i18n.resetForTests("en");
|
||||
gotoMock.mockClear();
|
||||
});
|
||||
|
||||
describe("report TOC", () => {
|
||||
test("renders one anchor per entry and one option in the mobile select", () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary", gameId: "g-1" },
|
||||
});
|
||||
for (const e of ENTRIES) {
|
||||
expect(ui.getByTestId(`report-toc-${e.slug}`)).toBeInTheDocument();
|
||||
}
|
||||
const mobile = ui.getByTestId("report-toc-mobile") as HTMLSelectElement;
|
||||
expect(mobile.options).toHaveLength(ENTRIES.length);
|
||||
expect(mobile.value).toBe("galaxy-summary");
|
||||
});
|
||||
|
||||
test("marks the active anchor with aria-current=location and a class", () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "bombings", gameId: "g-1" },
|
||||
});
|
||||
const active = ui.getByTestId("report-toc-bombings");
|
||||
expect(active).toHaveAttribute("aria-current", "location");
|
||||
expect(active).toHaveClass("active");
|
||||
|
||||
const inactive = ui.getByTestId("report-toc-votes");
|
||||
expect(inactive).not.toHaveAttribute("aria-current");
|
||||
expect(inactive).not.toHaveClass("active");
|
||||
});
|
||||
|
||||
test("back-to-map button calls goto with the active game's map URL", async () => {
|
||||
const ui = render(ReportToc, {
|
||||
props: {
|
||||
entries: ENTRIES,
|
||||
activeSlug: "galaxy-summary",
|
||||
gameId: "abc",
|
||||
},
|
||||
});
|
||||
const button = ui.getByTestId("report-back-to-map");
|
||||
await fireEvent.click(button);
|
||||
expect(gotoMock).toHaveBeenCalledWith("/games/abc/map");
|
||||
});
|
||||
|
||||
test("anchor click cancels the default jump and calls scrollIntoView on the target", async () => {
|
||||
// Stub `scrollIntoView` on the target — jsdom does not
|
||||
// implement it. The TOC also reads
|
||||
// `prefers-reduced-motion`; the matchMedia stub forces a
|
||||
// stable `behavior: "auto"` so the assertion is reproducible.
|
||||
const scrollSpy = vi.fn();
|
||||
const target = document.createElement("section");
|
||||
target.id = "report-bombings";
|
||||
target.scrollIntoView = scrollSpy;
|
||||
document.body.appendChild(target);
|
||||
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
writable: true,
|
||||
value: (query: string) => ({
|
||||
matches: query.includes("reduce"),
|
||||
media: query,
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
dispatchEvent: () => false,
|
||||
}),
|
||||
});
|
||||
|
||||
const ui = render(ReportToc, {
|
||||
props: { entries: ENTRIES, activeSlug: "galaxy-summary", gameId: "g" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("report-toc-bombings"));
|
||||
expect(scrollSpy).toHaveBeenCalledWith({
|
||||
behavior: "auto",
|
||||
block: "start",
|
||||
});
|
||||
target.remove();
|
||||
});
|
||||
|
||||
test("mobile select scrolls to the chosen section without navigating", async () => {
|
||||
const scrollSpy = vi.fn();
|
||||
const target = document.createElement("section");
|
||||
target.id = "report-votes";
|
||||
target.scrollIntoView = scrollSpy;
|
||||
document.body.appendChild(target);
|
||||
|
||||
Object.defineProperty(window, "matchMedia", {
|
||||
writable: true,
|
||||
value: () => ({
|
||||
matches: false,
|
||||
media: "(prefers-reduced-motion: no-preference)",
|
||||
onchange: null,
|
||||
addListener: () => {},
|
||||
removeListener: () => {},
|
||||
addEventListener: () => {},
|
||||
removeEventListener: () => {},
|
||||
dispatchEvent: () => false,
|
||||
}),
|
||||
});
|
||||
|
||||
const ui = render(ReportToc, {
|
||||
props: {
|
||||
entries: ENTRIES,
|
||||
activeSlug: "galaxy-summary",
|
||||
gameId: "g",
|
||||
},
|
||||
});
|
||||
const select = ui.getByTestId("report-toc-mobile") as HTMLSelectElement;
|
||||
await fireEvent.change(select, { target: { value: "votes" } });
|
||||
expect(scrollSpy).toHaveBeenCalled();
|
||||
expect(gotoMock).not.toHaveBeenCalled();
|
||||
target.remove();
|
||||
});
|
||||
|
||||
// Tests intentionally validate the *type* of the entries prop is
|
||||
// exposed correctly so future widening of the list does not
|
||||
// silently drop entries. TypeScript already enforces this through
|
||||
// `TocEntry`; the assertion below is a soft check so a stray
|
||||
// `as unknown as ...` cast surfaces fast.
|
||||
test("TocEntry exposes a slug and a TranslationKey", () => {
|
||||
const slug: string = ENTRIES[0]!.slug;
|
||||
const key: TranslationKey = ENTRIES[0]!.titleKey;
|
||||
expect(typeof slug).toBe("string");
|
||||
expect(typeof key).toBe("string");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user