diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs index a76792c513..c89caa7bd8 100644 --- a/packages/playwright-ct-solid/registerSource.mjs +++ b/packages/playwright-ct-solid/registerSource.mjs @@ -19,9 +19,7 @@ import { render as __pwSolidRender, createComponent as __pwSolidCreateComponent } from 'solid-js/web'; import __pwH from 'solid-js/h'; - /** @typedef {import('../playwright-ct-core/types/component').JsxComponent} JsxComponent */ -/** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */ /** * @param {any} component @@ -32,42 +30,20 @@ function isJsxComponent(component) { } /** - * @param {any} child + * @param {any} value */ -function __pwCreateChild(child) { - if (Array.isArray(child)) - return child.map(grandChild => __pwCreateChild(grandChild)); - if (isJsxComponent(child)) - return __pwCreateComponent(child); - return child; -} - -/** - * @param {JsxComponent} component - * @returns {any[] | undefined} - */ -function __pwJsxChildArray(component) { - if (!component.props.children) - return; - if (Array.isArray(component.props.children)) - return component.props.children; - return [component.props.children]; -} - -/** - * @param {JsxComponent} component - */ -function __pwCreateComponent(component) { - const children = __pwJsxChildArray(component)?.map(child => __pwCreateChild(child)).filter(child => { - if (typeof child === 'string') - return !!child.trim(); - return true; +function __pwCreateComponent(value) { + return window.__pwTransformObject(value, v => { + if (isJsxComponent(v)) { + const component = v; + const props = component.props ? __pwCreateComponent(component.props) : {}; + if (typeof component.type === 'string') { + const { children, ...propsWithoutChildren } = props; + return { result: __pwH(component.type, propsWithoutChildren, children) }; + } + return { result: __pwSolidCreateComponent(component.type, props) }; + } }); - - if (typeof component.type === 'string') - return __pwH(component.type, component.props, children); - - return __pwSolidCreateComponent(component.type, { ...component.props, children }); } const __pwUnmountKey = Symbol('unmountKey'); diff --git a/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx b/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx index 42b3a361e8..3e8f405a5b 100644 --- a/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx +++ b/tests/components/ct-react-vite/src/components/CheckChildrenProp.tsx @@ -1,16 +1,7 @@ -type DefaultChildrenProps = { - children?: any; -} +import type { PropsWithChildren } from 'react'; + +type DefaultChildrenProps = PropsWithChildren<{}>; export default function CheckChildrenProp(props: DefaultChildrenProps) { - const content = 'children' in props ? props.children : 'No Children'; - return
-

Welcome!

-
- {content} -
- -
+ return <>{'children' in props ? props.children : 'No Children'} } diff --git a/tests/components/ct-react-vite/tests/children.spec.tsx b/tests/components/ct-react-vite/tests/children.spec.tsx index d671b14e64..03da7d2c55 100644 --- a/tests/components/ct-react-vite/tests/children.spec.tsx +++ b/tests/components/ct-react-vite/tests/children.spec.tsx @@ -60,7 +60,7 @@ test('render number as child', async ({ mount }) => { await expect(component).toContainText('1337'); }); -test('render without children', async ({ mount }) => { +test('absence of children when children prop is not provided', async ({ mount }) => { const component = await mount(); await expect(component).toContainText('No Children'); }); diff --git a/tests/components/ct-react17/src/components/CheckChildrenProp.tsx b/tests/components/ct-react17/src/components/CheckChildrenProp.tsx index 42b3a361e8..3e8f405a5b 100644 --- a/tests/components/ct-react17/src/components/CheckChildrenProp.tsx +++ b/tests/components/ct-react17/src/components/CheckChildrenProp.tsx @@ -1,16 +1,7 @@ -type DefaultChildrenProps = { - children?: any; -} +import type { PropsWithChildren } from 'react'; + +type DefaultChildrenProps = PropsWithChildren<{}>; export default function CheckChildrenProp(props: DefaultChildrenProps) { - const content = 'children' in props ? props.children : 'No Children'; - return
-

Welcome!

-
- {content} -
-
- Thanks for visiting. -
-
+ return <>{'children' in props ? props.children : 'No Children'} } diff --git a/tests/components/ct-react17/tests/children.spec.tsx b/tests/components/ct-react17/tests/children.spec.tsx index 32ddabe7ac..8f55237723 100644 --- a/tests/components/ct-react17/tests/children.spec.tsx +++ b/tests/components/ct-react17/tests/children.spec.tsx @@ -60,7 +60,7 @@ test('render number as child', async ({ mount }) => { await expect(component).toContainText('1337'); }); -test('render without children', async ({ mount }) => { +test('absence of children when children prop is not provided', async ({ mount }) => { const component = await mount(); await expect(component).toContainText('No Children'); }); diff --git a/tests/components/ct-solid/src/components/CheckChildrenProp.tsx b/tests/components/ct-solid/src/components/CheckChildrenProp.tsx new file mode 100644 index 0000000000..113a44ced9 --- /dev/null +++ b/tests/components/ct-solid/src/components/CheckChildrenProp.tsx @@ -0,0 +1,7 @@ +import { type ParentProps } from 'solid-js'; + +type DefaultChildrenProps = ParentProps<{}>; + +export default function CheckChildrenProp(props: DefaultChildrenProps) { + return <>{'children' in props ? props.children : 'No Children'} +} diff --git a/tests/components/ct-solid/tests/children.spec.tsx b/tests/components/ct-solid/tests/children.spec.tsx index 75515f754e..ebf80fe803 100644 --- a/tests/components/ct-solid/tests/children.spec.tsx +++ b/tests/components/ct-solid/tests/children.spec.tsx @@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-solid'; import Button from '@/components/Button'; import DefaultChildren from '@/components/DefaultChildren'; import MultipleChildren from '@/components/MultipleChildren'; +import CheckChildrenProp from '@/components/CheckChildrenProp' test('render a default child', async ({ mount }) => { const component = await mount( @@ -58,3 +59,8 @@ test('render number as child', async ({ mount }) => { const component = await mount({1337}); await expect(component).toContainText('1337'); }); + +test('absence of children when children prop is not provided', async ({ mount }) => { + const component = await mount(); + await expect(component).toContainText('No Children'); +});