Tests: Overhaul e2e testing infrastructure with a TypeScript runner

Author: RyanGrieb

client/src/Index.ts

@@ -1,4 +1,5 @@
 import { assetList } from "./Assets";
+import { ScenarioRegistry } from "./testing/ScenarioRegistry";
 import { Game } from "./Game";
 import { InGameScene } from "./scene/type/InGameScene";
 import { JoinGameScene } from "./scene/type/JoinGameScene";
@@ -16,11 +17,18 @@ Game.createInstance({ assetList: assetList, canvasColor: "gray" }, () => {
 
   const urlParams = new URLSearchParams(window.location.search);
   if (urlParams.get("test") === "true") {
-    import("./testing/scenarios/CitySettlement.test").then(module => {
-      setTimeout(() => {
-        const runner = module.setupCitySettlementTest(Game.getInstance());
-        runner.run();
-      }, 1000);
-    });
+    const scenarioName = urlParams.get("scenario") || "CitySettlement";
+    const loader = ScenarioRegistry.get(scenarioName);
+
+    if (loader) {
+      loader().then(setup => {
+        setTimeout(() => {
+          const runner = setup(Game.getInstance());
+          runner.run();
+        }, 1000);
+      });
+    } else {
+      console.error(`Scenario '${scenarioName}' not found. Available: ${ScenarioRegistry.getAvailableScenarios().join(", ")}`);
+    }
   }
 });

client/src/testing/ScenarioRegistry.ts

@@ -0,0 +1,28 @@
+import { Game } from "../Game";
+import { TestRunner } from "./TestRunner";
+
+export type ScenarioSetup = (game: Game) => TestRunner;
+
+type ScenarioLoader = () => Promise<ScenarioSetup>;
+
+export class ScenarioRegistry {
+    private static scenarios: Map<string, ScenarioLoader> = new Map();
+
+    public static register(name: string, loader: ScenarioLoader) {
+        this.scenarios.set(name, loader);
+    }
+
+    public static get(name: string): ScenarioLoader | undefined {
+        return this.scenarios.get(name);
+    }
+
+    public static getAvailableScenarios(): string[] {
+        return Array.from(this.scenarios.keys());
+    }
+}
+
+// Register default scenarios
+ScenarioRegistry.register("CitySettlement", async () => {
+    const module = await import("./scenarios/CitySettlement.test");
+    return module.setupCitySettlementTest;
+});

client/src/testing/TestRunner.ts

@@ -9,17 +9,19 @@ export interface TestStep {
 export class TestRunner {
     private steps: TestStep[] = [];
     private game: Game;
+    private scenarioName: string;
 
-    constructor(game: Game) {
+    constructor(game: Game, scenarioName: string) {
         this.game = game;
+        this.scenarioName = scenarioName;
     }
 
     public addStep(step: TestStep) {
         this.steps.push(step);
     }
 
     public async run() {
-        console.log("Starting Test Runner...");
+        console.log(`Starting Test Runner for Scenario: ${this.scenarioName}...`);
         const resultsProxy = document.createElement("div");
         resultsProxy.id = "test-results";
         resultsProxy.style.position = "absolute";
@@ -29,6 +31,13 @@ export class TestRunner {
         resultsProxy.style.color = "white";
         resultsProxy.style.padding = "10px";
         resultsProxy.style.fontFamily = "monospace";
+
+        const title = document.createElement("h3");
+        title.textContent = `Scenario: ${this.scenarioName}`;
+        title.style.margin = "0 0 10px 0";
+        title.style.borderBottom = "1px solid white";
+        resultsProxy.appendChild(title);
+
         document.body.appendChild(resultsProxy);
 
         const log = (msg: string, color: string = "white") => {

client/src/testing/scenarios/CitySettlement.test.ts

@@ -5,7 +5,7 @@ import { InGameScene } from "../../scene/type/InGameScene";
 import { Unit } from "../../Unit";
 
 export function setupCitySettlementTest(game: Game) {
-    const runner = new TestRunner(game);
+    const runner = new TestRunner(game, "CitySettlement");
     let settlerUnit: Unit | undefined;
 
     runner.addStep({
@@ -166,7 +166,7 @@ export function setupCitySettlementTest(game: Game) {
     runner.addStep({
         name: "Check Food Output",
         action: async () => {
-            await new Promise(r => setTimeout(r, 4000)); // Wait for city to settle
+            await new Promise(r => setTimeout(r, 2000)); // Wait for city to settle
         },
         verification: async () => {
             console.log("[Test] Verification: Checking City Food via GameMap...");