@stencil/vitest 0.0.1-dev.20260109124515.90fb962

package/dist/testing/matchers.d.ts

@@ -0,0 +1,181 @@
+/**
+ * Custom matchers for Stencil component testing
+ *
+ * These extend Vitest's expect with Stencil-specific assertions
+ */
+import type { EventSpy } from '../types.js';
+/**
+ * Custom matchers interface
+ */
+interface CustomMatchers<R = unknown> {
+    toHaveClass(className: string): R;
+    toHaveClasses(classNames: string[]): R;
+    toMatchClasses(classNames: string[]): R;
+    toHaveAttribute(attribute: string, value?: string): R;
+    toEqualAttribute(attribute: string, value: string): R;
+    toEqualAttributes(expectedAttrs: Record<string, string>): R;
+    toHaveProperty(property: string, value?: any): R;
+    toHaveTextContent(text: string): R;
+    toEqualText(expectedText: string): R;
+    toBeVisible(): R;
+    toHaveShadowRoot(): R;
+    toEmitEvent(eventName: string): R;
+    toEqualHtml(expectedHtml: string): R;
+    toEqualLightHtml(expectedHtml: string): R;
+    toHaveReceivedEvent(): R;
+    toHaveReceivedEventTimes(count: number): R;
+    toHaveReceivedEventDetail(detail: any): R;
+    toHaveFirstReceivedEventDetail(detail: any): R;
+    toHaveLastReceivedEventDetail(detail: any): R;
+    toHaveNthReceivedEventDetail(index: number, detail: any): R;
+}
+declare global {
+    namespace Vi {
+        interface Assertion<T = any> extends CustomMatchers<T> {
+        }
+        interface AsymmetricMatchersContaining extends CustomMatchers {
+        }
+    }
+}
+/**
+ * Check if element has a class
+ */
+export declare function toHaveClass(received: HTMLElement, className: string): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has multiple classes
+ * Checks if element has all of the specified CSS classes (order doesn't matter)
+ */
+export declare function toHaveClasses(received: HTMLElement, classNames: string[]): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has exactly the specified CSS classes (no more, no less)
+ * Order doesn't matter, but the element must have exactly these classes
+ */
+export declare function toMatchClasses(received: HTMLElement, classNames: string[]): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has an attribute
+ */
+export declare function toHaveAttribute(received: HTMLElement, attribute: string, value?: string): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has a specific attribute with an exact value
+ */
+export declare function toEqualAttribute(received: HTMLElement, attribute: string, value: string): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has all expected attributes with exact values
+ */
+export declare function toEqualAttributes(received: HTMLElement, expectedAttrs: Record<string, string>): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has a property
+ */
+export declare function toHaveProperty(received: any, property: string, value?: any): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has text content
+ */
+export declare function toHaveTextContent(received: HTMLElement, text: string): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element's text content exactly matches (after trimming)
+ */
+export declare function toEqualText(received: HTMLElement, expectedText: string): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element is visible
+ */
+export declare function toBeVisible(received: HTMLElement): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if element has shadow root
+ */
+export declare function toHaveShadowRoot(received: HTMLElement): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Custom matcher to check if an element's HTML matches the expected HTML
+ * Serializes the entire component tree including shadow DOM
+ */
+export declare function toEqualHtml(received: string | HTMLElement | ShadowRoot, expected: string): {
+    pass: boolean;
+    message: () => string;
+}; /**
+ * Custom matcher to check if an element's Light DOM matches the expected HTML
+ * Does not serialize shadow DOM
+ */
+export declare function toEqualLightHtml(received: string | HTMLElement | ShadowRoot, expected: string): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if an EventSpy has received at least one event
+ */
+export declare function toHaveReceivedEvent(received: EventSpy): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if an EventSpy has received an event a specific number of times
+ */
+export declare function toHaveReceivedEventTimes(received: EventSpy, count: number): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if the last received event has the expected detail
+ */
+export declare function toHaveReceivedEventDetail(received: EventSpy, detail: any): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if the first received event has the expected detail
+ */
+export declare function toHaveFirstReceivedEventDetail(received: EventSpy, detail: any): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if the last received event has the expected detail (alias for toHaveReceivedEventDetail)
+ */
+export declare function toHaveLastReceivedEventDetail(received: EventSpy, detail: any): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Check if the event at a specific index has the expected detail
+ */
+export declare function toHaveNthReceivedEventDetail(received: EventSpy, index: number, detail: any): {
+    pass: boolean;
+    message: () => string;
+};
+/**
+ * Install custom matchers
+ */
+export declare function installMatchers(): void;
+export {};
+//# sourceMappingURL=matchers.d.ts.map

package/dist/testing/matchers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"matchers.d.ts","sourceRoot":"","sources":["../../src/testing/matchers.ts"],"names":[],"mappings":"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"}

