@coherent.js/tooling 1.0.0-rc.1

package/dist/testing/index.js

@@ -0,0 +1,746 @@
+// src/testing/test-renderer.js
+import { render } from "@coherent.js/core";
+var TestRendererResult = class {
+  constructor(component, html, container = null) {
+    this.component = component;
+    this.html = html;
+    this.container = container;
+    this.queries = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Get element by test ID
+   * @param {string} testId - Test ID to search for
+   * @returns {Object|null} Element or null
+   */
+  getByTestId(testId) {
+    const regex = new RegExp(`data-testid="${testId}"[^>]*>([^<]*)<`, "i");
+    const match = this.html.match(regex);
+    if (!match) {
+      throw new Error(`Unable to find element with testId: ${testId}`);
+    }
+    return {
+      text: match[1],
+      html: match[0],
+      testId,
+      exists: true
+    };
+  }
+  /**
+   * Query element by test ID (returns null if not found)
+   * @param {string} testId - Test ID to search for
+   * @returns {Object|null} Element or null
+   */
+  queryByTestId(testId) {
+    try {
+      return this.getByTestId(testId);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Get element by text content
+   * @param {string|RegExp} text - Text to search for
+   * @returns {Object} Element
+   */
+  getByText(text) {
+    const regex = typeof text === "string" ? new RegExp(`>([^<]*${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}`);
+    }
+    return {
+      text: match[1],
+      html: match[0],
+      exists: true
+    };
+  }
+  /**
+   * Query element by text (returns null if not found)
+   * @param {string|RegExp} text - Text to search for
+   * @returns {Object|null} Element or null
+   */
+  queryByText(text) {
+    try {
+      return this.getByText(text);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Get element by class name
+   * @param {string} className - Class name to search for
+   * @returns {Object} Element
+   */
+  getByClassName(className) {
+    const regex = new RegExp(`class="[^"]*${className}[^"]*"[^>]*>([^<]*)<`, "i");
+    const match = this.html.match(regex);
+    if (!match) {
+      throw new Error(`Unable to find element with className: ${className}`);
+    }
+    return {
+      text: match[1],
+      html: match[0],
+      className,
+      exists: true
+    };
+  }
+  /**
+   * Query element by class name (returns null if not found)
+   * @param {string} className - Class name to search for
+   * @returns {Object|null} Element or null
+   */
+  queryByClassName(className) {
+    try {
+      return this.getByClassName(className);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Get all elements by tag name
+   * @param {string} tagName - Tag name to search for
+   * @returns {Array<Object>} Array of elements
+   */
+  getAllByTagName(tagName) {
+    const regex = new RegExp(`<${tagName}[^>]*>([^<]*)</${tagName}>`, "gi");
+    const matches = [...this.html.matchAll(regex)];
+    return matches.map((match) => ({
+      text: match[1],
+      html: match[0],
+      tagName,
+      exists: true
+    }));
+  }
+  /**
+   * Check if element exists
+   * @param {string} selector - Selector (testId, text, className)
+   * @param {string} type - Type of selector ('testId', 'text', 'className')
+   * @returns {boolean} True if exists
+   */
+  exists(selector, type = "testId") {
+    switch (type) {
+      case "testId":
+        return this.queryByTestId(selector) !== null;
+      case "text":
+        return this.queryByText(selector) !== null;
+      case "className":
+        return this.queryByClassName(selector) !== null;
+      default:
+        return false;
+    }
+  }
+  /**
+   * Get the rendered HTML
+   * @returns {string} HTML string
+   */
+  getHTML() {
+    return this.html;
+  }
+  /**
+   * Get the component
+   * @returns {Object} Component object
+   */
+  getComponent() {
+    return this.component;
+  }
+  /**
+   * Create a snapshot of the rendered output
+   * @returns {string} Formatted HTML for snapshot testing
+   */
+  toSnapshot() {
+    return this.html.replace(/>\s+</g, "><").trim();
+  }
+  /**
+   * Debug: print the rendered HTML
+   */
+  debug() {
+    console.log("=== Rendered HTML ===");
+    console.log(this.html);
+    console.log("=== Component ===");
+    console.log(JSON.stringify(this.component, null, 2));
+  }
+};
+function renderComponent(component, options = {}) {
+  const html = render(component, options);
+  return new TestRendererResult(component, html);
+}
+async function renderComponentAsync(component, props = {}, options = {}) {
+  const resolvedComponent = typeof component === "function" ? await component(props) : component;
+  const html = render(resolvedComponent, options);
+  return new TestRendererResult(resolvedComponent, html);
+}
+var TestRenderer = class {
+  constructor(component, options = {}) {
+    this.component = component;
+    this.options = options;
+    this.result = null;
+    this.renderCount = 0;
+  }
+  /**
+   * Render the component
+   * @returns {TestRendererResult} Render result
+   */
+  render() {
+    this.renderCount++;
+    const html = render(this.component, this.options);
+    this.result = new TestRendererResult(this.component, html);
+    return this.result;
+  }
+  /**
+   * Update the component and re-render
+   * @param {Object} newComponent - Updated component
+   * @returns {TestRendererResult} Render result
+   */
+  update(newComponent) {
+    this.component = newComponent;
+    return this.render();
+  }
+  /**
+   * Get the current result
+   * @returns {TestRendererResult|null} Current result
+   */
+  getResult() {
+    return this.result;
+  }
+  /**
+   * Get render count
+   * @returns {number} Number of renders
+   */
+  getRenderCount() {
+    return this.renderCount;
+  }
+  /**
+   * Unmount the component
+   */
+  unmount() {
+    this.component = null;
+    this.result = null;
+  }
+};
+function createTestRenderer(component, options = {}) {
+  return new TestRenderer(component, options);
+}
+function shallowRender(component) {
+  const shallow = { ...component };
+  Object.keys(shallow).forEach((key) => {
+    if (shallow[key] && typeof shallow[key] === "object") {
+      if (shallow[key].children) {
+        shallow[key] = {
+          ...shallow[key],
+          children: Array.isArray(shallow[key].children) ? shallow[key].children.map(() => ({ _shallow: true })) : { _shallow: true }
+        };
+      }
+    }
+  });
+  return shallow;
+}
+
+// src/testing/test-utils.js
+function fireEvent(element, eventType, eventData = {}) {
+  if (!element) {
+    throw new Error("Element is required for fireEvent");
+  }
+  const event = {
+    type: eventType,
+    target: element,
+    currentTarget: element,
+    preventDefault: () => {
+    },
+    stopPropagation: () => {
+    },
+    ...eventData
+  };
+  const handlerName = `on${eventType}`;
+  if (element[handlerName] && typeof element[handlerName] === "function") {
+    element[handlerName](event);
+  }
+  return event;
+}
+var fireEvent_click = (element, eventData) => fireEvent(element, "click", eventData);
+var fireEvent_change = (element, value) => fireEvent(element, "change", { target: { value } });
+var fireEvent_input = (element, value) => fireEvent(element, "input", { target: { value } });
+var fireEvent_keyDown = (element, key) => fireEvent(element, "keydown", { key });
+var fireEvent_keyUp = (element, key) => fireEvent(element, "keyup", { key });
+var fireEvent_focus = (element) => fireEvent(element, "focus");
+var fireEvent_blur = (element) => fireEvent(element, "blur");
+function waitFor(condition, options = {}) {
+  const { timeout = 1e3, interval = 50 } = options;
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const check = () => {
+      try {
+        if (condition()) {
+          resolve();
+          return;
+        }
+      } catch {
+      }
+      if (Date.now() - startTime >= timeout) {
+        reject(new Error(`Timeout waiting for condition after ${timeout}ms`));
+        return;
+      }
+      setTimeout(check, interval);
+    };
+    check();
+  });
+}
+async function waitForElement(queryFn, options = {}) {
+  let element = null;
+  await waitFor(() => {
+    element = queryFn();
+    return element !== null;
+  }, options);
+  return element;
+}
+async function waitForElementToBeRemoved(queryFn, options = {}) {
+  await waitFor(() => {
+    const element = queryFn();
+    return element === null;
+  }, options);
+}
+async function act(callback) {
+  await callback();
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+function createMock(implementation) {
+  const calls = [];
+  const results = [];
+  const mockFn = function(...args) {
+    calls.push(args);
+    let result;
+    let error;
+    try {
+      result = implementation ? implementation(...args) : void 0;
+      results.push({ type: "return", value: result });
+    } catch (err) {
+      error = err;
+      results.push({ type: "throw", value: error });
+      throw error;
+    }
+    return result;
+  };
+  mockFn.mock = {
+    calls,
+    results,
+    instances: []
+  };
+  mockFn.mockClear = () => {
+    calls.length = 0;
+    results.length = 0;
+  };
+  mockFn.mockReset = () => {
+    mockFn.mockClear();
+    implementation = void 0;
+  };
+  mockFn.mockImplementation = (fn) => {
+    implementation = fn;
+    return mockFn;
+  };
+  mockFn.mockReturnValue = (value) => {
+    implementation = () => value;
+    return mockFn;
+  };
+  mockFn.mockResolvedValue = (value) => {
+    implementation = () => Promise.resolve(value);
+    return mockFn;
+  };
+  mockFn.mockRejectedValue = (error) => {
+    implementation = () => Promise.reject(error);
+    return mockFn;
+  };
+  return mockFn;
+}
+function createSpy(object, method) {
+  const original = object[method];
+  const spy = createMock(original.bind(object));
+  object[method] = spy;
+  spy.mockRestore = () => {
+    object[method] = original;
+  };
+  return spy;
+}
+function cleanup() {
+}
+function within(container) {
+  return {
+    getByTestId: (testId) => container.getByTestId(testId),
+    queryByTestId: (testId) => container.queryByTestId(testId),
+    getByText: (text) => container.getByText(text),
+    queryByText: (text) => container.queryByText(text),
+    getByClassName: (className) => container.getByClassName(className),
+    queryByClassName: (className) => container.queryByClassName(className)
+  };
+}
+var screen = {
+  _result: null,
+  setResult(result) {
+    this._result = result;
+  },
+  getByTestId(testId) {
+    if (!this._result) throw new Error("No component rendered");
+    return this._result.getByTestId(testId);
+  },
+  queryByTestId(testId) {
+    if (!this._result) return null;
+    return this._result.queryByTestId(testId);
+  },
+  getByText(text) {
+    if (!this._result) throw new Error("No component rendered");
+    return this._result.getByText(text);
+  },
+  queryByText(text) {
+    if (!this._result) return null;
+    return this._result.queryByText(text);
+  },
+  getByClassName(className) {
+    if (!this._result) throw new Error("No component rendered");
+    return this._result.getByClassName(className);
+  },
+  queryByClassName(className) {
+    if (!this._result) return null;
+    return this._result.queryByClassName(className);
+  },
+  debug() {
+    if (this._result) {
+      this._result.debug();
+    }
+  }
+};
+var userEvent = {
+  /**
+   * Simulate user typing
+   */
+  type: async (element, text, options = {}) => {
+    const { delay = 0 } = options;
+    for (const char of text) {
+      fireEvent_keyDown(element, char);
+      fireEvent_input(element, element.value + char);
+      fireEvent_keyUp(element, char);
+      if (delay > 0) {
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+  },
+  /**
+   * Simulate user click
+   */
+  click: async (element) => {
+    fireEvent_focus(element);
+    fireEvent_click(element);
+  },
+  /**
+   * Simulate user double click
+   */
+  dblClick: async (element) => {
+    await userEvent.click(element);
+    await userEvent.click(element);
+  },
+  /**
+   * Simulate user clearing input
+   */
+  clear: async (element) => {
+    fireEvent_input(element, "");
+    fireEvent_change(element, "");
+  },
+  /**
+   * Simulate user selecting option
+   */
+  selectOptions: async (element, values) => {
+    const valueArray = Array.isArray(values) ? values : [values];
+    fireEvent_change(element, valueArray[0]);
+  },
+  /**
+   * Simulate user tab navigation
+   */
+  tab: async () => {
+    const activeElement = document.activeElement;
+    if (activeElement) {
+      fireEvent_keyDown(activeElement, "Tab");
+      fireEvent_blur(activeElement);
+    }
+  }
+};
+
+// src/testing/matchers.js
+var customMatchers = {
+  /**
+   * Check if element has specific text
+   */
+  toHaveText(received, expected) {
+    const pass = received && received.text === expected;
+    return {
+      pass,
+      message: () => pass ? `Expected element not to have text "${expected}"` : `Expected element to have text "${expected}", but got "${received?.text || "null"}"`
+    };
+  },
+  /**
+   * Check if element contains text
+   */
+  toContainText(received, expected) {
+    const pass = received && received.text && received.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"}"`
+    };
+  },
+  /**
+   * Check if element has specific class
+   */
+  toHaveClass(received, expected) {
+    const pass = received && received.className && received.className.includes(expected);
+    return {
+      pass,
+      message: () => pass ? `Expected element not to have class "${expected}"` : `Expected element to have class "${expected}", but got "${received?.className || "null"}"`
+    };
+  },
+  /**
+   * Check if element exists
+   */
+  toBeInTheDocument(received) {
+    const pass = 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)
+   */
+  toBeVisible(received) {
+    const pass = received && received.text && received.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
+   */
+  toBeEmpty(received) {
+    const pass = !received || !received.text || received.text.trim().length === 0;
+    return {
+      pass,
+      message: () => pass ? "Expected element not to be empty" : "Expected element to be empty"
+    };
+  },
+  /**
+   * Check if HTML contains specific string
+   */
+  toContainHTML(received, expected) {
+    const html = received?.html || received;
+    const pass = typeof html === "string" && html.includes(expected);
+    return {
+      pass,
+      message: () => pass ? `Expected HTML not to contain "${expected}"` : `Expected HTML to contain "${expected}"`
+    };
+  },
+  /**
+   * Check if element has attribute
+   */
+  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;
+    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}` : `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
+   */
+  toHaveTagName(received, tagName) {
+    const html = received?.html || "";
+    const regex = new RegExp(`<${tagName}[^>]*>`, "i");
+    const pass = regex.test(html);
+    return {
+      pass,
+      message: () => pass ? `Expected element not to have tag name "${tagName}"` : `Expected element to have tag name "${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);
+    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;
+    return {
+      pass,
+      message: () => pass ? "Expected component not to render successfully" : "Expected component to render successfully"
+    };
+  },
+  /**
+   * Check if HTML is valid
+   */
+  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;
+    return {
+      pass,
+      message: () => pass ? "Expected HTML not to be valid" : `Expected HTML to be valid (open: ${openTags}, close: ${closeTags}, self-closing: ${selfClosing})`
+    };
+  }
+};
+function extendExpect(expect) {
+  if (expect && expect.extend) {
+    expect.extend(customMatchers);
+  } else {
+    console.warn("Could not extend expect - expect.extend not available");
+  }
+}
+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"}"`);
+    }
+  },
+  /**
+   * Assert element exists
+   */
+  assertExists(element) {
+    if (!element || !element.exists) {
+      throw new Error("Expected element to exist");
+    }
+  },
+  /**
+   * Assert element has class
+   */
+  assertHasClass(element, className) {
+    if (!element || !element.className || !element.className.includes(className)) {
+      throw new Error(`Expected element to have class "${className}"`);
+    }
+  },
+  /**
+   * Assert HTML contains string
+   */
+  assertContainsHTML(html, substring) {
+    const htmlString = html?.html || html;
+    if (!htmlString || !htmlString.includes(substring)) {
+      throw new Error(`Expected HTML to contain "${substring}"`);
+    }
+  },
+  /**
+   * Assert component rendered
+   */
+  assertRendered(result) {
+    if (!result || !result.html || result.html.length === 0) {
+      throw new Error("Expected component to render");
+    }
+  }
+};
+
+// src/testing/index.js
+var index_default = {
+  // Renderer
+  renderComponent,
+  renderComponentAsync,
+  createTestRenderer,
+  shallowRender,
+  // Utilities
+  fireEvent,
+  waitFor,
+  waitForElement,
+  waitForElementToBeRemoved,
+  act,
+  createMock,
+  createSpy,
+  cleanup,
+  within,
+  screen,
+  userEvent,
+  // Matchers
+  customMatchers,
+  extendExpect,
+  assertions
+};
+export {
+  TestRenderer,
+  TestRendererResult,
+  act,
+  assertions,
+  cleanup,
+  createMock,
+  createSpy,
+  createTestRenderer,
+  customMatchers,
+  index_default as default,
+  extendExpect,
+  fireEvent,
+  renderComponent,
+  renderComponentAsync,
+  screen,
+  shallowRender,
+  userEvent,
+  waitFor,
+  waitForElement,
+  waitForElementToBeRemoved,
+  within
+};
+//# sourceMappingURL=index.js.map