4a23c357e5
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>
323 lines
11 KiB
TypeScript
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");
|
|
});
|
|
});
|