ui/phase-13: planet inspector — read-only
Plumbs the map → inspector pathway: a click on a planet selects it through the new SelectionStore, the sidebar Inspector tab swaps its empty-state copy for a per-kind read-only field set, and a mobile-only bottom-sheet mirrors the same content over the map. Field projection in api/game-state.ts now surfaces every documented planet field.
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,223 @@
|
||||
// Phase 13 end-to-end coverage for the planet inspector. Boots an
|
||||
// authenticated session and a mocked gateway with a single local
|
||||
// planet placed at the world centre, navigates to the map view, and
|
||||
// drives a real canvas click into the renderer's `clicked` event.
|
||||
// On desktop the sidebar inspector tab swaps from the empty state to
|
||||
// the planet view; on the mobile project the bottom-sheet appears
|
||||
// and the close button clears it.
|
||||
|
||||
import { fromJson, type JsonValue } from "@bufbuild/protobuf";
|
||||
import { expect, test, type Page } from "@playwright/test";
|
||||
import { ByteBuffer } from "flatbuffers";
|
||||
|
||||
import { ExecuteCommandRequestSchema } from "../../src/proto/galaxy/gateway/v1/edge_gateway_pb";
|
||||
import { UUID } from "../../src/proto/galaxy/fbs/common";
|
||||
import { GameReportRequest } from "../../src/proto/galaxy/fbs/report";
|
||||
import { forgeExecuteCommandResponseJson } from "./fixtures/sign-response";
|
||||
import {
|
||||
buildMyGamesListPayload,
|
||||
type GameFixture,
|
||||
} from "./fixtures/lobby-fbs";
|
||||
import { buildReportPayload } from "./fixtures/report-fbs";
|
||||
|
||||
const SESSION_ID = "phase-13-inspector-session";
|
||||
const GAME_ID = "13131313-1313-1313-1313-131313131313";
|
||||
const WORLD = 4000;
|
||||
const CENTRE = WORLD / 2;
|
||||
|
||||
interface MockOpts {
|
||||
currentTurn: number;
|
||||
report: Parameters<typeof buildReportPayload>[0];
|
||||
}
|
||||
|
||||
async function mockGateway(page: Page, opts: MockOpts): Promise<void> {
|
||||
const game: GameFixture = {
|
||||
gameId: GAME_ID,
|
||||
gameName: "Phase 13 Game",
|
||||
gameType: "private",
|
||||
status: "running",
|
||||
ownerUserId: "user-1",
|
||||
minPlayers: 2,
|
||||
maxPlayers: 8,
|
||||
enrollmentEndsAtMs: BigInt(Date.now() + 86_400_000),
|
||||
createdAtMs: BigInt(Date.now() - 86_400_000),
|
||||
updatedAtMs: BigInt(Date.now()),
|
||||
currentTurn: opts.currentTurn,
|
||||
};
|
||||
|
||||
await page.route(
|
||||
"**/galaxy.gateway.v1.EdgeGateway/ExecuteCommand",
|
||||
async (route) => {
|
||||
const reqText = route.request().postData();
|
||||
if (reqText === null) {
|
||||
await route.fulfill({ status: 400 });
|
||||
return;
|
||||
}
|
||||
const req = fromJson(
|
||||
ExecuteCommandRequestSchema,
|
||||
JSON.parse(reqText) as JsonValue,
|
||||
);
|
||||
|
||||
let resultCode = "ok";
|
||||
let payload: Uint8Array;
|
||||
switch (req.messageType) {
|
||||
case "lobby.my.games.list":
|
||||
payload = buildMyGamesListPayload([game]);
|
||||
break;
|
||||
case "user.games.report": {
|
||||
// Drain the request to keep the decoder happy even though
|
||||
// we ignore the turn — the fixture serves a single snapshot.
|
||||
GameReportRequest.getRootAsGameReportRequest(
|
||||
new ByteBuffer(req.payloadBytes),
|
||||
).gameId(new UUID());
|
||||
payload = buildReportPayload(opts.report);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
resultCode = "internal_error";
|
||||
payload = new Uint8Array();
|
||||
}
|
||||
|
||||
const body = await forgeExecuteCommandResponseJson({
|
||||
requestId: req.requestId,
|
||||
timestampMs: BigInt(Date.now()),
|
||||
resultCode,
|
||||
payloadBytes: payload,
|
||||
});
|
||||
await route.fulfill({
|
||||
status: 200,
|
||||
contentType: "application/json",
|
||||
body,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
await page.route(
|
||||
"**/galaxy.gateway.v1.EdgeGateway/SubscribeEvents",
|
||||
async () => {
|
||||
await new Promise<void>(() => {});
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
async function bootSession(page: Page): Promise<void> {
|
||||
await page.goto("/__debug/store");
|
||||
await expect(page.getByTestId("debug-store-ready")).toBeVisible();
|
||||
await page.waitForFunction(() => window.__galaxyDebug?.ready === true);
|
||||
await page.evaluate(() => window.__galaxyDebug!.clearSession());
|
||||
await page.evaluate(
|
||||
(id) => window.__galaxyDebug!.setDeviceSessionId(id),
|
||||
SESSION_ID,
|
||||
);
|
||||
}
|
||||
|
||||
async function setupShell(page: Page): Promise<void> {
|
||||
await mockGateway(page, {
|
||||
currentTurn: 4,
|
||||
report: {
|
||||
turn: 4,
|
||||
mapWidth: WORLD,
|
||||
mapHeight: WORLD,
|
||||
localPlanets: [
|
||||
{
|
||||
number: 17,
|
||||
name: "Galactica",
|
||||
x: CENTRE,
|
||||
y: CENTRE,
|
||||
size: 1000,
|
||||
resources: 10,
|
||||
capital: 0,
|
||||
material: 0,
|
||||
population: 850,
|
||||
colonists: 25,
|
||||
industry: 700,
|
||||
production: "drive",
|
||||
freeIndustry: 175,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
await bootSession(page);
|
||||
await page.goto(`/games/${GAME_ID}/map`);
|
||||
await expect(page.getByTestId("active-view-map")).toHaveAttribute(
|
||||
"data-status",
|
||||
"ready",
|
||||
);
|
||||
await expect(page.getByTestId("map-canvas-wrap")).toHaveAttribute(
|
||||
"data-planet-count",
|
||||
"1",
|
||||
);
|
||||
}
|
||||
|
||||
async function clickCanvasCentre(page: Page): Promise<void> {
|
||||
const canvas = page.locator("canvas");
|
||||
const box = await canvas.boundingBox();
|
||||
expect(box).not.toBeNull();
|
||||
if (box === null) throw new Error("canvas has no bounding box");
|
||||
const cx = box.x + box.width / 2;
|
||||
const cy = box.y + box.height / 2;
|
||||
await page.mouse.click(cx, cy);
|
||||
}
|
||||
|
||||
test("clicking a planet on the map shows it in the desktop inspector tab", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
testInfo.project.name.startsWith("chromium-mobile"),
|
||||
"sidebar is hidden on mobile breakpoint",
|
||||
);
|
||||
await setupShell(page);
|
||||
|
||||
// Empty state before any selection.
|
||||
const sidebar = page.getByTestId("sidebar-tool-inspector");
|
||||
await expect(sidebar).toContainText("select an object on the map");
|
||||
|
||||
await clickCanvasCentre(page);
|
||||
|
||||
// Both the sidebar inspector and the bottom-sheet receive the
|
||||
// same selection — the sheet is hidden by CSS at the desktop
|
||||
// breakpoint but still mounted in the DOM, so the assertions
|
||||
// scope explicitly to the sidebar to avoid the strict-mode
|
||||
// duplicate-locator trap.
|
||||
const inspector = sidebar.getByTestId("inspector-planet");
|
||||
await expect(inspector).toBeVisible();
|
||||
await expect(inspector).toHaveAttribute("data-planet-id", "17");
|
||||
await expect(sidebar.getByTestId("inspector-planet-name")).toHaveText(
|
||||
"Galactica",
|
||||
);
|
||||
await expect(
|
||||
sidebar.getByTestId("inspector-planet-field-population"),
|
||||
).toContainText("850");
|
||||
await expect(
|
||||
sidebar.getByTestId("inspector-planet-field-industry"),
|
||||
).toContainText("700");
|
||||
await expect(
|
||||
sidebar.getByTestId("inspector-planet-field-production"),
|
||||
).toContainText("drive");
|
||||
});
|
||||
|
||||
test("clicking a planet on mobile raises the bottom-sheet, close clears it", async ({
|
||||
page,
|
||||
}, testInfo) => {
|
||||
test.skip(
|
||||
!testInfo.project.name.startsWith("chromium-mobile"),
|
||||
"sheet is mobile-only",
|
||||
);
|
||||
await setupShell(page);
|
||||
|
||||
// No sheet before the click.
|
||||
await expect(page.getByTestId("inspector-planet-sheet")).toHaveCount(0);
|
||||
|
||||
await clickCanvasCentre(page);
|
||||
|
||||
const sheet = page.getByTestId("inspector-planet-sheet");
|
||||
await expect(sheet).toBeVisible();
|
||||
const inspector = sheet.getByTestId("inspector-planet");
|
||||
await expect(inspector).toHaveAttribute("data-planet-id", "17");
|
||||
await expect(sheet.getByTestId("inspector-planet-name")).toHaveText(
|
||||
"Galactica",
|
||||
);
|
||||
|
||||
await page.getByTestId("inspector-planet-sheet-close").click();
|
||||
await expect(page.getByTestId("inspector-planet-sheet")).toHaveCount(0);
|
||||
});
|
||||
Reference in New Issue
Block a user