microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-07 11:46:42 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/playwright-ct-vue/registerSource.mjs
View File

@ -80,10 +80,13 @@ const __pwAllListeners = new Map();
/** /**
* @param {JsxComponentChild} child * @param {JsxComponentChild} child
* @returns {import('vue').VNode | string}
*/ */
function __pwCreateChild(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;
} }
/** /**
@ -133,9 +136,6 @@ function __pwSlotToFunction(slot) {
* @param {Component} component * @param {Component} component
*/ */
function __pwCreateComponent(component) { function __pwCreateComponent(component) {
if (typeof component === 'string')
return component;
let componentFunc = __pwRegistry.get(component.type); let componentFunc = __pwRegistry.get(component.type);
componentFunc = componentFunc || component.type; componentFunc = componentFunc || component.type;

6
packages/playwright-ct-vue2/registerSource.mjs
View File

@ -79,7 +79,11 @@ async function __pwResolveComponent(component) {
* @param {Component | JsxComponentChild} child * @param {Component | JsxComponentChild} child
*/ */
function __pwCreateChild(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;
} }
/** /**

6
tests/components/ct-vue-cli/tests/slots/slots.spec.tsx
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('Main Content');
await expect(component).toContainText('Footer'); 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]');
});

6
tests/components/ct-vue-vite/tests/slots/slots.spec.tsx
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('Main Content');
await expect(component).toContainText('Footer'); 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]');
});

6
tests/components/ct-vue2-cli/tests/slots/slots.spec.tsx
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('Main Content');
await expect(component).toContainText('Footer'); 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]');
});