feat(ui): F8-10 — tables planets / ship-groups / fleets, ship-classes delete guard (#53)

Lights up three previously-stubbed table active views and tightens the existing one: - table-planets: 4 kind checkboxes (own / foreign / uninhabited / unknown) + race dropdown that filters the foreign slice; row click selects + centres the planet on the map. - table-ship-groups: local + foreign groups in one grid, owner checkboxes, planet dropdown (destination OR origin), class dropdown; on-planet click focuses the destination planet, in-space click focuses the ship group itself (camera follows interpolated position). - table-fleets: own fleets only with the shared planet dropdown; on-planet click focuses the planet, in-space click centres the camera on the interpolated fleet position without altering the selection (no fleet variant in Selected). - table-ship-classes: per-row Delete is disabled with a count tooltip while at least one local ship group references the class. The engine refuses the removal anyway; the UI pre-empts the surface. Wires the click → map flow through a transient `SelectionStore.focus` / `focusPoint` channel that `map.svelte` consumes once on mount — in-memory only, so an F5 does not re-centre. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-27 20:35:38 +02:00
parent ef4cecb4b2
commit 80ed11e3b6
17 changed files with 2537 additions and 22 deletions
@@ -0,0 +1,210 @@
+// Vitest coverage for the F8-10 planets table active view.
+// The component is mounted against a synthetic `RenderedReportSource`
+// (kind discriminants set per case) and a real `SelectionStore`, so
+// the click → focus contract is exercised end-to-end without needing
+// the live map renderer.
+
+import "@testing-library/jest-dom/vitest";
+import { fireEvent, render } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+
+import { i18n } from "../src/lib/i18n/index.svelte";
+import type { GameReport, ReportPlanet } from "../src/api/game-state";
+import { RENDERED_REPORT_CONTEXT_KEY } from "../src/lib/rendered-report.svelte";
+import {
+	SELECTION_CONTEXT_KEY,
+	SelectionStore,
+} from "../src/lib/selection.svelte";
+import { activeView } from "../src/lib/app-nav.svelte";
+import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";
+
+const pageMock = vi.hoisted(() => ({
+	url: new URL("http://localhost/games/g1/table/planets"),
+	params: { id: "g1" } as Record<string, string>,
+}));
+
+const gotoMock = vi.hoisted(() => vi.fn());
+
+vi.mock("$app/state", () => ({
+	page: pageMock,
+}));
+
+vi.mock("$app/navigation", () => ({
+	goto: gotoMock,
+	pushState: vi.fn(),
+	replaceState: vi.fn(),
+}));
+
+import TablePlanets from "../src/lib/active-view/table-planets.svelte";
+
+let selection: SelectionStore;
+
+beforeEach(() => {
+	selection = new SelectionStore();
+	i18n.resetForTests("en");
+	pageMock.params = { id: "g1" };
+	gotoMock.mockClear();
+	activeView.reset();
+});
+
+afterEach(() => {
+	selection.dispose();
+});
+
+function planet(overrides: Partial<ReportPlanet> & { number: number }): ReportPlanet {
+	return {
+		name: `P${overrides.number}`,
+		x: 0,
+		y: 0,
+		kind: "uninhabited",
+		owner: null,
+		size: null,
+		resources: null,
+		industryStockpile: null,
+		materialsStockpile: null,
+		industry: null,
+		population: null,
+		colonists: null,
+		production: null,
+		freeIndustry: null,
+		...overrides,
+	};
+}
+
+function makeReport(planets: ReportPlanet[]): GameReport {
+	return {
+		turn: 1,
+		mapWidth: 1000,
+		mapHeight: 1000,
+		planetCount: planets.length,
+		planets,
+		race: "Me",
+		localShipClass: [],
+		routes: [],
+		localPlayerDrive: 0,
+		localPlayerWeapons: 0,
+		localPlayerShields: 0,
+		localPlayerCargo: 0,
+		...EMPTY_SHIP_GROUPS,
+	};
+}
+
+function mount(report: GameReport | null) {
+	const renderedReport = {
+		get report() {
+			return report;
+		},
+	};
+	const context = new Map<unknown, unknown>([
+		[RENDERED_REPORT_CONTEXT_KEY, renderedReport],
+		[SELECTION_CONTEXT_KEY, selection],
+	]);
+	return render(TablePlanets, { context });
+}
+
+describe("planets table", () => {
+	test("renders a loading placeholder before the report lands", () => {
+		const ui = mount(null);
+		expect(ui.getByTestId("planets-loading")).toBeInTheDocument();
+	});
+
+	test("renders an empty placeholder when the report has no planets", () => {
+		const ui = mount(makeReport([]));
+		expect(ui.getByTestId("planets-empty")).toBeInTheDocument();
+	});
+
+	test("renders one row per planet with kind classification", () => {
+		const ui = mount(
+			makeReport([
+				planet({ number: 1, name: "Earth", kind: "local" }),
+				planet({
+					number: 2,
+					name: "Vega",
+					kind: "other",
+					owner: "Klingon",
+				}),
+				planet({ number: 3, name: "Rock", kind: "uninhabited" }),
+				planet({ number: 4, name: "", kind: "unidentified" }),
+			]),
+		);
+		const rows = ui.getAllByTestId("planets-row");
+		expect(rows).toHaveLength(4);
+		expect(rows[0]).toHaveAttribute("data-kind", "local");
+		expect(rows[1]).toHaveAttribute("data-kind", "other");
+	});
+
+	test("kind checkboxes filter the visible rows independently", async () => {
+		const ui = mount(
+			makeReport([
+				planet({ number: 1, kind: "local" }),
+				planet({ number: 2, kind: "other", owner: "A" }),
+				planet({ number: 3, kind: "uninhabited" }),
+				planet({ number: 4, kind: "unidentified" }),
+			]),
+		);
+		await fireEvent.click(ui.getByTestId("planets-filter-own"));
+		let kinds = ui
+			.getAllByTestId("planets-row")
+			.map((r) => r.getAttribute("data-kind"));
+		expect(kinds).toEqual(["other", "uninhabited", "unidentified"]);
+		await fireEvent.click(ui.getByTestId("planets-filter-uninhabited"));
+		kinds = ui
+			.getAllByTestId("planets-row")
+			.map((r) => r.getAttribute("data-kind"));
+		expect(kinds).toEqual(["other", "unidentified"]);
+	});
+
+	test("owner dropdown narrows the foreign slice only", async () => {
+		const ui = mount(
+			makeReport([
+				planet({ number: 1, kind: "local" }),
+				planet({ number: 2, kind: "other", owner: "Klingon" }),
+				planet({ number: 3, kind: "other", owner: "Romulan" }),
+				planet({ number: 4, kind: "uninhabited" }),
+			]),
+		);
+		const select = ui.getByTestId(
+			"planets-filter-owner",
+		) as HTMLSelectElement;
+		await fireEvent.change(select, { target: { value: "Klingon" } });
+		const numbers = ui
+			.getAllByTestId("planets-row")
+			.map((r) => r.getAttribute("data-number"));
+		// own (1) + foreign Klingon (2) + uninhabited (4); Romulan dropped
+		expect(numbers).toEqual(["1", "2", "4"]);
+	});
+
+	test("clicking a row focuses the planet and switches the active view", async () => {
+		const ui = mount(
+			makeReport([
+				planet({ number: 7, kind: "local", name: "Earth", x: 12, y: 34 }),
+			]),
+		);
+		await fireEvent.click(ui.getByTestId("planets-row"));
+		expect(selection.selected).toEqual({ kind: "planet", id: 7 });
+		expect(selection.consumePendingFocus()).toEqual({
+			kind: "planet",
+			id: 7,
+		});
+		expect(activeView.view).toBe("map");
+	});
+
+	test("number column sorts ascending then descending", async () => {
+		const ui = mount(
+			makeReport([
+				planet({ number: 3, kind: "local" }),
+				planet({ number: 1, kind: "local" }),
+				planet({ number: 2, kind: "local" }),
+			]),
+		);
+		const numbers = ui
+			.getAllByTestId("planets-row")
+			.map((r) => r.getAttribute("data-number"));
+		expect(numbers).toEqual(["1", "2", "3"]);
+		await fireEvent.click(ui.getByTestId("planets-column-number"));
+		const reversed = ui
+			.getAllByTestId("planets-row")
+			.map((r) => r.getAttribute("data-number"));
+		expect(reversed).toEqual(["3", "2", "1"]);
+	});
+});