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>
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,219 @@
|
||||
// Vitest coverage for the F8-10 fleets table active view.
|
||||
// Mounts the component against a synthetic `RenderedReportSource`
|
||||
// and a real `SelectionStore`; verifies the click semantics for both
|
||||
// on-planet (focus the destination planet) and in-space (centre the
|
||||
// camera on the interpolated point, leave selection untouched).
|
||||
|
||||
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,
|
||||
ReportLocalFleet,
|
||||
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/fleets"),
|
||||
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 TableFleets from "../src/lib/active-view/table-fleets.svelte";
|
||||
|
||||
let selection: SelectionStore;
|
||||
|
||||
beforeEach(() => {
|
||||
selection = new SelectionStore();
|
||||
i18n.resetForTests("en");
|
||||
pageMock.params = { id: "g1" };
|
||||
gotoMock.mockClear();
|
||||
activeView.reset();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
selection.dispose();
|
||||
});
|
||||
|
||||
function planet(num: number, x = 0, y = 0): ReportPlanet {
|
||||
return {
|
||||
number: num,
|
||||
name: `P${num}`,
|
||||
x,
|
||||
y,
|
||||
kind: "local",
|
||||
owner: null,
|
||||
size: null,
|
||||
resources: null,
|
||||
industryStockpile: null,
|
||||
materialsStockpile: null,
|
||||
industry: null,
|
||||
population: null,
|
||||
colonists: null,
|
||||
production: null,
|
||||
freeIndustry: null,
|
||||
};
|
||||
}
|
||||
|
||||
function fleet(
|
||||
overrides: Partial<ReportLocalFleet> & Pick<ReportLocalFleet, "name" | "destination">,
|
||||
): ReportLocalFleet {
|
||||
return {
|
||||
groupCount: 1,
|
||||
origin: null,
|
||||
range: null,
|
||||
speed: 0,
|
||||
state: "In_Orbit",
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
function makeReport(opts: {
|
||||
planets?: ReportPlanet[];
|
||||
fleets?: ReportLocalFleet[];
|
||||
}): GameReport {
|
||||
return {
|
||||
turn: 1,
|
||||
mapWidth: 1000,
|
||||
mapHeight: 1000,
|
||||
planetCount: opts.planets?.length ?? 0,
|
||||
planets: opts.planets ?? [],
|
||||
race: "Me",
|
||||
localShipClass: [],
|
||||
routes: [],
|
||||
localPlayerDrive: 0,
|
||||
localPlayerWeapons: 0,
|
||||
localPlayerShields: 0,
|
||||
localPlayerCargo: 0,
|
||||
...EMPTY_SHIP_GROUPS,
|
||||
localFleets: opts.fleets ?? [],
|
||||
};
|
||||
}
|
||||
|
||||
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(TableFleets, { context });
|
||||
}
|
||||
|
||||
describe("fleets table", () => {
|
||||
test("renders a loading placeholder before the report lands", () => {
|
||||
const ui = mount(null);
|
||||
expect(ui.getByTestId("fleets-loading")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders an empty placeholder when no fleets exist", () => {
|
||||
const ui = mount(makeReport({ planets: [planet(1)] }));
|
||||
expect(ui.getByTestId("fleets-empty")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test("renders one row per fleet", () => {
|
||||
const ui = mount(
|
||||
makeReport({
|
||||
planets: [planet(1), planet(2)],
|
||||
fleets: [
|
||||
fleet({ name: "Alpha", destination: 1 }),
|
||||
fleet({
|
||||
name: "Bravo",
|
||||
destination: 2,
|
||||
origin: 1,
|
||||
range: 4,
|
||||
state: "In_Space",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
);
|
||||
expect(ui.getAllByTestId("fleets-row")).toHaveLength(2);
|
||||
});
|
||||
|
||||
test("planet dropdown filters by destination OR origin", async () => {
|
||||
const ui = mount(
|
||||
makeReport({
|
||||
planets: [planet(1), planet(2), planet(3)],
|
||||
fleets: [
|
||||
fleet({ name: "Alpha", destination: 1 }),
|
||||
fleet({
|
||||
name: "Bravo",
|
||||
destination: 3,
|
||||
origin: 2,
|
||||
range: 4,
|
||||
state: "In_Space",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
);
|
||||
const sel = ui.getByTestId("fleets-filter-planet") as HTMLSelectElement;
|
||||
await fireEvent.change(sel, { target: { value: "2" } });
|
||||
const names = ui
|
||||
.getAllByTestId("fleets-row")
|
||||
.map((r) => r.getAttribute("data-name"));
|
||||
expect(names).toEqual(["Bravo"]);
|
||||
});
|
||||
|
||||
test("click on on-planet fleet focuses the destination planet", async () => {
|
||||
const ui = mount(
|
||||
makeReport({
|
||||
planets: [planet(7)],
|
||||
fleets: [fleet({ name: "Alpha", destination: 7 })],
|
||||
}),
|
||||
);
|
||||
await fireEvent.click(ui.getByTestId("fleets-row"));
|
||||
expect(selection.selected).toEqual({ kind: "planet", id: 7 });
|
||||
expect(selection.consumePendingFocus()).toEqual({
|
||||
kind: "planet",
|
||||
id: 7,
|
||||
});
|
||||
expect(activeView.view).toBe("map");
|
||||
});
|
||||
|
||||
test("click on in-space fleet centres camera point and leaves selection alone", async () => {
|
||||
const ui = mount(
|
||||
makeReport({
|
||||
planets: [planet(1, 0, 0), planet(2, 100, 0)],
|
||||
fleets: [
|
||||
fleet({
|
||||
name: "Bravo",
|
||||
destination: 2,
|
||||
origin: 1,
|
||||
range: 25,
|
||||
state: "In_Space",
|
||||
}),
|
||||
],
|
||||
}),
|
||||
);
|
||||
expect(selection.selected).toBeNull();
|
||||
await fireEvent.click(ui.getByTestId("fleets-row"));
|
||||
expect(selection.selected).toBeNull();
|
||||
// 25 world units away from dest (2 at x=100) toward origin (1 at x=0):
|
||||
// dest + (range/total)*(origin-dest) = 100 + 0.25 * -100 = 75
|
||||
expect(selection.consumePendingCenter()).toEqual({ x: 75, y: 0 });
|
||||
expect(activeView.view).toBe("map");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user