Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(runtime): nested multiple default slot relocation (#5403)
* fix(renderer): add hostname to host slot node finder method expected hostname is added to the getHostSlotNode method to retrieve the correct host's slot node since it was getting the first found slot node. However, same slot name or even another custom component's default slot can be placed before the searching host element's slot node fixes one of the issues raised in #5335 * fix(renderer): add check for already relocated nodes to avoid reordering another check is added to avoid changing already relocated nodes order by updating the anchor node which is used by insertBefore fixes one of the issues raised in #5335 * test(slot): add e2e test to check order of dynamically generated nested slot elements * test(slot): fix failing test case by adding optional chaining * test(wdio): migrate conditional rendering & nested dynamic & slot ref tests to wdio --------- Co-authored-by: Tanner Reits <47483144+tanner-reits@users.noreply.github.com>
- Loading branch information
1 parent
2fd001d
commit 363c07b
Showing
6 changed files
with
139 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Component, h, Host } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'slot-nested-dynamic-child', | ||
| shadow: false, | ||
| scoped: true, | ||
| }) | ||
| export class SlotNestedDynamicChild { | ||
| render() { | ||
| return ( | ||
| <Host> | ||
| <slot-nested-dynamic-wrapper id="banner">Banner notification</slot-nested-dynamic-wrapper> | ||
| <slot name="header" /> | ||
| <slot-nested-dynamic-wrapper id="level-1"> | ||
| <slot-nested-dynamic-wrapper id="level-2"> | ||
| <slot /> | ||
| </slot-nested-dynamic-wrapper> | ||
| </slot-nested-dynamic-wrapper> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import { Component, h, Host } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'slot-nested-dynamic-parent', | ||
| shadow: false, | ||
| scoped: true, | ||
| }) | ||
| export class SlotNestedDynamicParent { | ||
| render() { | ||
| return ( | ||
| <Host> | ||
| <slot-nested-dynamic-child> | ||
| <span slot="header">Header Text</span> | ||
| <slot /> | ||
| </slot-nested-dynamic-child> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { Component, h, Host } from '@stencil/core'; | ||
|
|
||
| @Component({ | ||
| tag: 'slot-nested-dynamic-wrapper', | ||
| shadow: false, | ||
| scoped: true, | ||
| }) | ||
| export class SlotNestedDynamicWrapper { | ||
| render() { | ||
| return ( | ||
| <Host> | ||
| <slot /> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Fragment, h } from '@stencil/core'; | ||
| import { render } from '@wdio/browser-runner/stencil'; | ||
|
|
||
| const ITEM_CLASSNAME = 'default-slot-item'; | ||
|
|
||
| describe('slot-nested-dynamic', function () { | ||
| const getRandomizeButton = () => $('#randomizeButton'); | ||
| const getItems = () => $$(`.${ITEM_CLASSNAME}`); | ||
|
|
||
| beforeEach(() => { | ||
| render({ | ||
| flushQueue: true, | ||
| template: () => { | ||
| function randomize() { | ||
| const parent = document.querySelector('slot-nested-dynamic-parent'); | ||
|
|
||
| for (const item of Array.from(parent?.querySelectorAll('.default-slot-item') || [])) { | ||
| item.remove(); | ||
| } | ||
|
|
||
| const min = 3; | ||
| const max = 20; | ||
| const count = Math.floor(Math.random() * (max - min + 1)) + min; | ||
| const items = Array.from(new Array(count)).map((_, i) => { | ||
| const element = document.createElement('span'); | ||
| element.className = 'default-slot-item'; | ||
| element.textContent = 'item-' + i; | ||
| return element; | ||
| }); | ||
|
|
||
| for (const item of items) { | ||
| parent?.appendChild(item); | ||
| } | ||
| } | ||
| return ( | ||
| <> | ||
| <slot-nested-dynamic-parent></slot-nested-dynamic-parent> | ||
|
|
||
| <button id="randomizeButton" onClick={() => randomize()}> | ||
| Randomize Item Count | ||
| </button> | ||
| </> | ||
| ); | ||
| }, | ||
| }); | ||
| }); | ||
|
|
||
| it('correct order after dynamic list generation', async () => { | ||
| const button = getRandomizeButton(); | ||
|
|
||
| /* RUN DYNAMIC GENERATION */ | ||
| await button.click(); | ||
| const items = getItems(); | ||
| await expect(await items[0].getText()).toBe('item-0'); | ||
| await expect(await items[1].getText()).toBe('item-1'); | ||
| await expect(await items[2].getText()).toBe('item-2'); | ||
|
|
||
| /* RE-RUN DYNAMIC GENERATION */ | ||
| await button.click(); | ||
| const itemsRoundTwo = getItems(); | ||
| await expect(await itemsRoundTwo[0].getText()).toBe('item-0'); | ||
| await expect(await itemsRoundTwo[1].getText()).toBe('item-1'); | ||
| await expect(await itemsRoundTwo[2].getText()).toBe('item-2'); | ||
| }); | ||
| }); |