@stencil/vitest 0.0.1-dev.20260109124515.90fb962

package/dist/testing/render.js

@@ -0,0 +1,118 @@
+import { render as stencilRender } from '@stencil/core';
+// Track event spies
+const eventSpies = new WeakMap();
+/**
+ * Render using Stencil's render
+ */
+export async function render(vnode, options = {
+    clearStage: true,
+    stageAttrs: { class: 'stencil-component-stage' },
+}) {
+    // Use Stencil's render which handles VNodes properly in the browser
+    const container = document.createElement('div');
+    Object.entries(options.stageAttrs || {}).forEach(([key, value]) => {
+        container.setAttribute(key, value);
+    });
+    if (options.clearStage) {
+        // Clear existing stage containers
+        const existingStages = document.body.querySelectorAll('div');
+        existingStages.forEach((stage) => stage.remove());
+    }
+    document.body.appendChild(container);
+    await stencilRender(vnode, container);
+    // Get the rendered element
+    const element = container.firstElementChild;
+    if (!element) {
+        throw new Error('Failed to render component');
+    }
+    // Wait for component to be ready
+    if (typeof element.componentOnReady === 'function') {
+        await element.componentOnReady();
+    }
+    function waitForChanges(documentElement = element) {
+        return new Promise((resolve) => {
+            // Wait for Stencil's RAF-based update cycle
+            // Use multiple RAF cycles to ensure all batched updates complete
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    const promiseChain = [];
+                    const waitComponentOnReady = (elm, promises) => {
+                        if (!elm)
+                            return;
+                        if ('shadowRoot' in elm) {
+                            waitComponentOnReady(elm.shadowRoot, promises);
+                        }
+                        const children = elm.children;
+                        const len = children.length;
+                        for (let i = 0; i < len; i++) {
+                            const childElm = children[i];
+                            const childStencilElm = childElm;
+                            if (childElm.tagName.includes('-') && typeof childStencilElm.componentOnReady === 'function') {
+                                promises.push(childStencilElm.componentOnReady().then(() => { }));
+                            }
+                            waitComponentOnReady(childElm, promises);
+                        }
+                    };
+                    waitComponentOnReady(documentElement, promiseChain);
+                    Promise.all(promiseChain)
+                        .then(() => resolve())
+                        .catch(() => resolve());
+                });
+            });
+        });
+    }
+    const setProps = async (newProps) => {
+        Object.entries(newProps).forEach(([key, value]) => {
+            element[key] = value;
+        });
+        // Wait for multiple RAF cycles to ensure Stencil's batched updates complete
+        // Stencil batches updates using requestAnimationFrame for performance
+        await waitForChanges();
+        // Additional RAF cycle to ensure rendering is complete
+        await new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+    };
+    const unmount = () => {
+        container.remove();
+    };
+    const spyOnEvent = (eventName) => {
+        // Return existing spy if already created
+        if (eventSpies.has(container)) {
+            return eventSpies.get(container).find((spy) => spy.eventName === eventName);
+        }
+        const spy = {
+            eventName,
+            events: [],
+            firstEvent: undefined,
+            lastEvent: undefined,
+            length: 0,
+        };
+        // Store listener so we can remove it later
+        const listener = (event) => {
+            const customEvent = event;
+            spy.events.push(customEvent);
+            spy.length = spy.events.length;
+            spy.lastEvent = customEvent;
+            if (spy.length === 1) {
+                spy.firstEvent = customEvent;
+            }
+        };
+        spy._listener = listener;
+        element.addEventListener(eventName, listener);
+        // Store the spy
+        let spiesForElement = eventSpies.get(container);
+        if (!spiesForElement) {
+            spiesForElement = [];
+            eventSpies.set(container, spiesForElement);
+        }
+        spiesForElement.push(spy);
+        return spy;
+    };
+    return {
+        root: element,
+        waitForChanges,
+        instance: element,
+        setProps,
+        unmount,
+        spyOnEvent,
+    };
+}

