yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ct): react render array as child (#27692)

Browse Source 
Signed-off-by: Sander <info@mesander.com>
Co-authored-by: Dmitry Gozman <dgozman@gmail.com>
Co-authored-by: mbr <mbr@mbrs-MacBook-Air.local>
This commit is contained in:
Sander 2023-10-28 19:36:48 +02:00 committed by GitHub
parent 462e70ab82
commit 3313381040
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 36 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/playwright-ct-react/registerSource.mjs
View File

@ -76,23 +76,27 @@ async function __pwResolveComponent(component) {
} }
/** /**
* @param {JsxComponent | JsxComponentChild} component * @param {JsxComponentChild} child
*/
function __renderChild(child) {
if (Array.isArray(child))
return child.map(grandChild => __renderChild(grandChild));
if (isComponent(child))
return __pwRender(child);
return child;
}
/**
* @param {JsxComponent} component
*/ */
function __pwRender(component) { function __pwRender(component) {
if (!isComponent(component))
return component;
const componentFunc = __pwRegistry.get(component.type); const componentFunc = __pwRegistry.get(component.type);
const children = component.children.map(child => __renderChild(child)).filter(child => {
return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
if (typeof child === 'string')
return child;
return __pwRender(child);
}).filter(child => {
if (typeof child === 'string') if (typeof child === 'string')
return !!child.trim(); return !!child.trim();
return true; return true;
})); });
return __pwReact.createElement(componentFunc || component.type, component.props, children);
} }
window.playwrightMount = async (component, rootElement, hooksConfig) => { window.playwrightMount = async (component, rootElement, hooksConfig) => {

26
packages/playwright-ct-react17/registerSource.mjs
View File

@ -75,23 +75,27 @@ async function __pwResolveComponent(component) {
} }
/** /**
* @param {JsxComponent | JsxComponentChild} component * @param {JsxComponentChild} child
*/
function __renderChild(child) {
if (Array.isArray(child))
return child.map(grandChild => __renderChild(grandChild));
if (isComponent(child))
return __pwRender(child);
return child;
}
/**
* @param {JsxComponent} component
*/ */
function __pwRender(component) { function __pwRender(component) {
if (!isComponent(component))
return component;
const componentFunc = __pwRegistry.get(component.type); const componentFunc = __pwRegistry.get(component.type);
const children = component.children.map(child => __renderChild(child)).filter(child => {
return __pwReact.createElement(componentFunc || component.type, component.props, ...component.children.map(child => {
if (typeof child === 'string')
return child;
return __pwRender(child);
}).filter(child => {
if (typeof child === 'string') if (typeof child === 'string')
return !!child.trim(); return !!child.trim();
return true; return true;
})); });
return __pwReact.createElement(componentFunc || component.type, component.props, children);
} }
window.playwrightMount = async (component, rootElement, hooksConfig) => { window.playwrightMount = async (component, rootElement, hooksConfig) => {

5
tests/components/ct-react-vite/tests/children.spec.tsx
View File

@ -49,8 +49,9 @@ test('render string as child', async ({ mount }) => {
}); });
test('render array as child', async ({ mount }) => { test('render array as child', async ({ mount }) => {
const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>); const component = await mount(<DefaultChildren>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultChildren>);
await expect(component).toContainText('42'); await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
}); });
test('render number as child', async ({ mount }) => { test('render number as child', async ({ mount }) => {

5
tests/components/ct-react17/tests/children.spec.tsx
View File

@ -49,8 +49,9 @@ test('render string as child', async ({ mount }) => {
}); });
test('render array as child', async ({ mount }) => { test('render array as child', async ({ mount }) => {
const component = await mount(<DefaultChildren>{[4,2]}</DefaultChildren>); const component = await mount(<DefaultChildren>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultChildren>);
await expect(component).toContainText('42'); await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
}); });
test('render number as child', async ({ mount }) => { test('render number as child', async ({ mount }) => {