chore(test): migrate reflect-to-attr (#5535)

* chore(test): migrate reflect-to-attr * rename test file * migrate tests
ionic-team · Mar 20, 2024 · 061eb29 · 061eb29
1 parent aa98808
commit 061eb29
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 61 deletions.
diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts
@@ -41,17 +41,6 @@ export namespace Components {
     }
     interface ParentWithReflectChild {
     }
-    interface ReflectToAttr {
-        "bool": boolean;
-        "disabled": boolean;
-        "dynamicNu"?: number;
-        "dynamicStr"?: string;
-        "nu": number;
-        "null": string | null;
-        "otherBool": boolean;
-        "str": string;
-        "undef"?: string;
-    }
     interface ReparentStyleNoVars {
     }
     interface ReparentStyleWithVars {
@@ -312,12 +301,6 @@ declare global {
         prototype: HTMLParentWithReflectChildElement;
         new (): HTMLParentWithReflectChildElement;
     };
-    interface HTMLReflectToAttrElement extends Components.ReflectToAttr, HTMLStencilElement {
-    }
-    var HTMLReflectToAttrElement: {
-        prototype: HTMLReflectToAttrElement;
-        new (): HTMLReflectToAttrElement;
-    };
     interface HTMLReparentStyleNoVarsElement extends Components.ReparentStyleNoVars, HTMLStencilElement {
     }
     var HTMLReparentStyleNoVarsElement: {
@@ -713,7 +696,6 @@ declare global {
         "lifecycle-unload-b": HTMLLifecycleUnloadBElement;
         "lifecycle-unload-root": HTMLLifecycleUnloadRootElement;
         "parent-with-reflect-child": HTMLParentWithReflectChildElement;
-        "reflect-to-attr": HTMLReflectToAttrElement;
         "reparent-style-no-vars": HTMLReparentStyleNoVarsElement;
         "reparent-style-with-vars": HTMLReparentStyleWithVarsElement;
         "scoped-slot-child-insert-adjacent": HTMLScopedSlotChildInsertAdjacentElement;
@@ -815,17 +797,6 @@ declare namespace LocalJSX {
     }
     interface ParentWithReflectChild {
     }
-    interface ReflectToAttr {
-        "bool"?: boolean;
-        "disabled"?: boolean;
-        "dynamicNu"?: number;
-        "dynamicStr"?: string;
-        "nu"?: number;
-        "null"?: string | null;
-        "otherBool"?: boolean;
-        "str"?: string;
-        "undef"?: string;
-    }
     interface ReparentStyleNoVars {
     }
     interface ReparentStyleWithVars {
@@ -990,7 +961,6 @@ declare namespace LocalJSX {
         "lifecycle-unload-b": LifecycleUnloadB;
         "lifecycle-unload-root": LifecycleUnloadRoot;
         "parent-with-reflect-child": ParentWithReflectChild;
-        "reflect-to-attr": ReflectToAttr;
         "reparent-style-no-vars": ReparentStyleNoVars;
         "reparent-style-with-vars": ReparentStyleWithVars;
         "scoped-slot-child-insert-adjacent": ScopedSlotChildInsertAdjacent;
@@ -1076,7 +1046,6 @@ declare module "@stencil/core" {
             "lifecycle-unload-b": LocalJSX.LifecycleUnloadB & JSXBase.HTMLAttributes<HTMLLifecycleUnloadBElement>;
             "lifecycle-unload-root": LocalJSX.LifecycleUnloadRoot & JSXBase.HTMLAttributes<HTMLLifecycleUnloadRootElement>;
             "parent-with-reflect-child": LocalJSX.ParentWithReflectChild & JSXBase.HTMLAttributes<HTMLParentWithReflectChildElement>;
-            "reflect-to-attr": LocalJSX.ReflectToAttr & JSXBase.HTMLAttributes<HTMLReflectToAttrElement>;
             "reparent-style-no-vars": LocalJSX.ReparentStyleNoVars & JSXBase.HTMLAttributes<HTMLReparentStyleNoVarsElement>;
             "reparent-style-with-vars": LocalJSX.ReparentStyleWithVars & JSXBase.HTMLAttributes<HTMLReparentStyleWithVarsElement>;
             "scoped-slot-child-insert-adjacent": LocalJSX.ScopedSlotChildInsertAdjacent & JSXBase.HTMLAttributes<HTMLScopedSlotChildInsertAdjacentElement>;

diff --git a/test/karma/test-app/reflect-to-attr/index.html b/test/karma/test-app/reflect-to-attr/index.html
diff --git a/...ma/test-app/reflect-to-attr/karma.spec.ts → test/wdio/reflect-to-attr/cmp.test.tsx b/...ma/test-app/reflect-to-attr/karma.spec.ts → test/wdio/reflect-to-attr/cmp.test.tsx
@@ -1,16 +1,28 @@
-import { setupDomTests, waitForChanges } from '../util';
+import { Fragment, h } from '@stencil/core';
+import { render } from '@wdio/browser-runner/stencil';
 
 describe('reflect-to-attr', function () {
-  const { setupDom, tearDownDom } = setupDomTests(document);
-  let app: HTMLElement;
-
   beforeEach(async () => {
-    app = await setupDom('/reflect-to-attr/index.html');
+    function toggleDisabled() {
+      const item = document.querySelector('reflect-to-attr');
+      item.disabled = !item.disabled;
+    }
+
+    render({
+      template: () => (
+        <>
+          <reflect-to-attr></reflect-to-attr>
+          <button id="toggle" onClick={toggleDisabled}>
+            Toggle disabled
+          </button>
+        </>
+      ),
+    });
   });
-  afterEach(tearDownDom);
 
   it('should have proper attributes', async () => {
-    const cmp = app.querySelector('reflect-to-attr') as any;
+    await $('reflect-to-attr').waitForExist();
+    const cmp = document.querySelector('reflect-to-attr');
 
     expect(cmp.getAttribute('str')).toEqual('single');
     expect(cmp.getAttribute('nu')).toEqual('2');
@@ -26,7 +38,7 @@ describe('reflect-to-attr', function () {
     cmp.bool = true;
     cmp.otherBool = false;
 
-    await waitForChanges();
+    await browser.pause();
 
     expect(cmp.getAttribute('str')).toEqual('second');
     expect(cmp.getAttribute('nu')).toEqual('-12.2');
@@ -40,16 +52,18 @@ describe('reflect-to-attr', function () {
   });
 
   it('should reflect booleans property', async () => {
-    const cmp = app.querySelector('reflect-to-attr') as any;
+    await $('reflect-to-attr').waitForExist();
+    const cmp = document.querySelector('reflect-to-attr');
     expect(cmp.disabled).toBe(false);
 
-    const toggle = app.querySelector('#toggle') as any;
-    toggle.click();
-    await waitForChanges();
+    const toggle = $('#toggle');
+    await toggle.click();
+
+    await browser.waitUntil(async () => cmp.disabled);
     expect(cmp.disabled).toBe(true);
 
-    toggle.click();
-    await waitForChanges();
+    await toggle.click();
+    await browser.waitUntil(async () => !cmp.disabled);
     expect(cmp.disabled).toBe(false);
   });
 });
diff --git a/test/karma/test-app/reflect-to-attr/cmp.tsx → test/wdio/reflect-to-attr/cmp.tsx b/test/karma/test-app/reflect-to-attr/cmp.tsx → test/wdio/reflect-to-attr/cmp.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, Element } from '@stencil/core';
+import { Component, Element, Prop } from '@stencil/core';
 
 @Component({
   tag: 'reflect-to-attr',