@wdio/browser-runner 8.29.3 → 8.29.6

package/build/{vite/frameworks → browser}/fixtures/stencil.d.ts

@@ -1,12 +1,5 @@
+import type { StencilEnvironment } from '../../../stencil/index.d.ts';
 import type { NewSpecPageOptions } from '@stencil/core/internal';
-interface StencilEnvironment {
-    /**
-     * After changes have been made to a component, such as a update to a property or
-     * attribute, the test page does not automatically apply the changes. In order to
-     * wait for, and apply the update, call await `flushAll()`.
-     */
-    flushAll: () => void;
-}
 /**
  * Creates a new spec page for unit testing
  * @param opts the options to apply to the spec page that influence its configuration and operation
@@ -67,5 +60,4 @@ export declare const enum CMP_FLAGS {
  * @returns a compact format for component metadata, intended for runtime use
  */
 export declare const formatComponentRuntimeMeta: (compilerMeta: any, includeMethods: boolean) => any;
-export {};
 //# sourceMappingURL=stencil.d.ts.map

package/build/browser/fixtures/stencil.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/browser/fixtures/stencil.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AAgBrE,OAAO,KAAK,EAKR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAe/B;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CA2HnE;AAsGD;;;;;GAKG;AACH,0BAAkB,SAAS;IACvB;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;OAEG;IACH,iBAAiB,IAAS;IAM1B;;;;;OAKG;IACH,kBAAkB,IAAS;IAC3B;;;OAGG;IACH,oBAAoB,KAAS;IAC7B;;OAEG;IACH,OAAO,KAAS;IAEhB;;;;;OAKG;IACH,wBAAwB,KAA8C;CACzE;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,iBACrB,GAAG,kBACD,OAAO,KACxB,GAyBF,CAAA"}

package/build/{vite/frameworks → browser}/fixtures/stencil.js

@@ -4,11 +4,14 @@ import { h } from '@stencil/core';
  * This is used by Stencil.js internally.
  */
 process.nextTick = (cb) => setTimeout(cb, 0);
+/**
+ * in case the user has his tsconfig.json configured to expect "jsx" to be "react"
+ */
 // @ts-expect-error
 window.React = {
-    createElement: h,
+    createElement: h
 };
-import { bootstrapLazy, flushAll, insertVdomAnnotations, registerComponents, registerModule, renderVdom, setSupportsShadowDom, startAutoApplyChanges, styles, win, writeTask,
+import { bootstrapLazy, flushAll, insertVdomAnnotations, registerComponents, registerModule, renderVdom, setSupportsShadowDom, startAutoApplyChanges, styles, writeTask,
 // @ts-expect-error
  } from '@stencil/core/internal/testing/index.js';
 /**
@@ -20,14 +23,15 @@ export function render(opts) {
     if (!opts) {
         throw new Error('NewSpecPageOptions required');
     }
+    const components = opts.components || [];
     const stencilStage = document.querySelector('stencil-stage');
     if (stencilStage) {
         stencilStage.remove();
     }
-    const stage = document.createElement('stencil-stage');
-    document.body.appendChild(stage);
-    if (Array.isArray(opts.components)) {
-        registerComponents(opts.components);
+    const container = document.createElement('stencil-stage');
+    document.body.appendChild(container);
+    if (Array.isArray(components)) {
+        registerComponents(components);
     }
     if (opts.hydrateClientSide) {
         opts.includeAnnotations = true;
@@ -46,14 +50,7 @@ export function render(opts) {
         }
     }
     const cmpTags = new Set();
-    const doc = win.document;
-    const page = {
-        win: win,
-        doc: doc,
-        body: stage,
-        styles
-    };
-    const lazyBundles = opts.components.map((Cstr) => {
+    const lazyBundles = components.map((Cstr) => {
         // eslint-disable-next-line eqeqeq
         if (Cstr.COMPILER_META == null) {
             throw new Error('Invalid component class: Missing static "COMPILER_META" property.');
@@ -77,17 +74,25 @@ export function render(opts) {
         }
         registerModule(bundleId, Cstr);
         /**
-         * Register the component as a custom element
+         * Register the component as a custom element only if not already registered
          */
-        customElements.define(Cstr.COMPILER_META.tagName, Cstr);
+        if (!customElements.get(Cstr.COMPILER_META.tagName)) {
+            customElements.define(Cstr.COMPILER_META.tagName, Cstr);
+        }
         const lazyBundleRuntimeMeta = formatLazyBundleRuntimeMeta(bundleId, [Cstr.COMPILER_META]);
         return lazyBundleRuntimeMeta;
     });
