sibujs 4.5.0 → 4.7.0

package/dist/testing.js

@@ -3,18 +3,220 @@ import {
 } from "./chunk-7ZHH77QA.js";
 import {
   effect
-} from "./chunk-RIXRAYIU.js";
-import "./chunk-5DXA2J44.js";
+} from "./chunk-WEQ3DMVL.js";
+import "./chunk-7XHATCIH.js";
+import "./chunk-JWKYU5GV.js";
 import {
-  replaceChildrenSafely
-} from "./chunk-QKRPLZ2V.js";
-import "./chunk-UGRX3S57.js";
-import "./chunk-2WLZ6757.js";
+  dispose,
+  replaceChildrenSafely,
+  reportError
+} from "./chunk-NYNYSPK7.js";
 
-// src/testing/a11y.ts
-function escSel(value) {
-  return value.replace(/["\\]/g, "\\$&");
+// src/testing/queries.ts
+function queryByText(container, text) {
+  const walk = (node) => {
+    if (node.childNodes.length === 1 && node.childNodes[0].nodeType === 3) {
+      if (node.textContent?.includes(text)) return node;
+    }
+    for (const child of Array.from(node.children)) {
+      const found = walk(child);
+      if (found) return found;
+    }
+    return null;
+  };
+  return walk(container);
+}
+function queryByAttribute(container, attribute, value) {
+  for (const el of Array.from(container.querySelectorAll(`[${attribute}]`))) {
+    if (el.getAttribute(attribute) === value) return el;
+  }
+  return null;
+}
+function queryAllByAttribute(container, attribute, value) {
+  return Array.from(container.querySelectorAll(`[${attribute}]`)).filter(
+    (el) => el.getAttribute(attribute) === value
+  );
+}
+function queryByTestId(container, testId) {
+  return queryByAttribute(container, "data-testid", testId);
+}
+function queryByRole(container, role) {
+  return queryByAttribute(container, "role", role);
+}
+function queryByLabel(container, labelText) {
+  const labels = Array.from(container.querySelectorAll("label"));
+  for (const label of labels) {
+    if (label.textContent?.trim() === labelText) {
+      const forId = label.getAttribute("for");
+      if (forId) {
+        const target = queryByAttribute(container, "id", forId);
+        if (target) return target;
+      }
+      const child = label.querySelector("input, select, textarea, button");
+      if (child) return child;
+    }
+  }
+  return queryByAttribute(container, "aria-label", labelText);
+}
+async function pollUntil(fn, timeout, interval, errorIfTimeout) {
+  const start = Date.now();
+  return new Promise((resolve, reject) => {
+    let timer;
+    const check = () => {
+      timer = void 0;
+      let result;
+      try {
+        result = fn();
+      } catch (err) {
+        reject(err);
+        return;
+      }
+      if (result !== null) {
+        resolve(result);
+        return;
+      }
+      if (Date.now() - start >= timeout) {
+        reject(new Error(errorIfTimeout));
+        return;
+      }
+      timer = setTimeout(check, interval);
+    };
+    check();
+    void timer;
+  });
+}
+function findByText(container, text, options = {}) {
+  return pollUntil(
+    () => queryByText(container, text),
+    options.timeout ?? 1e3,
+    options.interval ?? 50,
+    `findByText: no element with text "${text}" after ${options.timeout ?? 1e3}ms`
+  );
+}
+function findByTestId(container, testId, options = {}) {
+  return pollUntil(
+    () => queryByTestId(container, testId),
+    options.timeout ?? 1e3,
+    options.interval ?? 50,
+    `findByTestId: no element with data-testid="${testId}" after ${options.timeout ?? 1e3}ms`
+  );
+}
+function findByRole(container, role, options = {}) {
+  return pollUntil(
+    () => queryByRole(container, role),
+    options.timeout ?? 1e3,
+    options.interval ?? 50,
+    `findByRole: no element with role="${role}" after ${options.timeout ?? 1e3}ms`
+  );
+}
+function waitForSignal(getter, predicate, options = {}) {
+  const timeoutMs = options.timeout ?? 1e3;
+  return new Promise((resolve, reject) => {
+    let resolved = false;
+    let timer;
+    const finish = (fn) => {
+      if (resolved) return;
+      resolved = true;
+      if (timer !== void 0) clearTimeout(timer);
+      fn();
+    };
+    timer = setTimeout(() => {
+      finish(() => {
+        teardown();
+        reject(new Error(`waitForSignal: predicate did not match within ${timeoutMs}ms`));
+      });
+    }, timeoutMs);
+    const teardown = effect(() => {
+      if (resolved) return;
+      const value = getter();
+      if (predicate(value)) {
+        finish(() => {
+          queueMicrotask(() => teardown());
+          resolve(value);
+        });
+      }
+    });
+  });
+}
+function type(element, text) {
+  for (const char of text) {
+    element.value += char;
+    element.dispatchEvent(new InputEvent("input", { bubbles: true, data: char }));
+  }
+  element.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+// src/testing/listenerTracking.ts
+var KEY = /* @__PURE__ */ Symbol.for("sibujs.listenerTracking.v2");
+var host = globalThis;
+function captureOf(options) {
+  if (typeof options === "boolean") return options;
+  return typeof options === "object" && options !== null && !!options.capture;
+}
+function enableListenerTracking() {
+  if (host[KEY] || typeof EventTarget === "undefined") return;
+  const tracker = /* @__PURE__ */ new WeakMap();
+  host[KEY] = tracker;
+  const proto = EventTarget.prototype;
+  const add = proto.addEventListener;
+  const remove = proto.removeEventListener;
+  const find = (target, type2, listener, capture) => tracker.get(target)?.get(type2)?.find((e) => e.listener === listener && e.capture === capture);
+  const drop = (target, type2, entry) => {
+    const types = tracker.get(target);
+    const entries = types?.get(type2);
+    if (!types || !entries) return;
+    const index = entries.indexOf(entry);
+    if (index === -1) return;
+    entries.splice(index, 1);
+    if (entries.length === 0) types.delete(type2);
+    entry.release?.();
+  };
+  proto.addEventListener = function(type2, listener, options) {
+    const tracked = listener != null && typeof Element !== "undefined" && this instanceof Element;
+    const capture = captureOf(options);
+    const opts = typeof options === "object" && options !== null ? options : void 0;
+    if (!tracked || opts?.signal?.aborted || find(this, type2, listener, capture)) {
+      add.call(this, type2, listener, options);
+      return;
+    }
+    const entry = { listener, capture };
+    const releases = [];
+    if (opts?.once) {
+      const onFire = () => drop(this, type2, entry);
+      add.call(this, type2, onFire, { capture, once: true });
+      releases.push(() => remove.call(this, type2, onFire, { capture }));
+    }
+    if (opts?.signal) {
+      const signal = opts.signal;
+      const onAbort = () => drop(this, type2, entry);
+      add.call(signal, "abort", onAbort, { once: true });
+      releases.push(() => remove.call(signal, "abort", onAbort));
+    }
+    if (releases.length > 0) {
+      entry.release = () => {
+        for (const release of releases) release();
+      };
+    }
+    let types = tracker.get(this);
+    if (!types) tracker.set(this, types = /* @__PURE__ */ new Map());
+    let entries = types.get(type2);
+    if (!entries) types.set(type2, entries = []);
+    entries.push(entry);
+    add.call(this, type2, listener, options);
+  };
+  proto.removeEventListener = function(type2, listener, options) {
+    remove.call(this, type2, listener, options);
+    const entry = find(this, type2, listener, captureOf(options));
+    if (entry) drop(this, type2, entry);
+  };
 }
+function listenerTypes(el) {
+  const types = host[KEY]?.get(el);
+  return new Set(types ? types.keys() : []);
+}
+
+// src/testing/a11y.ts
+enableListenerTracking();
 var VALID_ARIA_ROLES = /* @__PURE__ */ new Set([
   "alert",
   "alertdialog",
@@ -178,6 +380,21 @@ function getSelector(el) {
   const roleStr = role ? `[role="${role}"]` : "";
   return `${tag}${classes}${roleStr}`;
 }
+function selectAll(root, selector) {
+  const matches = Array.from(root.querySelectorAll(selector));
+  if (root.matches(selector)) matches.unshift(root);
+  return matches;
+}
+function hasActivationHandler(el) {
+  if (el.hasAttribute("onclick")) return true;
+  const types = listenerTypes(el);
+  return ["click", "pointerdown", "pointerup", "mousedown", "mouseup"].some((t) => types.has(t));
+}
+function hasKeyboardHandler(el) {
+  if (el.hasAttribute("onkeydown") || el.hasAttribute("onkeyup") || el.hasAttribute("onkeypress")) return true;
+  const types = listenerTypes(el);
+  return types.has("keydown") || types.has("keyup") || types.has("keypress");
+}
 function hasAccessibleName(el) {
   if (el.getAttribute("aria-label")?.trim()) return true;
   const labelledBy = el.getAttribute("aria-labelledby");
@@ -195,15 +412,16 @@ function hasAccessibleName(el) {
 }
 function isNativeInteractive(el) {
   const tag = el.tagName.toLowerCase();
-  if (["button", "select", "textarea"].includes(tag)) return true;
+  if (["button", "select", "textarea", "summary"].includes(tag)) return true;
   if (tag === "input" && el.getAttribute("type") !== "hidden") return true;
   if (tag === "a" && el.hasAttribute("href")) return true;
   if (tag === "area" && el.hasAttribute("href")) return true;
   return false;
 }
+var DELEGATES_ATTRIBUTE = "data-a11y-delegates";
 function checkImageAlt(root) {
   const violations = [];
-  const images = root.querySelectorAll("img");
+  const images = selectAll(root, "img");
   for (const img of Array.from(images)) {
     if (!img.hasAttribute("alt")) {
       violations.push({
@@ -223,7 +441,7 @@ function checkImageAlt(root) {
       });
     }
   }
-  const roleImgs = root.querySelectorAll('[role="img"]');
+  const roleImgs = selectAll(root, '[role="img"]');
   for (const el of Array.from(roleImgs)) {
     if (!hasAccessibleName(el)) {
       violations.push({
@@ -239,7 +457,7 @@ function checkImageAlt(root) {
 }
 function checkFormLabels(root) {
   const violations = [];
-  const inputs = root.querySelectorAll("input, select, textarea");
+  const inputs = selectAll(root, "input, select, textarea");
   for (const input of Array.from(inputs)) {
     if (input.getAttribute("type") === "hidden") continue;
     const inputType = input.getAttribute("type");
@@ -271,7 +489,9 @@ function checkInputHasLabel(input, root) {
   if (input.getAttribute("title")?.trim()) return true;
   const id = input.getAttribute("id");
   if (id) {
-    const label = root.querySelector(`label[for="${escSel(id)}"]`);
+    const scope = input.getRootNode();
+    const searchIn = typeof scope.querySelectorAll === "function" ? scope : root;
+    const label = queryAllByAttribute(searchIn, "for", id).find((el) => el.tagName === "LABEL");
     if (label?.textContent?.trim()) return true;
   }
   let parent = input.parentElement;
@@ -283,7 +503,7 @@ function checkInputHasLabel(input, root) {
 }
 function checkHeadingHierarchy(root) {
   const violations = [];
-  const headings = root.querySelectorAll("h1, h2, h3, h4, h5, h6");
+  const headings = selectAll(root, "h1, h2, h3, h4, h5, h6");
   if (headings.length === 0) return violations;
   let previousLevel = 0;
   for (const heading of Array.from(headings)) {
@@ -321,7 +541,7 @@ function checkHeadingHierarchy(root) {
 }
 function checkColorContrast(root) {
   const violations = [];
-  const roledElements = root.querySelectorAll("[role]");
+  const roledElements = selectAll(root, "[role]");
   for (const el of Array.from(roledElements)) {
     const role = el.getAttribute("role");
     if (!role) continue;
@@ -357,7 +577,7 @@ function checkColorContrast(root) {
       });
     }
   }
-  const inlineStyled = root.querySelectorAll("[style]");
+  const inlineStyled = selectAll(root, "[style]");
   for (const el of Array.from(inlineStyled)) {
     const style = el.getAttribute("style") || "";
     const hasColor = /(?:^|;)\s*color\s*:/i.test(style);
@@ -383,14 +603,15 @@ function checkColorContrast(root) {
   }
   return violations;
 }
-function checkKeyboardAccess(root) {
+function checkKeyboardAccess(root, options) {
   const violations = [];
-  const clickElements = root.querySelectorAll("[onclick]");
-  for (const el of Array.from(clickElements)) {
+  const clickElements = selectAll(root, "*").filter(hasActivationHandler);
+  for (const el of clickElements) {
     if (isNativeInteractive(el)) continue;
+    if (el.hasAttribute(DELEGATES_ATTRIBUTE) || options?.delegatesActivation?.(el)) continue;
     const hasTabindex = el.hasAttribute("tabindex");
     const hasRole = el.hasAttribute("role");
-    const hasKeyHandler = el.hasAttribute("onkeydown") || el.hasAttribute("onkeyup") || el.hasAttribute("onkeypress");
+    const hasKeyHandler = hasKeyboardHandler(el);
     if (!hasTabindex) {
       violations.push({
         rule: "keyboard-access",
@@ -419,7 +640,8 @@ function checkKeyboardAccess(root) {
       });
     }
   }
-  const interactiveRoles = root.querySelectorAll(
+  const interactiveRoles = selectAll(
+    root,
     '[role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="option"]'
   );
   for (const el of Array.from(interactiveRoles)) {
@@ -438,7 +660,7 @@ function checkKeyboardAccess(root) {
 }
 function checkAriaAttributes(root) {
   const violations = [];
-  const roledElements = root.querySelectorAll("[role]");
+  const roledElements = selectAll(root, "[role]");
   for (const el of Array.from(roledElements)) {
     const role = el.getAttribute("role");
     if (!role) continue;
@@ -465,7 +687,7 @@ function checkAriaAttributes(root) {
       }
     }
   }
-  const allElements = root.querySelectorAll("*");
+  const allElements = selectAll(root, "*");
   for (const el of Array.from(allElements)) {
     for (const attr of Array.from(el.attributes)) {
       if (!attr.name.startsWith("aria-")) continue;
@@ -524,31 +746,19 @@ function checkAriaAttributes(root) {
       }
     }
   }
-  for (const attr of Array.from(root.attributes)) {
-    if (!attr.name.startsWith("aria-")) continue;
-    if (!VALID_ARIA_ATTRIBUTES.has(attr.name)) {
-      violations.push({
-        rule: "aria-valid-attr",
-        level: "error",
-        message: `Invalid ARIA attribute "${attr.name}" on root element. Must be a valid WAI-ARIA attribute.`,
-        element: root,
-        selector: getSelector(root)
-      });
-    }
-  }
   return violations;
 }
 function checkLandmarks(root) {
   const violations = [];
   const foundLandmarks = /* @__PURE__ */ new Set();
   for (const role of LANDMARK_ROLES) {
-    const elements = root.querySelectorAll(`[role="${role}"]`);
+    const elements = selectAll(root, `[role="${role}"]`);
     if (elements.length > 0) {
       foundLandmarks.add(role);
     }
   }
   for (const [tag, role] of Object.entries(LANDMARK_ELEMENTS)) {
-    const elements = root.querySelectorAll(tag);
+    const elements = selectAll(root, tag);
     if (elements.length > 0) {
       foundLandmarks.add(role);
     }
@@ -561,7 +771,7 @@ function checkLandmarks(root) {
       selector: getSelector(root)
     });
   }
-  const mainElements = root.querySelectorAll('main, [role="main"]');
+  const mainElements = selectAll(root, 'main, [role="main"]');
   if (mainElements.length > 1) {
     violations.push({
       rule: "landmark-unique",
@@ -570,7 +780,7 @@ function checkLandmarks(root) {
       selector: getSelector(root)
     });
   }
-  const bannerElements = root.querySelectorAll('header, [role="banner"]');
+  const bannerElements = selectAll(root, 'header, [role="banner"]');
   if (bannerElements.length > 1) {
     violations.push({
       rule: "landmark-unique",
@@ -579,7 +789,7 @@ function checkLandmarks(root) {
       selector: getSelector(root)
     });
   }
-  const contentinfoElements = root.querySelectorAll('footer, [role="contentinfo"]');
+  const contentinfoElements = selectAll(root, 'footer, [role="contentinfo"]');
   if (contentinfoElements.length > 1) {
     violations.push({
       rule: "landmark-unique",
@@ -588,7 +798,7 @@ function checkLandmarks(root) {
       selector: getSelector(root)
     });
   }
-  const navElements = root.querySelectorAll('nav, [role="navigation"]');
+  const navElements = selectAll(root, 'nav, [role="navigation"]');
   if (navElements.length > 1) {
     for (const nav of Array.from(navElements)) {
       if (!nav.getAttribute("aria-label") && !nav.getAttribute("aria-labelledby")) {
@@ -606,7 +816,7 @@ function checkLandmarks(root) {
 }
 function checkLinksAndButtons(root) {
   const violations = [];
-  const links = root.querySelectorAll("a[href]");
+  const links = selectAll(root, "a[href]");
   for (const link of Array.from(links)) {
     if (!hasAccessibleName(link)) {
       violations.push({
@@ -648,7 +858,7 @@ function checkLinksAndButtons(root) {
       });
     }
   }
-  const buttons = root.querySelectorAll('button, [role="button"]');
+  const buttons = selectAll(root, 'button, [role="button"]');
   for (const button of Array.from(buttons)) {
     if (!hasAccessibleName(button)) {
       violations.push({
@@ -660,7 +870,7 @@ function checkLinksAndButtons(root) {
       });
     }
   }
-  const inputButtons = root.querySelectorAll('input[type="submit"], input[type="reset"], input[type="button"]');
+  const inputButtons = selectAll(root, 'input[type="submit"], input[type="reset"], input[type="button"]');
   for (const input of Array.from(inputButtons)) {
     const value = input.getAttribute("value");
     if (!value?.trim() && !input.getAttribute("aria-label") && !input.getAttribute("aria-labelledby")) {
@@ -677,7 +887,7 @@ function checkLinksAndButtons(root) {
 }
 function checkListSemantics(root) {
   const violations = [];
-  const lists = root.querySelectorAll("ul, ol");
+  const lists = selectAll(root, "ul, ol");
   for (const list of Array.from(lists)) {
     const children = Array.from(list.children);
     for (const child of children) {
@@ -702,7 +912,7 @@ function checkListSemantics(root) {
       });
     }
   }
-  const dlLists = root.querySelectorAll("dl");
+  const dlLists = selectAll(root, "dl");
   for (const dl of Array.from(dlLists)) {
     const children = Array.from(dl.children);
     for (const child of children) {
@@ -718,7 +928,7 @@ function checkListSemantics(root) {
       }
     }
   }
-  const roleLists = root.querySelectorAll('[role="list"]');
+  const roleLists = selectAll(root, '[role="list"]');
   for (const list of Array.from(roleLists)) {
     const children = Array.from(list.children);
     const hasListItems = children.some(
@@ -738,7 +948,7 @@ function checkListSemantics(root) {
 }
 function checkTabOrder(root) {
   const violations = [];
-  const tabbable = root.querySelectorAll("[tabindex]");
+  const tabbable = selectAll(root, "[tabindex]");
   for (const el of Array.from(tabbable)) {
     const tabindex = parseInt(el.getAttribute("tabindex") ?? "", 10);
     if (!Number.isNaN(tabindex) && tabindex > 0) {
@@ -751,7 +961,7 @@ function checkTabOrder(root) {
       });
     }
   }
-  const focusTraps = root.querySelectorAll('[data-sibu-focus-trap], [aria-modal="true"]');
+  const focusTraps = selectAll(root, '[data-sibu-focus-trap], [aria-modal="true"]');
   for (const trap of Array.from(focusTraps)) {
     const role = trap.getAttribute("role");
     if (role === "dialog" || role === "alertdialog" || trap.hasAttribute("aria-modal")) {
@@ -857,8 +1067,8 @@ function assertA11y(root, options) {
 }
 
 // src/testing/adapters.ts
-function escSel2(value) {
-  return value.replace(/["\\]/g, "\\$&");
+function escapeAttrValue(value) {
+  return value.replace(/[\\"]/g, "\\$&").replace(/\n/g, "\\a ").replace(/\r/g, "\\d ").replace(/\0/g, "\\fffd ");
 }
 function createJestAdapter() {
   let container = null;
@@ -873,7 +1083,7 @@ function createJestAdapter() {
     /** Call in afterEach to clean up */
     teardown() {
       if (container) {
-        container.innerHTML = "";
+        replaceChildrenSafely(container);
         if (container.parentNode) {
           container.parentNode.removeChild(container);
         }
@@ -991,23 +1201,32 @@ function createCypressAdapter() {
   return {
     /** Mount a component for Cypress component testing */
     mount(component, options) {
+      const ownsContainer = !options?.container;
       const container = options?.container || document.createElement("div");
-      if (!options?.container) {
+      if (ownsContainer) {
         container.setAttribute("data-testenv", "cypress");
         document.body.appendChild(container);
       }
       const element = typeof component === "function" ? component() : component;
       container.appendChild(element);
-      return { element, container };
+      let unmounted = false;
+      const unmount = () => {
+        if (unmounted) return;
+        unmounted = true;
+        dispose(element);
+        element.parentNode?.removeChild(element);
+        if (ownsContainer) container.parentNode?.removeChild(container);
+      };
+      return { element, container, unmount };
     },
     /** Generate Cypress custom commands for SibuJS */
     commands: {
       /** Find by data-testid */
-      getByTestId: (id) => `[data-testid="${id}"]`,
+      getByTestId: (id) => `[data-testid="${escapeAttrValue(id)}"]`,
       /** Find by text */
-      getByText: (text) => `:contains("${text}")`,
+      getByText: (text) => `:contains("${escapeAttrValue(text)}")`,
       /** Find by role */
-      getByRole: (role) => `[role="${role}"]`
+      getByRole: (role) => `[role="${escapeAttrValue(role)}"]`
     }
   };
 }
@@ -1015,10 +1234,10 @@ function createPlaywrightAdapter() {
   return {
     /** Selectors for common SibuJS patterns */
     selectors: {
-      byTestId: (id) => `[data-testid="${id}"]`,
-      byRole: (role) => `[role="${role}"]`,
-      byAriaLabel: (label) => `[aria-label="${label}"]`,
-      byDataAttr: (attr, value) => value ? `[data-${attr}="${value}"]` : `[data-${attr}]`
+      byTestId: (id) => `[data-testid="${escapeAttrValue(id)}"]`,
+      byRole: (role) => `[role="${escapeAttrValue(role)}"]`,
+      byAriaLabel: (label) => `[aria-label="${escapeAttrValue(label)}"]`,
+      byDataAttr: (attr, value) => value ? `[data-${attr}="${escapeAttrValue(value)}"]` : `[data-${attr}]`
     },
     /** Generate a page object for a SibuJS component */
     createPageObject(name, selectors) {
@@ -1054,7 +1273,7 @@ function createUniversalAdapter() {
     /** Teardown test environment */
     teardown() {
       if (container) {
-        container.innerHTML = "";
+        replaceChildrenSafely(container);
         if (container.parentNode) {
           container.parentNode.removeChild(container);
         }
@@ -1075,10 +1294,10 @@ function createUniversalAdapter() {
     /** Query helpers */
     queries: {
       byTestId(container2, id) {
-        return container2.querySelector(`[data-testid="${escSel2(id)}"]`);
+        return queryByAttribute(container2, "data-testid", id);
       },
       byRole(container2, role) {
-        return container2.querySelector(`[role="${escSel2(role)}"]`);
+        return queryByAttribute(container2, "role", role);
       },
       byText(container2, text) {
         const walker = document.createTreeWalker(container2, NodeFilter.SHOW_TEXT);
@@ -1095,16 +1314,16 @@ function createUniversalAdapter() {
           if (labelEl.textContent?.includes(label)) {
             const forAttr = labelEl.getAttribute("for");
             if (forAttr) {
-              return container2.querySelector(`[id="${escSel2(forAttr)}"]`);
+              return queryByAttribute(container2, "id", forAttr);
             }
             const nested = labelEl.querySelector("input, select, textarea");
             if (nested) return nested;
           }
         }
-        return container2.querySelector(`[aria-label="${escSel2(label)}"]`);
+        return queryByAttribute(container2, "aria-label", label);
       },
       allByRole(container2, role) {
-        return Array.from(container2.querySelectorAll(`[role="${escSel2(role)}"]`));
+        return queryAllByAttribute(container2, "role", role);
       }
     },
     /** Assertion helpers */
@@ -1151,58 +1370,226 @@ function createUniversalAdapter() {
   };
 }
 
+// src/testing/serializeDom.ts
+function escapeSnapshotText(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeSnapshotAttribute(value) {
+  return escapeSnapshotText(value).replace(/"/g, "&quot;");
+}
+function escapeSnapshotComment(value) {
+  return escapeSnapshotText(value).replace(/-/g, "&#45;");
+}
+function serializeDom(el, indent = 0, options = {}) {
+  const pad = "  ".repeat(indent);
+  const tag = el.tagName.toLowerCase();
+  const attrs = Array.from(el.attributes).sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0).map((a) => `${a.name}="${escapeSnapshotAttribute(a.value)}"`).join(" ");
+  const open = attrs ? `${pad}<${tag} ${attrs}>` : `${pad}<${tag}>`;
+  const children = Array.from(el.childNodes);
+  if (children.length === 0) {
+    return `${open}</${tag}>`;
+  }
+  if (children.length === 1 && children[0].nodeType === 3) {
+    return `${open}${escapeSnapshotText(children[0].textContent?.trim() || "")}</${tag}>`;
+  }
+  const childPad = "  ".repeat(indent + 1);
+  const childStr = children.map((child) => {
+    if (child.nodeType === 3) {
+      const text = child.textContent?.trim();
+      return text ? `${childPad}${escapeSnapshotText(text)}` : "";
+    }
+    if (child.nodeType === 1) {
+      return serializeDom(child, indent + 1, options);
+    }
+    if (child.nodeType === 8 && options.comments) {
+      return `${childPad}<!-- ${escapeSnapshotComment(child.textContent?.trim() || "")} -->`;
+    }
+    return "";
+  }).filter(Boolean).join("\n");
+  return `${open}
+${childStr}
+${pad}</${tag}>`;
+}
+
 // src/testing/e2e.ts
 function createHttpMock(routes = [], options = {}) {
   const originalFetch = globalThis.fetch;
   const hadOriginalFetch = Object.hasOwn(globalThis, "fetch");
   const requestLog = [];
   const mockRoutes = [...routes];
+  function matchesStringRoute(route, url) {
+    if (url === route) return true;
+    let target;
+    try {
+      target = new URL(url, "http://localhost");
+    } catch {
+      return false;
+    }
+    if (/^[a-z][a-z\d+.-]*:/i.test(route)) {
+      return `${target.origin}${target.pathname}${target.search}` === route || target.href === route;
+    }
+    const hashIndex = route.indexOf("#");
+    const bare = hashIndex === -1 ? route : route.slice(0, hashIndex);
+    return bare.includes("?") ? `${target.pathname}${target.search}` === bare : target.pathname === bare;
+  }
   function matchRoute(url, method) {
     return mockRoutes.find((route) => {
       const methodMatch = !route.method || route.method.toUpperCase() === method.toUpperCase();
       if (!methodMatch) return false;
-      if (typeof route.url === "string") return url === route.url || url.endsWith(route.url);
+      if (typeof route.url === "string") return matchesStringRoute(route.url, url);
+      route.url.lastIndex = 0;
       return route.url.test(url);
     });
   }
+  const abortError = (signal) => signal.reason !== void 0 ? signal.reason : new DOMException("The operation was aborted.", "AbortError");
+  const isFormEncoded = (type2) => /^application\/x-www-form-urlencoded\b/i.test(type2);
+  const isTextLike = (type2) => /^text\/|[/+](?:json|xml|javascript)\b/i.test(type2);
+  const decodeText = (text, type2) => {
+    if (isFormEncoded(type2)) return new URLSearchParams(text);
+    try {
+      return JSON.parse(text);
+    } catch {
+      return text;
+    }
+  };
+  const httpBase = () => {
+    const href = globalThis.location?.href;
+    if (href) {
+      try {
+        if (/^https?:$/.test(new URL(href).protocol)) return href;
+      } catch {
+      }
+    }
+    return "http://localhost";
+  };
+  const STRUCTURED_CONTENT_TYPE = {
+    FormData: () => "multipart/form-data",
+    URLSearchParams: () => "application/x-www-form-urlencoded;charset=UTF-8",
+    Blob: (raw) => raw.type || null,
+    File: (raw) => raw.type || null
+  };
+  const AUTO_TEXT_TYPE = /^text\/plain;charset=utf-8$/i;
+  const structuredTag = (raw) => {
+    if (raw === null || typeof raw !== "object") return null;
+    const tag = Object.prototype.toString.call(raw).slice(8, -1);
+    return Object.hasOwn(STRUCTURED_CONTENT_TYPE, tag) ? tag : null;
+  };
+  const unusableBody = async (raw, tag) => {
+    let probe;
+    try {
+      probe = new Request("http://localhost/", { method: "POST", body: raw });
+    } catch {
+      return true;
+    }
+    if (!AUTO_TEXT_TYPE.test(probe.headers.get("content-type") ?? "")) return false;
+    return tag === "URLSearchParams" || await probe.text() === String(raw);
+  };
+  const toEffectiveRequest = (input, request, init, method, rawBody, omitBody) => {
+    const overrides = {};
+    const headers = init?.headers;
+    if (method !== void 0) overrides.method = method;
+    if (headers !== void 0) overrides.headers = headers;
+    if (rawBody != null && !omitBody) {
+      overrides.body = rawBody;
+      if (typeof ReadableStream !== "undefined" && rawBody instanceof ReadableStream) overrides.duplex = "half";
+    }
+    if (request) return new Request(request.clone(), overrides);
+    const raw = input instanceof URL ? input.href : input;
+    const href = new URL(raw, httpBase()).href;
+    return new Request(href, overrides);
+  };
+  const decodeBody = async (effective) => {
+    if (effective.body === null) return void 0;
+    const type2 = effective.headers.get("content-type") ?? "";
+    if (/^multipart\/form-data\b/i.test(type2)) return effective.formData();
+    if (isTextLike(type2) || isFormEncoded(type2)) return decodeText(await effective.text(), type2);
+    return effective.blob();
+  };
   const mockFetch = async (input, init) => {
+    const request = typeof Request !== "undefined" && input instanceof Request ? input : void 0;
     const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
-    const method = init?.method || "GET";
+    const initSignal = init?.signal;
+    const signal = initSignal === null ? void 0 : initSignal ?? request?.signal;
+    if (signal?.aborted) throw abortError(signal);
+    const rawBody = init?.body;
+    const initMethod = init?.method;
+    const tag = structuredTag(rawBody);
+    const passThrough = tag !== null && await unusableBody(rawBody, tag);
+    if (passThrough) {
+      const intended = (initMethod ?? request?.method ?? "GET").toUpperCase();
+      if (intended === "GET" || intended === "HEAD") {
+        throw new TypeError(`Request with ${intended} method cannot have body.`);
+      }
+    }
+    const effective = toEffectiveRequest(input, request, init, initMethod, rawBody, passThrough);
+    const method = effective.method.toUpperCase();
+    let headers = effective.headers;
     let body;
-    if (init?.body != null) {
-      const raw = String(init.body);
-      try {
-        body = JSON.parse(raw);
-      } catch {
-        body = raw;
+    if (passThrough && tag) {
+      body = rawBody;
+      if (!headers.has("content-type")) {
+        const type2 = STRUCTURED_CONTENT_TYPE[tag](rawBody);
+        if (type2) {
+          headers = new Headers(headers);
+          headers.set("content-type", type2);
+        }
       }
+    } else {
+      body = await decodeBody(effective);
     }
+    if (signal?.aborted) throw abortError(signal);
     requestLog.push({ url, method, body, timestamp: Date.now() });
     const route = matchRoute(url, method);
     if (!route) {
       return new Response(JSON.stringify({ error: "Not mocked" }), { status: 404 });
     }
+    const abortable = (work) => {
+      if (!signal) return work;
+      if (signal.aborted) return Promise.reject(abortError(signal));
+      return new Promise((resolve, reject) => {
+        const onAbort = () => reject(abortError(signal));
+        signal.addEventListener("abort", onAbort, { once: true });
+        work.then(
+          (value) => {
+            signal.removeEventListener("abort", onAbort);
+            resolve(value);
+          },
+          (err) => {
+            signal.removeEventListener("abort", onAbort);
+            reject(err);
+          }
+        );
+      });
+    };
     let mockResponse;
     try {
       if (typeof route.response === "function") {
-        mockResponse = await route.response({ url, method, body, headers: new Headers(init?.headers) });
+        const handler = route.response;
+        mockResponse = await abortable(Promise.resolve().then(() => handler({ url, method, body, headers })));
       } else {
         mockResponse = route.response;
       }
-      if (mockResponse.delay) {
-        await new Promise((r) => setTimeout(r, mockResponse.delay));
-      }
-      return new Response(
-        typeof mockResponse.body === "string" ? mockResponse.body : JSON.stringify(mockResponse.body),
-        {
-          status: mockResponse.status || 200,
-          statusText: mockResponse.statusText || "OK",
-          headers: mockResponse.headers
-        }
-      );
     } catch (err) {
+      if (signal?.aborted) throw abortError(signal);
       return new Response(JSON.stringify({ error: String(err) }), { status: 500 });
     }
+    if (mockResponse.delay) {
+      let timer;
+      try {
+        await abortable(
+          new Promise((r) => {
+            timer = setTimeout(r, mockResponse.delay);
+          })
+        );
+      } finally {
+        clearTimeout(timer);
+      }
+    }
+    return new Response(typeof mockResponse.body === "string" ? mockResponse.body : JSON.stringify(mockResponse.body), {
+      status: mockResponse.status || 200,
+      statusText: mockResponse.statusText || "OK",
+      headers: mockResponse.headers
+    });
   };
   const restore = () => {
     if (hadOriginalFetch) {
@@ -1254,6 +1641,10 @@ function createHttpMock(routes = [], options = {}) {
   }
   return api;
 }
+var MIN_INTERVAL_MS = 1;
+function normalizeIntervalDelay(delay) {
+  return Number.isFinite(delay) && delay >= MIN_INTERVAL_MS ? delay : MIN_INTERVAL_MS;
+}
 function createTimerMock(options = {}) {
   const g = globalThis;
   const snapshot = (key) => ({
@@ -1281,7 +1672,8 @@ function createTimerMock(options = {}) {
       };
       globalThis.setInterval = (cb, interval) => {
         const id = nextId++;
-        timers.push({ id, callback: cb, time: currentTime + interval, interval });
+        const period = normalizeIntervalDelay(interval);
+        timers.push({ id, callback: cb, time: currentTime + period, interval: period });
         return id;
       };
       globalThis.clearTimeout = (id) => {
@@ -1321,7 +1713,7 @@ function createTimerMock(options = {}) {
         if (!next) break;
         currentTime = next.time;
         const idx = timers.indexOf(next);
-        if (next.interval) {
+        if (next.interval !== void 0) {
           next.time += next.interval;
         } else {
           timers.splice(idx, 1);
@@ -1338,13 +1730,21 @@ function createTimerMock(options = {}) {
         timers.sort((a, b) => a.time - b.time);
         const next = timers[0];
         currentTime = next.time;
-        if (next.interval) {
+        if (next.interval !== void 0) {
           next.time += next.interval;
         } else {
           timers.shift();
         }
         next.callback();
       }
+      if (timers.length > 0 && i > maxIterations) {
+        reportError(
+          new Error(
+            `[createTimerMock] flush() stopped after ${maxIterations} timer runs with ${timers.length} still pending \u2014 likely a recurring interval.`
+          ),
+          { phase: "scheduler", name: "createTimerMock.flush" }
+        );
+      }
     },
     /** Get current fake time */
     now() {
@@ -1361,34 +1761,7 @@ function createTimerMock(options = {}) {
   return api;
 }
 function createDOMSnapshot(element) {
-  return serializeElement(element, 0);
-}
-function serializeElement(el, indent) {
-  const pad = "  ".repeat(indent);
-  const tag = el.tagName.toLowerCase();
-  const attrs = Array.from(el.attributes).sort((a, b) => a.name.localeCompare(b.name)).map((a) => `${a.name}="${a.value}"`).join(" ");
-  const open = attrs ? `${pad}<${tag} ${attrs}>` : `${pad}<${tag}>`;
-  const children = Array.from(el.childNodes);
-  if (children.length === 0) {
-    return `${open}</${tag}>`;
-  }
-  if (children.length === 1 && children[0].nodeType === 3) {
-    const text = children[0].textContent?.trim() || "";
-    return `${open}${text}</${tag}>`;
-  }
-  const childStr = children.map((child) => {
-    if (child.nodeType === 3) {
-      const text = child.textContent?.trim();
-      return text ? `${"  ".repeat(indent + 1)}${text}` : "";
-    }
-    if (child.nodeType === 1) {
-      return serializeElement(child, indent + 1);
-    }
-    return "";
-  }).filter(Boolean).join("\n");
-  return `${open}
-${childStr}
-${pad}</${tag}>`;
+  return serializeDom(element);
 }
 function assertDOMEquals(actual, expected) {
   const actualSnapshot = createDOMSnapshot(actual);
@@ -1412,10 +1785,10 @@ function testComponent(component, options = {}) {
     element,
     container,
     getByTestId(id) {
-      return container.querySelector(`[data-testid="${id}"]`);
+      return queryByAttribute(container, "data-testid", id);
     },
     getAllByTestId(id) {
-      return Array.from(container.querySelectorAll(`[data-testid="${id}"]`));
+      return queryAllByAttribute(container, "data-testid", id);
     },
     getByText(text) {
       const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT);
@@ -1438,160 +1811,15 @@ function testComponent(component, options = {}) {
       await new Promise((r) => setTimeout(r, 0));
     },
     destroy() {
+      replaceChildrenSafely(container);
       if (container.parentNode) container.parentNode.removeChild(container);
     }
   };
 }
 
-// src/testing/queries.ts
-function queryByText(container, text) {
-  const walk = (node) => {
-    if (node.childNodes.length === 1 && node.childNodes[0].nodeType === 3) {
-      if (node.textContent?.includes(text)) return node;
-    }
-    for (const child of Array.from(node.children)) {
-      const found = walk(child);
-      if (found) return found;
-    }
-    return null;
-  };
-  return walk(container);
-}
-function queryByTestId(container, testId) {
-  return container.querySelector(`[data-testid="${testId}"]`);
-}
-function queryByRole(container, role) {
-  return container.querySelector(`[role="${role}"]`);
-}
-function cssEscape(value) {
-  const g = globalThis;
-  if (g.CSS && typeof g.CSS.escape === "function") return g.CSS.escape(value);
-  return value.replace(/[^\w-]/g, (m) => `\\${m.charCodeAt(0).toString(16)} `);
-}
-function queryByLabel(container, labelText) {
-  const labels = Array.from(container.querySelectorAll("label"));
-  for (const label of labels) {
-    if (label.textContent?.trim() === labelText) {
-      const forId = label.getAttribute("for");
-      if (forId) {
-        const target = container.querySelector(`#${cssEscape(forId)}`);
-        if (target) return target;
-      }
-      const child = label.querySelector("input, select, textarea, button");
-      if (child) return child;
-    }
-  }
-  return container.querySelector(`[aria-label="${labelText}"]`);
-}
-async function pollUntil(fn, timeout, interval, errorIfTimeout) {
-  const start = Date.now();
-  return new Promise((resolve, reject) => {
-    const check = () => {
-      const result = fn();
-      if (result !== null) {
-        resolve(result);
-        return;
-      }
-      if (Date.now() - start >= timeout) {
-        reject(new Error(errorIfTimeout));
-        return;
-      }
-      setTimeout(check, interval);
-    };
-    check();
-  });
-}
-function findByText(container, text, options = {}) {
-  return pollUntil(
-    () => queryByText(container, text),
-    options.timeout ?? 1e3,
-    options.interval ?? 50,
-    `findByText: no element with text "${text}" after ${options.timeout ?? 1e3}ms`
-  );
-}
-function findByTestId(container, testId, options = {}) {
-  return pollUntil(
-    () => queryByTestId(container, testId),
-    options.timeout ?? 1e3,
-    options.interval ?? 50,
-    `findByTestId: no element with data-testid="${testId}" after ${options.timeout ?? 1e3}ms`
-  );
-}
-function findByRole(container, role, options = {}) {
-  return pollUntil(
-    () => queryByRole(container, role),
-    options.timeout ?? 1e3,
-    options.interval ?? 50,
-    `findByRole: no element with role="${role}" after ${options.timeout ?? 1e3}ms`
-  );
-}
-function waitForSignal(getter, predicate, options = {}) {
-  const timeoutMs = options.timeout ?? 1e3;
-  return new Promise((resolve, reject) => {
-    let resolved = false;
-    let timer;
-    const finish = (fn) => {
-      if (resolved) return;
-      resolved = true;
-      if (timer !== void 0) clearTimeout(timer);
-      fn();
-    };
-    timer = setTimeout(() => {
-      finish(() => {
-        teardown();
-        reject(new Error(`waitForSignal: predicate did not match within ${timeoutMs}ms`));
-      });
-    }, timeoutMs);
-    const teardown = effect(() => {
-      if (resolved) return;
-      const value = getter();
-      if (predicate(value)) {
-        finish(() => {
-          queueMicrotask(() => teardown());
-          resolve(value);
-        });
-      }
-    });
-  });
-}
-function type(element, text) {
-  for (const char of text) {
-    element.value += char;
-    element.dispatchEvent(new InputEvent("input", { bubbles: true, data: char }));
-  }
-  element.dispatchEvent(new Event("change", { bubbles: true }));
-}
-
 // src/testing/snapshot.ts
-function serializeElement2(el, indent) {
-  const pad = "  ".repeat(indent);
-  const tag = el.tagName.toLowerCase();
-  const attrs = Array.from(el.attributes).sort((a, b) => a.name.localeCompare(b.name)).map((a) => `${a.name}="${a.value}"`).join(" ");
-  const open = attrs ? `${pad}<${tag} ${attrs}>` : `${pad}<${tag}>`;
-  const children = Array.from(el.childNodes);
-  if (children.length === 0) {
-    return `${open}</${tag}>`;
-  }
-  if (children.length === 1 && children[0].nodeType === 3) {
-    const text = children[0].textContent?.trim() || "";
-    return `${open}${text}</${tag}>`;
-  }
-  const childStr = children.map((child) => {
-    if (child.nodeType === 3) {
-      const text = child.textContent?.trim();
-      return text ? `${"  ".repeat(indent + 1)}${text}` : "";
-    }
-    if (child.nodeType === 1) {
-      return serializeElement2(child, indent + 1);
-    }
-    if (child.nodeType === 8) {
-      return `${"  ".repeat(indent + 1)}<!-- ${child.textContent?.trim() || ""} -->`;
-    }
-    return "";
-  }).filter(Boolean).join("\n");
-  return `${open}
-${childStr}
-${pad}</${tag}>`;
+function serializeElement(el, indent) {
+  return serializeDom(el, indent, { comments: true });
 }
 function simpleDiff(a, b) {
   const aLines = a.split("\n");
@@ -1653,7 +1881,11 @@ function snapshotComponent(component) {
   const container = document.createElement("div");
   const element = component();
   container.appendChild(element);
-  return serializeElement2(element, 0);
+  try {
+    return serializeElement(element, 0);
+  } finally {
+    replaceChildrenSafely(container);
+  }
 }
 function matchSnapshot(store, name, component, options) {
   const snapshot = snapshotComponent(component);
@@ -1709,31 +1941,57 @@ function walkElements(root) {
   return elements;
 }
 function serializeStructure(el, indent) {
-  const pad = "  ".repeat(indent);
-  const tag = el.tagName.toLowerCase();
-  const attrs = Array.from(el.attributes).sort((a, b) => a.name.localeCompare(b.name)).map((a) => `${a.name}="${a.value}"`).join(" ");
-  const open = attrs ? `${pad}<${tag} ${attrs}>` : `${pad}<${tag}>`;
-  const children = Array.from(el.childNodes);
-  if (children.length === 0) {
-    return `${open}</${tag}>`;
-  }
-  if (children.length === 1 && children[0].nodeType === 3) {
-    const text = children[0].textContent?.trim() || "";
-    return `${open}${text}</${tag}>`;
-  }
-  const childStr = children.map((child) => {
-    if (child.nodeType === 3) {
-      const text = child.textContent?.trim();
-      return text ? `${"  ".repeat(indent + 1)}${text}` : "";
-    }
-    if (child.nodeType === 1) {
-      return serializeStructure(child, indent + 1);
+  return serializeDom(el, indent);
+}
+var APPEARANCE_PROPERTIES = [
+  "display",
+  "visibility",
+  "opacity",
+  "position",
+  "color",
+  "background-color",
+  "background-image",
+  "font-family",
+  "font-size",
+  "font-weight",
+  "font-style",
+  "line-height",
+  "text-align",
+  "text-decoration",
+  "text-transform",
+  "width",
+  "height",
+  "margin",
+  "padding",
+  "border",
+  "border-radius",
+  "box-shadow",
+  "transform",
+  "z-index",
+  "overflow",
+  "flex-direction",
+  "justify-content",
+  "align-items",
+  "gap"
+];
+function captureComputedStyles(elements) {
+  const view = elements[0]?.ownerDocument?.defaultView;
+  if (!view || typeof view.getComputedStyle !== "function") return [];
+  const counters = {};
+  return elements.map((el) => {
+    const tag = el.tagName.toLowerCase();
+    counters[tag] = (counters[tag] || 0) + 1;
+    let declarations = "";
+    try {
+      const style = view.getComputedStyle(el);
+      for (const property of APPEARANCE_PROPERTIES) {
+        const value = style.getPropertyValue(property);
+        if (value) declarations += `${property}:${value};`;
+      }
+    } catch {
     }
-    return "";
-  }).filter(Boolean).join("\n");
-  return `${open}
-${childStr}
-${pad}</${tag}>`;
+    return `${tag}[${counters[tag]}]: ${declarations}`;
+  });
 }
 function captureFingerprint(element) {
   const allElements = walkElements(element);
@@ -1771,14 +2029,16 @@ function captureFingerprint(element) {
       }
     }
   }
-  const composite = [
+  const computedStyles = captureComputedStyles(allElements);
+  const composite = JSON.stringify([
     structure,
     textContent,
-    JSON.stringify(elementCounts),
-    classNames.join(","),
-    inlineStyles.join(";"),
-    JSON.stringify(dataAttributes)
-  ].join("|");
+    elementCounts,
+    classNames,
+    inlineStyles,
+    dataAttributes,
+    computedStyles
+  ]);
   const hash = djb2Hash(composite);
   return {
     structure,
@@ -1787,6 +2047,7 @@ function captureFingerprint(element) {
     classNames,
     inlineStyles,
     dataAttributes,
+    computedStyles,
     hash
   };
 }
@@ -1861,6 +2122,20 @@ function compareFingerprints(baseline, current) {
       description: `Data attributes changed: ${dataChanges.join("; ")}`
     });
   }
+  const baselineComputed = baseline.computedStyles ?? [];
+  const currentComputed = current.computedStyles ?? [];
+  const computedChanges = [];
+  for (let i = 0; i < Math.max(baselineComputed.length, currentComputed.length); i++) {
+    if (baselineComputed[i] !== currentComputed[i]) {
+      computedChanges.push(currentComputed[i] ?? baselineComputed[i]);
+    }
+  }
+  if (computedChanges.length > 0) {
+    changes.push({
+      type: "computed",
+      description: `Computed styles changed on ${computedChanges.length} element(s): ${truncate(computedChanges.join(" | "), 200)}`
+    });
+  }
   return {
     match: changes.length === 0,
     changes
@@ -1900,11 +2175,6 @@ function truncate(str, maxLen) {
 }
 
 // src/testing/index.ts
-function escapeSelector(value) {
-  const g = globalThis;
-  if (g.CSS && typeof g.CSS.escape === "function") return g.CSS.escape(value);
-  return value.replace(/[^\w-]/g, (m) => `\\${m.charCodeAt(0).toString(16)} `);
-}
 var _renderedContainers = globalSingleton(/* @__PURE__ */ Symbol.for("sibujs.testing.containers.v1"), () => /* @__PURE__ */ new Set());
 function unmountAll() {
   for (const container of _renderedContainers) {
@@ -1933,10 +2203,10 @@ function render(component) {
     return walk(container);
   }
   function getByTestId(testId) {
-    return container.querySelector(`[data-testid="${escapeSelector(testId)}"]`);
+    return queryByAttribute(container, "data-testid", testId);
   }
   function getByRole(role) {
-    return container.querySelector(`[role="${role}"]`);
+    return queryByAttribute(container, "role", role);
   }
   function queryAll(selector) {
     return Array.from(container.querySelectorAll(selector));
@@ -2039,6 +2309,7 @@ export {
   createTimerMock,
   createUniversalAdapter,
   createVisualSuite,
+  enableListenerTracking,
   findByRole,
   findByTestId,
   findByText,
@@ -2046,6 +2317,8 @@ export {
   matchSnapshot,
   mockRouter,
   mockStore,
+  queryAllByAttribute,
+  queryByAttribute,
   queryByLabel,
   queryByRole,
   queryByTestId,