chore(test): migrate scoped-slot-text (#5522)

This patch includes changes in `test/karma/test-app/scoped-slot-text-with-sibling/karma.spec.ts` where I had to update types created through the component we migrated to WebdriverIO.

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

@@ -11,8 +11,6 @@ export namespace Components {
     interface ChildWithReflection {
         "val": number | any;
     }
-    interface CmpLabel {
-    }
     interface CustomElementChild {
     }
     interface CustomElementChildDifferentNameThanClass {
@@ -219,12 +217,6 @@ declare global {
         prototype: HTMLChildWithReflectionElement;
         new (): HTMLChildWithReflectionElement;
     };
-    interface HTMLCmpLabelElement extends Components.CmpLabel, HTMLStencilElement {
-    }
-    var HTMLCmpLabelElement: {
-        prototype: HTMLCmpLabelElement;
-        new (): HTMLCmpLabelElement;
-    };
     interface HTMLCustomElementChildElement extends Components.CustomElementChild, HTMLStencilElement {
     }
     var HTMLCustomElementChildElement: {
@@ -707,7 +699,6 @@ declare global {
     interface HTMLElementTagNameMap {
         "bad-shared-jsx": HTMLBadSharedJsxElement;
         "child-with-reflection": HTMLChildWithReflectionElement;
-        "cmp-label": HTMLCmpLabelElement;
         "custom-element-child": HTMLCustomElementChildElement;
         "custom-element-child-different-name-than-class": HTMLCustomElementChildDifferentNameThanClassElement;
         "custom-element-nested-child": HTMLCustomElementNestedChildElement;
@@ -794,8 +785,6 @@ declare namespace LocalJSX {
     interface ChildWithReflection {
         "val"?: number | any;
     }
-    interface CmpLabel {
-    }
     interface CustomElementChild {
     }
     interface CustomElementChildDifferentNameThanClass {
@@ -987,7 +976,6 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "bad-shared-jsx": BadSharedJsx;
         "child-with-reflection": ChildWithReflection;
-        "cmp-label": CmpLabel;
         "custom-element-child": CustomElementChild;
         "custom-element-child-different-name-than-class": CustomElementChildDifferentNameThanClass;
         "custom-element-nested-child": CustomElementNestedChild;
@@ -1074,7 +1062,6 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "bad-shared-jsx": LocalJSX.BadSharedJsx & JSXBase.HTMLAttributes<HTMLBadSharedJsxElement>;
             "child-with-reflection": LocalJSX.ChildWithReflection & JSXBase.HTMLAttributes<HTMLChildWithReflectionElement>;
-            "cmp-label": LocalJSX.CmpLabel & JSXBase.HTMLAttributes<HTMLCmpLabelElement>;
             "custom-element-child": LocalJSX.CustomElementChild & JSXBase.HTMLAttributes<HTMLCustomElementChildElement>;
             "custom-element-child-different-name-than-class": LocalJSX.CustomElementChildDifferentNameThanClass & JSXBase.HTMLAttributes<HTMLCustomElementChildDifferentNameThanClassElement>;
             "custom-element-nested-child": LocalJSX.CustomElementNestedChild & JSXBase.HTMLAttributes<HTMLCustomElementNestedChildElement>;

test/karma/test-app/scoped-slot-text/karma.spec.ts → test/wdio/scoped-slot-text/cmp.test.tsx

@@ -1,43 +1,38 @@
-import { setupDomTests } from '../util';
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
 
 describe('scoped-slot-text', () => {
-  const { setupDom, tearDownDom } = setupDomTests(document);
-  let app: HTMLElement | undefined;
-
   beforeEach(async () => {
-    app = await setupDom('/scoped-slot-text/index.html');
+    render({
+      template: () => <cmp-label>This text should go in a slot</cmp-label>,
+    });
   });
 
-  afterEach(tearDownDom);
-
   /**
    * Helper function to retrieve custom element used by this test suite. If the element cannot be found, the test that
    * invoked this function shall fail.
    * @returns the custom element
    */
-  function getCmpLabel(): HTMLCmpLabelElement {
+  async function getCmpLabel(): Promise<HTMLCmpLabelElement> {
     const customElementSelector = 'cmp-label';
-    const cmpLabel: HTMLCmpLabelElement = app.querySelector(customElementSelector);
+    const cmpLabel: HTMLCmpLabelElement = document.querySelector(customElementSelector);
+    await $(customElementSelector).waitForExist();
     if (!cmpLabel) {
-      fail(`Unable to find element using query selector '${customElementSelector}'`);
+      throw new Error(`Unable to find element using query selector '${customElementSelector}'`);
     }
 
     return cmpLabel;
   }
 
-  it('sets the textContent in the slot location', () => {
-    const cmpLabel: HTMLCmpLabelElement = getCmpLabel();
-
+  it('sets the textContent in the slot location', async () => {
+    const cmpLabel: HTMLCmpLabelElement = await getCmpLabel();
     cmpLabel.textContent = 'New text to go in the slot';
-
     expect(cmpLabel.textContent.trim()).toBe('New text to go in the slot');
   });
 
-  it('leaves the structure of the label intact', () => {
-    const cmpLabel: HTMLCmpLabelElement = getCmpLabel();
-
+  it('leaves the structure of the label intact', async () => {
+    const cmpLabel: HTMLCmpLabelElement = await getCmpLabel();
     cmpLabel.textContent = 'New text for label structure testing';
-
     const label: HTMLLabelElement = cmpLabel.querySelector('label');
 
     /**
@@ -46,7 +41,7 @@ describe('scoped-slot-text', () => {
      * - the slotted text node
      */
     expect(label).toBeDefined();
-    expect(label.childNodes.length).toBe(2);
+    await browser.waitUntil(async () => label.childNodes.length === 2);
     expect((label.childNodes[0] as any)['s-cr'] as string).toBeDefined();
     expect(label.childNodes[1].textContent).toBe('New text for label structure testing');
   });

test/karma/test-app/scoped-slot-text/cmp.tsx → test/wdio/scoped-slot-text/cmp.tsx

@@ -1,4 +1,4 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 
 @Component({
   tag: 'cmp-label',