chore(wdio): porting the scoped-basic test suite to wdio

test/karma/test-app/components.d.ts

@@ -87,10 +87,6 @@ export namespace Components {
     }
     interface ReparentStyleWithVars {
     }
-    interface ScopedBasic {
-    }
-    interface ScopedBasicRoot {
-    }
     interface ScopedConditional {
         "renderHello": boolean;
     }
@@ -474,18 +470,6 @@ declare global {
         prototype: HTMLReparentStyleWithVarsElement;
         new (): HTMLReparentStyleWithVarsElement;
     };
-    interface HTMLScopedBasicElement extends Components.ScopedBasic, HTMLStencilElement {
-    }
-    var HTMLScopedBasicElement: {
-        prototype: HTMLScopedBasicElement;
-        new (): HTMLScopedBasicElement;
-    };
-    interface HTMLScopedBasicRootElement extends Components.ScopedBasicRoot, HTMLStencilElement {
-    }
-    var HTMLScopedBasicRootElement: {
-        prototype: HTMLScopedBasicRootElement;
-        new (): HTMLScopedBasicRootElement;
-    };
     interface HTMLScopedConditionalElement extends Components.ScopedConditional, HTMLStencilElement {
     }
     var HTMLScopedConditionalElement: {
@@ -927,8 +911,6 @@ declare global {
         "remove-child-patch": HTMLRemoveChildPatchElement;
         "reparent-style-no-vars": HTMLReparentStyleNoVarsElement;
         "reparent-style-with-vars": HTMLReparentStyleWithVarsElement;
-        "scoped-basic": HTMLScopedBasicElement;
-        "scoped-basic-root": HTMLScopedBasicRootElement;
         "scoped-conditional": HTMLScopedConditionalElement;
         "scoped-slot-append-and-prepend": HTMLScopedSlotAppendAndPrependElement;
         "scoped-slot-child-insert-adjacent": HTMLScopedSlotChildInsertAdjacentElement;
@@ -1081,10 +1063,6 @@ declare namespace LocalJSX {
     }
     interface ReparentStyleWithVars {
     }
-    interface ScopedBasic {
-    }
-    interface ScopedBasicRoot {
-    }
     interface ScopedConditional {
         "renderHello"?: boolean;
     }
@@ -1277,8 +1255,6 @@ declare namespace LocalJSX {
         "remove-child-patch": RemoveChildPatch;
         "reparent-style-no-vars": ReparentStyleNoVars;
         "reparent-style-with-vars": ReparentStyleWithVars;
-        "scoped-basic": ScopedBasic;
-        "scoped-basic-root": ScopedBasicRoot;
         "scoped-conditional": ScopedConditional;
         "scoped-slot-append-and-prepend": ScopedSlotAppendAndPrepend;
         "scoped-slot-child-insert-adjacent": ScopedSlotChildInsertAdjacent;
@@ -1385,8 +1361,6 @@ declare module "@stencil/core" {
             "remove-child-patch": LocalJSX.RemoveChildPatch & JSXBase.HTMLAttributes<HTMLRemoveChildPatchElement>;
             "reparent-style-no-vars": LocalJSX.ReparentStyleNoVars & JSXBase.HTMLAttributes<HTMLReparentStyleNoVarsElement>;
             "reparent-style-with-vars": LocalJSX.ReparentStyleWithVars & JSXBase.HTMLAttributes<HTMLReparentStyleWithVarsElement>;
-            "scoped-basic": LocalJSX.ScopedBasic & JSXBase.HTMLAttributes<HTMLScopedBasicElement>;
-            "scoped-basic-root": LocalJSX.ScopedBasicRoot & JSXBase.HTMLAttributes<HTMLScopedBasicRootElement>;
             "scoped-conditional": LocalJSX.ScopedConditional & JSXBase.HTMLAttributes<HTMLScopedConditionalElement>;
             "scoped-slot-append-and-prepend": LocalJSX.ScopedSlotAppendAndPrepend & JSXBase.HTMLAttributes<HTMLScopedSlotAppendAndPrependElement>;
             "scoped-slot-child-insert-adjacent": LocalJSX.ScopedSlotChildInsertAdjacent & JSXBase.HTMLAttributes<HTMLScopedSlotChildInsertAdjacentElement>;

test/wdio/global.ts

@@ -0,0 +1,9 @@
+import { setMode } from '@stencil/core';
+
+const globalScript = () => {
+  setMode((elm) => {
+    return (elm as any).colormode || elm.getAttribute('colormode');
+  });
+};
+
+export default globalScript;

test/wdio/scoped-basic/cmp.test.tsx

@@ -0,0 +1,50 @@
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('scoped-basic', function () {
+  beforeEach(() => {
+    render({
+      template: () => <scoped-basic-root colormode="md"></scoped-basic-root>,
+    });
+  });
+
+  it('render', async () => {
+    const doc = await $('scoped-basic-root');
+    await doc.waitForStable();
+
+    await expect(doc).toHaveElementClass(expect.stringContaining('sc-scoped-basic-root-md-h'));
+    await expect(doc).toHaveElementClass(expect.stringContaining('sc-scoped-basic-root-md-s'));
+    await expect(doc).toHaveElementClass(expect.stringContaining('hydrated'));
+
+    const scopedEl = await $('scoped-basic');
+    await scopedEl.waitForStable();
+
+    await expect(scopedEl).toHaveElementClass(expect.stringContaining('sc-scoped-basic-root-md'));
+    await expect(scopedEl).toHaveElementClass(expect.stringContaining('sc-scoped-basic-h'));
+    await expect(scopedEl).toHaveElementClass(expect.stringContaining('sc-scoped-basic-s'));
+    await expect(scopedEl).toHaveElementClass(expect.stringContaining('hydrated'));
+
+    await expect(scopedEl).toHaveStyle({
+      backgroundColor: browser.isChromium ? 'rgba(0,0,0,1)' : 'rgb(0,0,0)',
+      color: browser.isChromium ? 'rgba(128,128,128,1)' : 'rgb(128,128,128)',
+    });
+
+    const scopedDiv = await $('scoped-basic div');
+    await expect(scopedDiv).toHaveElementClass(expect.stringContaining('sc-scoped-basic'));
+    expect(scopedDiv).toHaveStyle({
+      color: browser.isChromium ? 'rgba(255,0,0,1)' : 'rgb(255, 0, 0)',
+    });
+
+    const scopedP = await $('scoped-basic p');
+    await expect(scopedP).toHaveElementClass(expect.stringContaining('sc-scoped-basic'));
+    await expect(scopedP).toHaveElementClass(expect.stringContaining('sc-scoped-basic-s'));
+
+    const scopedSlot = await scopedP.$('span');
+    await expect(scopedSlot).toHaveElementClass(expect.stringContaining('sc-scoped-basic-root-md'));
+    await expect(scopedSlot).toHaveText('light');
+
+    await expect(scopedSlot).toHaveStyle({
+      color: browser.isChromium ? 'rgba(255,255,0,1)' : 'rgb(255, 255, 0)',
+    });
+  });
+});

test/wdio/stencil.config.ts

@@ -13,6 +13,7 @@ export const config: Config = {
   plugins: [sass()],
   buildDist: true,
   globalStyle: './style-plugin/global-sass-entry.scss',
+  globalScript: './global.ts',
   extras: {
     lifecycleDOMEvents: true,
     scriptDataOpts: true,