From 8d4a94bfd37840339edb977be6d796065f66ecd4 Mon Sep 17 00:00:00 2001
From: sand4rt <info@mesander.com>
Date: Thu, 25 Aug 2022 17:40:14 +0200
Subject: [PATCH] feat(ct): solid set props (#16813)

---
 packages/playwright-ct-solid/registerSource.mjs     | 10 ++++------
 tests/components/ct-solid/src/components/Button.tsx |  7 +++++--
 tests/components/ct-solid/src/tests.spec.tsx        |  4 ++--
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/playwright-ct-solid/registerSource.mjs b/packages/playwright-ct-solid/registerSource.mjs
index 682801de08..88a40b363f 100644
--- a/packages/playwright-ct-solid/registerSource.mjs
+++ b/packages/playwright-ct-solid/registerSource.mjs
@@ -17,10 +17,10 @@
 // @ts-check
 // This file is injected into the registry as text, no dependencies are allowed.
 
-import { render as solidRender } from 'solid-js/web';
+import { render as solidRender, createComponent } from 'solid-js/web';
 
 /** @typedef {import('../playwright-test/types/component').Component} Component */
-/** @typedef {import('solid-js').JSX.Element} FrameworkComponent */
+/** @typedef {() => import('solid-js').JSX.Element} FrameworkComponent */
 
 /** @type {Map<string, FrameworkComponent>} */
 const registry = new Map();
@@ -48,15 +48,13 @@ function render(component) {
     }
   }
 
-  if (!componentFunc && component.type[0].toUpperCase() === component.type[0])
+  if (!componentFunc)
     throw new Error(`Unregistered component: ${component.type}. Following components are registered: ${[...registry.keys()]}`);
 
-  const componentFuncOrString = componentFunc || component.type;
-
   if (component.kind !== 'jsx')
     throw new Error('Object mount notation is not supported');
 
-  return componentFuncOrString;
+  return createComponent(componentFunc, component.props);
 }
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
diff --git a/tests/components/ct-solid/src/components/Button.tsx b/tests/components/ct-solid/src/components/Button.tsx
index a3b37db845..564a455861 100644
--- a/tests/components/ct-solid/src/components/Button.tsx
+++ b/tests/components/ct-solid/src/components/Button.tsx
@@ -1,3 +1,6 @@
-export default function Button() {
-  return <button>Submit</button>
+type ButtonProps = {
+  title: string;
+}
+export default function Button(props: ButtonProps) {
+  return <button>{props.title}</button>
 }
diff --git a/tests/components/ct-solid/src/tests.spec.tsx b/tests/components/ct-solid/src/tests.spec.tsx
index 95827a2939..a8b6cbefee 100644
--- a/tests/components/ct-solid/src/tests.spec.tsx
+++ b/tests/components/ct-solid/src/tests.spec.tsx
@@ -3,7 +3,7 @@ import Button from './components/Button';
 
 test.use({ viewport: { width: 500, height: 500 } });
 
-test('should work', async ({ mount }) => {
-  const component = await mount(<Button />);
+test('props should work', async ({ mount }) => {
+  const component = await mount(<Button title="Submit" />);
   await expect(component).toContainText('Submit');
 });