From 32e871aa61a54ab14e40f94106c9d37fa7e62d49 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Wed, 20 Mar 2024 11:26:02 -0700 Subject: [PATCH] chore(test): migrate scoped-slot-child-insert-adjacent (#5520) * chore(test): migrate scoped-slot-child-insert-adjacent * rename test file * migrate tests * prettier * remove obsolete var --- test/karma/test-app/components.d.ts | 13 -- .../index.html | 69 --------- .../cmp.test.tsx} | 136 +++++++++++++----- .../scoped-slot-child-insert-adjacent/cmp.tsx | 0 4 files changed, 102 insertions(+), 116 deletions(-) delete mode 100644 test/karma/test-app/scoped-slot-child-insert-adjacent/index.html rename test/{karma/test-app/scoped-slot-child-insert-adjacent/karma.spec.ts => wdio/scoped-slot-child-insert-adjacent/cmp.test.tsx} (50%) rename test/{karma/test-app => wdio}/scoped-slot-child-insert-adjacent/cmp.tsx (100%) diff --git a/test/karma/test-app/components.d.ts b/test/karma/test-app/components.d.ts index 4bb8a43d8d4..b6bea8d8537 100644 --- a/test/karma/test-app/components.d.ts +++ b/test/karma/test-app/components.d.ts @@ -45,8 +45,6 @@ export namespace Components { } interface ReparentStyleWithVars { } - interface ScopedSlotChildInsertAdjacent { - } interface ShadowDomMode { /** * The mode determines which platform styles to use. @@ -313,12 +311,6 @@ declare global { prototype: HTMLReparentStyleWithVarsElement; new (): HTMLReparentStyleWithVarsElement; }; - interface HTMLScopedSlotChildInsertAdjacentElement extends Components.ScopedSlotChildInsertAdjacent, HTMLStencilElement { - } - var HTMLScopedSlotChildInsertAdjacentElement: { - prototype: HTMLScopedSlotChildInsertAdjacentElement; - new (): HTMLScopedSlotChildInsertAdjacentElement; - }; interface HTMLShadowDomModeElement extends Components.ShadowDomMode, HTMLStencilElement { } var HTMLShadowDomModeElement: { @@ -698,7 +690,6 @@ declare global { "parent-with-reflect-child": HTMLParentWithReflectChildElement; "reparent-style-no-vars": HTMLReparentStyleNoVarsElement; "reparent-style-with-vars": HTMLReparentStyleWithVarsElement; - "scoped-slot-child-insert-adjacent": HTMLScopedSlotChildInsertAdjacentElement; "shadow-dom-mode": HTMLShadowDomModeElement; "shadow-dom-mode-root": HTMLShadowDomModeRootElement; "shadow-dom-slot-nested": HTMLShadowDomSlotNestedElement; @@ -801,8 +792,6 @@ declare namespace LocalJSX { } interface ReparentStyleWithVars { } - interface ScopedSlotChildInsertAdjacent { - } interface ShadowDomMode { /** * The mode determines which platform styles to use. @@ -963,7 +952,6 @@ declare namespace LocalJSX { "parent-with-reflect-child": ParentWithReflectChild; "reparent-style-no-vars": ReparentStyleNoVars; "reparent-style-with-vars": ReparentStyleWithVars; - "scoped-slot-child-insert-adjacent": ScopedSlotChildInsertAdjacent; "shadow-dom-mode": ShadowDomMode; "shadow-dom-mode-root": ShadowDomModeRoot; "shadow-dom-slot-nested": ShadowDomSlotNested; @@ -1048,7 +1036,6 @@ declare module "@stencil/core" { "parent-with-reflect-child": LocalJSX.ParentWithReflectChild & 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; "shadow-dom-mode": LocalJSX.ShadowDomMode & JSXBase.HTMLAttributes; "shadow-dom-mode-root": LocalJSX.ShadowDomModeRoot & JSXBase.HTMLAttributes; "shadow-dom-slot-nested": LocalJSX.ShadowDomSlotNested & JSXBase.HTMLAttributes; diff --git a/test/karma/test-app/scoped-slot-child-insert-adjacent/index.html b/test/karma/test-app/scoped-slot-child-insert-adjacent/index.html deleted file mode 100644 index 17d77027b78..00000000000 --- a/test/karma/test-app/scoped-slot-child-insert-adjacent/index.html +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - -

I am slotted and will receive a red background

- - - - - - - - - - - - diff --git a/test/karma/test-app/scoped-slot-child-insert-adjacent/karma.spec.ts b/test/wdio/scoped-slot-child-insert-adjacent/cmp.test.tsx similarity index 50% rename from test/karma/test-app/scoped-slot-child-insert-adjacent/karma.spec.ts rename to test/wdio/scoped-slot-child-insert-adjacent/cmp.test.tsx index 0668d6b0ac8..4a63f76ec4c 100644 --- a/test/karma/test-app/scoped-slot-child-insert-adjacent/karma.spec.ts +++ b/test/wdio/scoped-slot-child-insert-adjacent/cmp.test.tsx @@ -1,20 +1,98 @@ -import { setupDomTests, waitForChanges } from '../util'; +import { Fragment, h } from '@stencil/core'; +import { render } from '@wdio/browser-runner/stencil'; describe('scoped-slot-child-insert-adjacent', () => { - const { setupDom, tearDownDom } = setupDomTests(document); - - let app: HTMLElement | undefined; let host: HTMLElement | undefined; let parentDiv: HTMLDivElement | undefined; beforeEach(async () => { - app = await setupDom('/scoped-slot-child-insert-adjacent/index.html'); - host = app.querySelector('scoped-slot-child-insert-adjacent'); + render({ + template: () => ( + <> + +

I am slotted and will receive a red background

+ + + + + + + + + + + + ), + }); + + await $('scoped-slot-child-insert-adjacent').waitForExist(); + const scopedSlotChildInsertAdjacent = document.querySelector('scoped-slot-child-insert-adjacent'); + + // Event listeners for `insertAdjacentHtml` + await $('#addInsertAdjacentHtmlBeforeEnd').waitForExist(); + const addInsertAdjacentHtmlBeforeEnd = document.querySelector('#addInsertAdjacentHtmlBeforeEnd'); + addInsertAdjacentHtmlBeforeEnd.addEventListener('click', () => { + scopedSlotChildInsertAdjacent.insertAdjacentHTML( + 'beforeend', + `

Added via insertAdjacentHTMLBeforeEnd. I should have a red background.

`, + ); + }); + const addInsertAdjacentHtmlAfterBegin = document.querySelector('#addInsertAdjacentHtmlAfterBegin'); + addInsertAdjacentHtmlAfterBegin.addEventListener('click', () => { + scopedSlotChildInsertAdjacent.insertAdjacentHTML( + 'afterbegin', + `

Added via insertAdjacentHTMLAfterBegin. I should have a red background.

`, + ); + }); + + // Event listeners for `insertAdjacentText` + const addInsertAdjacentTextBeforeEnd = document.querySelector('#addInsertAdjacentTextBeforeEnd'); + addInsertAdjacentTextBeforeEnd.addEventListener('click', () => { + scopedSlotChildInsertAdjacent.insertAdjacentText( + 'beforeend', + `Added via insertAdjacentTextBeforeEnd. I should have a red background.`, + ); + }); + const addInsertAdjacentTextAfterBegin = document.querySelector('#addInsertAdjacentTextAfterBegin'); + addInsertAdjacentTextAfterBegin.addEventListener('click', () => { + scopedSlotChildInsertAdjacent.insertAdjacentText( + 'afterbegin', + `Added via insertAdjacentTextAfterBegin. I should have a red background.`, + ); + }); + + // Event listeners for `insertAdjacentElement` + const addInsertAdjacentElementBeforeEnd = document.querySelector('#addInsertAdjacentElementBeforeEnd'); + addInsertAdjacentElementBeforeEnd.addEventListener('click', () => { + const el = document.createElement('span'); + el.textContent = 'Added via insertAdjacentElementBeforeEnd. I should have a red background.'; + + scopedSlotChildInsertAdjacent.insertAdjacentElement('beforeend', el); + }); + const addInsertAdjacentElementAfterBegin = document.querySelector('#addInsertAdjacentElementAfterBegin'); + addInsertAdjacentElementAfterBegin.addEventListener('click', () => { + const el = document.createElement('span'); + el.textContent = 'Added via insertAdjacentElementAfterBegin. I should have a red background.'; + + scopedSlotChildInsertAdjacent.insertAdjacentElement('afterbegin', el); + }); + + host = document.querySelector('scoped-slot-child-insert-adjacent'); parentDiv = host.querySelector('#parentDiv'); }); - afterEach(tearDownDom); - describe('insertAdjacentHtml', () => { it('slots elements w/ "beforeend" position', async () => { expect(parentDiv).toBeDefined(); @@ -27,9 +105,8 @@ describe('scoped-slot-child-insert-adjacent', () => { expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); // insert an additional

elm - const addButton = app.querySelector('#addInsertAdjacentHtmlBeforeEnd'); - addButton.click(); - await waitForChanges(); + const addButton = $('#addInsertAdjacentHtmlBeforeEnd'); + await addButton.click(); // now we should have 2

elms paragraphElms = host.querySelectorAll('p'); @@ -57,9 +134,8 @@ describe('scoped-slot-child-insert-adjacent', () => { expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); // insert an additional

elm - const addButton = app.querySelector('#addInsertAdjacentHtmlAfterBegin'); - addButton.click(); - await waitForChanges(); + const addButton = $('#addInsertAdjacentHtmlAfterBegin'); + await addButton.click(); // now we should have 2

elms paragraphElms = host.querySelectorAll('p'); @@ -81,18 +157,15 @@ describe('scoped-slot-child-insert-adjacent', () => { it('slots elements w/ "beforeend" position', async () => { expect(parentDiv).toBeDefined(); - expect(parentDiv.textContent).toBe( - 'Here is my slot. It is red.\n I am slotted and will receive a red background\n', - ); + expect(parentDiv.textContent).toBe('Here is my slot. It is red.I am slotted and will receive a red background'); expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); // insert an additional text node - const addButton = app.querySelector('#addInsertAdjacentTextBeforeEnd'); - addButton.click(); - await waitForChanges(); + const addButton = $('#addInsertAdjacentTextBeforeEnd'); + await addButton.click(); expect(parentDiv.textContent).toBe( - 'Here is my slot. It is red.\n I am slotted and will receive a red background\nAdded via insertAdjacentTextBeforeEnd. I should have a red background.', + 'Here is my slot. It is red.I am slotted and will receive a red backgroundAdded via insertAdjacentTextBeforeEnd. I should have a red background.', ); expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); }); @@ -100,18 +173,15 @@ describe('scoped-slot-child-insert-adjacent', () => { it('slots elements w/ "afterbegin" position', async () => { expect(parentDiv).toBeDefined(); - expect(parentDiv.textContent).toBe( - 'Here is my slot. It is red.\n I am slotted and will receive a red background\n', - ); + expect(parentDiv.textContent).toBe('Here is my slot. It is red.I am slotted and will receive a red background'); expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); // insert an additional text node - const addButton = app.querySelector('#addInsertAdjacentTextAfterBegin'); - addButton.click(); - await waitForChanges(); + const addButton = $('#addInsertAdjacentTextAfterBegin'); + await addButton.click(); expect(parentDiv.textContent).toBe( - 'Here is my slot. It is red.Added via insertAdjacentTextAfterBegin. I should have a red background.\n I am slotted and will receive a red background\n', + 'Here is my slot. It is red.Added via insertAdjacentTextAfterBegin. I should have a red background.I am slotted and will receive a red background', ); expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); }); @@ -126,9 +196,8 @@ describe('scoped-slot-child-insert-adjacent', () => { expect(children[0].textContent).toBe('I am slotted and will receive a red background'); expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); - const addButton = app.querySelector('#addInsertAdjacentElementBeforeEnd'); - addButton.click(); - await waitForChanges(); + const addButton = $('#addInsertAdjacentElementBeforeEnd'); + await addButton.click(); children = parentDiv.children; expect(children.length).toBe(2); @@ -144,9 +213,8 @@ describe('scoped-slot-child-insert-adjacent', () => { expect(children[0].textContent).toBe('I am slotted and will receive a red background'); expect((getComputedStyle(parentDiv) as any)['background-color']).toBe('rgb(255, 0, 0)'); - const addButton = app.querySelector('#addInsertAdjacentElementAfterBegin'); - addButton.click(); - await waitForChanges(); + const addButton = $('#addInsertAdjacentElementAfterBegin'); + await addButton.click(); children = parentDiv.children; expect(children.length).toBe(2); diff --git a/test/karma/test-app/scoped-slot-child-insert-adjacent/cmp.tsx b/test/wdio/scoped-slot-child-insert-adjacent/cmp.tsx similarity index 100% rename from test/karma/test-app/scoped-slot-child-insert-adjacent/cmp.tsx rename to test/wdio/scoped-slot-child-insert-adjacent/cmp.tsx