galaxy-game/ui/frontend/tests/table-ship-classes.test.ts

// Vitest coverage for the Phase 17 ship-classes table active view.
// The component renders against a synthetic `RenderedReportSource`
// (so the suite does not need a live `GameStateStore`) and a real
// `OrderDraftStore` (so the per-row Delete affordance exercises
// the `removeShipClass` add path including persistence).

import "@testing-library/jest-dom/vitest";
import "fake-indexeddb/auto";
import { fireEvent, render, waitFor } from "@testing-library/svelte";
import {
	afterEach,
	beforeEach,
	describe,
	expect,
	test,
	vi,
} from "vitest";

import { i18n } from "../src/lib/i18n/index.svelte";
import type {
	GameReport,
	ReportLocalShipGroup,
	ShipClassSummary,
} from "../src/api/game-state";
import {
	ORDER_DRAFT_CONTEXT_KEY,
	OrderDraftStore,
} from "../src/sync/order-draft.svelte";
import { RENDERED_REPORT_CONTEXT_KEY } from "../src/lib/rendered-report.svelte";
import { calculatorLoadRequest } from "../src/lib/calculator/load-request.svelte";
import { IDBCache } from "../src/platform/store/idb-cache";
import { openGalaxyDB, type GalaxyDB } from "../src/platform/store/idb";
import type { Cache } from "../src/platform/store/index";
import type { IDBPDatabase } from "idb";
import { EMPTY_SHIP_GROUPS } from "./helpers/empty-ship-groups";

const GAME_ID = "11111111-2222-3333-4444-555555555555";

const pageMock = vi.hoisted(() => ({
	url: new URL("http://localhost/games/g1/table/ship-classes"),
	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,
}));

import TableShipClasses from "../src/lib/active-view/table-ship-classes.svelte";

let db: IDBPDatabase<GalaxyDB>;
let dbName: string;
let cache: Cache;
let draft: OrderDraftStore;

beforeEach(async () => {
	dbName = `galaxy-table-ship-classes-${crypto.randomUUID()}`;
	db = await openGalaxyDB(dbName);
	cache = new IDBCache(db);
	draft = new OrderDraftStore();
	await draft.init({ cache, gameId: GAME_ID });
	i18n.resetForTests("en");
	pageMock.params = { id: "g1" };
	gotoMock.mockClear();
});

afterEach(async () => {
	draft.dispose();
	db.close();
	await new Promise<void>((resolve) => {
		const req = indexedDB.deleteDatabase(dbName);
		req.onsuccess = () => resolve();
		req.onerror = () => resolve();
		req.onblocked = () => resolve();
	});
});

function shipClass(
	overrides: Partial<ShipClassSummary> & Pick<ShipClassSummary, "name">,
): ShipClassSummary {
	return {
		drive: 0,
		armament: 0,
		weapons: 0,
		shields: 0,
		cargo: 0,
		...overrides,
	};
}

function makeReport(
	localShipClass: ShipClassSummary[],
	localShipGroups: ReportLocalShipGroup[] = [],
): GameReport {
	return {
		turn: 1,
		mapWidth: 1000,
		mapHeight: 1000,
		planetCount: 0,
		planets: [],
		race: "",
		localShipClass,
		routes: [],
		localPlayerDrive: 0,
		localPlayerWeapons: 0,
		localPlayerShields: 0,
		localPlayerCargo: 0,
		...EMPTY_SHIP_GROUPS,
		localShipGroups,
	};
}

function shipGroup(
	overrides: Partial<ReportLocalShipGroup> &
		Pick<ReportLocalShipGroup, "class">,
): ReportLocalShipGroup {
	return {
		id: crypto.randomUUID(),
		state: "In_Orbit",
		fleet: null,
		count: 1,
		tech: { drive: 0, weapons: 0, shields: 0, cargo: 0 },
		cargo: "NONE",
		load: 0,
		destination: 1,
		origin: null,
		range: null,
		speed: 0,
		mass: 0,
		race: "Foo",
		...overrides,
	};
}

function mountTable(report: GameReport | null) {
	const renderedReport = { get report() { return report; } };
	const context = new Map<unknown, unknown>([
		[ORDER_DRAFT_CONTEXT_KEY, draft],
		[RENDERED_REPORT_CONTEXT_KEY, renderedReport],
	]);
	return render(TableShipClasses, { context });
}

