galaxy-game/ui/frontend/tests/e2e/game-shell-inspector.spec.ts

// 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);
});