From 061eb296cf237ef229a8c70e8af3a4fb96950d04 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Wed, 20 Mar 2024 11:14:40 -0700 Subject: [PATCH] chore(test): migrate reflect-to-attr (#5535) * chore(test): migrate reflect-to-attr * rename test file * migrate tests --- test/karma/test-app/components.d.ts | 31 -------------- .../karma/test-app/reflect-to-attr/index.html | 15 ------- .../reflect-to-attr/cmp.test.tsx} | 42 ++++++++++++------- .../test-app => wdio}/reflect-to-attr/cmp.tsx | 2 +- 4 files changed, 29 insertions(+), 61 deletions(-) delete mode 100644 test/karma/test-app/reflect-to-attr/index.html rename test/{karma/test-app/reflect-to-attr/karma.spec.ts => wdio/reflect-to-attr/cmp.test.tsx} (57%) rename test/{karma/test-app => wdio}/reflect-to-attr/cmp.tsx (91%) diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts index 9d3d55a69a5..4bb8a43d8d4 100644 --- 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; "lifecycle-unload-root": LocalJSX.LifecycleUnloadRoot & JSXBase.HTMLAttributes; "parent-with-reflect-child": LocalJSX.ParentWithReflectChild & JSXBase.HTMLAttributes; - "reflect-to-attr": LocalJSX.ReflectToAttr & JSXBase.HTMLAttributes; "reparent-style-no-vars": LocalJSX.ReparentStyleNoVars & JSXBase.HTMLAttributes; "reparent-style-with-vars": LocalJSX.ReparentStyleWithVars & JSXBase.HTMLAttributes; "scoped-slot-child-insert-adjacent": LocalJSX.ScopedSlotChildInsertAdjacent & JSXBase.HTMLAttributes; diff --git a/test/karma/test-app/reflect-to-attr/index.html b/test/karma/test-app/reflect-to-attr/index.html deleted file mode 100644 index b92adc7cba7..00000000000 --- a/test/karma/test-app/reflect-to-attr/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - diff --git a/test/karma/test-app/reflect-to-attr/karma.spec.ts b/test/wdio/reflect-to-attr/cmp.test.tsx similarity index 57% rename from test/karma/test-app/reflect-to-attr/karma.spec.ts rename to test/wdio/reflect-to-attr/cmp.test.tsx index 4087c1535cd..ecd2729028b 100644 --- a/test/karma/test-app/reflect-to-attr/karma.spec.ts +++ b/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: () => ( + <> + + + + ), + }); }); - 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 b/test/wdio/reflect-to-attr/cmp.tsx similarity index 91% rename from test/karma/test-app/reflect-to-attr/cmp.tsx rename to test/wdio/reflect-to-attr/cmp.tsx index 96c86f5141d..946d3c409ba 100644 --- a/test/karma/test-app/reflect-to-attr/cmp.tsx +++ b/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',