@stencil/vitest 1.6.2 → 1.7.1

package/README.md

@@ -166,8 +166,10 @@ expect(element).toHaveAttribute('aria-label', 'Close');
 expect(element).toEqualAttribute('type', 'button');
 expect(element).toEqualAttributes({ type: 'button', disabled: true });
 expect(element).toHaveProperty('value', 'test');
-expect(element).toHaveTextContent('Hello World');
-expect(element).toEqualText('Exact text match');
+expect(element).toHaveTextContent('Hello World'); // includes shadow DOM text
+expect(element).toHaveLightTextContent('Hello World'); // light DOM only
+expect(element).toEqualText('Exact text match'); // includes shadow DOM text
+expect(element).toEqualLightText('Exact text match'); // light DOM only
 
 // Shadow DOM
 expect(element).toHaveShadowRoot();

package/dist/testing/matchers.d.ts

@@ -21,10 +21,14 @@ interface CustomMatchers<R = unknown> {
     toEqualAttributes(expectedAttrs: Record<string, string>): R;
     /** Asserts element has the property, optionally with a specific value. */
     toHaveProperty(property: string, value?: any): R;
-    /** Asserts element's text content contains the specified text. */
+    /** Asserts element's text content (including shadow DOM) contains the specified text. */
     toHaveTextContent(text: string): R;
-    /** Asserts element's trimmed text content equals the expected text exactly. */
+    /** Asserts element's light DOM text content contains the specified text. */
+    toHaveLightTextContent(text: string): R;
+    /** Asserts element's trimmed text content (including shadow DOM) equals the expected text exactly. */
     toEqualText(expectedText: string): R;
+    /** Asserts element's trimmed light DOM text content (excluding shadow DOM) equals the expected text exactly. */
+    toEqualLightText(expectedText: string): R;
     /** Asserts element has an attached shadow root. */
     toHaveShadowRoot(): R;
     /** Asserts element's serialized HTML (including shadow DOM) matches expected HTML. */

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

@@ -1 +1 @@
-{"version":3,"file":"matchers.d.ts","sourceRoot":"","sources":["../../src/testing/matchers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;GAEG;AACH,UAAU,cAAc,CAAC,CAAC,GAAG,OAAO;IAClC,mDAAmD;IACnD,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC;IAClC,qDAAqD;IACrD,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gFAAgF;IAChF,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,2EAA2E;IAC3E,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,mEAAmE;IACnE,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,sEAAsE;IACtE,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5D,0EAA0E;IAC1E,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACjD,kEAAkE;IAClE,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACnC,+EAA+E;IAC/E,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,mDAAmD;IACnD,gBAAgB,IAAI,CAAC,CAAC;IACtB,sFAAsF;IACtF,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,+FAA+F;IAC/F,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,yDAAyD;IACzD,mBAAmB,IAAI,CAAC,CAAC;IACzB,6EAA6E;IAC7E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3C,uEAAuE;IACvE,yBAAyB,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC1C,wEAAwE;IACxE,8BAA8B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC/C,uEAAuE;IACvE,6BAA6B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC9C,kFAAkF;IAClF,4BAA4B,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;CAC7D;AAGD,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;KAAG;IACzD,UAAU,4BAA6B,SAAQ,cAAc;KAAG;CACjE;AAyiBD,OAAO,EAAE,CAAC"}
+{"version":3,"file":"matchers.d.ts","sourceRoot":"","sources":["../../src/testing/matchers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH;;GAEG;AACH,UAAU,cAAc,CAAC,CAAC,GAAG,OAAO;IAClC,mDAAmD;IACnD,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,CAAC,CAAC;IAClC,qDAAqD;IACrD,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,gFAAgF;IAChF,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;IACxC,2EAA2E;IAC3E,eAAe,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,mEAAmE;IACnE,gBAAgB,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IACtD,sEAAsE;IACtE,iBAAiB,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;IAC5D,0EAA0E;IAC1E,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC;IACjD,yFAAyF;IACzF,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACnC,4EAA4E;IAC5E,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,CAAC;IACxC,sGAAsG;IACtG,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,gHAAgH;IAChH,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,mDAAmD;IACnD,gBAAgB,IAAI,CAAC,CAAC;IACtB,sFAAsF;IACtF,WAAW,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IACrC,+FAA+F;IAC/F,gBAAgB,CAAC,YAAY,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1C,yDAAyD;IACzD,mBAAmB,IAAI,CAAC,CAAC;IACzB,6EAA6E;IAC7E,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,CAAC;IAC3C,uEAAuE;IACvE,yBAAyB,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC1C,wEAAwE;IACxE,8BAA8B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC/C,uEAAuE;IACvE,6BAA6B,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IAC9C,kFAAkF;IAClF,4BAA4B,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;CAC7D;AAGD,OAAO,QAAQ,QAAQ,CAAC;IACtB,UAAU,SAAS,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,cAAc,CAAC,CAAC,CAAC;KAAG;IACzD,UAAU,4BAA6B,SAAQ,cAAc;KAAG;CACjE;AAioBD,OAAO,EAAE,CAAC"}

package/dist/testing/matchers.js

@@ -147,10 +147,54 @@ function toHaveProperty(received, property, value) {
     };
 }
 /**
- * Check if element has text content
+ * Recursively get text content including shadow DOM and Stencil slot polyfill
+ */
+function getTextContentWithShadow(element) {
+    let text = '';
+    if (element.nodeType === 1) {
+        const el = element;
+        // Traverse shadow root first (real or Stencil polyfill)
+        if (el.shadowRoot) {
+            text += getTextContentWithShadow(el.shadowRoot);
+        }
+        // For Stencil non-shadow components with slot polyfill, use __childNodes
+        const stencilElem = el;
+        const childNodes = stencilElem.__childNodes ?? el.childNodes;
+        for (const node of Array.from(childNodes)) {
+            if (node.nodeType === 3) {
+                // Text node
+                text += node.textContent || '';
+            }
+            else if (node.nodeType === 1) {
+                const tag = node.tagName?.toLowerCase();
+                if (tag !== 'style' && tag !== 'script') {
+                    text += getTextContentWithShadow(node);
+                }
+            }
+        }
+    }
+    else {
+        // DocumentFragment or ShadowRoot - iterate child nodes directly
+        for (const node of Array.from(element.childNodes)) {
+            if (node.nodeType === 3) {
+                // Text node
+                text += node.textContent || '';
+            }
+            else if (node.nodeType === 1) {
+                const tag = node.tagName?.toLowerCase();
+                if (tag !== 'style' && tag !== 'script') {
+                    text += getTextContentWithShadow(node);
+                }
+            }
+        }
+    }
+    return text;
+}
+/**
+ * Check if element has text content (including shadow DOM)
  */
 function toHaveTextContent(received, text) {
-    const actualText = received.textContent || '';
+    const actualText = getTextContentWithShadow(received);
     const pass = actualText.includes(text);
     return {
         pass,
@@ -160,10 +204,23 @@ function toHaveTextContent(received, text) {
     };
 }
 /**
- * Check if element's text content exactly matches (after trimming)
+ * Check if element's light DOM has text content (excludes shadow DOM)
+ */
+function toHaveLightTextContent(received, text) {
+    const actualText = received.textContent || '';
+    const pass = actualText.includes(text);
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element light DOM not to have text content "${text}"`
+            : `Expected element light DOM to have text content "${text}", but got "${actualText}"`,
+    };
+}
+/**
+ * Check if element's text content exactly matches (after trimming), including shadow DOM
  */
 function toEqualText(received, expectedText) {
-    const actualText = (received.textContent || '').trim();
+    const actualText = getTextContentWithShadow(received).trim();
     const trimmedExpected = expectedText.trim();
     const pass = actualText === trimmedExpected;
     return {
@@ -173,6 +230,20 @@ function toEqualText(received, expectedText) {
             : `Expected element text to equal "${trimmedExpected}", but got "${actualText}"`,
     };
 }
+/**
+ * Check if element's light DOM text content exactly matches (after trimming), excludes shadow DOM
+ */
+function toEqualLightText(received, expectedText) {
+    const actualText = (received.textContent || '').trim();
+    const trimmedExpected = expectedText.trim();
+    const pass = actualText === trimmedExpected;
+    return {
+        pass,
+        message: () => pass
+            ? `Expected element light DOM text not to equal "${trimmedExpected}"`
+            : `Expected element light DOM text to equal "${trimmedExpected}", but got "${actualText}"`,
+    };
+}
 /**
  * Check if element has shadow root
  */
@@ -445,7 +516,9 @@ function installMatchers() {
         toEqualAttributes,
         toHaveProperty,
         toHaveTextContent,
+        toHaveLightTextContent,
         toEqualText,
+        toEqualLightText,
         toHaveShadowRoot,
         toEqualHtml,
         toEqualLightHtml,

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

@@ -1 +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;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAyBD;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAiCtG;AAED;;;;GAIG;AACH,wBAAsB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAY5F;AAED;;GAEG;AACH,wBAAsB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG,EACvE,QAAQ,EAAE,GAAG,GAAG,MAAM,EACtB,OAAO,GAAE,aAGR,GACA,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAkJ7B"}
+{"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;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAyBD;;;;GAIG;AACH,wBAAsB,aAAa,CAAC,iBAAiB,EAAE,OAAO,GAAG,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAyCtG;AAED;;;;GAIG;AACH,wBAAsB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,CAY5F;AAED;;GAEG;AACH,wBAAsB,MAAM,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,CAAC,GAAG,GAAG,EACvE,QAAQ,EAAE,GAAG,GAAG,MAAM,EACtB,OAAO,GAAE,aAGR,GACA,OAAO,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAkJ7B"}

package/dist/testing/render.js

@@ -43,11 +43,18 @@ export async function waitForStable(elementOrSelector, timeout = 5000) {
         if (typeof elementOrSelector === 'string' && !element) {
             element = document.querySelector(elementOrSelector);
         }
-        // If we have an element, check if it has dimensions
+        // If we have an element, check if it has dimensions and is visible
         if (element) {
             const rect = element.getBoundingClientRect();
             if (rect.width > 0 && rect.height > 0) {
-                return;
+                const style = window.getComputedStyle(element);
+                const isVisible = style.display !== 'none' &&
+                    style.visibility !== 'hidden' &&
+                    style.visibility !== 'collapse' &&
+                    parseFloat(style.opacity) > 0;
+                if (isVisible) {
+                    return;
+                }
             }
         }
         await new Promise((r) => requestAnimationFrame(r));

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/stenciljs/vitest"
   },
-  "version": "1.6.2",
+  "version": "1.7.1",
   "description": "First-class testing utilities for Stencil design systems with Vitest",
   "license": "MIT",
   "type": "module",
@@ -97,7 +97,7 @@
   "dependencies": {
     "jiti": "^2.6.1",
     "local-pkg": "^1.1.2",
-    "vitest-environment-stencil": "1.6.2"
+    "vitest-environment-stencil": "1.7.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",