[test] Add a regression test for af5fa03 .

Author: lgarron

.github/workflows/CI.yml

@@ -86,7 +86,7 @@ jobs:
       - run: make build-bin
       - run: make test-dist-bin
       - run: make build-sites
-      - run: make test-dist-sites-experiments
+      - run: make test-dist-sites-twizzle
       - run: make clean
 
   test-make-test-fast:

Makefile

@@ -200,7 +200,7 @@ test-dist-lib: \
 	test-dist-lib-perf \
 	test-dist-lib-plain-esbuild-compat \
 	test-dist-lib-build-size \
-	test-dist-sites-experiments # keep CI.yml in sync with this
+	test-dist-sites-twizzle # keep CI.yml in sync with this
 
 .PHONY: test-dist-lib-node-import
 test-dist-lib-node-import: build-lib-js
@@ -226,9 +226,9 @@ test-dist-lib-plain-esbuild-compat: build-lib-js
 test-dist-lib-build-size: build-lib-js
 	${BUN_RUN} ./script/test/dist/lib/cubing/build-size/main.ts
 
-.PHONY: test-dist-sites-experiments
-test-dist-sites-experiments: playwright-install build-sites
-	${BUN} ./script/test/dist/sites/experiments.cubing.net/main.js
+.PHONY: test-dist-sites-twizzle
+test-dist-sites-twizzle: playwright-install build-sites
+	${NODE} ./script/test/dist/sites/alpha.twizzle.net/main.js
 
 .PHONY: test-dist-bin
 test-dist-bin: test-dist-bin-shebang test-dist-bin-npm-exec

package.json

@@ -137,7 +137,7 @@
     "test-dist-lib-perf": "make test-dist-lib-perf",
     "test-dist-lib-plain-esbuild-compat": "make test-dist-lib-plain-esbuild-compat",
     "test-dist-lib-build-size": "make test-dist-lib-build-size",
-    "test-dist-sites-experiments": "make test-dist-sites-experiments",
+    "test-dist-sites-twizzle": "make test-dist-sites-twizzle",
     "test-dist-bin": "make test-dist-bin",
     "test-dist-bin-shebang": "make test-dist-bin-shebang",
     "test-dist-bin-npm-exec": "make test-dist-bin-npm-exec",

script/test/dist/sites/experiments.cubing.net/main.js renamed to script/test/dist/sites/alpha.twizzle.net/main.js

@@ -1,8 +1,17 @@
+import { env } from "node:process";
 import { chromium } from "playwright";
 import { startServer } from "../../../../lib/experiments-server/index.js";
 
-const OPEN_REPL = false; // Set to `true` for testing.
-const HEADLESS = !OPEN_REPL;
+const OPEN_REPL = env["OPEN_REPL_FOR_BROWSER_TESTS"] === "true"; // Set to `true` for testing.
+const HEADLESS = !OPEN_REPL; // TODO: doesn't work?
+
+if (!OPEN_REPL) {
+  console.error(`To test with a repl and browser, run:
+
+    env OPEN_REPL_FOR_BROWSER_TESTS=true make test-dist-sites-twizzle
+
+`);
+}
 
 let exitCode = 0;
 function assert(description, expected, observed) {
@@ -52,13 +61,53 @@ async function runTest() {
     new URL(page.url()).searchParams.get("puzzle"),
   );
 
+  await page.goto("http://localhost:4443/alpha.twizzle.net/edit/?puzzle=clock");
+  assert(
+    "three.js initially loaded",
+    "undefined",
+    await page.evaluate(() => {
+      return typeof globalThis.__THREE__;
+    }),
+  );
+  await (await page.waitForSelector(".puzzle")).selectOption("3x3x3");
+
+  // TODO: this implementation is very manual, and therefor brittle to maintain.
+  await (async () => {
+    for (
+      let waitMilliseconds = 1;
+      waitMilliseconds < 5000;
+      waitMilliseconds *= 2
+    ) {
+      await new Promise((resolve) => setTimeout(resolve, waitMilliseconds));
+      const typeof__THREE__ = await page.evaluate(() => {
+        return typeof globalThis.__THREE__;
+      });
+      if (typeof__THREE__ === "string") {
+        return;
+      }
+    }
+  })();
+  assert(
+    "three.js loaded after switching to 3×3×3",
+    "string",
+    await page.evaluate(() => {
+      return typeof globalThis.__THREE__;
+    }),
+  );
+
   if (OPEN_REPL) {
     globalThis.page = page;
     (await import("node:repl")).start();
   } else {
     await browser.close();
     process.exit(exitCode);
   }
+
+  // await page.screenshot({
+  //   path: "out.png",
+  //   omitBackground: true,
+  //   fullPage: true,
+  // });
 }
 
 startServer();