chore: update tests to work with new sprite logic

kevinchappell · kevinchappell · commit ea47e40a3d50 · 2025-11-13T02:35:17.000Z
diff --git a/package.json b/package.json
@@ -83,9 +83,9 @@
     "lint": "biome check ./src",
     "lint:fix": "biome check --write ./src",
     "format": "biome format --write .",
-    "test": "node --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
-    "test:watch": "node --watch --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
-    "test:updateSnapshots": "node --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+    "test": "node --experimental-loader=./tools/svg-loader.mjs --import=./tools/__mocks__/sprite-init.mjs --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+    "test:watch": "node --watch --experimental-loader=./tools/svg-loader.mjs --import=./tools/__mocks__/sprite-init.mjs --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+    "test:updateSnapshots": "node --experimental-loader=./tools/svg-loader.mjs --import=./tools/__mocks__/sprite-init.mjs --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
     "test:ci": "npm test --coverage",
     "start": "npm-run-all build:icons dev",
     "semantic-release": "semantic-release --ci --debug",
diff --git a/tools/__mocks__/sprite-init.mjs b/tools/__mocks__/sprite-init.mjs
@@ -0,0 +1,10 @@
+/**
+ * Initialize the SVG sprite for tests
+ * This uses the global function set up in test-setup.cjs
+ */
+import { loaded } from '../../src/lib/js/common/loaders.js'
+
+// Call the global initialization function if it exists
+if (typeof global.__initFormeoSprite === 'function') {
+  global.__initFormeoSprite(loaded)
+}
diff --git a/tools/svg-loader.mjs b/tools/svg-loader.mjs
@@ -0,0 +1,41 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+/**
+ * Custom loader to handle SVG imports with ?raw suffix in tests
+ * This loader is needed because Node.js doesn't natively support importing .svg files
+ */
+
+export async function resolve(specifier, context, nextResolve) {
+  // Let the default resolver handle the path resolution first
+  return nextResolve(specifier, context)
+}
+
+export async function load(url, context, nextLoad) {
+  // Check if this is an SVG file (with or without ?raw query parameter)
+  const urlWithoutQuery = url.split('?')[0]
+
+  if (urlWithoutQuery.endsWith('.svg')) {
+    try {
+      const filePath = fileURLToPath(urlWithoutQuery)
+      const content = readFileSync(filePath, 'utf-8')
+
+      // Return as an ES module with a default export
+      return {
+        format: 'module',
+        source: `export default ${JSON.stringify(content)}`,
+        shortCircuit: true,
+      }
+    } catch {
+      // If file doesn't exist or can't be read, return empty string
+      return {
+        format: 'module',
+        source: 'export default ""',
+        shortCircuit: true,
+      }
+    }
+  }
+
+  // Let Node.js handle all other file types
+  return nextLoad(url, context)
+}
diff --git a/tools/test-setup.cjs b/tools/test-setup.cjs
@@ -1,7 +1,8 @@
 const { snapshot } = require('node:test')
-const { basename, join, dirname } = require('node:path')
+const { basename, join, dirname, resolve } = require('node:path')
 const { JSDOM } = require('jsdom')
 const { ResizeObserver } = require('./__mocks__/ResizeObserver')
+const { readFileSync } = require('node:fs')
 
 const { window } = new JSDOM('<!DOCTYPE html><p>Hello World</p>', { pretendToBeVisual: true })
 
@@ -10,6 +11,20 @@ global.window = window
 global.document = window.document
 global.navigator = window.navigator
 
+// Prepare the SVG sprite data for sprite-init.mjs (imported via --import flag)
+const spritePath = resolve(__dirname, '..', 'src', 'lib', 'icons', 'formeo-sprite.svg')
+const spriteContent = readFileSync(spritePath, 'utf-8')
+const parser = new window.DOMParser()
+const svgDoc = parser.parseFromString(spriteContent, 'image/svg+xml')
+const parsedSprite = svgDoc.documentElement
+
+// Expose a global function that sprite-init.mjs will call
+global.__initFormeoSprite = loadedObject => {
+  if (!loadedObject.formeoSprite) {
+    loadedObject.formeoSprite = parsedSprite
+  }
+}
+
 // jsdom does not provide this method
 window.Element.prototype.animate = () => ({
   finished: Promise.resolve(),
