test(ui): migrate suite to the app-shell (state-driven navigation)
- Unit: repoint moved screen imports (lib/screens, lib/game), mock $lib/app-nav (appScreen/activeView) instead of $app/navigation, drop the removed gameId props, assert screen/view selection. - e2e: add a dev-only window.__galaxyNav affordance; specs enter a game via enterGame(...) instead of a /games/:id URL; URL assertions become content assertions (the URL stays /game/); reload uses waitUntil:"commit" (shallow routing) and mocks /rpc on game entry. - Remove the obsolete report scroll-restore test (it relied on a SvelteKit route Snapshot that no longer exists); update the missing-membership test to the new lobby-redirect+toast behaviour. Fix a stale report.svelte docstring. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -3,9 +3,10 @@
|
||||
// the lobby / report calls are in flight), the Phase 26 turn
|
||||
// navigator (`← turn N →` with a popover of every turn), the
|
||||
// view-menu, and the account-menu. The tests assert the visible
|
||||
// copy, that every view-menu entry dispatches `goto` with the right
|
||||
// URL, and that the Logout entry of the account-menu calls
|
||||
// `session.signOut("user")`.
|
||||
// copy, that every view-menu entry switches the active in-game view
|
||||
// via `activeView.select(...)` (the single-URL app-shell has no
|
||||
// per-view routes), and that the Logout entry of the account-menu
|
||||
// calls `session.signOut("user")`.
|
||||
|
||||
import "@testing-library/jest-dom/vitest";
|
||||
import { fireEvent, render } from "@testing-library/svelte";
|
||||
@@ -57,14 +58,22 @@ function withGameState(opts: {
|
||||
return new Map<unknown, unknown>([[GAME_STATE_CONTEXT_KEY, store]]);
|
||||
}
|
||||
|
||||
const gotoSpy = vi.fn(async (..._args: unknown[]) => {});
|
||||
vi.mock("$app/navigation", () => ({
|
||||
goto: (...args: unknown[]) => gotoSpy(...args),
|
||||
// The view-menu switches the active in-game view through
|
||||
// `activeView.select(...)`, and the header's return-to-lobby button
|
||||
// leaves the game through `appScreen.go("lobby")`; both internally
|
||||
// call SvelteKit `pushState`. Mock the whole nav module so the spies
|
||||
// capture the transitions and no real history mutation runs in JSDOM.
|
||||
const activeViewSelectSpy = vi.fn();
|
||||
const appScreenGoSpy = vi.fn();
|
||||
vi.mock("$lib/app-nav.svelte", () => ({
|
||||
activeView: { select: (...args: unknown[]) => activeViewSelectSpy(...args) },
|
||||
appScreen: { go: (...args: unknown[]) => appScreenGoSpy(...args) },
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
i18n.resetForTests("en");
|
||||
gotoSpy.mockReset();
|
||||
activeViewSelectSpy.mockReset();
|
||||
appScreenGoSpy.mockReset();
|
||||
vi.spyOn(session, "signOut").mockResolvedValue(undefined);
|
||||
});
|
||||
|
||||
@@ -76,7 +85,7 @@ describe("game-shell header", () => {
|
||||
test("renders fall-back placeholders before the lobby / report data lands", () => {
|
||||
const onToggleSidebar = vi.fn();
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar },
|
||||
props: { sidebarOpen: false, onToggleSidebar },
|
||||
context: withGameState(),
|
||||
});
|
||||
expect(ui.getByTestId("game-shell-identity")).toHaveTextContent(
|
||||
@@ -91,7 +100,7 @@ describe("game-shell header", () => {
|
||||
|
||||
test("renders the live race / game / turn from GameStateStore", () => {
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
context: withGameState({
|
||||
gameName: "Phase 14",
|
||||
race: "Federation",
|
||||
@@ -108,7 +117,7 @@ describe("game-shell header", () => {
|
||||
|
||||
test("partial data still falls back gracefully (race known, game unknown)", () => {
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
context: withGameState({ race: "Federation", turn: 3 }),
|
||||
});
|
||||
expect(ui.getByTestId("game-shell-identity")).toHaveTextContent(
|
||||
@@ -122,54 +131,45 @@ describe("game-shell header", () => {
|
||||
test("clicking the sidebar toggle invokes the prop callback", async () => {
|
||||
const onToggleSidebar = vi.fn();
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar },
|
||||
props: { sidebarOpen: false, onToggleSidebar },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("sidebar-toggle"));
|
||||
expect(onToggleSidebar).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test("view-menu navigates to every IA destination", async () => {
|
||||
test("view-menu switches the active view for every IA destination", async () => {
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
});
|
||||
|
||||
const destinations: Array<[string, string]> = [
|
||||
["view-menu-item-map", "/games/g1/map"],
|
||||
["view-menu-item-report", "/games/g1/report"],
|
||||
["view-menu-item-battle", "/games/g1/battle"],
|
||||
["view-menu-item-mail", "/games/g1/mail"],
|
||||
[
|
||||
"view-menu-item-designer-science",
|
||||
"/games/g1/designer/science",
|
||||
],
|
||||
["view-menu-item-map", "map"],
|
||||
["view-menu-item-report", "report"],
|
||||
["view-menu-item-battle", "battle"],
|
||||
["view-menu-item-mail", "mail"],
|
||||
["view-menu-item-designer-science", "designer-science"],
|
||||
];
|
||||
|
||||
for (const [testId, href] of destinations) {
|
||||
for (const [testId, view] of destinations) {
|
||||
await fireEvent.click(ui.getByTestId("view-menu-trigger"));
|
||||
await fireEvent.click(ui.getByTestId(testId));
|
||||
expect(gotoSpy).toHaveBeenLastCalledWith(href);
|
||||
expect(activeViewSelectSpy).toHaveBeenLastCalledWith(view, {});
|
||||
}
|
||||
});
|
||||
|
||||
test("view-menu Tables sub-list navigates to every entity", async () => {
|
||||
test("view-menu Tables sub-list switches to every entity", async () => {
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
});
|
||||
const tableEntities: Array<[string, string]> = [
|
||||
["view-menu-item-table-planets", "/games/g1/table/planets"],
|
||||
[
|
||||
"view-menu-item-table-ship-classes",
|
||||
"/games/g1/table/ship-classes",
|
||||
],
|
||||
[
|
||||
"view-menu-item-table-ship-groups",
|
||||
"/games/g1/table/ship-groups",
|
||||
],
|
||||
["view-menu-item-table-fleets", "/games/g1/table/fleets"],
|
||||
["view-menu-item-table-sciences", "/games/g1/table/sciences"],
|
||||
["view-menu-item-table-races", "/games/g1/table/races"],
|
||||
["view-menu-item-table-planets", "planets"],
|
||||
["view-menu-item-table-ship-classes", "ship-classes"],
|
||||
["view-menu-item-table-ship-groups", "ship-groups"],
|
||||
["view-menu-item-table-fleets", "fleets"],
|
||||
["view-menu-item-table-sciences", "sciences"],
|
||||
["view-menu-item-table-races", "races"],
|
||||
];
|
||||
for (const [testId, href] of tableEntities) {
|
||||
for (const [testId, entity] of tableEntities) {
|
||||
await fireEvent.click(ui.getByTestId("view-menu-trigger"));
|
||||
// Open the Tables sub-disclosure each iteration; the menu
|
||||
// closes on every navigation.
|
||||
@@ -180,13 +180,23 @@ describe("game-shell header", () => {
|
||||
await fireEvent.click(summary);
|
||||
}
|
||||
await fireEvent.click(ui.getByTestId(testId));
|
||||
expect(gotoSpy).toHaveBeenLastCalledWith(href);
|
||||
expect(activeViewSelectSpy).toHaveBeenLastCalledWith("table", {
|
||||
tableEntity: entity,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
test("return-to-lobby button leaves the game for the lobby screen", async () => {
|
||||
const ui = render(Header, {
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("return-to-lobby"));
|
||||
expect(appScreenGoSpy).toHaveBeenCalledWith("lobby");
|
||||
});
|
||||
|
||||
test("account-menu Logout triggers session.signOut('user')", async () => {
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("account-menu-trigger"));
|
||||
await fireEvent.click(ui.getByTestId("account-menu-logout"));
|
||||
@@ -195,7 +205,7 @@ describe("game-shell header", () => {
|
||||
|
||||
test("account-menu language picker switches the i18n locale", async () => {
|
||||
const ui = render(Header, {
|
||||
props: { gameId: "g1", sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
props: { sidebarOpen: false, onToggleSidebar: () => {} },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("account-menu-trigger"));
|
||||
const select = ui.getByTestId("account-menu-language-select");
|
||||
|
||||
Reference in New Issue
Block a user