@noma.to/qwik-testing-library 1.3.1 → 1.4.0

package/README.md

@@ -19,7 +19,7 @@ src="https://raw.githubusercontent.com/ianlet/qwik-testing-library/main/high-vol
 [![MIT License][license-badge]][license]
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
@@ -141,10 +141,12 @@ npm install --save-dev @testing-library/jest-dom @testing-library/user-event
 ```
 
 Finally, we need a DOM environment to run the tests in.
-This library was tested (for now) only with `jsdom` so we recommend using it:
+This library is tested with both `jsdom` and `happy-dom`:
 
 ```shell
 npm install --save-dev jsdom
+# or
+npm install --save-dev happy-dom
 ```
 
 [npm]: https://www.npmjs.com/
@@ -192,7 +194,7 @@ export default defineConfig((configEnv) =>
       },
       // configure your test environment
       test: {
-        environment: "jsdom",
+        environment: "jsdom", // or "happy-dom"
         setupFiles: ["./vitest.setup.ts"],
         globals: true,
       },
@@ -318,17 +320,27 @@ describe("<Counter />", () => {
 > This feature is under a testing phase and thus experimental.
 > Its API may change in the future, so use it at your own risk.
 
-The Qwik Testing Library provides a `mock$` function
+#### Setup
+
+Optionally, you can install `@noma.to/qwik-mock` to mock callbacks of Qwik components. It provides a `mock$` function
 that can be used to create a mock of a QRL and verify interactions on your Qwik components.
 
+```shell
+npm install --save-dev @noma.to/qwik-mock
+```
+
 It is _not_ a replacement of regular mocking functions (such as `vi.fn` and `vi.mock`) as its intended use is only for
 testing callbacks of Qwik components.
 
+#### Usage
+
 Here's an example on how to use the `mock$` function:
 
 ```tsx title="counter.spec.tsx"
 // import qwik-testing methods
-import {mock$, clearAllMock, render, screen, waitFor} from "@noma.to/qwik-testing-library";
+import {render, screen, waitFor} from "@noma.to/qwik-testing-library";
+// import qwik-mock methods
+import {mock$, clearAllMock} from "@noma.to/qwik-mock";
 // import the userEvent methods to interact with the DOM
 import {userEvent} from "@testing-library/user-event";
 
@@ -472,6 +484,7 @@ Thanks goes to these people ([emoji key][emojis]):
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://noma.to/"><img src="https://avatars.githubusercontent.com/u/6018732?v=4?s=100" width="100px;" alt="Ian Létourneau"/><br /><sub><b>Ian Létourneau</b></sub></a><br /><a href="https://github.com/ianlet/qwik-testing-library/commits?author=ianlet" title="Code">💻</a> <a href="https://github.com/ianlet/qwik-testing-library/commits?author=ianlet" title="Tests">⚠️</a> <a href="#ideas-ianlet" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/ianlet/qwik-testing-library/commits?author=ianlet" title="Documentation">📖</a> <a href="#example-ianlet" title="Examples">💡</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://brandonpittman.com"><img src="https://avatars.githubusercontent.com/u/967145?v=4?s=100" width="100px;" alt="Brandon Pittman"/><br /><sub><b>Brandon Pittman</b></sub></a><br /><a href="https://github.com/ianlet/qwik-testing-library/commits?author=brandonpittman" title="Documentation">📖</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="http://jackshelton.com"><img src="https://avatars.githubusercontent.com/u/104264123?v=4?s=100" width="100px;" alt="Jack Shelton"/><br /><sub><b>Jack Shelton</b></sub></a><br /><a href="https://github.com/ianlet/qwik-testing-library/pulls?q=is%3Apr+reviewed-by%3Athejackshelton" title="Reviewed Pull Requests">👀</a></td>
     </tr>
   </tbody>
   <tfoot>

package/lib/index.qwik.cjs

@@ -2,12 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const qwikTestingLibrary = require("./lib/qwik-testing-library.qwik.cjs");
 const dom = require("@testing-library/dom");
-const mock = require("./lib/mock.qwik.cjs");
 exports.cleanup = qwikTestingLibrary.cleanup;
 exports.render = qwikTestingLibrary.render;