+    const page = {
+        container,
+        styles,
+        flushAll,
+        unmount: () => container.remove()
+    };
     if (typeof opts.direction === 'string') {
-        page.doc.documentElement.setAttribute('dir', opts.direction);
+        document.documentElement.setAttribute('dir', opts.direction);
     }
     if (typeof opts.language === 'string') {
-        page.doc.documentElement.setAttribute('lang', opts.language);
+        document.documentElement.setAttribute('lang', opts.language);
     }
     bootstrapLazy(lazyBundles);
     if (typeof opts.template === 'function') {
@@ -100,7 +105,7 @@ export function render(opts) {
             $flags$: 0,
             $modeName$: undefined,
             $cmpMeta$: cmpMeta,
-            $hostElement$: page.body,
+            $hostElement$: container,
         };
         renderVdom(ref, opts.template());
     }
@@ -108,26 +113,21 @@ export function render(opts) {
     Object.defineProperty(page, 'root', {
         get() {
             if (!rootComponent) {
-                rootComponent = findRootComponent(cmpTags, page.body);
+                rootComponent = findRootComponent(cmpTags, container);
             }
             if (rootComponent) {
                 return rootComponent;
             }
-            const firstElementChild = page.body.firstElementChild;
-            if (!firstElementChild) {
-                return firstElementChild;
-            }
-            return null;
+            return container.firstElementChild;
         },
     });
     if (opts.hydrateServerSide) {
-        insertVdomAnnotations(doc, []);
+        insertVdomAnnotations(document, []);
     }
     if (opts.autoApplyChanges) {
         startAutoApplyChanges();
     }
-    flushAll();
-    return { flushAll };
+    return page;
 }
 /**
  * A helper method that proxies Stencil lifecycle methods by mutating the provided component class

package/build/vite/frameworks/stencil.d.ts

@@ -1,4 +1,8 @@
 import type { InlineConfig } from 'vite';
 export declare function isUsingStencilJS(rootDir: string, options: WebdriverIO.BrowserRunnerOptions): Promise<boolean>;
 export declare function optimizeForStencil(rootDir: string): Promise<InlineConfig>;
+/**
+ * helper method to import a Stencil config file
+ */
+export declare function importStencilConfig(rootDir: string): Promise<any>;
 //# sourceMappingURL=stencil.d.ts.map