package/dist/testing/snapshot-serializer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Custom snapshot serializer for Stencil components
+ *
+ * Formats HTMLElements with shadow DOM using the same serialization
+ * as our toEqualHtml matcher, ensuring consistent <mock:shadow-root> output
+ */
+import type { SnapshotSerializer } from 'vitest';
+/**
+ * Vitest snapshot serializer for Stencil components
+ */
+export declare const StencilSnapshotSerializer: SnapshotSerializer;
+/**
+ * Default export for convenience
+ */
+export default StencilSnapshotSerializer;
+export declare function installMatchers(): void;
+//# sourceMappingURL=snapshot-serializer.d.ts.map

package/dist/testing/snapshot-serializer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot-serializer.d.ts","sourceRoot":"","sources":["../../src/testing/snapshot-serializer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAIjD;;GAEG;AACH,eAAO,MAAM,yBAAyB,EAAE,kBAiCvC,CAAC;AAEF;;GAEG;AACH,eAAe,yBAAyB,CAAC;AAEzC,wBAAgB,eAAe,SAE9B"}

package/dist/testing/snapshot-serializer.js

@@ -0,0 +1,50 @@
+/**
+ * Custom snapshot serializer for Stencil components
+ *
+ * Formats HTMLElements with shadow DOM using the same serialization
+ * as our toEqualHtml matcher, ensuring consistent <mock:shadow-root> output
+ */
+import { expect } from 'vitest';
+import { serializeHtml } from './html-serializer.js';
+/**
+ * Vitest snapshot serializer for Stencil components
+ */
+export const StencilSnapshotSerializer = {
+    /**
+     * Test if this serializer should handle the value
+     */
+    test(val) {
+        // Handle HTMLElement with shadow DOM (Stencil components)
+        if (val && typeof val === 'object') {
+            // Check if it's an HTMLElement with shadowRoot
+            if ('shadowRoot' in val && val.shadowRoot) {
+                return true;
+            }
+            // Check if it's an HTMLElement (could be Stencil component that hasn't hydrated yet)
+            if ('nodeType' in val && val.nodeType === 1 && 'tagName' in val) {
+                // Only serialize custom elements (Stencil components typically have hyphens)
+                const tagName = val.tagName?.toLowerCase();
+                return tagName && tagName.includes('-');
+            }
+        }
+        return false;
+    },
+    /**
+     * Serialize the value for snapshot
+     */
+    serialize(val) {
+        return serializeHtml(val, {
+            serializeShadowRoot: true,
+            pretty: true,
+            excludeStyles: true,
+        });
+    },
+};
+/**
+ * Default export for convenience
+ */
+export default StencilSnapshotSerializer;
+export function installMatchers() {
+    expect.addSnapshotSerializer(StencilSnapshotSerializer);
+}
+installMatchers();

