fix(ct): empty slots or children (#28225)

closes: https://github.com/microsoft/playwright/issues/28212

packages/playwright-ct-core/src/tsxTransform.ts

@@ -121,12 +121,15 @@ export default declare((api: BabelAPI) => {
             children.push(t.spreadElement(child.expression));
         }
 
-        path.replaceWith(t.objectExpression([
+        const component = [
           t.objectProperty(t.identifier('kind'), t.stringLiteral('jsx')),
           t.objectProperty(t.identifier('type'), t.stringLiteral(componentName)),
           t.objectProperty(t.identifier('props'), t.objectExpression(props)),
-          t.objectProperty(t.identifier('children'), t.arrayExpression(children)),
+        ];
-        ]));
+        if (children.length)
+          component.push(t.objectProperty(t.identifier('children'), t.arrayExpression(children)));
+
+        path.replaceWith(t.objectExpression(component));
       }
     }
   };

packages/playwright-ct-core/types/component.d.ts

@@ -25,7 +25,7 @@ export type JsxComponent = {
   kind: 'jsx',
   type: string,
   props: Record<string, any>,
-  children: JsxComponentChild[],
+  children?: JsxComponentChild[],
 };
 
 export type MountOptions = {

packages/playwright-ct-react/registerSource.mjs

@@ -71,7 +71,7 @@ async function __pwResolveComponent(component) {
   if (componentFactory)
     __pwRegistry.set(component.type, await componentFactory());
 
-  if ('children' in component)
+  if (component.children?.length)
     await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
@@ -91,7 +91,7 @@ function __renderChild(child) {
  */
 function __pwRender(component) {
   const componentFunc = __pwRegistry.get(component.type);
-  const children = component.children.map(child => __renderChild(child)).filter(child => {
+  const children = component.children?.map(child => __renderChild(child)).filter(child => {
     if (typeof child === 'string')
       return !!child.trim();
     return true;

packages/playwright-ct-react17/registerSource.mjs

@@ -70,7 +70,7 @@ async function __pwResolveComponent(component) {
   if (componentFactory)
     __pwRegistry.set(component.type, await componentFactory());
 
-  if ('children' in component)
+  if (component.children?.length)
     await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
@@ -90,7 +90,7 @@ function __renderChild(child) {
  */
 function __pwRender(component) {
   const componentFunc = __pwRegistry.get(component.type);
-  const children = component.children.map(child => __renderChild(child)).filter(child => {
+  const children = component.children?.map(child => __renderChild(child)).filter(child => {
     if (typeof child === 'string')
       return !!child.trim();
     return true;

packages/playwright-ct-solid/registerSource.mjs

@@ -69,7 +69,7 @@ async function __pwResolveComponent(component) {
   if (componentFactory)
     __pwRegistry.set(component.type, await componentFactory());
 
-  if ('children' in component)
+  if (component.children?.length)
     await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
@@ -89,7 +89,7 @@ function __pwCreateChild(child) {
  */
 function __pwCreateComponent(component) {
   const componentFunc = __pwRegistry.get(component.type);
-  const children = component.children.map(child => __pwCreateChild(child)).filter(child => {
+  const children = component.children?.map(child => __pwCreateChild(child)).filter(child => {
     if (typeof child === 'string')
       return !!child.trim();
     return true;

packages/playwright-ct-vue/registerSource.mjs

@@ -72,7 +72,7 @@ async function __pwResolveComponent(component) {
   if (componentFactory)
     __pwRegistry.set(component.type, await componentFactory());
 
-  if ('children' in component)
+  if ('children' in component && component.children?.length)
     await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
@@ -156,7 +156,7 @@ function __pwCreateComponent(component) {
       if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
         const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
         const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
-        slots[slot] = child.children.map(__pwCreateChild);
+        slots[slot] = child.children?.map(__pwCreateChild);
       } else {
         children.push(__pwCreateChild(child));
       }

packages/playwright-ct-vue2/registerSource.mjs

@@ -71,7 +71,7 @@ async function __pwResolveComponent(component) {
   if (componentFactory)
     __pwRegistry.set(component.type, await componentFactory());
 
-  if ('children' in component)
+  if ('children' in component && component.children?.length)
     await Promise.all(component.children.map(child => __pwResolveComponent(child)));
 }
 
@@ -124,7 +124,7 @@ function __pwCreateComponent(component) {
       if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
         const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
         const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
-        nodeData.scopedSlots[slot] = () => child.children.map(c => __pwCreateChild(c));
+        nodeData.scopedSlots[slot] = () => child.children?.map(c => __pwCreateChild(c));
       } else {
         children.push(__pwCreateChild(child));
       }

tests/components/ct-react-vite/src/components/EmptyFragment.tsx

@@ -1,3 +1,4 @@
-export default function EmptyFragment() {
+export default function EmptyFragment(props: unknown) {
+  Object.assign(window, { props });
   return <>{[]}</>;
 }

tests/components/ct-react-vite/tests/render.spec.tsx

@@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
   await expect(component).toHaveClass('primary');
 });
 
-test('get textContent of the empty fragment', async ({ mount }) => {
+test('render an empty component', async ({ mount, page }) => {
   const component = await mount(<EmptyFragment />);
+  expect(await page.evaluate(() => 'props' in window && window.props)).toEqual({});
   expect(await component.allTextContents()).toEqual(['']);
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');

tests/components/ct-react17/src/components/EmptyFragment.tsx

@@ -1,3 +1,4 @@
-export default function EmptyFragment() {
+export default function EmptyFragment(props: unknown) {
+  Object.assign(window, { props });
   return <>{[]}</>;
 }

tests/components/ct-react17/tests/render.spec.tsx

@@ -20,8 +20,9 @@ test('render delayed data', async ({ mount }) => {
   await expect(component).toHaveText('complete');
 });
 
-test('get textContent of the empty fragment', async ({ mount }) => {
+test('render an empty component', async ({ mount, page }) => {
   const component = await mount(<EmptyFragment />);
+  expect(await page.evaluate(() => 'props' in window && window.props)).toEqual({});
   expect(await component.allTextContents()).toEqual(['']);
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');

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

@@ -1,3 +1,4 @@
-export default function EmptyFragment() {
+export default function EmptyFragment(props: unknown) {
+  Object.assign(window, { props });
   return <>{[]}</>;
 }

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

@@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
   await expect(component).toHaveClass('primary');
 });
 
-test('get textContent of the empty fragment', async ({ mount }) => {
+test('render an empty component', async ({ mount, page }) => {
   const component = await mount(<EmptyFragment />);
+  expect(await page.evaluate(() => 'props' in window && window.props)).toEqual({});
   expect(await component.allTextContents()).toEqual(['']);
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');

tests/components/ct-vue-cli/src/components/EmptyTemplate.vue

@@ -1,2 +1,8 @@
+<script lang="ts" setup>
+  import { useSlots } from 'vue';
+  const slots = useSlots();
+  Object.assign(window, { slots });
+</script>
 <template>
-</template>
+</template>
+

tests/components/ct-vue-cli/tests/render/render.spec.tsx

@@ -7,8 +7,9 @@ test('render props', async ({ mount }) => {
   await expect(component).toContainText('Submit');
 });
 
-test('get textContent of the empty template', async ({ mount }) => {
+test('render an empty component', async ({ page, mount }) => {
   const component = await mount(<EmptyTemplate />);
+  expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
   expect(await component.allTextContents()).toEqual(['']);
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');

tests/components/ct-vue-vite/src/components/EmptyTemplate.vue

@@ -1,2 +1,7 @@
+<script lang="ts" setup>
+  import { useSlots } from 'vue';
+  const slots = useSlots();
+  Object.assign(window, { slots });
+</script>
 <template>
-</template>
+</template>

tests/components/ct-vue-vite/tests/render/render.spec.tsx

@@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
   await expect(component).toHaveClass('primary');
 });
 
-test('get textContent of the empty template', async ({ mount }) => {
+test('render an empty component', async ({ page, mount }) => {
   const component = await mount(<EmptyTemplate />);
+  expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
   expect(await component.allTextContents()).toEqual(['']);
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');

tests/components/ct-vue2-cli/src/components/EmptyTemplate.vue

@@ -1,2 +1,8 @@
+<script lang="ts" setup>
+  import { useSlots } from 'vue';
+  const slots = useSlots();
+  Object.assign(window, { slots });
+</script>
 <template>
-</template>
+</template>
+

tests/components/ct-vue2-cli/tests/render/render.spec.tsx

@@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
   await expect(component).toHaveClass('primary');
 });
 
-test('get textContent of the empty template', async ({ mount }) => {
+test('render an empty component', async ({ page, mount }) => {
   const component = await mount(<EmptyTemplate />);
+  expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
   expect(await component.allTextContents()).toEqual(['']);
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');