fix(ct): vue render array as slot (#27851)

partial fix for:
https://github.com/microsoft/playwright/issues/27587#issuecomment-1762133376

related: https://github.com/microsoft/playwright/pull/27692

CC @dgozman

Co-authored-by: sand4rt <mbr@mbrs-MacBook-Air.local>
This commit is contained in:
Sander 2023-10-28 20:21:37 +02:00 committed by GitHub
parent 3313381040
commit 96787d2626
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 6 deletions

View File

@ -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;

View File

@ -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;
}
/**

View File

@ -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(<DefaultSlot>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultSlot>);
await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
});

View File

@ -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(<DefaultSlot>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultSlot>);
await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
});

View File

@ -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(<DefaultSlot>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultSlot>);
await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
});