Ilia Denisov
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>
521 lines
15 KiB
TypeScript
521 lines
15 KiB
TypeScript
// Vitest component coverage for the F8-05 cargo-routes subsection of
|
|
// the planet inspector. Pre-F8-05 the surface rendered all four
|
|
// COL/CAP/MAT/EMP slots side-by-side; F8-05 collapsed it into a
|
|
// single `<select>` with a placeholder (absorbing the old section
|
|
// title) and contextual `add` / `edit` + `remove` buttons that only
|
|
// appear once the player picks a type. The tests drive the component
|
|
// against a real `OrderDraftStore` (with `fake-indexeddb` standing
|
|
// in for the browser IDB factory) and a stub `MapPickService` whose
|
|
// `pick(...)` resolves to a script-controlled answer.
|
|
|
|
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, ReportRoute } from "../src/api/game-state";
|
|
import CargoRoutes from "../src/lib/inspectors/planet/cargo-routes.svelte";
|
|
import {
|
|
MAP_PICK_CONTEXT_KEY,
|
|
MapPickService,
|
|
type MapPickRequest,
|
|
} from "../src/lib/map-pick.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-cargo-${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 makePlanet(
|
|
overrides: Partial<ReportPlanet> & Pick<ReportPlanet, "number">,
|
|
): ReportPlanet {
|
|
return {
|
|
name: `Planet-${overrides.number}`,
|
|
x: 0,
|
|
y: 0,
|
|
kind: "local",
|
|
owner: null,
|
|
size: 100,
|
|
resources: 1,
|
|
industryStockpile: 0,
|
|
materialsStockpile: 0,
|
|
industry: 0,
|
|
population: 0,
|
|
colonists: 0,
|
|
production: null,
|
|
freeIndustry: 0,
|
|
...overrides,
|
|
};
|
|
}
|
|
|
|
interface PickInvocation {
|
|
request: MapPickRequest;
|
|
resolve: (id: number | null) => void;
|
|
}
|
|
|
|
class StubPickService extends MapPickService {
|
|
invocations: PickInvocation[] = [];
|
|
override pick(request: MapPickRequest): Promise<number | null> {
|
|
this.active = true;
|
|
return new Promise((resolve) => {
|
|
this.invocations.push({
|
|
request,
|
|
resolve: (id) => {
|
|
this.active = false;
|
|
resolve(id);
|
|
},
|
|
});
|
|
});
|
|
}
|
|
override cancel(): void {
|
|
const inv = this.invocations.shift();
|
|
inv?.resolve(null);
|
|
}
|
|
}
|
|
|
|
function mount(
|
|
planet: ReportPlanet,
|
|
planets: ReportPlanet[],
|
|
routes: ReportRoute[] = [],
|
|
localPlayerDrive = 2,
|
|
mapWidth = 4000,
|
|
mapHeight = 4000,
|
|
) {
|
|
const pick = new StubPickService();
|
|
const context = new Map<unknown, unknown>([
|
|
[ORDER_DRAFT_CONTEXT_KEY, draft],
|
|
[MAP_PICK_CONTEXT_KEY, pick],
|
|
]);
|
|
const ui = render(CargoRoutes, {
|
|
props: {
|
|
planet,
|
|
routes,
|
|
planets,
|
|
mapWidth,
|
|
mapHeight,
|
|
localPlayerDrive,
|
|
},
|
|
context,
|
|
});
|
|
return { ui, pick };
|
|
}
|
|
|
|
async function selectType(
|
|
ui: ReturnType<typeof mount>["ui"],
|
|
value: string,
|
|
): Promise<void> {
|
|
const select = ui.getByTestId(
|
|
"inspector-planet-cargo-type",
|
|
) as HTMLSelectElement;
|
|
await fireEvent.change(select, { target: { value } });
|
|
}
|
|
|
|
describe("planet inspector — cargo routes", () => {
|
|
test("dropdown exposes COL/CAP/MAT/EMP plus the placeholder; nothing else is rendered until a type is picked", () => {
|
|
const { ui } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[makePlanet({ number: 1, name: "Earth", x: 100, y: 100 })],
|
|
);
|
|
const select = ui.getByTestId(
|
|
"inspector-planet-cargo-type",
|
|
) as HTMLSelectElement;
|
|
expect(Array.from(select.options).map((o) => o.value)).toEqual([
|
|
"",
|
|
"COL",
|
|
"CAP",
|
|
"MAT",
|
|
"EMP",
|
|
]);
|
|
expect(select.value).toBe("");
|
|
// No action buttons surface before a type is picked.
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-slot-col-add"),
|
|
).toBeNull();
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-slot-col-destination"),
|
|
).toBeNull();
|
|
});
|
|
|
|
test("selecting an empty type reveals the Add button", async () => {
|
|
const { ui } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[makePlanet({ number: 1, name: "Earth", x: 100, y: 100 })],
|
|
);
|
|
await selectType(ui, "COL");
|
|
expect(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-add"),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-slot-col-edit"),
|
|
).toBeNull();
|
|
});
|
|
|
|
test("selecting a filled type shows the destination plus Edit and Remove", async () => {
|
|
const { ui } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
],
|
|
[
|
|
{
|
|
sourcePlanetNumber: 1,
|
|
entries: [{ loadType: "COL", destinationPlanetNumber: 2 }],
|
|
},
|
|
],
|
|
);
|
|
await selectType(ui, "COL");
|
|
expect(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-destination"),
|
|
).toHaveTextContent("Mars");
|
|
expect(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-edit"),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-remove"),
|
|
).toBeInTheDocument();
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-slot-col-add"),
|
|
).toBeNull();
|
|
});
|
|
|
|
test("Add opens pick mode with the reach-filtered set", async () => {
|
|
// Reach = 40 * 2 = 80. Mars is 50 away (in reach), Pluto is
|
|
// 200 away (out of reach).
|
|
const { ui, pick } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
makePlanet({ number: 3, name: "Pluto", x: 300, y: 100 }),
|
|
],
|
|
[],
|
|
2,
|
|
);
|
|
await selectType(ui, "COL");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
const invocation = pick.invocations[0]!;
|
|
expect(invocation.request.sourcePlanetNumber).toBe(1);
|
|
expect(Array.from(invocation.request.reachableIds).sort()).toEqual([2]);
|
|
expect(
|
|
ui.getByTestId("inspector-planet-cargo-pick-prompt"),
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
test("the reachable set spans every planet kind in range, not only own", async () => {
|
|
// Reach = 40 * 1.5 = 60. Each candidate at distance 50 — in reach.
|
|
const { ui, pick } = mount(
|
|
makePlanet({
|
|
number: 1,
|
|
name: "Earth",
|
|
x: 100,
|
|
y: 100,
|
|
kind: "local",
|
|
}),
|
|
[
|
|
makePlanet({
|
|
number: 1,
|
|
name: "Earth",
|
|
x: 100,
|
|
y: 100,
|
|
kind: "local",
|
|
}),
|
|
makePlanet({
|
|
number: 2,
|
|
name: "Alpha",
|
|
x: 150,
|
|
y: 100,
|
|
kind: "other",
|
|
owner: "Aliens",
|
|
}),
|
|
makePlanet({
|
|
number: 3,
|
|
name: "Rock",
|
|
x: 100,
|
|
y: 150,
|
|
kind: "uninhabited",
|
|
}),
|
|
makePlanet({
|
|
number: 4,
|
|
name: "",
|
|
x: 50,
|
|
y: 100,
|
|
kind: "unidentified",
|
|
}),
|
|
],
|
|
[],
|
|
1.5,
|
|
);
|
|
await selectType(ui, "COL");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
expect(
|
|
Array.from(pick.invocations[0]!.request.reachableIds).sort(),
|
|
).toEqual([2, 3, 4]);
|
|
});
|
|
|
|
test("the picker accepts an unidentified destination", async () => {
|
|
const { ui, pick } = mount(
|
|
makePlanet({
|
|
number: 1,
|
|
name: "Earth",
|
|
x: 100,
|
|
y: 100,
|
|
kind: "local",
|
|
}),
|
|
[
|
|
makePlanet({
|
|
number: 1,
|
|
name: "Earth",
|
|
x: 100,
|
|
y: 100,
|
|
kind: "local",
|
|
}),
|
|
makePlanet({
|
|
number: 9,
|
|
name: "",
|
|
x: 130,
|
|
y: 100,
|
|
kind: "unidentified",
|
|
}),
|
|
],
|
|
[],
|
|
1.5,
|
|
);
|
|
await selectType(ui, "MAT");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-mat-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
pick.invocations[0]!.resolve(9);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
const cmd = draft.commands[0]!;
|
|
expect(cmd.kind).toBe("setCargoRoute");
|
|
if (cmd.kind !== "setCargoRoute") return;
|
|
expect(cmd.destinationPlanetNumber).toBe(9);
|
|
expect(cmd.loadType).toBe("MAT");
|
|
});
|
|
|
|
test("a successful pick emits setCargoRoute and closes the prompt", async () => {
|
|
const { ui, pick } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
],
|
|
[],
|
|
2,
|
|
);
|
|
await selectType(ui, "CAP");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-cap-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
pick.invocations[0]!.resolve(2);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
const cmd = draft.commands[0]!;
|
|
expect(cmd.kind).toBe("setCargoRoute");
|
|
if (cmd.kind !== "setCargoRoute") return;
|
|
expect(cmd.sourcePlanetNumber).toBe(1);
|
|
expect(cmd.destinationPlanetNumber).toBe(2);
|
|
expect(cmd.loadType).toBe("CAP");
|
|
await waitFor(() =>
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-pick-prompt"),
|
|
).toBeNull(),
|
|
);
|
|
});
|
|
|
|
test("dropdown stays on the just-picked type after add resolves", async () => {
|
|
const { ui, pick } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
],
|
|
[],
|
|
2,
|
|
);
|
|
await selectType(ui, "CAP");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-cap-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
pick.invocations[0]!.resolve(2);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
const select = ui.getByTestId(
|
|
"inspector-planet-cargo-type",
|
|
) as HTMLSelectElement;
|
|
expect(select.value).toBe("CAP");
|
|
});
|
|
|
|
test("cancel resolves null and emits no command", async () => {
|
|
const { ui, pick } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
],
|
|
);
|
|
await selectType(ui, "MAT");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-mat-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
pick.invocations[0]!.resolve(null);
|
|
await waitFor(() =>
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-pick-prompt"),
|
|
).toBeNull(),
|
|
);
|
|
expect(draft.commands).toHaveLength(0);
|
|
});
|
|
|
|
test("Remove emits removeCargoRoute for the selected type", async () => {
|
|
const { ui } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
],
|
|
[
|
|
{
|
|
sourcePlanetNumber: 1,
|
|
entries: [{ loadType: "EMP", destinationPlanetNumber: 2 }],
|
|
},
|
|
],
|
|
);
|
|
await selectType(ui, "EMP");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-emp-remove"),
|
|
);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
const cmd = draft.commands[0]!;
|
|
expect(cmd.kind).toBe("removeCargoRoute");
|
|
if (cmd.kind !== "removeCargoRoute") return;
|
|
expect(cmd.sourcePlanetNumber).toBe(1);
|
|
expect(cmd.loadType).toBe("EMP");
|
|
});
|
|
|
|
test("Edit replaces the existing setCargoRoute via collapse rule", async () => {
|
|
const { ui, pick } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
makePlanet({ number: 3, name: "Vesta", x: 100, y: 150 }),
|
|
],
|
|
[
|
|
{
|
|
sourcePlanetNumber: 1,
|
|
entries: [{ loadType: "COL", destinationPlanetNumber: 2 }],
|
|
},
|
|
],
|
|
);
|
|
await selectType(ui, "COL");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-edit"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
pick.invocations[0]!.resolve(3);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
// A second edit to a different planet — collapse keeps a
|
|
// single row.
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-edit"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(2));
|
|
pick.invocations[1]!.resolve(2);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
const cmd = draft.commands[0]!;
|
|
expect(cmd.kind).toBe("setCargoRoute");
|
|
if (cmd.kind !== "setCargoRoute") return;
|
|
expect(cmd.destinationPlanetNumber).toBe(2);
|
|
});
|
|
|
|
test("different load-types coexist without collapsing each other", async () => {
|
|
const { ui, pick } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Mars", x: 150, y: 100 }),
|
|
],
|
|
);
|
|
await selectType(ui, "COL");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-col-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(1));
|
|
pick.invocations[0]!.resolve(2);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(1));
|
|
await selectType(ui, "CAP");
|
|
await fireEvent.click(
|
|
ui.getByTestId("inspector-planet-cargo-slot-cap-add"),
|
|
);
|
|
await waitFor(() => expect(pick.invocations.length).toBe(2));
|
|
pick.invocations[1]!.resolve(2);
|
|
await waitFor(() => expect(draft.commands).toHaveLength(2));
|
|
const types = draft.commands
|
|
.filter((c) => c.kind === "setCargoRoute")
|
|
.map((c) => (c.kind === "setCargoRoute" ? c.loadType : ""))
|
|
.sort();
|
|
expect(types).toEqual(["CAP", "COL"]);
|
|
});
|
|
|
|
test("no_destinations message appears once a type is picked and every planet is out of range", async () => {
|
|
const { ui } = mount(
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
[
|
|
makePlanet({ number: 1, name: "Earth", x: 100, y: 100 }),
|
|
makePlanet({ number: 2, name: "Pluto", x: 5000, y: 5000 }),
|
|
],
|
|
[],
|
|
0.1, // reach 4 — far less than 5000 distance
|
|
);
|
|
// Hidden until the player engages with the dropdown.
|
|
expect(
|
|
ui.queryByTestId("inspector-planet-cargo-no-destinations"),
|
|
).toBeNull();
|
|
await selectType(ui, "COL");
|
|
expect(
|
|
ui.getByTestId("inspector-planet-cargo-no-destinations"),
|
|
).toBeInTheDocument();
|
|
});
|
|
});
|