Auto run unittests in tests/index.html (#468)

camillobruni · web-flow · commit a169b1d56a74 · 2025-01-06T15:23:54.000+01:00
Instead of triggering the tests from the outside, we can always directly start the mocha runner in tests/index.html.
The selenium driver now syncs on either globalThis.testResults being there or the test-complete event.

This way we should be able to reliably run the tests both via selenium and the browser.
diff --git a/tests/index.html b/tests/index.html
@@ -9,10 +9,14 @@
                 margin: 8px;
             }
         </style>
-
         <script src="../node_modules/mocha/mocha.js"></script>
         <script src="../node_modules/expect.js/index.js"></script>
         <script src="../node_modules/sinon/pkg/sinon.js"></script>
+        <script src="../resources/benchmark-runner.mjs" type="module"></script>
+    </head>
+
+    <body>
+        <div id="mocha"></div>
         <script type="module">
             mocha.setup({
                 ui: "bdd",
@@ -22,55 +26,44 @@
                     },
                 },
             });
-        </script>
-    </head>
 
-    <body>
-        <div id="mocha"></div>
-        <script src="../resources/benchmark-runner.mjs" type="module"></script>
-        <script src="benchmark-runner-tests.mjs" type="module"></script>
-        <script type="module">
-            function startTest() {
-                const runner = mocha.run();
-                window.mochaResults = runner;
+            await import("./benchmark-runner-tests.mjs");
 
-                function createReport(node) {
-                    const tree = {
-                        tests: [],
-                        suites: [],
-                        id: node.id,
-                        title: node.title,
-                        root: node.root,
-                    };
+            globalThis.testResults = undefined;
+            globalThis.testRunner = mocha.run();
 
-                    for (const test of node.tests) {
-                        tree.tests.push({
-                            id: test.id,
-                            title: test.title,
-                            state: test.state,
-                            error: {
-                                name: test?.err?.name,
-                                message: test?.err?.message,
-                            },
-                        });
-                    }
+            function createReport(node) {
+                const tree = {
+                    tests: [],
+                    suites: [],
+                    id: node.id,
+                    title: node.title,
+                    root: node.root,
+                };
 
-                    for (const suite of node.suites) {
-                        tree.suites.push(createReport(suite));
-                    }
+                for (const test of node.tests) {
+                    tree.tests.push({
+                        id: test.id,
+                        title: test.title,
+                        state: test.state,
+                        error: {
+                            name: test?.err?.name,
+                            message: test?.err?.message,
+                        },
+                    });
+                }
 
-                    return tree;
+                for (const suite of node.suites) {
+                    tree.suites.push(createReport(suite));
                 }
 
-                runner.on("end", function () {
-                    window.suite = createReport(runner.suite);
-                    window.dispatchEvent(new Event("test-complete"));
-                });
+                return tree;
             }
 
-            window.addEventListener("start-test", () => startTest(), { once: true });
-            window.benchmarkReady = true;
-            window.dispatchEvent(new Event("benchmark-ready"));
+            globalThis.testRunner.on("end", () => {
+                globalThis.testResults = createReport(globalThis.testRunner.suite);
+                globalThis.dispatchEvent(new Event("test-complete"));
+            });
         </script>
     </body>
 </html>
diff --git a/tests/run.mjs b/tests/run.mjs
@@ -98,32 +98,24 @@ async function test() {
     try {
         await driver.get(`http://localhost:${PORT}/tests/index.html`);
 
-        await driver.executeAsyncScript((callback) => {
-            if (window.benchmarkReady)
-                callback();
-
-            window.addEventListener("benchmark-ready", () => callback(), { once: true });
-        });
-
-        const result = await driver.executeAsyncScript(function (callback) {
-            window.addEventListener(
-                "test-complete",
-                () =>
-                    callback({
-                        stats: window.mochaResults.stats,
-                        suite: window.suite,
-                    }),
-                { once: true }
-            );
-            window.dispatchEvent(new Event("start-test"));
+        const { testResults, stats } = await driver.executeAsyncScript(function (callback) {
+            const returnResults = () =>
+                callback({
+                    stats: globalThis.testRunner.stats,
+                    testResults: globalThis.testResults,
+                });
+            if (window.testResults)
+                returnResults();
+            else
+                window.addEventListener("test-complete", returnResults, { once: true });
         });
 
-        printTree(result.suite);
+        printTree(testResults);
 
         console.log("\nChecking for passed tests...");
-        assert(result.stats.passes > 0);
+        assert(stats.passes > 0);
         console.log("Checking for failed tests...");
-        assert(result.stats.failures === 0);
+        assert(stats.failures === 0);
     } finally {
         console.log("\nTests complete!");
         driver.quit();
