chore(test): migrate scoped-slot-text-with-sibling (#5523)

* chore(test): migrate scoped-slot-text-with-sibling * rename test file * migrate tests * fix eslint
stenciljs · Mar 20, 2024 · f8584c4 · f8584c4
1 parent 1805ba8
commit f8584c4
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 45 deletions.
diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts
@@ -16,8 +16,6 @@ export namespace Components {
     }
     interface CmpLabel {
     }
-    interface CmpLabelWithSlotSibling {
-    }
     interface CustomElementChild {
     }
     interface CustomElementChildDifferentNameThanClass {
@@ -258,12 +256,6 @@ declare global {
         prototype: HTMLCmpLabelElement;
         new (): HTMLCmpLabelElement;
     };
-    interface HTMLCmpLabelWithSlotSiblingElement extends Components.CmpLabelWithSlotSibling, HTMLStencilElement {
-    }
-    var HTMLCmpLabelWithSlotSiblingElement: {
-        prototype: HTMLCmpLabelWithSlotSiblingElement;
-        new (): HTMLCmpLabelWithSlotSiblingElement;
-    };
     interface HTMLCustomElementChildElement extends Components.CustomElementChild, HTMLStencilElement {
     }
     var HTMLCustomElementChildElement: {
@@ -808,7 +800,6 @@ declare global {
         "child-reflect-nan-attribute": HTMLChildReflectNanAttributeElement;
         "child-with-reflection": HTMLChildWithReflectionElement;
         "cmp-label": HTMLCmpLabelElement;
-        "cmp-label-with-slot-sibling": HTMLCmpLabelWithSlotSiblingElement;
         "custom-element-child": HTMLCustomElementChildElement;
         "custom-element-child-different-name-than-class": HTMLCustomElementChildDifferentNameThanClassElement;
         "custom-element-nested-child": HTMLCustomElementNestedChildElement;
@@ -910,8 +901,6 @@ declare namespace LocalJSX {
     }
     interface CmpLabel {
     }
-    interface CmpLabelWithSlotSibling {
-    }
     interface CustomElementChild {
     }
     interface CustomElementChildDifferentNameThanClass {
@@ -1127,7 +1116,6 @@ declare namespace LocalJSX {
         "child-reflect-nan-attribute": ChildReflectNanAttribute;
         "child-with-reflection": ChildWithReflection;
         "cmp-label": CmpLabel;
-        "cmp-label-with-slot-sibling": CmpLabelWithSlotSibling;
         "custom-element-child": CustomElementChild;
         "custom-element-child-different-name-than-class": CustomElementChildDifferentNameThanClass;
         "custom-element-nested-child": CustomElementNestedChild;
@@ -1226,7 +1214,6 @@ declare module "@stencil/core" {
             "child-reflect-nan-attribute": LocalJSX.ChildReflectNanAttribute & JSXBase.HTMLAttributes<HTMLChildReflectNanAttributeElement>;
             "child-with-reflection": LocalJSX.ChildWithReflection & JSXBase.HTMLAttributes<HTMLChildWithReflectionElement>;
             "cmp-label": LocalJSX.CmpLabel & JSXBase.HTMLAttributes<HTMLCmpLabelElement>;
-            "cmp-label-with-slot-sibling": LocalJSX.CmpLabelWithSlotSibling & JSXBase.HTMLAttributes<HTMLCmpLabelWithSlotSiblingElement>;
             "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>;

diff --git a/test/karma/test-app/scoped-slot-text-with-sibling/index.html b/test/karma/test-app/scoped-slot-text-with-sibling/index.html
diff --git a/...oped-slot-text-with-sibling/karma.spec.ts → ...coped-slot-text-with-sibling/cmp.test.tsx b/...oped-slot-text-with-sibling/karma.spec.ts → ...coped-slot-text-with-sibling/cmp.test.tsx
@@ -1,52 +1,45 @@
-import { setupDomTests } from '../util';
+import { h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
 
 describe('scoped-slot-text-with-sibling', () => {
-  const { setupDom, tearDownDom } = setupDomTests(document);
-  let app: HTMLElement | undefined;
-
   beforeEach(async () => {
-    app = await setupDom('/scoped-slot-text-with-sibling/index.html');
+    render({
+      template: () => <cmp-label-with-slot-sibling>This text should go in a slot</cmp-label-with-slot-sibling>,
+    });
   });
 
-  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-with-slot-sibling';
-    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("doesn't override all children when assigning textContent", () => {
-    const cmpLabel: HTMLCmpLabelElement = getCmpLabel();
-
+  it("doesn't override all children when assigning textContent", async () => {
+    const cmpLabel: HTMLCmpLabelElement = await getCmpLabel();
     cmpLabel.textContent = "New text that we want to go in a slot, but don't care about for this test";
-
-    const divElement: HTMLDivElement = cmpLabel.querySelector('div');
-    expect(divElement?.textContent).toBe('Non-slotted text');
+    const divElement = $(cmpLabel).$('div');
+    await expect(divElement).toHaveText('Non-slotted text');
   });
 
-  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');
 
     /**
@@ -56,7 +49,7 @@ describe('scoped-slot-text-with-sibling', () => {
      * - the non-slotted text
      */
     expect(label).toBeDefined();
-    expect(label.childNodes.length).toBe(3);
+    await browser.waitUntil(() => label.childNodes.length === 3);
     expect((label.childNodes[0] as any)['s-cr'] as string).toBeDefined();
     expect(label.childNodes[1].textContent).toBe('New text for label structure testing');
     expect(label.childNodes[2].textContent).toBe('Non-slotted text');

diff --git a/...app/scoped-slot-text-with-sibling/cmp.tsx → ...dio/scoped-slot-text-with-sibling/cmp.tsx b/...app/scoped-slot-text-with-sibling/cmp.tsx → ...dio/scoped-slot-text-with-sibling/cmp.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, h } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 
 @Component({
   tag: 'cmp-label-with-slot-sibling',