describe("ship-classes table", () => {
	test("renders a loading placeholder before the report lands", () => {
		const ui = mountTable(null);
		expect(ui.getByTestId("ship-classes-loading")).toBeInTheDocument();
	});

	test("renders an empty placeholder when no classes are designed", () => {
		const ui = mountTable(makeReport([]));
		expect(ui.getByTestId("ship-classes-empty")).toBeInTheDocument();
	});

	test("renders one row per ship class with full attributes", () => {
		const ui = mountTable(
			makeReport([
				shipClass({
					name: "Cruiser",
					drive: 15,
					armament: 1,
					weapons: 15,
					shields: 15,
					cargo: 0,
				}),
			]),
		);
		const rows = ui.getAllByTestId("ship-classes-row");
		expect(rows).toHaveLength(1);
		expect(rows[0]).toHaveAttribute("data-name", "Cruiser");
		expect(ui.getByTestId("ship-classes-cell-drive")).toHaveTextContent("15");
		expect(ui.getByTestId("ship-classes-cell-armament")).toHaveTextContent("1");
	});

	test("filters rows by case-insensitive name match", async () => {
		const ui = mountTable(
			makeReport([
				shipClass({ name: "Drone", drive: 1 }),
				shipClass({ name: "Cruiser", drive: 15, armament: 1, weapons: 15 }),
			]),
		);
		await fireEvent.input(ui.getByTestId("ship-classes-filter"), {
			target: { value: "cru" },
		});
		const rows = ui.getAllByTestId("ship-classes-row");
		expect(rows).toHaveLength(1);
		expect(rows[0]).toHaveAttribute("data-name", "Cruiser");
	});

	test("toggles sort direction when the same column is clicked twice", async () => {
		const ui = mountTable(
			makeReport([
				shipClass({ name: "Drone", drive: 1 }),
				shipClass({
					name: "Cruiser",
					drive: 15,
					armament: 1,
					weapons: 15,
					shields: 15,
				}),
				shipClass({ name: "Battleship", drive: 25 }),
			]),
		);
		const driveHeader = ui.getByTestId("ship-classes-column-drive");
		await fireEvent.click(driveHeader);
		let names = ui
			.getAllByTestId("ship-classes-row")
			.map((row) => row.getAttribute("data-name"));
		expect(names).toEqual(["Drone", "Cruiser", "Battleship"]);
		await fireEvent.click(driveHeader);
		names = ui
			.getAllByTestId("ship-classes-row")
			.map((row) => row.getAttribute("data-name"));
		expect(names).toEqual(["Battleship", "Cruiser", "Drone"]);
	});

	test("dblclick on a row requests the calculator for that class", async () => {
		const ui = mountTable(
			makeReport([shipClass({ name: "Drone", drive: 1 })]),
		);
		const before = calculatorLoadRequest.token;
		await fireEvent.dblClick(ui.getByTestId("ship-classes-row"));
		expect(calculatorLoadRequest.token).toBe(before + 1);
		expect(calculatorLoadRequest.name).toBe("Drone");
	});

	test("delete button adds a removeShipClass to the draft", async () => {
		const ui = mountTable(
			makeReport([shipClass({ name: "Drone", drive: 1 })]),
		);
		await fireEvent.click(ui.getByTestId("ship-classes-delete"));
		await waitFor(() => expect(draft.commands).toHaveLength(1));
		const cmd = draft.commands[0]!;
		if (cmd.kind !== "removeShipClass") throw new Error("wrong kind");
		expect(cmd.name).toBe("Drone");
	});

	test("delete is disabled when a local ship group uses the class", async () => {
		const ui = mountTable(
			makeReport(
				[shipClass({ name: "Cruiser" }), shipClass({ name: "Drone" })],
				[
					shipGroup({ class: "Cruiser" }),
					shipGroup({ class: "Cruiser", count: 4 }),
				],
			),
		);
		const buttons = ui.getAllByTestId("ship-classes-delete");
		const map = new Map(
			buttons.map((b) => {
				const row = b.closest('[data-testid="ship-classes-row"]');
				return [row?.getAttribute("data-name") ?? "", b];
			}),
		);
		const cruiserBtn = map.get("Cruiser") as HTMLButtonElement;
		const droneBtn = map.get("Drone") as HTMLButtonElement;
		expect(cruiserBtn).toBeDisabled();
		expect(cruiserBtn).toHaveAttribute(
			"title",
			expect.stringContaining("2"),
		);
		expect(droneBtn).not.toBeDisabled();
		expect(droneBtn).toHaveAttribute("title", "");
	});

	test("new button requests a fresh calculator design", async () => {
		const ui = mountTable(makeReport([]));
		const before = calculatorLoadRequest.token;
		await fireEvent.click(ui.getByTestId("ship-classes-new"));
		expect(calculatorLoadRequest.token).toBe(before + 1);
		expect(calculatorLoadRequest.name).toBeNull();
	});
});