feat(ct): solid render children complete (#17417)

packages/playwright-ct-solid/registerSource.mjs

@@ -17,7 +17,8 @@
 // @ts-check
 // This file is injected into the registry as text, no dependencies are allowed.
 
-import { render as solidRender, createComponent } from 'solid-js/web';
+import { render as solidRender, createComponent as solidCreateComponent } from 'solid-js/web';
+import h from 'solid-js/h';
 
 /** @typedef {import('../playwright-test/types/component').Component} Component */
 /** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */
@@ -33,40 +34,54 @@ export function register(components) {
     registry.set(name, value);
 }
 
+function createChild(child) {
+  return typeof child === 'string' ? child : createComponent(child);
+}
+
 /**
  * @param {Component} component
  */
-function render(component) {
-  let componentFunc = registry.get(component.type);
-  if (!componentFunc) {
+function createComponent(component) {
+  if (typeof component === 'string')
+    return component;
+
+  let Component = registry.get(component.type);
+  if (!Component) {
     // Lookup by shorthand.
     for (const [name, value] of registry) {
       if (component.type.endsWith(`_${name}`)) {
-        componentFunc = value;
+        Component = value;
         break;
       }
     }
   }
 
-  if (!componentFunc)
+  if (!Component && component.type[0].toUpperCase() === component.type[0])
     throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...registry.keys()]}`);
 
   if (component.kind !== 'jsx')
     throw new Error('Object mount notation is not supported');
 
-  return createComponent(componentFunc, {
-    children: component.children,
-    ...component.props
-  });
+  const children = component.children.reduce((/** @type {any[]} */ children, current) => {
+    const child = createChild(current);
+    if (typeof child !== 'string' || !!child.trim())
+      children.push(child);
+    return children;
+  }, []);
+
+  if (!Component)
+    return h(component.type, component.props, children);
+
+  return solidCreateComponent(Component, { ...component.props, children });
 }
 
-const unmountKey = Symbol('disposeKey');
+const unmountKey = Symbol('unmountKey');
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
   for (const hook of /** @type {any} */(window).__pw_hooks_before_mount || [])
     await hook({ hooksConfig });
 
-  const unmount = solidRender(() => render(component), rootElement);
+  const unmount = solidRender(() => createComponent(component), rootElement);
   rootElement[unmountKey] = unmount;
 
   for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || [])

tests/components/ct-solid/src/components/MultipleChildren.tsx

@@ -0,0 +1,17 @@
+type MultipleChildrenProps = {
+  children?: [any, any, any];
+}
+
+export default function MultipleChildren(props: MultipleChildrenProps) {
+  return <div>
+  <header>
+    {props.children?.at(0)}
+  </header>
+  <main>
+    {props.children?.at(1)}
+  </main>
+  <footer>
+    {props.children?.at(2)}
+  </footer>
+</div>
+}

tests/components/ct-solid/src/tests.spec.tsx

@@ -1,6 +1,7 @@
-import { test, expect } from '@playwright/experimental-ct-solid'
+import { test, expect } from '@playwright/experimental-ct-solid';
 import Button from './components/Button';
 import DefaultChildren from './components/DefaultChildren';
+import MultipleChildren from './components/MultipleChildren';
 import MultiRoot from './components/MultiRoot';
 import EmptyFragment from './components/EmptyFragment';
 
@@ -12,46 +13,86 @@ test('render props', async ({ mount }) => {
 });
 
 test('execute callback when the button is clicked', async ({ mount }) => {
-  const messages: string[] = []
-  const component = await mount(<Button title="Submit" onClick={data => {
-    messages.push(data)
-  }}></Button>)
-  await component.click()
-  expect(messages).toEqual(['hello'])
-})
+  const messages: string[] = [];
+  const component = await mount(
+    <Button
+      title="Submit"
+      onClick={(data) => {
+        messages.push(data);
+      }}
+    />
+  );
+  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('render a default child', async ({ mount }) => {
+  const component = await mount(
+    <DefaultChildren>Main Content</DefaultChildren>
+  );
+  await expect(component).toContainText('Main Content');
+});
+
+test('render multiple children', async ({ mount }) => {
+  const component = await mount(
+    <DefaultChildren>
+      <div id="one">One</div>
+      <div id="two">Two</div>
+    </DefaultChildren>
+  );
+  await expect(component.locator('#one')).toContainText('One');
+  await expect(component.locator('#two')).toContainText('Two');
+});
+
+test('render named children', async ({ mount }) => {
+  const component = await mount(
+    <MultipleChildren>
+      <div>Header</div>
+      <div>Main Content</div>
+      <div>Footer</div>
+    </MultipleChildren>
+  );
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});
+
+test('execute callback when a child node is clicked', async ({ mount }) => {
+  let clickFired = false;
+  const component = await mount(
+    <DefaultChildren>
+      <span onClick={() => (clickFired = true)}>Main Content</span>
+    </DefaultChildren>
+  );
+  await component.locator('text=Main Content').click();
+  expect(clickFired).toBeTruthy();
+});
 
 test('run hooks', async ({ page, mount }) => {
   const messages: string[] = [];
-  page.on('console', m => messages.push(m.text()));
+  page.on('console', (m) => messages.push(m.text()));
   await mount(<Button title="Submit" />, {
     hooksConfig: {
-      route: 'A'
-    }
+      route: 'A',
+    },
   });
-  expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
+  expect(messages).toEqual(['Before mount: {"route":"A"}', 'After mount']);
 });
 
 test('unmount', async ({ page, mount }) => {
-  const component = await mount(<Button title="Submit" />)
-  await expect(page.locator('#root')).toContainText('Submit')
+  const component = await mount(<Button title="Submit" />);
+  await expect(page.locator('#root')).toContainText('Submit');
   await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });
 
 test('unmount a multi root component', async ({ mount, page }) => {
-  const component = await mount(<MultiRoot />)
-  await expect(page.locator('#root')).toContainText('root 1')
-  await expect(page.locator('#root')).toContainText('root 2')
-  await component.unmount()
-  await expect(page.locator('#root')).not.toContainText('root 1')
-  await expect(page.locator('#root')).not.toContainText('root 2')
+  const component = await mount(<MultiRoot />);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
 });
 
 test('get textContent of the empty fragment', async ({ mount }) => {