test(ct): component as slot (#18090)

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

@@ -70,6 +70,13 @@ test('render a default child', async ({ mount }) => {
   await expect(component).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>
+    <Button title="Submit" />
+  </DefaultChildren>)
+  await expect(component).toContainText('Submit')
+});
+
 test('render multiple children', async ({ mount }) => {
   const component = await mount(<DefaultChildren>
     <div id="one">One</div>

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

@@ -73,6 +73,13 @@ test('render a default child', async ({ mount }) => {
   await expect(component).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>
+    <Button title="Submit" />
+  </DefaultChildren>)
+  await expect(component).toContainText('Submit')
+})
+
 test('render multiple children', async ({ mount }) => {
   const component = await mount(<DefaultChildren>
     <div id="one">One</div>

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

@@ -98,6 +98,14 @@ test('render multiple children', async ({ mount }) => {
   await expect(component.locator('#two')).toContainText('Two');
 });
 
+
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(<DefaultChildren>
+    <Button title="Submit" />
+  </DefaultChildren>)
+  await expect(component).toContainText('Submit')
+});
+
 test('render named children', async ({ mount }) => {
   const component = await mount(
     <MultipleChildren>

tests/components/ct-vue-cli/src/notation-jsx.spec.tsx

@@ -46,6 +46,13 @@ test('render a default slot', async ({ mount }) => {
   await expect(component).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(<DefaultSlot>
+    <Button title="Submit" />
+  </DefaultSlot>)
+  await expect(component).toContainText('Submit')
+});
+
 test('render a component with multiple children', async ({ mount }) => {
   const component = await mount(<DefaultSlot>
     <div id="one">One</div>

tests/components/ct-vue-vite/src/notation-jsx.spec.tsx

@@ -75,6 +75,13 @@ test('render a default slot', async ({ mount }) => {
   await expect(component.getByRole('strong')).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(<DefaultSlot>
+    <Button title="Submit" />
+  </DefaultSlot>)
+  await expect(component).toContainText('Submit')
+});
+
 test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(<DefaultSlot>
     <div data-testid="one">One</div>

tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx

@@ -76,6 +76,13 @@ test('render a default slot', async ({ mount }) => {
   await expect(component).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount }) => {
+  const component = await mount(<DefaultSlot>
+    <Button title="Submit" />
+  </DefaultSlot>)
+  await expect(component).toContainText('Submit')
+});
+
 test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(<DefaultSlot>
     <div id="one">One</div>