From 996468d4b76d14bfa74ae1c4592a0972450b8b82 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Sat, 27 Aug 2022 00:48:05 +0200
Subject: [PATCH] feat(ct): solid default child (#16839)

---
 packages/playwright-ct-solid/registerSource.mjs   |  5 ++++-
 .../ct-solid/src/components/DefaultChildren.tsx   | 15 +++++++++++++++
 tests/components/ct-solid/src/tests.spec.tsx      | 10 +++++++++-
 3 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 tests/components/ct-solid/src/components/DefaultChildren.tsx

diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index 1711b6b35f..4ea8ca2fdb 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -54,7 +54,10 @@ function render(component) {
   if (component.kind !== 'jsx')
     throw new Error('Object mount notation is not supported');
 
-  return createComponent(componentFunc, component.props);
+  return createComponent(componentFunc, {
+    children: component.children,
+    ...component.props
+  });
 }
 
 const unmountKey = Symbol('disposeKey');
diff --git a/tests/components/ct-solid/src/components/DefaultChildren.tsx b/tests/components/ct-solid/src/components/DefaultChildren.tsx
new file mode 100644
index 0000000000..691b6a0806
--- /dev/null
+++ b/tests/components/ct-solid/src/components/DefaultChildren.tsx
@@ -0,0 +1,15 @@
+type DefaultChildrenProps = {
+  children?: any;
+}
+
+export default function DefaultChildren(props: DefaultChildrenProps) {
+  return <div>
+    <h1>Welcome!</h1>
+    <main>
+      {props.children}
+    </main>
+    <footer>
+      Thanks for visiting.
+    </footer>
+  </div>
+}
diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx
index a660541477..918df8d02c 100644
--- a/tests/components/ct-solid/src/tests.spec.tsx
+++ b/tests/components/ct-solid/src/tests.spec.tsx
@@ -1,5 +1,6 @@
 import { test, expect } from '@playwright/experimental-ct-solid'
 import Button from './components/Button';
+import DefaultChildren from './components/DefaultChildren';
 import MultiRoot from './components/MultiRoot';
 
 test.use({ viewport: { width: 500, height: 500 } });
@@ -16,7 +17,14 @@ test('callback should work', async ({ mount }) => {
   }}></Button>)
   await component.click()
   expect(messages).toEqual(['hello'])
-});
+})
+
+test('default child should work', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>
+    Main Content
+  </DefaultChildren>)
+  await expect(component).toContainText('Main Content')
+})
 
 test('should unmount', async ({ page, mount }) => {
   const component = await mount(<Button title="Submit" />)