package/dist/types.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Event spy for testing custom events
+ */
+export interface EventSpy {
+    /**
+     * Name of the event being spied on
+     */
+    eventName: string;
+    /**
+     * All events that have been received
+     */
+    events: CustomEvent[];
+    /**
+     * First event received (if any)
+     */
+    firstEvent: CustomEvent | undefined;
+    /**
+     * Last event received (if any)
+     */
+    lastEvent: CustomEvent | undefined;
+    /**
+     * Number of events received
+     */
+    length: number;
+}
+/**
+ * Component render options
+ */
+export interface RenderOptions {
+    /**
+     * Props to pass to the component
+     */
+    props?: Record<string, any>;
+    /**
+     * Slots content (for shadow DOM components)
+     */
+    slots?: Record<string, string | HTMLElement>;
+    /**
+     * HTML content to place inside the component
+     */
+    html?: string;
+    /**
+     * Wait for component to be loaded before returning
+     * @default true
+     */
+    waitForLoad?: boolean;
+    /**
+     * Additional HTML attributes
+     */
+    attributes?: Record<string, string>;
+}
+/**
+ * Render result for component testing
+ */
+export interface RenderResult<T = HTMLElement> {
+    /**
+     * The rendered component element
+     */
+    root: T;
+    /**
+     * Wait for changes to be applied
+     */
+    waitForChanges: () => Promise<void>;
+    /**
+     * Get the component instance (if available)
+     */
+    instance?: any;
+    /**
+     * Update component props
+     */
+    setProps: (props: Record<string, any>) => Promise<void>;
+    /**
+     * Unmount/cleanup the component
+     */
+    unmount: () => void;
+    /**
+     * Spy on a custom event
+     */
+    spyOnEvent: (eventName: string) => EventSpy;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;IAEtB;;OAEG;IACH,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;IAEpC;;OAEG;IACH,SAAS,EAAE,WAAW,GAAG,SAAS,CAAC;IAEnC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAE5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,WAAW,CAAC,CAAC;IAE7C;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACrC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,WAAW;IAC3C;;OAEG;IACH,IAAI,EAAE,CAAC,CAAC;IAER;;OAEG;IACH,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC;;OAEG;IACH,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAExD;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,QAAQ,CAAC;CAC7C"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,133 @@
+{
+  "name": "@stencil/vitest",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/stenciljs/vitest"
+  },
+  "version": "0.0.1-dev.20260109124515.90fb962",
+  "description": "First-class testing utilities for Stencil design systems with Vitest",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "stencil-test": "./dist/bin/stencil-test.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./config": {
+      "types": "./dist/config.d.ts",
+      "import": "./dist/config.js",
+      "require": "./dist/config.js"
+    },
+    "./mock-doc-setup": {
+      "types": "./dist/setup/mock-doc-setup.d.ts",
+      "import": "./dist/setup/mock-doc-setup.js"
+    },
+    "./jsdom-setup": {
+      "types": "./dist/setup/jsdom-setup.d.ts",
+      "import": "./dist/setup/jsdom-setup.js"
+    },
+    "./happy-dom-setup": {
+      "types": "./dist/setup/happy-dom-setup.d.ts",
+      "import": "./dist/setup/happy-dom-setup.js"
+    },
+    "./vitest": {
+      "types": "./dist/environments/stencil.d.ts",
+      "import": "./dist/environments/stencil.js"
+    },
+    "./environments/stencil": {
+      "types": "./dist/environments/stencil.d.ts",
+      "import": "./dist/environments/stencil.js"
+    }
+  },
+  "files": [
+    "dist/",
+    "README.md"
+  ],
+  "keywords": [
+    "stencil",
+    "testing",
+    "vitest",
+    "web components",
+    "component testing"
+  ],
+  "scripts": {
+    "build": "tsc && tsc -p tsconfig.bin.json",
+    "dev": "tsc --watch",
+    "test": "pnpm --filter test-project test",
+    "test:engines": "pnpm installed-check --no-workspaces --ignore-dev",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --check .",
+    "format:fix": "prettier --write .",
+    "knip": "knip",
+    "quality": "pnpm format && pnpm lint && pnpm knip",
+    "quality:fix": "pnpm format:fix && pnpm lint:fix && pnpm knip",
+    "release": "semantic-release"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@stencil/core": "^4.0.0",
+    "vitest": "^4.0.0 || ^3.0.0 || ^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": true
+    },
+    "@wdio/globals": {
+      "optional": true
+    },
+    "jsdom": {
+      "optional": true
+    },
+    "happy-dom": {
+      "optional": true
+    },
+    "playwright": {
+      "optional": true
+    },
+    "@vitest/browser-webdriverio": {
+      "optional": true
+    },
+    "@vitest/browser-playwright": {
+      "optional": true
+    },
+    "@vitest/browser-preview": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "jiti": "^2.6.1",
+    "local-pkg": "^1.1.2",
+    "vitest-environment-stencil": "latest"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@stencil/core": "^4.0.0",
+    "@types/node": "24.10.4",
+    "@typescript-eslint/eslint-plugin": "^8.50.0",
+    "@typescript-eslint/parser": "^8.50.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "eslint": "^9.39.2",
+    "installed-check": "^9.3.0",
+    "knip": "^5.76.3",
+    "playwright-core": "^1.57.0",
+    "prettier": "^3.7.4",
+    "semantic-release": "^25.0.2",
+    "typescript": "~5.8.3",
+    "vitest": "^4.0.0"
+  },
+  "engines": {
+    "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+  },
+  "packageManager": "pnpm@10.26.0"
+}