Files
galaxy-game/ui/frontend/tests/inspector-planet-production.test.ts
T
Ilia Denisov 4a23c357e5
Tests · UI / test (push) Waiting to run
Tests · UI / test (pull_request) Waiting to run
feat(ui): F8-05 — game-mode chrome cleanup + inspector compact rows (#48)
Drains six F8 polish items (parent #43) in one feature:

а) Chrome cleanup
- п.6 — remove the AccountMenu (settings/sessions/theme/language/logout
  ∼ rudimentary in-game) and replace it with a single icon-button
  light/dark theme toggle. The toggle flips an in-memory `theme.override`;
  game-shell unmount calls `theme.clearOverride()` so the lobby (and
  any re-entry) re-projects the persisted lobby choice.
- п.8 — remove the wrap-scrolling radio from the map gear popover. The
  per-game `wrapMode` store and the renderer's no-wrap path stay in
  place for a future engine-side topology feature; only the UI surface
  is dropped (wrap is a server-side concept, not a per-session UI
  affordance).

б) Inspector compact rows (single idiom: select + ✓ apply / ✗ cancel,
or contextual edit/remove/add)
- п.13 — planet name is now click-to-edit: clicking the name opens an
  inline `<input>` + ✓ confirm icon; Escape cancels; the explicit
  Rename action button and Cancel button are gone.
- п.14 — production becomes one row: primary `<select>` picks
  industry/materials/research/ship, conditional secondary `<select>`
  picks the target (tech / science / ship class) for research and
  ship contexts. Apply is gated until row state differs from the
  planet's current effective production; auto-submit-on-click is
  replaced by the apply-gate.
- п.16 — cargo routes collapse to one row: a single dropdown
  (COL/CAP/MAT/EMP plus a placeholder that absorbs the old section
  title) and contextual action buttons (add / edit + remove) to the
  right. After a successful pick or remove the dropdown stays on the
  type the user just acted on.
- п.32 — stationed ship groups hoist the race column into a dropdown
  above the table. The dropdown seeds with the player's own race when
  local groups are stationed here, otherwise the first race
  alphabetically; rendered only when more than one race is in orbit.
  The race column is dropped in both single- and multi-race modes —
  the dropdown's value already names the active race.

Tests: unit and Playwright e2e updated for every changed test-id and
flow; new coverage added for `theme.override`, the in-game toggle, the
apply-gate behaviour, and the stationed-race dropdown. i18n keys for
the removed menu items, the wrap radios, the cargo title, and the
explicit `rename.cancel` are dropped from both locales; new
`game.shell.theme_toggle.*`, `production.main/target.*`,
`production.apply/cancel`, `cargo.placeholder`, and
`ship_groups.race_filter.aria` keys land.

Docs synced: `docs/FUNCTIONAL.md` §6.7 + `docs/FUNCTIONAL_ru.md`
mirror drop the torus / no-wrap radio mention; `ui/docs/design-system.md`
documents the lobby-owned persisted picker + the in-game ephemeral
override channel.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-27 13:38:42 +02:00

323 lines
11 KiB
TypeScript