package/dist/testing/matchers.js

@@ -0,0 +1,460 @@
+/**
+ * Custom matchers for Stencil component testing
+ *
+ * These extend Vitest's expect with Stencil-specific assertions
+ */
+import { expect } from 'vitest';
+import { serializeHtml, normalizeHtml, prettifyHtml } from './html-serializer.js';
+/**
+ * Check if element has a class
+ */
+export function toHaveClass(received, className) {
+    const pass = received.classList.contains(className);
+    return {
+        pass,
+        message: () => pass ? `Expected element not to have class "${className}"` : `Expected element to have class "${className}"`,
+    };
+}
+/**
+ * Check if element has multiple classes
+ * Checks if element has all of the specified CSS classes (order doesn't matter)
+ */
+export function toHaveClasses(received, classNames) {
+    const missingClasses = [];
+    for (const className of classNames) {
+        if (!received.classList.contains(className)) {
+            missingClasses.push(className);
+        }
+    }
+    const pass = missingClasses.length === 0;
+    const actualClasses = Array.from(received.classList).join(', ');
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element not to have classes [${classNames.join(', ')}]`
+            : `Expected element to have classes [${classNames.join(', ')}], but missing [${missingClasses.join(', ')}]. Actual classes: [${actualClasses}]`,
+    };
+}
+/**
+ * Check if element has exactly the specified CSS classes (no more, no less)
+ * Order doesn't matter, but the element must have exactly these classes
+ */
+export function toMatchClasses(received, classNames) {
+    // Get classes from the class attribute to support mock-doc
+    const classAttr = received.getAttribute('class') || '';
+    const actualClasses = classAttr.split(/\s+/).filter(Boolean).sort();
+    const expectedClasses = [...classNames].filter(Boolean).sort();
+    const pass = actualClasses.length === expectedClasses.length && actualClasses.every((cls, idx) => cls === expectedClasses[idx]);
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element not to have exactly classes [${classNames.join(', ')}]`
+            : `Expected element to have exactly classes [${classNames.join(', ')}], but got [${actualClasses.join(', ')}]`,
+    };
+}
+/**
+ * Check if element has an attribute
+ */
+export function toHaveAttribute(received, attribute, value) {
+    const hasAttribute = received.hasAttribute(attribute);
+    if (!hasAttribute) {
+        return {
+            pass: false,
+            message: () => `Expected element to have attribute "${attribute}"`,
+        };
+    }
+    if (value !== undefined) {
+        const actualValue = received.getAttribute(attribute);
+        const pass = actualValue === value;
+        return {
+            pass,
+            message: () => pass
+                ? `Expected element not to have attribute "${attribute}" with value "${value}"`
+                : `Expected element to have attribute "${attribute}" with value "${value}", but got "${actualValue}"`,
+        };
+    }
+    return {
+        pass: true,
+        message: () => `Expected element not to have attribute "${attribute}"`,
+    };
+}
+/**
+ * Check if element has a specific attribute with an exact value
+ */
+export function toEqualAttribute(received, attribute, value) {
+    const actualValue = received.getAttribute(attribute);
+    const pass = actualValue === value;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element attribute "${attribute}" not to equal "${value}"`
+            : `Expected element attribute "${attribute}" to equal "${value}", but got "${actualValue}"`,
+    };
+}
+/**
+ * Check if element has all expected attributes with exact values
+ */
+export function toEqualAttributes(received, expectedAttrs) {
+    const mismatches = [];
+    const actualAttrs = {};
+    // Collect all actual attributes
+    for (let i = 0; i < received.attributes.length; i++) {
+        const attr = received.attributes[i];
+        actualAttrs[attr.name] = attr.value;
+    }
+    // Check expected attributes
+    for (const [name, expectedValue] of Object.entries(expectedAttrs)) {
+        const actualValue = received.getAttribute(name);
+        if (actualValue === null) {
+            mismatches.push(`missing "${name}"`);
+        }
+        else if (actualValue !== expectedValue) {
+            mismatches.push(`"${name}": expected "${expectedValue}", got "${actualValue}"`);
+        }
+    }
+    const pass = mismatches.length === 0;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element not to have attributes ${JSON.stringify(expectedAttrs)}`
+            : `Expected element attributes to match.\nMismatches: ${mismatches.join(', ')}\nExpected: ${JSON.stringify(expectedAttrs)}\nActual: ${JSON.stringify(actualAttrs)}`,
+    };
+}
+/**
+ * Check if element has a property
+ */
+export function toHaveProperty(received, property, value) {
+    const hasProperty = property in received;
+    if (!hasProperty) {
+        return {
+            pass: false,
+            message: () => `Expected element to have property "${property}"`,
+        };
+    }
+    if (value !== undefined) {
+        const actualValue = received[property];
+        const pass = actualValue === value;
+        return {
+            pass,
+            message: () => pass
+                ? `Expected element not to have property "${property}" with value ${JSON.stringify(value)}`
+                : `Expected element to have property "${property}" with value ${JSON.stringify(value)}, but got ${JSON.stringify(actualValue)}`,
+        };
+    }
+    return {
+        pass: true,
+        message: () => `Expected element not to have property "${property}"`,
+    };
+}
+/**
+ * Check if element has text content
+ */
+export function toHaveTextContent(received, text) {
+    const actualText = received.textContent || '';
+    const pass = actualText.includes(text);
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element not to have text content "${text}"`
+            : `Expected element to have text content "${text}", but got "${actualText}"`,
+    };
+}
+/**
+ * Check if element's text content exactly matches (after trimming)
+ */
+export function toEqualText(received, expectedText) {
+    const actualText = (received.textContent || '').trim();
+    const trimmedExpected = expectedText.trim();
+    const pass = actualText === trimmedExpected;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element text not to equal "${trimmedExpected}"`
+            : `Expected element text to equal "${trimmedExpected}", but got "${actualText}"`,
+    };
+}
+/**
+ * Check if element is visible
+ */
+export function toBeVisible(received) {
+    const style = window.getComputedStyle(received);
+    const pass = style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0';
+    return {
+        pass,
+        message: () => (pass ? `Expected element not to be visible` : `Expected element to be visible`),
+    };
+}
+/**
+ * Check if element has shadow root
+ */
+export function toHaveShadowRoot(received) {
+    const pass = !!received.shadowRoot;
+    return {
+        pass,
+        message: () => (pass ? `Expected element not to have shadow root` : `Expected element to have shadow root`),
+    };
+}
+/**
+ * Parse HTML string to fragment
+ */
+function parseHtmlFragment(html) {
+    // Try mock-doc parser first
+    try {
+        const mockDoc = require('@stencil/core/mock-doc');
+        if (mockDoc.parseHtmlToFragment) {
+            return mockDoc.parseHtmlToFragment(html);
+        }
+    }
+    catch {
+        // Fall through to standard parser
+    }
+    // Use standard DOM parser (works in jsdom/happy-dom)
+    const template = document.createElement('template');
+    template.innerHTML = html.trim();
+    return template.content;
+}
+/**
+ * Custom matcher to check if an element's HTML matches the expected HTML
+ * Serializes the entire component tree including shadow DOM
+ */
+export function toEqualHtml(received, expected) {
+    if (received == null) {
+        throw new Error(`expect.toEqualHtml() received value is "${received}"`);
+    }
+    if (typeof received.then === 'function') {
+        throw new TypeError(`Element must be a resolved value, not a promise, before it can be tested`);
+    }
+    let receivedHtml;
+    // Serialize the received value
+    if (typeof received === 'string') {
+        const fragment = parseHtmlFragment(received);
+        // For string inputs, use innerHTML to avoid template wrapper
+        receivedHtml = fragment.innerHTML || fragment.textContent || '';
+    }
+    else if (received.nodeType === 11) {
+        // Document fragment
+        receivedHtml = serializeHtml(received, { serializeShadowRoot: true });
+    }
+    else if (received.nodeType === 1) {
+        // Element node
+        receivedHtml = serializeHtml(received, { serializeShadowRoot: true });
+    }
+    else {
+        throw new TypeError(`expect.toEqualHtml() value should be an element, shadow root, or string`);
+    }
+    // Parse and serialize expected HTML for consistent formatting
+    // For expected HTML, just normalize whitespace without parsing through DOM
+    // to preserve custom elements like <mock:shadow-root>
+    let expectedHtml = normalizeHtml(expected.trim());
+    receivedHtml = normalizeHtml(receivedHtml);
+    // Debug logging
+    if (expectedHtml !== receivedHtml) {
+        console.log('Expected (normalized):', JSON.stringify(expectedHtml));
+        console.log('Received (normalized):', JSON.stringify(receivedHtml));
+    }
+    const pass = receivedHtml === expectedHtml;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected HTML not to equal:\n${prettifyHtml(expectedHtml)}`
+            : `Expected HTML to equal:\n${prettifyHtml(expectedHtml)}\n\nReceived:\n${prettifyHtml(receivedHtml)}`,
+    };
+} /**
+ * Custom matcher to check if an element's Light DOM matches the expected HTML
+ * Does not serialize shadow DOM
+ */
+export function toEqualLightHtml(received, expected) {
+    if (received == null) {
+        throw new Error(`expect.toEqualLightHtml() received value is "${received}"`);
+    }
+    if (typeof received.then === 'function') {
+        throw new TypeError(`Element must be a resolved value, not a promise, before it can be tested`);
+    }
+    let receivedHtml;
+    // Serialize the received value (without shadow DOM)
+    if (typeof received === 'string') {
+        const fragment = parseHtmlFragment(received);
+        // For string inputs, use innerHTML to avoid template wrapper
+        receivedHtml = fragment.innerHTML || fragment.textContent || '';
+    }
+    else if (received.nodeType === 11) {
+        // Document fragment
+        receivedHtml = serializeHtml(received, { serializeShadowRoot: false });
+    }
+    else if (received.nodeType === 1) {
+        // Element node
+        receivedHtml = serializeHtml(received, { serializeShadowRoot: false });
+    }
+    else {
+        throw new TypeError(`expect.toEqualLightHtml() value should be an element, shadow root, or string`);
+    }
+    // For expected HTML, just normalize whitespace without parsing through DOM
+    // to preserve custom elements like <mock:shadow-root>
+    let expectedHtml = normalizeHtml(expected.trim());
+    receivedHtml = normalizeHtml(receivedHtml);
+    // Debug logging
+    if (expectedHtml !== receivedHtml) {
+        console.log('LightDOM Expected (normalized):', JSON.stringify(expectedHtml));
+        console.log('LightDOM Received (normalized):', JSON.stringify(receivedHtml));
+    }
+    const pass = receivedHtml === expectedHtml;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected Light DOM HTML not to equal:\n${prettifyHtml(expectedHtml)}`
+            : `Expected Light DOM HTML to equal:\n${prettifyHtml(expectedHtml)}\n\nReceived:\n${prettifyHtml(receivedHtml)}`,
+    };
+}
+/**
+ * Check if an EventSpy has received at least one event
+ */
+export function toHaveReceivedEvent(received) {
+    const pass = received.length > 0;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected event "${received.eventName}" not to have been received`
+            : `Expected event "${received.eventName}" to have been received, but it was not`,
+    };
+}
+/**
+ * Check if an EventSpy has received an event a specific number of times
+ */
+export function toHaveReceivedEventTimes(received, count) {
+    const pass = received.length === count;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected event "${received.eventName}" not to have been received ${count} times`
+            : `Expected event "${received.eventName}" to have been received ${count} times, but it was received ${received.length} times`,
+    };
+}
+/**
+ * Safely stringify a value, handling circular references
+ */
+function safeStringify(value) {
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        // If circular reference, just return a string representation
+        return String(value);
+    }
+}
+/**
+ * Safely compare two values, handling circular references
+ */
+function safeEquals(a, b) {
+    // Try JSON comparison first
+    try {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    catch {
+        // If circular reference, fall back to shallow comparison
+        if (typeof a === 'object' && typeof b === 'object' && a !== null && b !== null) {
+            const keysA = Object.keys(a);
+            const keysB = Object.keys(b);
+            if (keysA.length !== keysB.length)
+                return false;
+            return keysA.every((key) => a[key] === b[key]);
+        }
+        return a === b;
+    }
+}
+/**
+ * Check if the last received event has the expected detail
+ */
+export function toHaveReceivedEventDetail(received, detail) {
+    if (received.length === 0) {
+        return {
+            pass: false,
+            message: () => `Expected event "${received.eventName}" to have been received with detail, but no events were received`,
+        };
+    }
+    const lastEvent = received.lastEvent;
+    const pass = safeEquals(lastEvent.detail, detail);
+    return {
+        pass,
+        message: () => pass
+            ? `Expected last event detail not to equal ${safeStringify(detail)}`
+            : `Expected last event detail to equal ${safeStringify(detail)}, but got ${safeStringify(lastEvent.detail)}`,
+    };
+}
+/**
+ * Check if the first received event has the expected detail
+ */
+export function toHaveFirstReceivedEventDetail(received, detail) {
+    if (received.length === 0) {
+        return {
+            pass: false,
+            message: () => `Expected event "${received.eventName}" to have been received with detail, but no events were received`,
+        };
+    }
+    const firstEvent = received.firstEvent;
+    const pass = safeEquals(firstEvent.detail, detail);
+    return {
+        pass,
+        message: () => pass
+            ? `Expected first event detail not to equal ${safeStringify(detail)}`
+            : `Expected first event detail to equal ${safeStringify(detail)}, but got ${safeStringify(firstEvent.detail)}`,
+    };
+}
+/**
+ * Check if the last received event has the expected detail (alias for toHaveReceivedEventDetail)
+ */
+export function toHaveLastReceivedEventDetail(received, detail) {
+    return toHaveReceivedEventDetail(received, detail);
+}
+/**
+ * Check if the event at a specific index has the expected detail
+ */
+export function toHaveNthReceivedEventDetail(received, index, detail) {
+    if (received.length === 0) {
+        return {
+            pass: false,
+            message: () => `Expected event "${received.eventName}" to have been received with detail, but no events were received`,
+        };
+    }
+    if (index < 0 || index >= received.length) {
+        return {
+            pass: false,
+            message: () => `Expected event at index ${index}, but only ${received.length} events were received`,
+        };
+    }
+    const event = received.events[index];
+    const pass = safeEquals(event.detail, detail);
+    return {
+        pass,
+        message: () => pass
+            ? `Expected event at index ${index} detail not to equal ${safeStringify(detail)}`
+            : `Expected event at index ${index} detail to equal ${safeStringify(detail)}, but got ${safeStringify(event.detail)}`,
+    };
+}
+/**
+ * Install custom matchers
+ */
+export function installMatchers() {
+    expect.extend({
+        toHaveClass,
+        toHaveClasses,
+        toMatchClasses,
+        toHaveAttribute,
+        toEqualAttribute,
+        toEqualAttributes,
+        toHaveProperty,
+        toHaveTextContent,
+        toEqualText,
+        toBeVisible,
+        toHaveShadowRoot,
+        toEqualHtml,
+        toEqualLightHtml,
+        toHaveReceivedEvent,
+        toHaveReceivedEventTimes,
+        toHaveReceivedEventDetail,
+        toHaveFirstReceivedEventDetail,
+        toHaveLastReceivedEventDetail,
+        toHaveNthReceivedEventDetail,
+    });
+}
+// Auto-install matchers when this module is imported
+installMatchers();

package/dist/testing/render.d.ts

@@ -0,0 +1,11 @@
+import type { RenderResult } from '../types.js';
+interface RenderOptions {
+    clearStage?: boolean;
+    stageAttrs?: Record<string, string>;
+}
+/**
+ * Render using Stencil's render
+ */
+export declare function render<T extends HTMLElement = HTMLElement>(vnode: any, options?: RenderOptions): Promise<RenderResult<T>>;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/testing/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/testing/render.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,aAAa,CAAC;AAE1D,UAAU,aAAa;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAKD;;GAEG;AACH,wBAAsB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,KAAK,EAAE,GAAG,EACV,OAAO,GAAE,aAGR,GACA,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAyH1B"}