@stencil/vitest 1.0.0 → 1.1.0

package/README.md

@@ -73,7 +73,7 @@ export default defineVitestConfig({
 });
 ```
 
-[refer Vitest documentation for all configuration options](https://vitest.dev/config/)
+[refer to Vitest's documentation for all configuration options](https://vitest.dev/config/)
 
 ### 3. Load your components
 
@@ -240,6 +240,38 @@ await expect(root).toMatchScreenshot();
 
 Refer to Vitest's [screenshot testing documentation](https://vitest.dev/guide/snapshot.html#visual-snapshots) for more details.
 
+## Utils
+
+### `serializeHtml(element, options?)`
+
+Serializes an HTML element to a string, including shadow DOM content. Useful for debugging or creating custom assertions.
+
+```tsx
+import { serializeHtml } from '@stencil/vitest';
+
+const html = serializeHtml(element, {
+  serializeShadowRoot: true, // Include shadow DOM (default: true)
+  pretty: true, // Prettify output (default: true)
+  excludeStyles: true, // Exclude <style> tags (default: true)
+});
+```
+
+### `prettifyHtml(html)`
+
+Formats HTML string with indentation for readability.
+
+```tsx
+import { prettifyHtml } from '@stencil/vitest';
+
+const formatted = prettifyHtml('<div><span>Hello</span></div>');
+// Returns:
+// <div>
+//   <span>
+//     Hello
+//   </span>
+// </div>
+```
+
 ## CLI
 
 The `stencil-test` CLI wraps both Stencil builds with Vitest testing.

package/dist/index.d.ts

@@ -2,5 +2,6 @@ import './testing/matchers.js';
 import './testing/snapshot-serializer.js';
 export { h } from '@stencil/core';
 export { render } from './testing/render.js';
+export { serializeHtml, prettifyHtml, SerializeOptions } from './testing/html-serializer.js';
 export type { RenderOptions, RenderResult } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAC7F,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -3,3 +3,4 @@ import './testing/matchers.js';
 import './testing/snapshot-serializer.js';
 export { h } from '@stencil/core';
 export { render } from './testing/render.js';
+export { serializeHtml, prettifyHtml } from './testing/html-serializer.js';

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

@@ -1 +1 @@
-{"version":3,"file":"html-serializer.d.ts","sourceRoot":"","sources":["../../src/testing/html-serializer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,gBAAgB,GAAG,MAAM,EAC3D,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAWR;AAuFD;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAkDjD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD"}
+{"version":3,"file":"html-serializer.d.ts","sourceRoot":"","sources":["../../src/testing/html-serializer.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAcH,MAAM,WAAW,gBAAgB;IAC/B,qDAAqD;IACrD,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oCAAoC;IACpC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,WAAW,GAAG,UAAU,GAAG,gBAAgB,GAAG,MAAM,EAC3D,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAWR;AAoGD;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAkDjD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD"}

package/dist/testing/html-serializer.js

@@ -53,7 +53,11 @@ function serializeElementWithShadow(element, excludeStyles, serializeShadowRoot
     }
     html += '>';
     // Add shadow DOM if present and requested
-    if (serializeShadowRoot && 'shadowRoot' in elem && elem.shadowRoot) {
+    // Also check for Stencil non-shadow components with __childNodes (slot polyfill)
+    const stencilElem = elem;
+    const hasShadowRoot = serializeShadowRoot && 'shadowRoot' in elem && elem.shadowRoot;
+    const hasStencilPolyfill = serializeShadowRoot && '__childNodes' in stencilElem && stencilElem.__childNodes;
+    if (hasShadowRoot) {
         // Use mock:shadow-root format to match mock-doc's output
         html += '<mock:shadow-root>';
         // Serialize shadow DOM children
@@ -77,7 +81,15 @@ function serializeElementWithShadow(element, excludeStyles, serializeShadowRoot
         html += '</mock:shadow-root>';
     }
     // Add light DOM children
-    const children = Array.from(elem.childNodes);
+    // For Stencil non-shadow components with slot polyfill, use __childNodes to access actual DOM
+    let childNodes;
+    if (hasStencilPolyfill) {
+        childNodes = stencilElem.__childNodes;
+    }
+    else {
+        childNodes = elem.childNodes;
+    }
+    const children = Array.from(childNodes);
     for (const child of children) {
         if (child.nodeType === 1) {
             // Element node

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -56,22 +56,6 @@
     "web components",
     "component testing"
   ],
-  "scripts": {
-    "build": "tsc && tsc -p tsconfig.bin.json",
-    "dev": "tsc --watch",
-    "test:e2e": "pnpm --filter test-project test",
-    "test:unit": "vitest run",
-    "test:unit:watch": "vitest",
-    "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"
   },
@@ -108,7 +92,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "workspace:*"
+    "vitest-environment-stencil": "1.1.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
@@ -132,5 +116,20 @@
   "engines": {
     "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
   },
-  "packageManager": "pnpm@10.26.0"
-}
+  "scripts": {
+    "build": "tsc && tsc -p tsconfig.bin.json",
+    "dev": "tsc --watch",
+    "test:e2e": "pnpm --filter test-project test",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "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"
+  }
+}