@coherent.js/tooling 1.1.2 → 2.0.0

package/dist/testing/index.js

@@ -1,5 +1,8 @@
 // src/testing/test-renderer.js
 import { render } from "@coherent.js/core";
+function escapeRegExp(text) {
+  return String(text).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
 var TestRendererResult = class {
   constructor(component, html, container = null) {
     this.component = component;
@@ -13,7 +16,7 @@ var TestRendererResult = class {
    * @returns {Object|null} Element or null
    */
   getByTestId(testId) {
-    const regex = new RegExp(`data-testid="${testId}"[^>]*>([^<]*)<`, "i");
+    const regex = new RegExp(`<[a-zA-Z][\\w:-]*(?:\\s[^>]*?)?\\sdata-testid="${escapeRegExp(testId)}"[^>]*>([^<]*)<`, "i");
     const match = this.html.match(regex);
     if (!match) {
       throw new Error(`Unable to find element with testId: ${testId}`);
@@ -43,7 +46,7 @@ var TestRendererResult = class {
    * @returns {Object} Element
    */
   getByText(text) {
-    const regex = typeof text === "string" ? new RegExp(`>([^<]*${text}[^<]*)<`, "i") : new RegExp(`>([^<]*)<`, "i");
+    const regex = typeof text === "string" ? new RegExp(`>([^<]*${escapeRegExp(text)}[^<]*)<`, "i") : new RegExp(`>([^<]*)<`, "i");
     const match = this.html.match(regex);
     if (!match || typeof text === "string" && !match[1].includes(text)) {
       throw new Error(`Unable to find element with text: ${text}`);
@@ -72,7 +75,8 @@ var TestRendererResult = class {
    * @returns {Object} Element
    */
   getByClassName(className) {
-    const regex = new RegExp(`class="[^"]*${className}[^"]*"[^>]*>([^<]*)<`, "i");
+    const token = escapeRegExp(className);
+    const regex = new RegExp(`<[a-zA-Z][\\w:-]*(?:\\s[^>]*?)?\\sclass="(?:[^"]*\\s)?${token}(?:\\s[^"]*)?"[^>]*>([^<]*)<`, "i");
     const match = this.html.match(regex);
     if (!match) {
       throw new Error(`Unable to find element with className: ${className}`);
@@ -102,7 +106,8 @@ var TestRendererResult = class {
    * @returns {Array<Object>} Array of elements
    */
   getAllByTagName(tagName) {
-    const regex = new RegExp(`<${tagName}[^>]*>([^<]*)</${tagName}>`, "gi");
+    const tag = escapeRegExp(tagName);
+    const regex = new RegExp(`<${tag}(?=[\\s/>])[^>]*>([^<]*)</${tag}>`, "gi");
     const matches = [...this.html.matchAll(regex)];
     return matches.map((match) => ({
       text: match[1],
@@ -348,6 +353,8 @@ function createMock(implementation) {
     implementation = () => Promise.reject(error);
     return mockFn;
   };
+  Object.defineProperty(mockFn, "_isMockFunction", { value: true });
+  mockFn.getMockName = () => "createMock()";
   return mockFn;
 }
 function createSpy(object, method) {
@@ -462,72 +469,214 @@ var userEvent = {
 };
 
 // src/testing/matchers.js
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var RAW_TEXT_ELEMENTS = /* @__PURE__ */ new Set(["script", "style", "textarea", "title"]);
+var NAMED_ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: "\xA0" };
+function decodeEntities(text) {
+  return text.replace(/&(#x[0-9a-f]+|#\d+|[a-z]+);/gi, (entity, body) => {
+    if (body[0] === "#") {
+      const codePoint = body[1] === "x" || body[1] === "X" ? Number.parseInt(body.slice(2), 16) : Number.parseInt(body.slice(1), 10);
+      return codePoint <= 1114111 ? String.fromCodePoint(codePoint) : entity;
+    }
+    return NAMED_ENTITIES[body.toLowerCase()] ?? entity;
+  });
+}
+function htmlOf(received) {
+  if (typeof received === "string") return received;
+  if (received && typeof received.html === "string") return received.html;
+  return null;
+}
+function textOf(received) {
+  if (received && typeof received === "object" && typeof received.text === "string") {
+    return decodeEntities(received.text);
+  }
+  const html = htmlOf(received);
+  if (html === null) return null;
+  return decodeEntities(stripTags(html));
+}
+function stripTags(html) {
+  let out = "";
+  let cursor = 0;
+  while (cursor < html.length) {
+    const open = html.indexOf("<", cursor);
+    if (open === -1) break;
+    const close = html.indexOf(">", open + 1);
+    if (close === -1) break;
+    out += html.slice(cursor, open);
+    cursor = close + 1;
+  }
+  return out + html.slice(cursor);
+}
+var isSpace = (ch) => ch === " " || ch === "\n" || ch === "	" || ch === "\r" || ch === "\f";
+function parseOpeningTag(html) {
+  const start = html.search(/<[a-zA-Z]/);
+  if (start === -1) return null;
+  let i = start + 1;
+  let tagName = "";
+  while (i < html.length && /[\w:-]/.test(html[i])) tagName += html[i++];
+  const attributes = /* @__PURE__ */ new Map();
+  while (i < html.length) {
+    while (i < html.length && isSpace(html[i])) i++;
+    if (i >= html.length || html[i] === ">") break;
+    if (html[i] === "/") {
+      i++;
+      continue;
+    }
+    let name = "";
+    while (i < html.length && !isSpace(html[i]) && html[i] !== "=" && html[i] !== ">" && html[i] !== "/") {
+      name += html[i++];
+    }
+    while (i < html.length && isSpace(html[i])) i++;
+    let value = "";
+    if (html[i] === "=") {
+      i++;
+      while (i < html.length && isSpace(html[i])) i++;
+      const quote = html[i];
+      if (quote === '"' || quote === "'") {
+        const end = html.indexOf(quote, i + 1);
+        if (end === -1) break;
+        value = html.slice(i + 1, end);
+        i = end + 1;
+      } else {
+        while (i < html.length && !isSpace(html[i]) && html[i] !== ">") value += html[i++];
+      }
+    }
+    if (name) attributes.set(name.toLowerCase(), decodeEntities(value));
+  }
+  return { tagName: tagName.toLowerCase(), attributes };
+}
+function classesOf(received) {
+  const html = htmlOf(received);
+  const tag = html === null ? null : parseOpeningTag(html);
+  let value = tag?.attributes.get("class");
+  if (value === void 0 && typeof received?.className === "string") value = received.className;
+  return value === void 0 ? null : value.split(/\s+/).filter(Boolean);
+}
+function findHTMLError(html) {
+  const stack = [];
+  let lower = null;
+  let i = 0;
+  while ((i = html.indexOf("<", i)) !== -1) {
+    if (html.startsWith("<!--", i)) {
+      const end = html.indexOf("-->", i + 4);
+      if (end === -1) return "unterminated comment";
+      i = end + 3;
+      continue;
+    }
+    const close = html.indexOf(">", i);
+    if (close === -1) return "unterminated tag";
+    const tag = html.slice(i + 1, close);
+    i = close + 1;
+    if (tag[0] === "!" || tag[0] === "?") continue;
+    const match = /^(\/?)([a-zA-Z][\w:-]*)/.exec(tag);
+    if (!match) continue;
+    const name = match[2].toLowerCase();
+    if (match[1]) {
+      if (VOID_ELEMENTS.has(name)) return `</${name}> closes a void element`;
+      const open = stack.pop();
+      if (open !== name) return open ? `</${name}> does not close <${open}>` : `</${name}> has no opening tag`;
+    } else if (!VOID_ELEMENTS.has(name) && !tag.endsWith("/")) {
+      stack.push(name);
+      if (RAW_TEXT_ELEMENTS.has(name)) {
+        lower ??= html.toLowerCase();
+        const end = lower.indexOf(`</${name}`, i);
+        if (end === -1) return `<${name}> is never closed`;
+        i = end;
+      }
+    }
+  }
+  return stack.length > 0 ? `<${stack[stack.length - 1]}> is never closed` : null;
+}
+var show = (value) => value === null || value === void 0 ? "nothing" : JSON.stringify(value);
 var customMatchers = {
   /**
-   * Check if element has specific text
+   * Check if element (or a render result) has exactly this text content
    */
   toHaveText(received, expected) {
-    const pass = received && received.text === expected;
+    const text = textOf(received);
+    const pass = text === expected;
     return {
       pass,
-      message: () => pass ? `Expected element not to have text "${expected}"` : `Expected element to have text "${expected}", but got "${received?.text || "null"}"`
+      message: () => pass ? `Expected element not to have text "${expected}"` : `Expected element to have text "${expected}", but got ${show(text)}`
     };
   },
   /**
-   * Check if element contains text
+   * Check if element (or a render result) contains text
    */
   toContainText(received, expected) {
-    const pass = received && received.text && received.text.includes(expected);
+    const text = textOf(received);
+    const pass = typeof text === "string" && text.includes(expected);
     return {
       pass,
-      message: () => pass ? `Expected element not to contain text "${expected}"` : `Expected element to contain text "${expected}", but got "${received?.text || "null"}"`
+      message: () => pass ? `Expected element not to contain text "${expected}"` : `Expected element to contain text "${expected}", but got ${show(text)}`
     };
   },
   /**
-   * Check if element has specific class
+   * Check if the element has every given class (whole class tokens:
+   * 'btn' does not match 'btn-primary')
    */
   toHaveClass(received, expected) {
-    const pass = received && received.className && received.className.includes(expected);
+    const classes = classesOf(received) ?? [];
+    const wanted = String(expected).split(/\s+/).filter(Boolean);
+    const pass = wanted.length > 0 && wanted.every((name) => classes.includes(name));
     return {
       pass,
-      message: () => pass ? `Expected element not to have class "${expected}"` : `Expected element to have class "${expected}", but got "${received?.className || "null"}"`
+      message: () => pass ? `Expected element not to have class "${expected}"` : `Expected element to have class "${expected}", but its classes are ${show(classes.join(" "))}`
     };
   },
   /**
    * Check if element exists
    */
   toBeInTheDocument(received) {
-    const pass = received && received.exists === true;
+    const pass = Boolean(received && received.exists === true);
     return {
       pass,
       message: () => pass ? "Expected element not to be in the document" : "Expected element to be in the document"
     };
   },
   /**
-   * Check if element is visible (has content)
+   * Check if element is visible (has text content)
    */
   toBeVisible(received) {
-    const pass = received && received.text && received.text.trim().length > 0;
+    const text = textOf(received);
+    const pass = typeof text === "string" && text.trim().length > 0;
     return {
       pass,
       message: () => pass ? "Expected element not to be visible" : "Expected element to be visible (have text content)"
     };
   },
   /**
-   * Check if element is empty
+   * Check if element is empty (no text content)
    */
   toBeEmpty(received) {
-    const pass = !received || !received.text || received.text.trim().length === 0;
+    const text = textOf(received);
+    const pass = !text || text.trim().length === 0;
     return {
       pass,
-      message: () => pass ? "Expected element not to be empty" : "Expected element to be empty"
+      message: () => pass ? "Expected element not to be empty" : `Expected element to be empty, but it has text ${show(text)}`
     };
   },
   /**
    * Check if HTML contains specific string
    */
   toContainHTML(received, expected) {
-    const html = received?.html || received;
+    const html = htmlOf(received);
     const pass = typeof html === "string" && html.includes(expected);
     return {
       pass,
@@ -535,113 +684,71 @@ var customMatchers = {
     };
   },
   /**
-   * Check if element has attribute
+   * Check if the element has an attribute (optionally with this value)
    */
   toHaveAttribute(received, attribute, value) {
-    const html = received?.html || "";
-    const regex = new RegExp(`${attribute}="([^"]*)"`, "i");
-    const match = html.match(regex);
-    const pass = value !== void 0 ? match && match[1] === value : match !== null;
+    const html = htmlOf(received);
+    const tag = html === null ? null : parseOpeningTag(html);
+    const name = String(attribute).toLowerCase();
+    const has = Boolean(tag?.attributes.has(name));
+    const actual = has ? tag.attributes.get(name) : void 0;
+    const pass = value !== void 0 ? has && actual === String(value) : has;
     return {
       pass,
       message: () => {
         if (value !== void 0) {
-          return pass ? `Expected element not to have attribute ${attribute}="${value}"` : `Expected element to have attribute ${attribute}="${value}", but got "${match?.[1] || "none"}"`;
+          return pass ? `Expected element not to have attribute ${attribute}="${value}"` : `Expected element to have attribute ${attribute}="${value}", but got ${has ? show(actual) : "none"}`;
         }
         return pass ? `Expected element not to have attribute ${attribute}` : `Expected element to have attribute ${attribute}`;
       }
     };
   },
   /**
-   * Check if component matches snapshot
-   */
-  toMatchSnapshot(received) {
-    const _snapshot = received?.toSnapshot ? received.toSnapshot() : received;
-    return {
-      pass: true,
-      message: () => "Snapshot comparison"
-    };
-  },
-  /**
-   * Check if element has specific tag name
+   * Check if the element has this tag name
    */
   toHaveTagName(received, tagName) {
-    const html = received?.html || "";
-    const regex = new RegExp(`<${tagName}[^>]*>`, "i");
-    const pass = regex.test(html);
+    const html = htmlOf(received);
+    const tag = html === null ? null : parseOpeningTag(html);
+    const pass = Boolean(tag) && tag.tagName === String(tagName).toLowerCase();
     return {
       pass,
-      message: () => pass ? `Expected element not to have tag name "${tagName}"` : `Expected element to have tag name "${tagName}"`
+      message: () => pass ? `Expected element not to have tag name "${tagName}"` : `Expected element to have tag name "${tagName}", but got ${show(tag?.tagName)}`
     };
   },
   /**
    * Check if render result contains element
    */
   toContainElement(received, element) {
-    const html = received?.html || received;
-    const elementHtml = element?.html || element;
-    const pass = typeof html === "string" && html.includes(elementHtml);
+    const html = htmlOf(received);
+    const elementHtml = htmlOf(element);
+    const pass = typeof html === "string" && typeof elementHtml === "string" && html.includes(elementHtml);
     return {
       pass,
       message: () => pass ? "Expected not to contain element" : "Expected to contain element"
     };
   },
-  /**
-   * Check if mock was called
-   */
-  toHaveBeenCalled(received) {
-    const pass = received?.mock?.calls?.length > 0;
-    return {
-      pass,
-      message: () => pass ? "Expected mock not to have been called" : "Expected mock to have been called"
-    };
-  },
-  /**
-   * Check if mock was called with specific args
-   */
-  toHaveBeenCalledWith(received, ...expectedArgs) {
-    const calls = received?.mock?.calls || [];
-    const pass = calls.some(
-      (call) => call.length === expectedArgs.length && call.every((arg, i) => arg === expectedArgs[i])
-    );
-    return {
-      pass,
-      message: () => pass ? `Expected mock not to have been called with ${JSON.stringify(expectedArgs)}` : `Expected mock to have been called with ${JSON.stringify(expectedArgs)}`
-    };
-  },
-  /**
-   * Check if mock was called N times
-   */
-  toHaveBeenCalledTimes(received, times) {
-    const callCount = received?.mock?.calls?.length || 0;
-    const pass = callCount === times;
-    return {
-      pass,
-      message: () => pass ? `Expected mock not to have been called ${times} times` : `Expected mock to have been called ${times} times, but was called ${callCount} times`
-    };
-  },
   /**
    * Check if component rendered successfully
    */
   toRenderSuccessfully(received) {
-    const pass = received && received.html && received.html.length > 0;
+    const html = htmlOf(received);
+    const pass = typeof html === "string" && html.length > 0;
     return {
       pass,
       message: () => pass ? "Expected component not to render successfully" : "Expected component to render successfully"
     };
   },
   /**
-   * Check if HTML is valid
+   * Check that every tag is closed in order. Void elements (<input>, <br>,
+   * <img>, …) need no closing tag.
    */
   toBeValidHTML(received) {
-    const html = received?.html || received;
-    const openTags = (html.match(/<[^/<>][^<>]*>/g) || []).length;
-    const closeTags = (html.match(/<\/[^<>]+>/g) || []).length;
-    const selfClosing = (html.match(/<[^<>]+\/>/g) || []).length;
-    const pass = openTags === closeTags + selfClosing;
+    const html = htmlOf(received);
+    const error = typeof html === "string" ? findHTMLError(html) : "received no HTML";
+    const pass = error === null;
     return {
       pass,
-      message: () => pass ? "Expected HTML not to be valid" : `Expected HTML to be valid (open: ${openTags}, close: ${closeTags}, self-closing: ${selfClosing})`
+      message: () => pass ? "Expected HTML not to be valid" : `Expected HTML to be valid, but ${error}`
     };
   }
 };
@@ -657,8 +764,9 @@ var assertions = {
    * Assert element has text
    */
   assertHasText(element, text) {
-    if (!element || element.text !== text) {
-      throw new Error(`Expected element to have text "${text}", but got "${element?.text || "null"}"`);
+    const actual = textOf(element);
+    if (actual !== text) {
+      throw new Error(`Expected element to have text "${text}", but got ${show(actual)}`);
     }
   },
   /**
@@ -670,10 +778,10 @@ var assertions = {
     }
   },
   /**
-   * Assert element has class
+   * Assert element has class (a whole class token)
    */
   assertHasClass(element, className) {
-    if (!element || !element.className || !element.className.includes(className)) {
+    if (!(classesOf(element) ?? []).includes(className)) {
       throw new Error(`Expected element to have class "${className}"`);
     }
   },
@@ -681,7 +789,7 @@ var assertions = {
    * Assert HTML contains string
    */
   assertContainsHTML(html, substring) {
-    const htmlString = html?.html || html;
+    const htmlString = htmlOf(html);
     if (!htmlString || !htmlString.includes(substring)) {
       throw new Error(`Expected HTML to contain "${substring}"`);
     }