-exports.clearAllMocks = mock.clearAllMocks;
-exports.mock$ = mock.mock$;
-exports.mockQrl = mock.mockQrl;
 Object.keys(dom).forEach((k) => {
   if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
     enumerable: true,

package/lib/index.qwik.mjs

@@ -1,10 +1,6 @@
 import { cleanup, render } from "./lib/qwik-testing-library.qwik.mjs";
 export * from "@testing-library/dom";
-import { clearAllMocks, mock$, mockQrl } from "./lib/mock.qwik.mjs";
 export {
   cleanup,
-  clearAllMocks,
-  mock$,
-  mockQrl,
   render
 };

package/lib/lib/qwik-testing-library.qwik.cjs

@@ -24,8 +24,21 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@builder.io/qwik/jsx-runtime");
 const dom = require("@testing-library/dom");
-const mock = require("./mock.qwik.cjs");
-const qwikloader = require("./qwikloader.qwik.cjs");
+const server = require("@builder.io/qwik/server");
+if (typeof HTMLTemplateElement !== "undefined") {
+  const testTemplate = document.createElement("template");
+  const testNode = document.createComment("test");
+  testTemplate.insertBefore(testNode, null);
+  const needsPatch = testTemplate.childNodes.length === 0;
+  testNode.remove();
+  if (needsPatch) {
+    Object.defineProperty(HTMLTemplateElement.prototype, "childNodes", {
+      get() {
+        return this.content.childNodes;
+      }
+    });
+  }
+}
 if (typeof process === "undefined" || !process.env?.QTL_SKIP_AUTO_CLEANUP) {
   if (typeof afterEach === "function") {
     afterEach(() => {
@@ -47,7 +60,9 @@ async function render(ui, options = {}) {
   const wrappedUi = !Wrapper ? ui : /* @__PURE__ */ jsxRuntime.jsx(Wrapper, {
     children: ui
   });
-  qwikloader.qwikLoader(baseElement.ownerDocument);
+  const doc = baseElement.ownerDocument;
+  const win = doc.defaultView;
+  new Function("document", "window", server.getQwikLoaderScript())(doc, win);
   const { cleanup: cleanup2 } = await qwik.render(container, wrappedUi, {
     serverData
   });
@@ -86,9 +101,6 @@ function cleanupAtContainer(ref) {
 function cleanup() {
   mountedContainers.forEach(cleanupAtContainer);
 }
-exports.clearAllMocks = mock.clearAllMocks;
-exports.mock$ = mock.mock$;
-exports.mockQrl = mock.mockQrl;
 exports.cleanup = cleanup;
 exports.render = render;
 Object.keys(dom).forEach((k) => {

package/lib/lib/qwik-testing-library.qwik.mjs

@@ -1,8 +1,21 @@
 import { jsx } from "@builder.io/qwik/jsx-runtime";
 import { getQueriesForElement, prettyDOM } from "@testing-library/dom";
 export * from "@testing-library/dom";
-import { clearAllMocks, mock$, mockQrl } from "./mock.qwik.mjs";
-import { qwikLoader } from "./qwikloader.qwik.mjs";
+import { getQwikLoaderScript } from "@builder.io/qwik/server";
+if (typeof HTMLTemplateElement !== "undefined") {
+  const testTemplate = document.createElement("template");
+  const testNode = document.createComment("test");
+  testTemplate.insertBefore(testNode, null);
+  const needsPatch = testTemplate.childNodes.length === 0;
+  testNode.remove();
+  if (needsPatch) {
+    Object.defineProperty(HTMLTemplateElement.prototype, "childNodes", {
+      get() {
+        return this.content.childNodes;
+      }
+    });
+  }
+}
 if (typeof process === "undefined" || !process.env?.QTL_SKIP_AUTO_CLEANUP) {
   if (typeof afterEach === "function") {
     afterEach(() => {
@@ -24,7 +37,9 @@ async function render(ui, options = {}) {
   const wrappedUi = !Wrapper ? ui : /* @__PURE__ */ jsx(Wrapper, {
     children: ui
   });
-  qwikLoader(baseElement.ownerDocument);
+  const doc = baseElement.ownerDocument;
+  const win = doc.defaultView;
+  new Function("document", "window", getQwikLoaderScript())(doc, win);
   const { cleanup: cleanup2 } = await qwik.render(container, wrappedUi, {
     serverData
   });
@@ -65,8 +80,5 @@ function cleanup() {
 }
 export {
   cleanup,
-  clearAllMocks,
-  mock$,
-  mockQrl,
   render
 };

package/lib-types/lib/qwik-testing-library.d.ts

@@ -1,7 +1,6 @@
 import { JSXOutput } from "@builder.io/qwik";
 import type { Options, Result } from "./types";
-import { clearAllMocks, mock$, mockQrl } from "./mock";
 declare function render(ui: JSXOutput, options?: Options): Promise<Result>;
 declare function cleanup(): void;
 export * from "@testing-library/dom";
-export { cleanup, render, mock$, mockQrl, clearAllMocks };
+export { cleanup, render };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noma.to/qwik-testing-library",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Simple and complete Qwik testing utilities that encourage good testing practices.",
   "repository": "https://github.com/ianlet/qwik-testing-library",
   "homepage": "https://github.com/ianlet/qwik-testing-library",
@@ -35,17 +35,17 @@
   },
   "devDependencies": {
     "@types/eslint": "8.56.10",
-    "@types/node": "22.13.1",
-    "@typescript-eslint/eslint-plugin": "8.24.0",
-    "@typescript-eslint/parser": "8.24.0",
+    "@types/node": "24.5.0",
+    "@typescript-eslint/eslint-plugin": "8.44.0",
+    "@typescript-eslint/parser": "8.45.0",
     "eslint": "8.57.1",
-    "eslint-plugin-qwik": "1.12.0",
-    "prettier": "3.5.0",
-    "typescript": "5.7.3",
+    "eslint-plugin-qwik": "1.16.0",
+    "prettier": "3.6.2",
+    "typescript": "5.9.2",
     "undici": "*",
-    "vite": "6.1.0",
+    "vite": "7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.0.5"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@builder.io/qwik": ">= 1.12.0 < 2",

package/lib/lib/mock.qwik.cjs

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const qwik = require("@builder.io/qwik");
-const vi_CjhMlMwf = require("../node_modules/.pnpm/vitest@3.0.5_@types_node@22.13.1_@vitest_ui@3.0.5_jiti@2.4.2_jsdom@26.0.0/node_modules/vitest/dist/chunks/vi.CjhMlMwf.qwik.cjs");
-const mockQrl = () => {
-  return qwik.$(vi_CjhMlMwf.v.fn());
-};
-const mock$ = qwik.implicit$FirstArg(mockQrl);
-function clearAllMocks() {
-  vi_CjhMlMwf.v.clearAllMocks();
-}
-exports.clearAllMocks = clearAllMocks;
-exports.mock$ = mock$;
-exports.mockQrl = mockQrl;

package/lib/lib/mock.qwik.mjs

@@ -1,14 +0,0 @@
-import { implicit$FirstArg, $ } from "@builder.io/qwik";
-import { v as vi } from "../node_modules/.pnpm/vitest@3.0.5_@types_node@22.13.1_@vitest_ui@3.0.5_jiti@2.4.2_jsdom@26.0.0/node_modules/vitest/dist/chunks/vi.CjhMlMwf.qwik.mjs";
-const mockQrl = () => {
-  return $(vi.fn());
-};
-const mock$ = implicit$FirstArg(mockQrl);
-function clearAllMocks() {
-  vi.clearAllMocks();
-}
-export {
-  clearAllMocks,
-  mock$,
-  mockQrl
-};

package/lib/lib/qwikloader.qwik.cjs

@@ -1,252 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
-  enumerable: true,
-  configurable: true,
-  writable: true,
-  value
-}) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) {
-    __hasOwnProp.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-  }
-  if (__getOwnPropSymbols) {
-    for (var prop of __getOwnPropSymbols(b)) {
-      __propIsEnum.call(b, prop) && __defNormalProp(a, prop, b[prop]);
-    }
-  }
-  return a;
-};
-var qwikLoader = (doc, hasInitialized) => {
-  const Q_CONTEXT = "__q_context__";
-  const win = window;
-  const events = /* @__PURE__ */ new Set();
-  const roots = /* @__PURE__ */ new Set([doc]);
-  const nativeQuerySelectorAll = (root, selector) => Array.from(root.querySelectorAll(selector));
-  const querySelectorAll = (query) => {
-    const elements = [];
-    roots.forEach(
-      (root) => elements.push(...nativeQuerySelectorAll(root, query))
-    );
-    return elements;
-  };
-  const findShadowRoots = (fragment) => {
-    processEventOrNode(fragment);
-    nativeQuerySelectorAll(fragment, "[q\\:shadowroot]").forEach((parent) => {
-      const shadowRoot = parent.shadowRoot;
-      shadowRoot && findShadowRoots(shadowRoot);
-    });
-  };
-  const isPromise = (promise) => promise && "function" == typeof promise.then;
-  const broadcast = (infix, ev, type = ev.type) => {
-    querySelectorAll("[on" + infix + "\\:" + type + "]").forEach(
-      (el) => dispatch(el, infix, ev, type)
-    );
-  };
-  const resolveContainer = (containerEl) => {
-    if (void 0 === containerEl._qwikjson_) {
-      let script = (containerEl === doc.documentElement ? doc.body : containerEl).lastElementChild;
-      while (script) {
-        if ("SCRIPT" === script.tagName && "qwik/json" === script.getAttribute("type")) {
-          containerEl._qwikjson_ = JSON.parse(
-            script.textContent.replace(/\\x3C(\/?script)/gi, "<$1")
-          );
-          break;
-        }
-        script = script.previousElementSibling;
-      }
-    }
-  };
-  const createEvent = (eventName, detail) => new CustomEvent(eventName, {
-    detail
-  });
-  const dispatch = async (element, onPrefix, ev, eventName = ev.type) => {
-    const attrName = "on" + onPrefix + ":" + eventName;
-    element.hasAttribute("preventdefault:" + eventName) && ev.preventDefault();
-    const ctx = element._qc_;
-    const relevantListeners = ctx && ctx.li.filter((li) => li[0] === attrName);
-    if (relevantListeners && relevantListeners.length > 0) {
-      for (const listener of relevantListeners) {
-        const results = listener[1].getFn(
-          [element, ev],
-          () => element.isConnected
-        )(ev, element);
-        const cancelBubble = ev.cancelBubble;
-        isPromise(results) && await results;
-        cancelBubble && ev.stopPropagation();
-      }
-      return;
-    }
-    const attrValue = element.getAttribute(attrName);
-    if (attrValue) {
-      const container = element.closest("[q\\:container]");
-      const qBase = container.getAttribute("q:base");
-      const qVersion = container.getAttribute("q:version") || "unknown";
-      const qManifest = container.getAttribute("q:manifest-hash") || "dev";
-      const base = new URL(qBase, doc.baseURI);
-      for (const qrl of attrValue.split("\n")) {
-        const url = new URL(qrl, base);
-        const href = url.href;
-        const symbol = url.hash.replace(/^#?([^?[|]*).*$/, "$1") || "default";
-        const reqTime = performance.now();
-        let handler;
-        let importError;
-        let error;
-        const isSync = qrl.startsWith("#");
-        const eventData = {
-          qBase,
-          qManifest,
-          qVersion,
-          href,
-          symbol,
-          element,
-          reqTime
-        };
-        if (isSync) {
-          const hash = container.getAttribute("q:instance");
-          handler = (doc["qFuncs_" + hash] || [])[Number.parseInt(symbol)];
-          if (!handler) {
-            importError = "sync";
-            error = new Error("sync handler error for symbol: " + symbol);
-          }
-        } else {
-          const uri = url.href.split("#")[0];
-          try {
-            const module2 = import(uri);
-            resolveContainer(container);
-            handler = (await module2)[symbol];
-            if (!handler) {
-              importError = "no-symbol";
-              error = new Error(`${symbol} not in ${uri}`);
-            }
-          } catch (err) {
-            importError || (importError = "async");
-            error = err;
-          }
-        }
-        if (!handler) {
-          emitEvent(
-            "qerror",
-            __spreadValues(
-              {
-                importError,
-                error
-              },
-              eventData
-            )
-          );
-          console.error(error);
-          break;
-        }
-        const previousCtx = doc[Q_CONTEXT];
-        if (element.isConnected) {
-          try {
-            doc[Q_CONTEXT] = [element, ev, url];
-            isSync || emitEvent("qsymbol", __spreadValues({}, eventData));
-            const results = handler(ev, element);
-            isPromise(results) && await results;
-          } catch (error2) {
-            emitEvent(
-              "qerror",
-              __spreadValues(
-                {
-                  error: error2
-                },
-                eventData
-              )
-            );
-          } finally {
-            doc[Q_CONTEXT] = previousCtx;
-          }
-        }
-      }
-    }
-  };
-  const emitEvent = (eventName, detail) => {
-    doc.dispatchEvent(createEvent(eventName, detail));
-  };
-  const camelToKebab = (str) => str.replace(/([A-Z])/g, (a) => "-" + a.toLowerCase());
-  const processDocumentEvent = async (ev) => {
-    let type = camelToKebab(ev.type);
-    let element = ev.target;
-    broadcast("-document", ev, type);
-    while (element && element.getAttribute) {
-      const results = dispatch(element, "", ev, type);
-      let cancelBubble = ev.cancelBubble;
-      isPromise(results) && await results;
-      cancelBubble = cancelBubble || ev.cancelBubble || element.hasAttribute("stoppropagation:" + ev.type);
-      element = ev.bubbles && true !== cancelBubble ? element.parentElement : null;
-    }
-  };
-  const processWindowEvent = (ev) => {
-    broadcast("-window", ev, camelToKebab(ev.type));
-  };
-  const processReadyStateChange = () => {
-    var _a;
-    const readyState = doc.readyState;
-    if (!hasInitialized && ("interactive" == readyState || "complete" == readyState)) {
-      roots.forEach(findShadowRoots);
-      hasInitialized = 1;
-      emitEvent("qinit");
-      (null != (_a = win.requestIdleCallback) ? _a : win.setTimeout).bind(win)(
-        () => emitEvent("qidle")
-      );
-      if (events.has("qvisible")) {
-        const results = querySelectorAll("[on\\:qvisible]");
-        const observer = new IntersectionObserver((entries) => {
-          for (const entry of entries) {
-            if (entry.isIntersecting) {
-              observer.unobserve(entry.target);
-              dispatch(entry.target, "", createEvent("qvisible", entry));
-            }
-          }
-        });
-        results.forEach((el) => observer.observe(el));
-      }
-    }
-  };
-  const addEventListener = (el, eventName, handler, capture = false) => el.addEventListener(eventName, handler, {
-    capture,
-    passive: false
-  });
-  const processEventOrNode = (...eventNames) => {
-    for (const eventNameOrNode of eventNames) {
-      if ("string" == typeof eventNameOrNode) {
-        if (!events.has(eventNameOrNode)) {
-          roots.forEach(
-            (root) => addEventListener(root, eventNameOrNode, processDocumentEvent, true)
-          );
-          addEventListener(win, eventNameOrNode, processWindowEvent, true);
-          events.add(eventNameOrNode);
-        }
-      } else if (!roots.has(eventNameOrNode)) {
-        events.forEach(
-          (eventName) => addEventListener(
-            eventNameOrNode,
-            eventName,
-            processDocumentEvent,
-            true
-          )
-        );
-        roots.add(eventNameOrNode);
-      }
-    }
-  };
-  if (!(Q_CONTEXT in doc)) {
-    doc[Q_CONTEXT] = 0;
-    const qwikevents = win.qwikevents;
-    Array.isArray(qwikevents) && processEventOrNode(...qwikevents);
-    win.qwikevents = {
-      events,
-      roots,
-      push: processEventOrNode
-    };
-    addEventListener(doc, "readystatechange", processReadyStateChange);
-    processReadyStateChange();
-  }
-};
-exports.qwikLoader = qwikLoader;