diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs index 407ee9ed5a..c78b3f6ac2 100644 --- a/packages/playwright-ct-vue/registerSource.mjs +++ b/packages/playwright-ct-vue/registerSource.mjs @@ -80,10 +80,13 @@ const __pwAllListeners = new Map(); /** * @param {JsxComponentChild} child - * @returns {import('vue').VNode | string} */ function __pwCreateChild(child) { - return typeof child === 'string' ? child : __pwCreateWrapper(child); + if (Array.isArray(child)) + return child.map(grandChild => __pwCreateChild(grandChild)); + if (isComponent(child)) + return __pwCreateWrapper(child); + return child; } /** @@ -133,9 +136,6 @@ function __pwSlotToFunction(slot) { * @param {Component} component */ function __pwCreateComponent(component) { - if (typeof component === 'string') - return component; - let componentFunc = __pwRegistry.get(component.type); componentFunc = componentFunc || component.type; diff --git a/packages/playwright-ct-vue2/registerSource.mjs b/packages/playwright-ct-vue2/registerSource.mjs index f6985fc97f..e67a22dd2b 100644 --- a/packages/playwright-ct-vue2/registerSource.mjs +++ b/packages/playwright-ct-vue2/registerSource.mjs @@ -79,7 +79,11 @@ async function __pwResolveComponent(component) { * @param {Component | JsxComponentChild} child */ function __pwCreateChild(child) { - return typeof child === 'string' ? child : __pwCreateWrapper(child); + if (Array.isArray(child)) + return child.map(grandChild => __pwCreateChild(grandChild)); + if (isComponent(child)) + return __pwCreateWrapper(child); + return child; } /** diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx index 6d9330b5c5..64da25ed0b 100644 --- a/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx +++ b/tests/components/ct-vue-cli/tests/slots/slots.spec.tsx @@ -44,3 +44,9 @@ test('render a component with a named slot', async ({ mount }) => { await expect(component).toContainText('Main Content'); await expect(component).toContainText('Footer'); }); + +test('render array as child', async ({ mount }) => { + const component = await mount({[

{[4]}

,[[

[2,3]

]]]}
); + await expect(component.getByRole('heading', { level: 4 })).toHaveText('4'); + await expect(component.getByRole('paragraph')).toHaveText('[2,3]'); +}); diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx b/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx index 6d9330b5c5..64da25ed0b 100644 --- a/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx +++ b/tests/components/ct-vue-vite/tests/slots/slots.spec.tsx @@ -44,3 +44,9 @@ test('render a component with a named slot', async ({ mount }) => { await expect(component).toContainText('Main Content'); await expect(component).toContainText('Footer'); }); + +test('render array as child', async ({ mount }) => { + const component = await mount({[

{[4]}

,[[

[2,3]

]]]}
); + await expect(component.getByRole('heading', { level: 4 })).toHaveText('4'); + await expect(component.getByRole('paragraph')).toHaveText('[2,3]'); +}); diff --git a/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx b/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx index 2bde43e7f4..cde13ca16a 100644 --- a/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx +++ b/tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx @@ -40,3 +40,9 @@ test('render a component with a named slot', async ({ mount }) => { await expect(component).toContainText('Main Content'); await expect(component).toContainText('Footer'); }); + +test('render array as child', async ({ mount }) => { + const component = await mount({[

{[4]}

,[[

[2,3]

]]]}
); + await expect(component.getByRole('heading', { level: 4 })).toHaveText('4'); + await expect(component.getByRole('paragraph')).toHaveText('[2,3]'); +});