From 1a34b6d2111fba49956141905235964ec9b88621 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Sat, 28 Oct 2023 20:22:10 +0200
Subject: [PATCH] fix(ct): solid render array as child (#27849)

closes:
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>
---
 .../playwright-ct-solid/registerSource.mjs    | 27 +++++++++----------
 .../ct-solid/tests/children.spec.tsx          |  4 +--
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index a04d65c404..fed1b46540 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -73,28 +73,27 @@ async function __pwResolveComponent(component) {
     await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
+/**
+ * @param {JsxComponentChild} child
+ */
 function __pwCreateChild(child) {
-  return typeof child === 'string' ? child : __pwCreateComponent(child);
+  if (Array.isArray(child))
+    return child.map(grandChild => __pwCreateChild(grandChild));
+  if (isComponent(child))
+    return __pwCreateComponent(child);
+  return child;
 }
 
 /**
  * @param {JsxComponent} component
  */
 function __pwCreateComponent(component) {
-  if (typeof component !== 'object' || Array.isArray(component))
-    return component;
-
   const componentFunc = __pwRegistry.get(component.type);
-
-
-  const children = component.children.reduce((/** @type {any[]} */ children, current) => {
-    const child = __pwCreateChild(current);
-    if (Array.isArray(child))
-      return child.map(grandChild => __pwCreateChild(grandChild));
-    if (typeof child !== 'string' || !!child.trim())
-      children.push(child);
-    return children;
-  }, []);
+  const children = component.children.map(child => __pwCreateChild(child)).filter(child => {
+    if (typeof child === 'string')
+      return !!child.trim();
+    return true;
+  });
 
   if (!componentFunc)
     return __pwH(component.type, component.props, children);
diff --git a/tests/components/ct-solid/tests/children.spec.tsx b/tests/components/ct-solid/tests/children.spec.tsx
index 9fa69ef932..75515f754e 100644
--- a/tests/components/ct-solid/tests/children.spec.tsx
+++ b/tests/components/ct-solid/tests/children.spec.tsx
@@ -49,9 +49,9 @@ test('render string as child', async ({ mount }) => {
 });
 
 test('render array as child', async ({ mount }) => {
-  const component = await mount(<DefaultChildren>{[<h4>{[4]}</h4>,<p>2</p>]}</DefaultChildren>);
+  const component = await mount(<DefaultChildren>{[<h4>{[4]}</h4>,[[<p>[2,3]</p>]]]}</DefaultChildren>);
   await expect(component.getByRole('heading', { level: 4 })).toHaveText('4');
-  await expect(component.getByRole('paragraph')).toHaveText('2');
+  await expect(component.getByRole('paragraph')).toHaveText('[2,3]');
 });
 
 test('render number as child', async ({ mount }) => {