feat(ct): resolve hooksConfig import refs

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

@@ -102,6 +102,7 @@ async function innerMount(page: Page, componentRef: JsxComponent | ImportRef, op
 
   const selector = await page.evaluate(async ({ component, hooksConfig }) => {
     component = await window.__pwUnwrapObject(component);
+    hooksConfig = await window.__pwUnwrapObject(hooksConfig);
     let rootElement = document.getElementById('root');
     if (!rootElement) {
       rootElement = document.createElement('div');

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

@@ -14,10 +14,9 @@
  * limitations under the License.
  */
 
-type JsonPrimitive = string | number | boolean | null;
+export interface RegisterHooksConfig {
-type JsonValue = JsonPrimitive | JsonObject | JsonArray;
+
-type JsonArray = JsonValue[];
+};
-export type JsonObject = { [Key in string]?: JsonValue };
 
 export type JsxComponent = {
   __pw_type: 'jsx',
@@ -47,10 +46,10 @@ declare global {
     playwrightMount(component: Component, rootElement: Element, hooksConfig?: any): Promise<void>;
     playwrightUnmount(rootElement: Element): Promise<void>;
     playwrightUpdate(rootElement: Element, component: Component): Promise<void>;
-    __pw_hooks_before_mount?: (<HooksConfig extends JsonObject = JsonObject>(
+    __pw_hooks_before_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<any>)[];
-    __pw_hooks_after_mount?: (<HooksConfig extends JsonObject = JsonObject>(
+    __pw_hooks_after_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
     // Can't start with __pw due to core reuse bindings logic for __pw*.

packages/playwright-ct-vue/hooks.d.ts

@@ -15,12 +15,13 @@
  */
 
 import type { App, ComponentPublicInstance } from 'vue';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
 
-export declare function beforeMount<HooksConfig extends JsonObject>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { app: App; hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: {
     app: App;
     hooksConfig?: HooksConfig;

packages/playwright-ct-vue/index.d.ts

@@ -15,7 +15,7 @@
  */
 
 import type { Locator } from 'playwright/test';
-import type { JsonObject } from '@playwright/experimental-ct-core/types/component';
+import type { RegisterHooksConfig } from './hooks';
 import type { TestType } from '@playwright/experimental-ct-core';
 
 type ComponentSlot = string | string[];
@@ -29,14 +29,14 @@ type ComponentProps<T> =
 	T extends (props: infer P, ...args: any) => any ? P :
 	{};
 
-export interface MountOptions<HooksConfig extends JsonObject, Component> {
+export interface MountOptions<Component, HooksConfig extends RegisterHooksConfig> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountOptionsJsx<HooksConfig extends JsonObject> {
+export interface MountOptionsJsx<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -55,13 +55,13 @@ export interface MountResultJsx extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options: MountOptionsJsx<HooksConfig>
   ): Promise<MountResultJsx>;
-  mount<HooksConfig extends JsonObject, Component = unknown>(
+  mount<Component = unknown, HooksConfig extends RegisterHooksConfig>(
     component: Component,
-    options?: MountOptions<HooksConfig, Component>
+    options?: MountOptions<Component, HooksConfig>
   ): Promise<MountResult<Component>>;
 }>;
 

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

@@ -1,20 +1,22 @@
 import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
 import { router } from '../src/router';
-import Button from '../src/components/Button.vue';
 import '../src/assets/index.css';
 
-export type HooksConfig = {
+declare module '@playwright/experimental-ct-vue/hooks' {
-  route?: string;
+  interface RegisterHooksConfig {
-  routing?: boolean;
+    routing?: boolean;
+    components?: Record<string, any>;
+  }
 }
 
-beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
+beforeMount(async ({ app, hooksConfig }) => {
-  if (hooksConfig?.routing) 
+  if (hooksConfig?.routing)
     app.use(router as any); // TODO: remove any and fix the various installed conflicting Vue versions
-  app.component('Button', Button);
+
-  console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
+  for (const [name, component] of Object.entries(hooksConfig?.components || {}))
+    app.component(name, component);
 });
 
-afterMount<HooksConfig>(async ({ instance }) => {
+afterMount(async ({ instance }) => {
   console.log(`After mount el: ${instance.$el.constructor.name}`);
 });

tests/components/ct-vue-vite/tests/slots/slots.spec.ts

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
+import Button from '@/components/Button.vue';
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -14,8 +15,11 @@ test('render a default slot', async ({ mount }) => {
 test('render a component as slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: '<Button title="Submit" />', // component is registered globally in /playwright/index.ts
+      default: '<Button title="Submit" />',
     },
+    hooksConfig: {
+      components: { Button }
+    }
   });
   await expect(component).toContainText('Submit');
 });

tests/components/ct-vue-vite/tests/vue-router/vue-router.spec.ts

@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
-import type { HooksConfig } from '../../playwright';
 import App from '@/App.vue';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(App, {
+  const component = await mount(App, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');

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

@@ -1,9 +1,8 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
-import type { HooksConfig } from '../../playwright';
 import App from '@/App.vue';
 
 test('navigate to a page by clicking a link', async ({ page, mount }) => {
-  const component = await mount<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     hooksConfig: { routing: true },
   });
   await expect(component.getByRole('main')).toHaveText('Login');