fix: colorio.js patch mocking CSS

patching colorio.js with optional chaining for `CSS?.supports` Refs: #4400
dequelabs · May 14, 2024 · c62613f · c62613f
1 parent 2ef636d
commit c62613f
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 6 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/test/integration/full/patch/patch.html b/test/integration/full/patch/patch.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Patch Test</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="/node_modules/mocha/mocha.css"
+    />
+    <script src="/node_modules/mocha/mocha.js"></script>
+    <script src="/node_modules/chai/chai.js"></script>
+    <!--script src="/node_modules/colorjs.io/dist/color.js"></script>-->
+    <script src="/axe.js"></script>
+    <script>
+      mocha.setup({
+        timeout: 10000,
+        ui: 'bdd'
+      });
+      const assert = chai.assert;
+    </script>
+  </head>
+  <body>
+    <main id="mocha"></main>
+    <script src="/test/testutils.js"></script>
+    <script src="patch.js" type="module"></script>
+    <script src="/test/integration/adapter.js"></script>
+  </body>
+</html>
diff --git a/test/integration/full/patch/patch.mjs b/test/integration/full/patch/patch.mjs
@@ -0,0 +1,48 @@
+// Solves for situations where global code is mocked, like old Jest docs
+// recommending to `null` out `window.CSS` for JSDOM's benefit
+// https://github.com/thymikee/jest-preset-angular/commit/ac30648347ab41e0cbce741f66ae2a06b766fe13#diff-f2981abe444e6cc2b341b0d7cadb3932d2f1fbb6601aebeaf70f8bb387439d35
+
+const originalWindowCSS = window.CSS;
+function resetWindowCSSMock() {
+	Object.defineProperty(window, 'CSS', { value: originalWindowCSS });
+}
+
+function mockWindowCSS() {
+	Object.defineProperty(window, 'CSS', { value: null });
+}
+
+describe('patch test', function () {
+  it('when not mocked, imports and works as expected', async function () {
+		try {
+			const { default: Color } = await import('https://colorjs.io/dist/color.js');
+			let color = new Color("slategray");
+			assert.ok(color);
+		} catch(error) {
+			// Should not hit this assertion
+			assert.notOk(error);
+		}
+  });
+
+	describe('mocked, `window.CSS === null`', function () {
+		beforeEach(mockWindowCSS);
+		afterEach(resetWindowCSSMock);
+
+		it('can mock window.CSS to `null` on its own', function () {
+			assert.isNull(window.CSS);
+		});
+
+		it('resets css window mock', function () {
+			resetWindowCSSMock();
+			assert.equal(window.CSS, originalWindowCSS);
+		});
+
+		it('`CSS.supports` fails to load when `window.CSS === null`', async function () {
+			try {
+				await import('https://colorjs.io/dist/color.js');
+			} catch({ name, message }) {
+				assert.equal(name, 'TypeError');
+				assert.equal(message, `Cannot read properties of null (reading 'supports')`);
+			}
+		});
+	});
+});
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -85,8 +85,19 @@ module.exports = function (config) {
     ],
     frameworks: ['mocha', 'chai', 'sinon'],
     files: [
+      {
+        pattern: 'node_modules/colorjs.io/dist/*',
+        included: false,
+        served: true
+      },
       { pattern: 'test/mock/**/*.html', included: false, served: true },
       { pattern: 'test/integration/**/*.css', included: false, served: true },
+      {
+        pattern: 'test/integration/**/*.mjs',
+        included: true,
+        served: true,
+        type: 'module'
+      },
       { pattern: 'test/assets/**/*.*', included: false, served: true },
       {
         pattern: 'test/integration/rules/**/*.html',