package/build/vite/frameworks/stencil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAahD,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,oBAEhG;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,MAAM,yBAwBvD"}
+{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../src/vite/frameworks/stencil.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAU,MAAM,MAAM,CAAA;AAahD,wBAAsB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,oBAAoB,oBAEhG;AAED,wBAAsB,kBAAkB,CAAC,OAAO,EAAE,MAAM,yBAwBvD;AAwID;;GAEG;AACH,wBAAsB,mBAAmB,CAAC,OAAO,EAAE,MAAM,gBAaxD"}

package/build/vite/frameworks/stencil.js

@@ -8,7 +8,7 @@ export async function isUsingStencilJS(rootDir, options) {
     return Boolean(options.preset === 'stencil' || await hasFileByExtensions(path.join(rootDir, 'stencil.config')));
 }
 export async function optimizeForStencil(rootDir) {
-    const stencilConfig = await import(path.join(rootDir, 'stencil.config.ts')).catch(() => ({ config: {} }));
+    const stencilConfig = await importStencilConfig(rootDir);
     const stencilPlugins = stencilConfig.config.plugins;
     const stencilOptimizations = {
         plugins: [await stencilVitePlugin(rootDir)],
@@ -30,7 +30,7 @@ export async function optimizeForStencil(rootDir) {
 }
 async function stencilVitePlugin(rootDir) {
     const { transpileSync, ts } = await import('@stencil/core/compiler/stencil.js');
-    const stencilHelperPath = path.resolve(__dirname, 'fixtures', 'stencil.js');
+    const stencilHelperPath = path.resolve(__dirname, '..', '..', 'browser', 'fixtures', 'stencil.js');
     return {
         name: 'wdio-stencil',
         enforce: 'pre',
@@ -45,7 +45,28 @@ async function stencilVitePlugin(rootDir) {
                 .filter((imp) => imp.specifier === STENCIL_IMPORT)
                 .map((imp) => parseStaticImport(imp));
             const isStencilComponent = stencilImports.some((imp) => 'Component' in (imp.namedImports || {}));
+            /**
+             * if file doesn't define a Stencil component
+             */
             if (!isStencilComponent) {
+                /**
+                 * if a test imports the `@wdio/browser-runner/stencil` package we want to automatically
+                 * import `h` and `Fragment` from the `@stencil/core` package
+                 */
+                const stencilHelperImport = staticImports.find((imp) => imp.specifier === '@wdio/browser-runner/stencil');
+                if (stencilHelperImport) {
+                    const imports = parseStaticImport(stencilHelperImport);
+                    const hasHImport = stencilImports.find((imp) => 'h' in (imp.namedImports || {}));
+                    const hasFragmentImport = stencilImports.find((imp) => 'Fragment' in (imp.namedImports || {}));
+                    if ('render' in (imports.namedImports || {})) {
+                        if (!hasHImport) {
+                            code = `import { h } from '@stencil/core';\n${code}`;
+                        }
+                        if (!hasFragmentImport) {
+                            code = `import { Fragment } from '@stencil/core';\n${code}`;
+                        }
+                    }
+                }
                 return { code };
             }
             const tsCompilerOptions = getCompilerOptions(ts, rootDir);
@@ -117,3 +138,18 @@ function getCompilerOptions(ts, rootDir) {
     _tsCompilerOptions = parseResult.options;
     return _tsCompilerOptions;
 }
+/**
+ * helper method to import a Stencil config file
+ */
+export async function importStencilConfig(rootDir) {
+    const configPath = path.join(rootDir, 'stencil.config.ts');
+    const config = await import(configPath).catch(() => ({ config: {} }));
+    /**
+     * if we import the config within a CJS environment we need to
+     * access the default property even though there is a named export
+     */
+    if ('default' in config) {
+        return config.default;
+    }
+    return config;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wdio/browser-runner",
-  "version": "8.29.3",
+  "version": "8.29.6",
   "description": "A WebdriverIO runner to run unit tests tests in the browser.",
   "author": "Christian Bromann <mail@bromann.dev>",
   "homepage": "https://github.com/webdriverio/webdriverio/tree/main/packages/wdio-browser-runner",
@@ -38,11 +38,11 @@
     "@types/istanbul-lib-source-maps": "^4.0.1",
     "@vitest/spy": "^1.0.1",
     "@wdio/globals": "8.29.3",
-    "@wdio/local-runner": "8.29.3",
+    "@wdio/local-runner": "8.29.5",
     "@wdio/logger": "8.28.0",
     "@wdio/mocha-framework": "8.29.3",
     "@wdio/protocols": "^8.24.12",
-    "@wdio/runner": "8.29.3",
+    "@wdio/runner": "8.29.5",
     "@wdio/types": "8.29.1",
     "@wdio/utils": "8.29.3",
     "deepmerge-ts": "^5.0.0",
@@ -71,5 +71,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "4c6433be548950dc6ccf0efff77507dfa2f0b321"
+  "gitHead": "45ff936ee5c76137bf96c15a2fc36c362a0ff693"
 }

package/stencil/index.d.ts

@@ -2,11 +2,11 @@
 /**
  * Options pertaining to the creation and functionality of a {@link SpecPage}
  */
-interface RenderOptions {
+export interface RenderOptions {
     /**
      * An array of components to test. Component classes can be imported into the spec file, then their reference should be added to the `component` array in order to be used throughout the test.
      */
-    components: any[];
+    components?: any[];
     /**
      * If `false`, do not flush the render queue on initial test setup.
      */
@@ -58,13 +58,29 @@ interface RenderOptions {
     strictBuild?: boolean;
 }
 
-interface StencilEnvironment {
+export interface StencilEnvironment {
     /**
      * After changes have been made to a component, such as a update to a property or
      * attribute, the test page does not automatically apply the changes. In order to
      * wait for, and apply the update, call await `flushAll()`.
      */
     flushAll: () => void
+    /**
+     * All styles defined by components.
+     */
+    styles: Record<string, string>
+    /**
+     * Container element in which the template is being rendered into.
+     */
+    container: HTMLElement
+    /**
+     * The root component of the template.
+     */
+    root: HTMLElement
+    /**
+     * Removes the container element from the DOM.
+     */
+    unmount: () => void
 }
 
 export function render(opts: RenderOptions): StencilEnvironment

package/build/vite/frameworks/fixtures/stencil.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"stencil.d.ts","sourceRoot":"","sources":["../../../../src/vite/frameworks/fixtures/stencil.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAKR,kBAAkB,EACrB,MAAM,wBAAwB,CAAA;AAgB/B,UAAU,kBAAkB;IACxB;;;;OAIG;IACH,QAAQ,EAAE,MAAM,IAAI,CAAA;CACvB;AAED;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB,CA+HnE;AAsGD;;;;;GAKG;AACH,0BAAkB,SAAS;IACvB;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;;OAGG;IACH,sBAAsB,IAAS;IAC/B;;OAEG;IACH,iBAAiB,IAAS;IAM1B;;;;;OAKG;IACH,kBAAkB,IAAS;IAC3B;;;OAGG;IACH,oBAAoB,KAAS;IAC7B;;OAEG;IACH,OAAO,KAAS;IAEhB;;;;;OAKG;IACH,wBAAwB,KAA8C;CACzE;AASD;;;;;;;GAOG;AACH,eAAO,MAAM,0BAA0B,iBACrB,GAAG,kBACD,OAAO,KACxB,GAyBF,CAAA"}