From 218787509c9953c195cc54ffbbd9e9b34123ecc2 Mon Sep 17 00:00:00 2001 From: Yigit Yuce Date: Sat, 16 Mar 2024 00:27:55 +0300 Subject: [PATCH 1/4] fix(slot-fallback): fix hiding fallback slot content issue when the slotted element is a text node --- src/runtime/vdom/vdom-render.ts | 5 +++-- .../cmp-avatar.tsx | 16 ++++++++++++++ .../slot-fallback-with-textnode/cmp.test.tsx | 18 ++++++++++++++++ test/wdio/slot-fallback-with-textnode/cmp.tsx | 21 +++++++++++++++++++ 4 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 test/wdio/slot-fallback-with-textnode/cmp-avatar.tsx create mode 100644 test/wdio/slot-fallback-with-textnode/cmp.test.tsx create mode 100644 test/wdio/slot-fallback-with-textnode/cmp.tsx diff --git a/src/runtime/vdom/vdom-render.ts b/src/runtime/vdom/vdom-render.ts index 62eac0c755c..66bf2122438 100644 --- a/src/runtime/vdom/vdom-render.ts +++ b/src/runtime/vdom/vdom-render.ts @@ -736,8 +736,9 @@ export const updateFallbackSlotVisibility = (elm: d.RenderNode) => { // this sibling node is from a different component OR is a named // fallback slot node if ( - siblingNode.nodeType === NODE_TYPE.ElementNode && - (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn']) + (siblingNode.nodeType === NODE_TYPE.ElementNode && + (slotName === siblingNode.getAttribute('slot') || slotName === siblingNode['s-sn'])) || + (siblingNode.nodeType === NODE_TYPE.TextNode && slotName === siblingNode['s-sn']) ) { childNode.hidden = true; break; diff --git a/test/wdio/slot-fallback-with-textnode/cmp-avatar.tsx b/test/wdio/slot-fallback-with-textnode/cmp-avatar.tsx new file mode 100644 index 00000000000..e0fb650630c --- /dev/null +++ b/test/wdio/slot-fallback-with-textnode/cmp-avatar.tsx @@ -0,0 +1,16 @@ +import { Component, h } from '@stencil/core'; + +@Component({ + tag: 'cmp-avatar', + shadow: false, + scoped: true, +}) +export class CmpAvatar { + render() { + return ( +
+ DEFAULT +
+ ); + } +} diff --git a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx new file mode 100644 index 00000000000..e7781d54dfd --- /dev/null +++ b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx @@ -0,0 +1,18 @@ +import { h } from '@stencil/core'; +import { render, waitForChanges } from '@wdio/browser-runner/stencil'; + +describe('slot-fallback-with-textnode', function () { + beforeEach(() => { + render({ + template: () => , + }); + }); + + it('should hide fallback content when provided slot is text node', async () => { + await $('#toggle-button').click(); + await waitForChanges(); + + await expect((await $('.container').getText()).includes('DEFAULT')).toBe(false); + await expect((await $('.container').getText()).includes('JD')).toBe(true); + }); +}); diff --git a/test/wdio/slot-fallback-with-textnode/cmp.tsx b/test/wdio/slot-fallback-with-textnode/cmp.tsx new file mode 100644 index 00000000000..436be646617 --- /dev/null +++ b/test/wdio/slot-fallback-with-textnode/cmp.tsx @@ -0,0 +1,21 @@ +import { Component, Fragment, h, State } from '@stencil/core'; + +@Component({ + tag: 'my-component', + shadow: false, + scoped: true, +}) +export class MyComponent { + @State() shortName: string; + + render() { + return ( + + {this.shortName} + + + ); + } +} From a69b994b16c76fd62ad9608933b784ca0d1390c8 Mon Sep 17 00:00:00 2001 From: Yigit Yuce Date: Wed, 3 Apr 2024 14:44:55 +0300 Subject: [PATCH 2/4] test: fix test related reviews --- test/wdio/slot-fallback-with-textnode/cmp.test.tsx | 5 +++-- test/wdio/slot-fallback-with-textnode/cmp.tsx | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx index e7781d54dfd..0ae7a1cb4ec 100644 --- a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx +++ b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx @@ -9,10 +9,11 @@ describe('slot-fallback-with-textnode', function () { }); it('should hide fallback content when provided slot is text node', async () => { + await expect($('.container')).toHaveText(expect.stringContaining('DEFAULT')) await $('#toggle-button').click(); await waitForChanges(); - await expect((await $('.container').getText()).includes('DEFAULT')).toBe(false); - await expect((await $('.container').getText()).includes('JD')).toBe(true); + await expect($('.container')).not.toHaveText(expect.stringContaining('DEFAULT')); + await expect($('.container')).toHaveText(expect.stringContaining('JD')); }); }); diff --git a/test/wdio/slot-fallback-with-textnode/cmp.tsx b/test/wdio/slot-fallback-with-textnode/cmp.tsx index 436be646617..15007c6399d 100644 --- a/test/wdio/slot-fallback-with-textnode/cmp.tsx +++ b/test/wdio/slot-fallback-with-textnode/cmp.tsx @@ -6,7 +6,7 @@ import { Component, Fragment, h, State } from '@stencil/core'; scoped: true, }) export class MyComponent { - @State() shortName: string; + @State() shortName: null | string; render() { return ( From 435265ff4d0067d6dba169f3c740f4b27dca32df Mon Sep 17 00:00:00 2001 From: Yigit Yuce Date: Mon, 22 Apr 2024 10:47:14 +0300 Subject: [PATCH 3/4] test: fix test related reviews --- test/wdio/slot-fallback-with-textnode/cmp.test.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx index 0ae7a1cb4ec..461004da227 100644 --- a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx +++ b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx @@ -1,5 +1,5 @@ import { h } from '@stencil/core'; -import { render, waitForChanges } from '@wdio/browser-runner/stencil'; +import { render } from '@wdio/browser-runner/stencil'; describe('slot-fallback-with-textnode', function () { beforeEach(() => { @@ -9,11 +9,10 @@ describe('slot-fallback-with-textnode', function () { }); it('should hide fallback content when provided slot is text node', async () => { - await expect($('.container')).toHaveText(expect.stringContaining('DEFAULT')) + await expect($('.container')).toHaveText('DEFAULT', { trim: true }) await $('#toggle-button').click(); - await waitForChanges(); - await expect($('.container')).not.toHaveText(expect.stringContaining('DEFAULT')); - await expect($('.container')).toHaveText(expect.stringContaining('JD')); + await expect($('.container')).not.toHaveText('DEFAULT', { trim: true }); + await expect($('.container')).toHaveText('JD', { trim: true }); }); }); From 5db2e2b1ca54f3ed84c6cb93ef1ccadedeaaf8e4 Mon Sep 17 00:00:00 2001 From: Christian Bromann Date: Mon, 22 Apr 2024 09:18:19 -0700 Subject: [PATCH 4/4] Update test/wdio/slot-fallback-with-textnode/cmp.test.tsx --- test/wdio/slot-fallback-with-textnode/cmp.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx index 461004da227..df2a2892278 100644 --- a/test/wdio/slot-fallback-with-textnode/cmp.test.tsx +++ b/test/wdio/slot-fallback-with-textnode/cmp.test.tsx @@ -9,7 +9,7 @@ describe('slot-fallback-with-textnode', function () { }); it('should hide fallback content when provided slot is text node', async () => { - await expect($('.container')).toHaveText('DEFAULT', { trim: true }) + await expect($('.container')).toHaveText('DEFAULT', { trim: true }); await $('#toggle-button').click(); await expect($('.container')).not.toHaveText('DEFAULT', { trim: true });