Merge pull request #74 from botandrose/test-suite-improvements

Test suite improvements

.github/workflows/ci.yml

@@ -19,3 +19,17 @@ jobs:
       - name: Run tests
         run: npm run ci
 
+  test-move-before:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Run tests
+        run: npm run test-move-before
+

.gitignore

@@ -1,3 +1,4 @@
 /node_modules/
 /coverage
+/test/chrome-profile
 .idea

TESTING.md

@@ -25,6 +25,12 @@ npm run ci
 ```
 This will run the tests using Playwright’s headless browser setup across Chrome, Firefox, and WebKit (Safari-adjacent). This is ultimately what gets run in Github Actions to verify PRs.
 
+To run all tests against Chrome with experimental `moveBefore` support added, execute:
+```bash
+npm run test-move-before
+```
+This will start headless Chrome in a new profile with the `atomic-move` experimental flag set. This runs in a separate job in CI.
+
 ## Running Individual Tests
 
 ### Headless Mode

package.json

@@ -21,6 +21,7 @@
   "scripts": {
     "test": "web-test-runner",
     "debug": "web-test-runner --manual --open",
+    "test-move-before": "USE_MOVE_BEFORE=1 web-test-runner",
     "ci": "web-test-runner --playwright --browsers chromium firefox webkit",
     "amd": "(echo \"define(() => {\n\" && cat src/idiomorph.js && echo \"\nreturn Idiomorph});\") > dist/idiomorph.amd.js",
     "cjs": "(cat src/idiomorph.js && echo \"\nmodule.exports = Idiomorph;\") > dist/idiomorph.cjs.js",

test/bootstrap.js

@@ -1,10 +1,6 @@
 describe("Bootstrap test", function(){
+    setup();
 
-    beforeEach(function() {
-        clearWorkArea();
-    });
-
-    // bootstrap test
     it('can morph content to content', function()
     {
         let btn1 = make('<button>Foo</button>')

test/core.js

@@ -1,8 +1,5 @@
 describe("Core morphing tests", function(){
-
-    beforeEach(function() {
-        clearWorkArea();
-    });
+    setup();
 
     it('morphs outerHTML as content properly when argument is null', function()
     {
@@ -477,5 +474,4 @@ describe("Core morphing tests", function(){
         }
     });
 
-
 })

test/fidelity.js

@@ -1,8 +1,5 @@
 describe("Tests to ensure that idiomorph merges properly", function(){
-
-    beforeEach(function() {
-        clearWorkArea();
-    });
+    setup();
 
     function expectFidelity(actual, expected) {
         if (actual.outerHTML !== expected) {

test/head.js

@@ -1,8 +1,5 @@
 describe("Tests to ensure that the head tag merging works correctly", function() {
-
-    beforeEach(function () {
-        clearWorkArea();
-    });
+    setup();
 
     it('adds a new element correctly', function () {
         let parser = new DOMParser();
@@ -101,4 +98,4 @@ describe("Tests to ensure that the head tag merging works correctly", function()
 
 
 
-});
+});

test/htmx-integration.js

@@ -1,5 +1,4 @@
 describe("Tests for the htmx integration", function() {
-
     function makeServer(){
         var server = sinon.fakeServer.create();
         htmx.config.defaultSettleDelay = 0;

test/lib/utilities.js

@@ -1,5 +1,14 @@
 /* Test Utilities */
 
+function setup() {
+    beforeEach(() => {
+        if (window.useMoveBefore && !Element.prototype.moveBefore) {
+            throw new Error('Element.prototype.moveBefore is not available.');
+        }
+        clearWorkArea();
+    });
+}
+
 function make(htmlStr) {
     let range = document.createRange();
     let fragment = range.createContextualFragment(htmlStr);
@@ -47,4 +56,4 @@ function print(elt) {
     let text = document.createTextNode( elt.outerHTML + "\n\n" );
     getWorkArea().appendChild(text);
     return elt;
-}
+}

test/perf.js

@@ -1,9 +1,5 @@
 describe("Tests to compare perf with morphdom", function(){
-
-    beforeEach(function() {
-        clearWorkArea();
-    });
-
+    setup();
 
     it('HTML5 Elements Sample Page', function(done)
     {

web-test-runner.config.mjs

@@ -1,14 +1,17 @@
-export default {
-  nodeResolve: true,
-  coverage: true,
-  files: "test/*.js",
+import { chromeLauncher } from "@web/test-runner";
+import { exec } from "child_process";
+
+let config = {
   testRunnerHtml: (testFramework) => `
     <!DOCTYPE html>
     <html>
     <head>
       <script src="/node_modules/chai/chai.js"></script>
       <script src="/node_modules/chai-dom/chai-dom.js"></script>
-      <script>should = chai.should()</script>
+      <script>
+          should = chai.should();
+          window.useMoveBefore = ${process.env.USE_MOVE_BEFORE};
+      </script>
       <script src="/test/lib/utilities.js"></script>
       <script src="/node_modules/sinon/pkg/sinon.js"></script>
 
@@ -29,5 +32,25 @@ export default {
     </body>
     </html>
   `,
+
+  nodeResolve: true,
+  coverage: true,
+  coverageConfig: {
+    include: ['src/**/*'],
+  },
+  files: "test/*.js",
 };
 
+if (process.env.USE_MOVE_BEFORE) {
+  // configure chrome to use a custom profile directory we control
+  config.browsers = [
+    chromeLauncher({ launchOptions: { args: ['--user-data-dir=test/chrome-profile'] } })
+  ]
+  exec([
+    'rm -rf test/chrome-profile', // clear profile out from last run
+    'mkdir -p test/chrome-profile', // create from scratch
+    `echo '{"browser":{"enabled_labs_experiments":["atomic-move@1"]}}' > test/chrome-profile/Local\\ State`, // enable experiment
+  ].join(" && "));
+}
+
+export default config;