feat(ct): vue3 ts api component as slot (#18425)

packages/playwright-ct-vue/registerSource.mjs

@@ -223,9 +223,12 @@ const appKey = Symbol('appKey');
 const wrapperKey = Symbol('wrapperKey');
 
 window.playwrightMount = async (component, rootElement, hooksConfig) => {
-  const wrapper = createWrapper(component);
   const app = createApp({
-    render: () => wrapper
+    render: () => {
+      const wrapper = createWrapper(component);
+      rootElement[wrapperKey] = wrapper;
+      return wrapper;
+    }
   });
   setDevtoolsHook(createDevTools(), {});
 
@@ -233,7 +236,6 @@ window.playwrightMount = async (component, rootElement, hooksConfig) => {
     await hook({ app, hooksConfig });
   const instance = app.mount(rootElement);
   rootElement[appKey] = app;
-  rootElement[wrapperKey] = wrapper;
 
   for (const hook of /** @type {any} */(window).__pw_hooks_after_mount || [])
     await hook({ app, hooksConfig, instance });

tests/components/ct-vue-vite/playwright/index.ts

@@ -1,12 +1,13 @@
-//@ts-check
-import '../src/assets/index.css';
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
+import Button from '../src/components/Button.vue';
+import '../src/assets/index.css';
 
 export type HooksConfig = {
   route: string;
 }
 
 beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
+  app.component('Button', Button);
   console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
 });
 

tests/components/ct-vue-vite/src/notation-vue.spec.js

@@ -87,6 +87,15 @@ test('render a default slot', async ({ mount }) => {
   await expect(component.getByRole('strong')).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount, page }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<Button title="Submit" />',
+    },
+  })  
+  await expect(component).toContainText('Submit')
+})
+
 test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {

tests/components/ct-vue-vite/src/notation-vue.spec.ts

@@ -88,6 +88,15 @@ test('render a default slot', async ({ mount }) => {
   await expect(component.getByRole('strong')).toContainText('Main Content')
 })
 
+test('render a component as slot', async ({ mount, page }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: '<Button title="Submit" />',
+    },
+  })  
+  await expect(component).toContainText('Submit')
+})
+
 test('render a component with multiple slots', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {

tests/components/ct-vue-vite/tsconfig.app.json

@@ -1,6 +1,6 @@
 {
   "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "playwright"],
   "exclude": ["src/**/*.spec.*/*"],
   "compilerOptions": {
     "composite": true,

tests/components/ct-vue-vite/tsconfig.test.json

@@ -1,7 +1,5 @@
 {
   "extends": "./tsconfig.app.json",
-  "include": ["playwright"],
-  "exclude": [],
   "compilerOptions": {
     "composite": true,
     "lib": [],