fix(ct): solid pass children when they are defined (#29648)

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
- */
-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}
+ * @param {any} value
  */
-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');

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 <div>
-    <h1>Welcome!</h1>
-    <main>
-      {content}
-    </main>
-    <footer>
-      Thanks for visiting.
-    </footer>
-  </div>
+  return <>{'children' in props ? props.children : 'No Children'}</>
 }

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(<CheckChildrenProp />);
   await expect(component).toContainText('No Children');
 });

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 <div>
-    <h1>Welcome!</h1>
-    <main>
-      {content}
-    </main>
-    <footer>
-      Thanks for visiting.
-    </footer>
-  </div>
+  return <>{'children' in props ? props.children : 'No Children'}</>
 }

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(<CheckChildrenProp />);
   await expect(component).toContainText('No Children');
 });

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'}</>
+}

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(<DefaultChildren>{1337}</DefaultChildren>);
   await expect(component).toContainText('1337');
 });
+
+test('absence of children when children prop is not provided', async ({ mount }) => {
+  const component = await mount(<CheckChildrenProp />);
+  await expect(component).toContainText('No Children');
+});