@epilot/zenith-react 0.2.0-next.4 → 0.2.0-next.5

package/testing/setup.cjs

@@ -0,0 +1,87 @@
+/**
+ * Test setup for consumers of this package, for Vitest and Jest alike.
+ *
+ * WHY THIS EXISTS. Base UI, which sits under Switch, Checkbox, Radio and Select, re-dispatches a
+ * label's click as `new PointerEvent("click")`, the event type browsers use for clicks. jsdom
+ * added `PointerEvent` in 27; on an older jsdom (26 and below) the constructor does not exist, the
+ * dispatch throws, and the click never reaches the control. Nothing is wrong in the app.
+ *
+ * It installs a `PointerEvent` only where there is none. It mirrors Chromium's defaults for
+ * `new PointerEvent(type)`, and steps aside wherever the environment already has one, so it is
+ * safe to keep after a jsdom upgrade. It does nothing outside a DOM (a Node test environment).
+ *
+ * USAGE
+ *
+ *   // vitest.config.ts
+ *   export default defineConfig({
+ *     test: {
+ *       environment: "jsdom",
+ *       setupFiles: ["@epilot/zenith-react/testing/setup.cjs"],
+ *     },
+ *   })
+ *
+ *   // jest.config.cjs
+ *   const griffel = require("@epilot/zenith-react/testing/jest-preset.cjs")
+ *
+ *   module.exports = griffel.withGriffel(
+ *     {
+ *       testEnvironment: "jsdom",
+ *       setupFiles: ["@epilot/zenith-react/testing/setup.cjs"],
+ *       // Jest 28+ resolves package exports with the `require` condition, which
+ *       // @epilot/zenith-react does not have: without the mapping the first import
+ *       // fails with "Cannot find module".
+ *       moduleNameMapper: {
+ *         "^@epilot/zenith-react$":
+ *           "<rootDir>/node_modules/@epilot/zenith-react/dist/index.js",
+ *         "^@epilot/zenith-runtime/v1$":
+ *           "<rootDir>/node_modules/@epilot/zenith-runtime/dist/v1/index.js",
+ *       },
+ *     },
+ *     { alsoTransform: ["@epilot/zenith-runtime", "@base-ui", "@floating-ui"] }
+ *   )
+ *
+ * Keep it in `setupFiles` (it runs before the test framework and the first import of a component);
+ * a setup run later still works, but a module that read `PointerEvent` at import time would not
+ * see it.
+ */
+function installPointerEvent(scope) {
+  if (typeof scope.MouseEvent === "undefined") return false
+  if (typeof scope.PointerEvent !== "undefined") return false
+
+  class PointerEvent extends scope.MouseEvent {
+    constructor(type, init = {}) {
+      super(type, init)
+      this.pointerId = init.pointerId ?? 0
+      this.width = init.width ?? 1
+      this.height = init.height ?? 1
+      this.pressure = init.pressure ?? 0
+      this.tangentialPressure = init.tangentialPressure ?? 0
+      this.tiltX = init.tiltX ?? 0
+      this.tiltY = init.tiltY ?? 0
+      this.twist = init.twist ?? 0
+      this.pointerType = init.pointerType ?? ""
+      this.isPrimary = init.isPrimary ?? false
+      this._coalescedEvents = init.coalescedEvents ?? []
+      this._predictedEvents = init.predictedEvents ?? []
+    }
+
+    getCoalescedEvents() {
+      return [...this._coalescedEvents]
+    }
+
+    getPredictedEvents() {
+      return [...this._predictedEvents]
+    }
+  }
+
+  scope.PointerEvent = PointerEvent
+  // Vitest copies the jsdom window onto `globalThis` once; the class has to reach both.
+  if (typeof globalThis !== "undefined" && globalThis !== scope) {
+    globalThis.PointerEvent = PointerEvent
+  }
+  return true
+}
+
+if (typeof window !== "undefined") installPointerEvent(window)
+
+module.exports = { installPointerEvent }