chore(wdio): port scoped-conditional test suite to wdio

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

@@ -84,9 +84,6 @@ export namespace Components {
     }
     interface ReparentStyleWithVars {
     }
-    interface ScopedConditional {
-        "renderHello": boolean;
-    }
     interface ScopedSlotAppendAndPrepend {
     }
     interface ScopedSlotChildInsertAdjacent {
@@ -461,12 +458,6 @@ declare global {
         prototype: HTMLReparentStyleWithVarsElement;
         new (): HTMLReparentStyleWithVarsElement;
     };
-    interface HTMLScopedConditionalElement extends Components.ScopedConditional, HTMLStencilElement {
-    }
-    var HTMLScopedConditionalElement: {
-        prototype: HTMLScopedConditionalElement;
-        new (): HTMLScopedConditionalElement;
-    };
     interface HTMLScopedSlotAppendAndPrependElement extends Components.ScopedSlotAppendAndPrepend, HTMLStencilElement {
     }
     var HTMLScopedSlotAppendAndPrependElement: {
@@ -901,7 +892,6 @@ declare global {
         "remove-child-patch": HTMLRemoveChildPatchElement;
         "reparent-style-no-vars": HTMLReparentStyleNoVarsElement;
         "reparent-style-with-vars": HTMLReparentStyleWithVarsElement;
-        "scoped-conditional": HTMLScopedConditionalElement;
         "scoped-slot-append-and-prepend": HTMLScopedSlotAppendAndPrependElement;
         "scoped-slot-child-insert-adjacent": HTMLScopedSlotChildInsertAdjacentElement;
         "shadow-dom-array": HTMLShadowDomArrayElement;
@@ -1050,9 +1040,6 @@ declare namespace LocalJSX {
     }
     interface ReparentStyleWithVars {
     }
-    interface ScopedConditional {
-        "renderHello"?: boolean;
-    }
     interface ScopedSlotAppendAndPrepend {
     }
     interface ScopedSlotChildInsertAdjacent {
@@ -1241,7 +1228,6 @@ declare namespace LocalJSX {
         "remove-child-patch": RemoveChildPatch;
         "reparent-style-no-vars": ReparentStyleNoVars;
         "reparent-style-with-vars": ReparentStyleWithVars;
-        "scoped-conditional": ScopedConditional;
         "scoped-slot-append-and-prepend": ScopedSlotAppendAndPrepend;
         "scoped-slot-child-insert-adjacent": ScopedSlotChildInsertAdjacent;
         "shadow-dom-array": ShadowDomArray;
@@ -1346,7 +1332,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-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>;
             "shadow-dom-array": LocalJSX.ShadowDomArray & JSXBase.HTMLAttributes<HTMLShadowDomArrayElement>;

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

@@ -0,0 +1,68 @@
+import { Fragment, h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
+
+describe('scoped-conditional', () => {
+  beforeEach(() => {
+    function toggleHelloMessage() {
+      const scopedConditional = document.querySelector('scoped-conditional');
+      scopedConditional.renderHello = !scopedConditional.renderHello;
+    }
+
+    render({
+      template: () => (
+        <>
+          <button id="toggleHello">Toggle Hello Message</button>
+          <scoped-conditional>
+            <div>This div will be slotted in</div>
+          </scoped-conditional>
+        </>
+      ),
+    });
+
+    const button: HTMLButtonElement = document.querySelector('#toggleHello');
+    button.onclick = toggleHelloMessage;
+  });
+
+  it('renders the initial slotted content', async () => {
+    await $('scoped-conditional').waitForStable();
+    await expect($('scoped-conditional div')).toHaveText(
+      `before slot->
+This div will be slotted in
+<-after slot`,
+    );
+  });
+
+  it('renders the slotted content after toggling the message', async () => {
+    // toggle the 'Hello' message, which should insert a new <div/> into the DOM & _not_ remove the slotted content
+    await $('#toggleHello').click();
+    await $('scoped-conditional').waitForStable();
+    const hostDiv = await $('scoped-conditional div');
+    const outerDivChildren = (await browser.execute((el) => el.children, hostDiv)).map((elementReference) =>
+      $(elementReference),
+    );
+
+    expect(outerDivChildren).toBeElementsArrayOfSize(2);
+
+    await expect(outerDivChildren[0]).toHaveText('Hello');
+    await expect(outerDivChildren[1]).toHaveText(
+      `before slot->
+This div will be slotted in
+<-after slot`,
+    );
+  });
+
+  it('renders the slotted content after toggling the twice message', async () => {
+    // toggle the 'Hello' message twice, which should insert a new <div/> into the DOM, then remove it.
+    // as a result of the toggle, we should _not_ remove the slotted content
+    await $('#toggleHello').click();
+    await $('#toggleHello').click();
+
+    await $('scoped-conditional').waitForStable();
+
+    await expect($('scoped-conditional div')).toHaveText(
+      `before slot->
+This div will be slotted in
+<-after slot`,
+    );
+  });
+});