diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts index 38229e990be..9d3d55a69a5 100644 --- a/test/karma/test-app/components.d.ts +++ b/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; "child-with-reflection": LocalJSX.ChildWithReflection & JSXBase.HTMLAttributes; - "cmp-label": LocalJSX.CmpLabel & JSXBase.HTMLAttributes; "custom-element-child": LocalJSX.CustomElementChild & JSXBase.HTMLAttributes; "custom-element-child-different-name-than-class": LocalJSX.CustomElementChildDifferentNameThanClass & JSXBase.HTMLAttributes; "custom-element-nested-child": LocalJSX.CustomElementNestedChild & JSXBase.HTMLAttributes; diff --git a/test/karma/test-app/scoped-slot-text/index.html b/test/karma/test-app/scoped-slot-text/index.html deleted file mode 100644 index 6dad1711a7a..00000000000 --- a/test/karma/test-app/scoped-slot-text/index.html +++ /dev/null @@ -1,6 +0,0 @@ - - - - - -This text should go in a slot diff --git a/test/karma/test-app/scoped-slot-text/karma.spec.ts b/test/wdio/scoped-slot-text/cmp.test.tsx similarity index 54% rename from test/karma/test-app/scoped-slot-text/karma.spec.ts rename to test/wdio/scoped-slot-text/cmp.test.tsx index 220935bbaa7..a5d1416a687 100644 --- a/test/karma/test-app/scoped-slot-text/karma.spec.ts +++ b/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: () => This text should go in a slot, + }); }); - 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 { 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'); }); diff --git a/test/karma/test-app/scoped-slot-text/cmp.tsx b/test/wdio/scoped-slot-text/cmp.tsx similarity index 78% rename from test/karma/test-app/scoped-slot-text/cmp.tsx rename to test/wdio/scoped-slot-text/cmp.tsx index 92d736f9856..7f77b28be87 100644 --- a/test/karma/test-app/scoped-slot-text/cmp.tsx +++ b/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',