// Vitest component coverage for the F8-05 production-controls
// subsection of the planet inspector. The pre-F8-05 surface was four
// segmented main buttons (auto-submitting on click) plus a contextual
// sub-row; F8-05 replaced it with two `<select>`s (main / target) and
// a green ✓ apply / yellow ✗ cancel pair on the same row. The apply
// gate is the new behaviour: row state is dirty when the user picked
// something different from the planet's current effective production,
// and only then can the player commit via the ✓.
//
// The tests drive the component against a real `OrderDraftStore`
// (with `fake-indexeddb` standing in for the browser's IDB factory)
// so the collapse-by-`planetNumber` rule remains exercised. The
// active-target derivation is covered by a table-driven pass over the
// canonical engine display strings.
import "@testing-library/jest-dom/vitest";
import "fake-indexeddb/auto";
import { fireEvent, render, waitFor } from "@testing-library/svelte";
import { afterEach, beforeEach, describe, expect, test } from "vitest";
import { i18n } from "../src/lib/i18n/index.svelte";
import type {
ReportPlanet,
ScienceSummary,
ShipClassSummary,
} from "../src/api/game-state";
import Production from "../src/lib/inspectors/planet/production.svelte";
import {
ORDER_DRAFT_CONTEXT_KEY,
OrderDraftStore,
} from "../src/sync/order-draft.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";
const GAME_ID = "11111111-2222-3333-4444-555555555555";
let db: IDBPDatabase<GalaxyDB>;
let dbName: string;
let cache: Cache;
let draft: OrderDraftStore;
beforeEach(async () => {
dbName = `galaxy-production-${crypto.randomUUID()}`;
db = await openGalaxyDB(dbName);
cache = new IDBCache(db);
draft = new OrderDraftStore();
await draft.init({ cache, gameId: GAME_ID });
i18n.resetForTests("en");
});
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 localPlanet(
overrides: Partial<ReportPlanet> & Pick<ReportPlanet, "number">,
): ReportPlanet {
return {
name: "Earth",
x: 0,
y: 0,
kind: "local",
owner: null,
size: 1000,
resources: 5,
industryStockpile: 0,
materialsStockpile: 0,
industry: 100,
population: 100,
colonists: 0,
production: null,
freeIndustry: 100,
...overrides,
};
}
function shipClass(
overrides: Partial<ShipClassSummary> & Pick<ShipClassSummary, "name">,
): ShipClassSummary {
return {
drive: 0,
armament: 0,
weapons: 0,
shields: 0,
cargo: 0,
...overrides,
};
}
function mountProduction(
planet: ReportPlanet,
localShipClass: ShipClassSummary[] = [],
localScience: ScienceSummary[] = [],
) {
const context = new Map<unknown, unknown>([
[ORDER_DRAFT_CONTEXT_KEY, draft],
]);
return render(Production, {
props: { planet, localShipClass, localScience },
context,
});
}
function getMain(ui: ReturnType<typeof mountProduction>): HTMLSelectElement {
return ui.getByTestId("inspector-planet-production-main") as HTMLSelectElement;
}
function getTarget(
ui: ReturnType<typeof mountProduction>,
): HTMLSelectElement {
return ui.getByTestId(
"inspector-planet-production-target",
) as HTMLSelectElement;
}
describe("planet inspector — production controls", () => {
test("renders the main select with localised options and ✓/✗ icons", () => {
const ui = mountProduction(localPlanet({ number: 1 }));
const main = getMain(ui);
expect(main.value).toBe("");
const labels = Array.from(main.options).map((o) => o.textContent?.trim());
// One placeholder + the four production kinds, in the documented order.
expect(labels).toEqual([
"(production)",
"industry",
"materials",
"research",
"build ship",
]);
// No secondary select until research / ship is chosen.
expect(
ui.queryByTestId("inspector-planet-production-target"),
).toBeNull();
expect(
ui.getByTestId("inspector-planet-production-apply"),
).toBeDisabled();
expect(
ui.getByTestId("inspector-planet-production-cancel"),
).toBeDisabled();
});
test("Industry pick + ✓ emits a CAP setProductionType command", async () => {
const ui = mountProduction(localPlanet({ number: 7 }));
const main = getMain(ui);
await fireEvent.change(main, { target: { value: "industry" } });
const apply = ui.getByTestId("inspector-planet-production-apply");
expect(apply).not.toBeDisabled();
await fireEvent.click(apply);
await waitFor(() => expect(draft.commands).toHaveLength(1));
const cmd = draft.commands[0]!;
expect(cmd.kind).toBe("setProductionType");
if (cmd.kind !== "setProductionType") return;
expect(cmd.planetNumber).toBe(7);
expect(cmd.productionType).toBe("CAP");
expect(cmd.subject).toBe("");
});
test("Materials pick + ✓ emits a MAT setProductionType command", async () => {
const ui = mountProduction(localPlanet({ number: 7 }));
await fireEvent.change(getMain(ui), { target: { value: "materials" } });
await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
await waitFor(() => expect(draft.commands).toHaveLength(1));
const cmd = draft.commands[0]!;
if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
expect(cmd.productionType).toBe("MAT");
});
test("Research pick reveals the target select and apply stays disabled until a tech is chosen", async () => {
const ui = mountProduction(localPlanet({ number: 7 }));
expect(
ui.queryByTestId("inspector-planet-production-target"),
).toBeNull();
await fireEvent.change(getMain(ui), { target: { value: "research" } });
const target = getTarget(ui);
expect(target.value).toBe("");
expect(
ui.getByTestId("inspector-planet-production-apply"),
).toBeDisabled();
await fireEvent.change(target, { target: { value: "DRIVE" } });
await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
await waitFor(() => expect(draft.commands).toHaveLength(1));
const cmd = draft.commands[0]!;
if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
expect(cmd.productionType).toBe("DRIVE");
expect(cmd.subject).toBe("");
});
test("Research target with a science name emits a SCIENCE subject", async () => {
const ui = mountProduction(localPlanet({ number: 7 }), [], [
{ name: "Genetics", drive: 0, weapons: 0, shields: 0, cargo: 0 },
]);
await fireEvent.change(getMain(ui), { target: { value: "research" } });
await fireEvent.change(getTarget(ui), { target: { value: "Genetics" } });
await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
await waitFor(() => expect(draft.commands).toHaveLength(1));
const cmd = draft.commands[0]!;
if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
expect(cmd.productionType).toBe("SCIENCE");
expect(cmd.subject).toBe("Genetics");
});
test("Build-Ship with no classes shows the empty placeholder option", async () => {
const ui = mountProduction(localPlanet({ number: 7 }), []);
await fireEvent.change(getMain(ui), { target: { value: "ship" } });
expect(
ui.getByTestId("inspector-planet-production-ship-empty"),
).toBeInTheDocument();
expect(
ui.getByTestId("inspector-planet-production-apply"),
).toBeDisabled();
});
test("Build-Ship + class pick + ✓ emits a SHIP setProductionType command", async () => {
const ui = mountProduction(localPlanet({ number: 7 }), [
shipClass({ name: "Scout" }),
shipClass({ name: "Destroyer" }),
]);
await fireEvent.change(getMain(ui), { target: { value: "ship" } });
await fireEvent.change(getTarget(ui), { target: { value: "Scout" } });
await fireEvent.click(ui.getByTestId("inspector-planet-production-apply"));
await waitFor(() => expect(draft.commands).toHaveLength(1));
const cmd = draft.commands[0]!;
if (cmd.kind !== "setProductionType") throw new Error("wrong kind");
expect(cmd.productionType).toBe("SHIP");
expect(cmd.subject).toBe("Scout");
});
test("Cancel resets the row to the current effective production without emitting", async () => {
const ui = mountProduction(
localPlanet({ number: 7, production: "Capital" }),
);
const main = getMain(ui);
expect(main.value).toBe("industry");
await fireEvent.change(main, { target: { value: "research" } });
expect(
ui.getByTestId("inspector-planet-production-cancel"),
).not.toBeDisabled();
await fireEvent.click(
ui.getByTestId("inspector-planet-production-cancel"),
);
expect(getMain(ui).value).toBe("industry");
expect(draft.commands).toEqual([]);
});
test("Apply gate is closed while the row matches the current effective production", () => {
const ui = mountProduction(
localPlanet({ number: 7, production: "Drive" }),
);
// On mount the parser seeds research + DRIVE, so the apply
// button is inert until the player actually changes something.
expect(
ui.getByTestId("inspector-planet-production-apply"),
).toBeDisabled();
expect(
ui.getByTestId("inspector-planet-production-cancel"),
).toBeDisabled();
});
test("active main derivation seeds the select from planet.production", () => {
const cases: ReadonlyArray<{
production: string | null;
expected: "" | "industry" | "materials" | "research" | "ship";
}> = [
{ production: "Capital", expected: "industry" },
{ production: "Material", expected: "materials" },
{ production: "Drive", expected: "research" },
{ production: "Weapons", expected: "research" },
{ production: "Shields", expected: "research" },
{ production: "Cargo", expected: "research" },
{ production: "Scout", expected: "ship" },
{ production: "-", expected: "" },
{ production: null, expected: "" },
{ production: "UnknownThing", expected: "" },
];
for (const tc of cases) {
const ui = mountProduction(
localPlanet({ number: 1, production: tc.production }),
[shipClass({ name: "Scout" })],
);
expect(getMain(ui).value).toBe(tc.expected);
ui.unmount();
}
});
test("active target seeds the secondary select for research display strings", () => {
const cases: ReadonlyArray<{
production: string;
expected: "DRIVE" | "WEAPONS" | "SHIELDS" | "CARGO";
}> = [
{ production: "Drive", expected: "DRIVE" },
{ production: "Weapons", expected: "WEAPONS" },
{ production: "Shields", expected: "SHIELDS" },
{ production: "Cargo", expected: "CARGO" },
];
for (const tc of cases) {
const ui = mountProduction(
localPlanet({ number: 1, production: tc.production }),
);
expect(getMain(ui).value).toBe("research");
expect(getTarget(ui).value).toBe(tc.expected);
ui.unmount();
}
});
test("target select seeds the ship class when production is a class name", () => {
const ui = mountProduction(
localPlanet({ number: 1, production: "Scout" }),
[shipClass({ name: "Scout" }), shipClass({ name: "Destroyer" })],
);
expect(getMain(ui).value).toBe("ship");
expect(getTarget(ui).value).toBe("Scout");
});
});