diff --git a/packages/playwright-ct-core/types/component.d.ts b/packages/playwright-ct-core/types/component.d.ts index fc8d0eef58394..9593431cd240e 100644 --- a/packages/playwright-ct-core/types/component.d.ts +++ b/packages/playwright-ct-core/types/component.d.ts @@ -14,10 +14,6 @@ * limitations under the License. */ -export interface RegisterHooksConfig { - -}; - export type JsxComponent = { __pw_type: 'jsx', type: any, @@ -46,15 +42,15 @@ declare global { playwrightMount(component: Component, rootElement: Element, hooksConfig?: any): Promise; playwrightUnmount(rootElement: Element): Promise; playwrightUpdate(rootElement: Element, component: Component): Promise; - __pw_hooks_before_mount?: (( + __pw_hooks_before_mount?: (( params: { hooksConfig?: HooksConfig; [key: string]: any } ) => Promise)[]; - __pw_hooks_after_mount?: (( + __pw_hooks_after_mount?: (( params: { hooksConfig?: HooksConfig; [key: string]: any } ) => Promise)[]; // Can't start with __pw due to core reuse bindings logic for __pw*. - __ctDispatchFunction: (ordinal: number, args: any[]) => void; - __pwUnwrapObject: (value: any) => Promise; - __pwTransformObject: (value: any, mapping: (v: any) => { result: any } | undefined) => any; + __ctDispatchFunction(ordinal: number, args: any[]): void; + __pwUnwrapObject(value: any): Promise; + __pwTransformObject(value: any, mapping: (v: any) => { result: any } | undefined): any; } } diff --git a/packages/playwright-ct-react/hooks.d.ts b/packages/playwright-ct-react/hooks.d.ts index 0fa7cf3e1ac5c..16015a4ad0fd7 100644 --- a/packages/playwright-ct-react/hooks.d.ts +++ b/packages/playwright-ct-react/hooks.d.ts @@ -14,11 +14,11 @@ * limitations under the License. */ -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; +export interface RegisterHooksConfig {} -export declare function beforeMount( +export declare function beforeMount( callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise ): void; -export declare function afterMount( +export declare function afterMount( callback: (params: { hooksConfig?: HooksConfig }) => Promise ): void; diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts index 7cfcf04ba0750..d670d839071e4 100644 --- a/packages/playwright-ct-react/index.d.ts +++ b/packages/playwright-ct-react/index.d.ts @@ -15,10 +15,10 @@ */ import type { Locator } from 'playwright/test'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; import type { TestType } from '@playwright/experimental-ct-core'; +import type { RegisterHooksConfig } from './hooks'; -export interface MountOptions { +export interface MountOptions { hooksConfig?: HooksConfig; } @@ -28,7 +28,7 @@ export interface MountResult extends Locator { } export const test: TestType<{ - mount( + mount( component: JSX.Element, options?: MountOptions ): Promise; diff --git a/packages/playwright-ct-react17/hooks.d.ts b/packages/playwright-ct-react17/hooks.d.ts index 0fa7cf3e1ac5c..16015a4ad0fd7 100644 --- a/packages/playwright-ct-react17/hooks.d.ts +++ b/packages/playwright-ct-react17/hooks.d.ts @@ -14,11 +14,11 @@ * limitations under the License. */ -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; +export interface RegisterHooksConfig {} -export declare function beforeMount( +export declare function beforeMount( callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise ): void; -export declare function afterMount( +export declare function afterMount( callback: (params: { hooksConfig?: HooksConfig }) => Promise ): void; diff --git a/packages/playwright-ct-react17/index.d.ts b/packages/playwright-ct-react17/index.d.ts index 7cfcf04ba0750..6c1c1214ae283 100644 --- a/packages/playwright-ct-react17/index.d.ts +++ b/packages/playwright-ct-react17/index.d.ts @@ -15,10 +15,10 @@ */ import type { Locator } from 'playwright/test'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; import type { TestType } from '@playwright/experimental-ct-core'; +import type { RegisterHooksConfig } from './hooks'; -export interface MountOptions { +export interface MountOptions { hooksConfig?: HooksConfig; } @@ -28,7 +28,7 @@ export interface MountResult extends Locator { } export const test: TestType<{ - mount( + mount( component: JSX.Element, options?: MountOptions ): Promise; diff --git a/packages/playwright-ct-solid/hooks.d.ts b/packages/playwright-ct-solid/hooks.d.ts index 38d483ec6d7fa..d095e13f307e2 100644 --- a/packages/playwright-ct-solid/hooks.d.ts +++ b/packages/playwright-ct-solid/hooks.d.ts @@ -14,12 +14,13 @@ * limitations under the License. */ -import { JSXElement } from "solid-js"; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; +import type { JSXElement } from 'solid-js'; -export declare function beforeMount( +export interface RegisterHooksConfig {} + +export declare function beforeMount( callback: (params: { hooksConfig?: HooksConfig, App: () => JSXElement }) => Promise ): void; -export declare function afterMount( +export declare function afterMount( callback: (params: { hooksConfig?: HooksConfig }) => Promise ): void; diff --git a/packages/playwright-ct-solid/index.d.ts b/packages/playwright-ct-solid/index.d.ts index 7cfcf04ba0750..6c1c1214ae283 100644 --- a/packages/playwright-ct-solid/index.d.ts +++ b/packages/playwright-ct-solid/index.d.ts @@ -15,10 +15,10 @@ */ import type { Locator } from 'playwright/test'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; import type { TestType } from '@playwright/experimental-ct-core'; +import type { RegisterHooksConfig } from './hooks'; -export interface MountOptions { +export interface MountOptions { hooksConfig?: HooksConfig; } @@ -28,7 +28,7 @@ export interface MountResult extends Locator { } export const test: TestType<{ - mount( + mount( component: JSX.Element, options?: MountOptions ): Promise; diff --git a/packages/playwright-ct-svelte/hooks.d.ts b/packages/playwright-ct-svelte/hooks.d.ts index 03f801c3385bf..c819fa2f07199 100644 --- a/packages/playwright-ct-svelte/hooks.d.ts +++ b/packages/playwright-ct-svelte/hooks.d.ts @@ -15,15 +15,16 @@ */ import type { ComponentConstructorOptions, SvelteComponent } from 'svelte'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; -export declare function beforeMount( +export interface RegisterHooksConfig {} + +export declare function beforeMount( callback: (params: { hooksConfig?: HooksConfig, App: new (options: Partial) => SvelteComponent }) => Promise ): void; -export declare function afterMount( +export declare function afterMount( callback: (params: { hooksConfig?: HooksConfig; svelteComponent: SvelteComponent; diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts index bd1ddd5b366f2..ee2c22c3f7031 100644 --- a/packages/playwright-ct-svelte/index.d.ts +++ b/packages/playwright-ct-svelte/index.d.ts @@ -15,15 +15,15 @@ */ import type { Locator } from 'playwright/test'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime'; import type { TestType } from '@playwright/experimental-ct-core'; +import type { RegisterHooksConfig } from './hooks'; type ComponentSlot = string | string[]; type ComponentSlots = Record & { default?: ComponentSlot }; type ComponentEvents = Record; -export interface MountOptions { +export interface MountOptions { props?: ComponentProps; slots?: ComponentSlots; on?: ComponentEvents; @@ -39,9 +39,9 @@ export interface MountResult extends Locator } export const test: TestType<{ - mount( + mount( component: new (...args: any[]) => Component, - options?: MountOptions + options?: MountOptions ): Promise>; }>; diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts index 0afd1dfed2618..9c5f40a2d9d11 100644 --- a/packages/playwright-ct-vue/index.d.ts +++ b/packages/playwright-ct-vue/index.d.ts @@ -59,7 +59,7 @@ export const test: TestType<{ component: JSX.Element, options: MountOptionsJsx ): Promise; - mount( + mount( component: Component, options?: MountOptions ): Promise>; diff --git a/packages/playwright-ct-vue2/hooks.d.ts b/packages/playwright-ct-vue2/hooks.d.ts index 4c3a391117fb0..cb31f97cf5fe8 100644 --- a/packages/playwright-ct-vue2/hooks.d.ts +++ b/packages/playwright-ct-vue2/hooks.d.ts @@ -14,17 +14,18 @@ * limitations under the License. */ -import { ComponentOptions } from 'vue'; -import { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; +import type { ComponentOptions } from 'vue'; +import type { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue'; -export declare function beforeMount( - callback: (params: { - hooksConfig?: HooksConfig, - Vue: VueConstructor, +export interface RegisterHooksConfig {} + +export declare function beforeMount( + callback: (params: { + hooksConfig?: HooksConfig, + Vue: VueConstructor, }) => Promise & Record> ): void; -export declare function afterMount( +export declare function afterMount( callback: (params: { hooksConfig?: HooksConfig; instance: CombinedVueInstance< diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts index f76285fb8f1e8..b900b5eefce3d 100644 --- a/packages/playwright-ct-vue2/index.d.ts +++ b/packages/playwright-ct-vue2/index.d.ts @@ -15,8 +15,8 @@ */ import type { Locator } from 'playwright/test'; -import type { JsonObject } from '@playwright/experimental-ct-core/types/component'; import type { TestType } from '@playwright/experimental-ct-core'; +import type { RegisterHooksConfig } from './hooks'; type Slot = string | string[]; type ComponentSlots = Record & { default?: Slot }; @@ -29,14 +29,14 @@ type ComponentProps = T extends (props: infer P, ...args: any) => any ? P : {}; -export interface MountOptions { +export interface MountOptions { props?: ComponentProps; slots?: ComponentSlots; on?: ComponentEvents; hooksConfig?: HooksConfig; } -export interface MountOptionsJsx { +export interface MountOptionsJsx { hooksConfig?: HooksConfig; } @@ -55,13 +55,13 @@ export interface MountResultJsx extends Locator { } export const test: TestType<{ - mount( + mount( component: JSX.Element, options?: MountOptionsJsx ): Promise; - mount( + mount( component: Component, - options?: MountOptions + options?: MountOptions ): Promise>; }>; diff --git a/tests/components/ct-react-vite/playwright/index.tsx b/tests/components/ct-react-vite/playwright/index.tsx index fa0563dbcdf9d..9054dedfd231c 100644 --- a/tests/components/ct-react-vite/playwright/index.tsx +++ b/tests/components/ct-react-vite/playwright/index.tsx @@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks import { BrowserRouter } from 'react-router-dom'; import '../src/assets/index.css'; -export type HooksConfig = { - route?: string; - routing?: boolean; +declare module '@playwright/experimental-ct-react/hooks' { + interface RegisterHooksConfig { + routing?: boolean; + } } -beforeMount(async ({ hooksConfig, App }) => { +beforeMount(async ({ hooksConfig, App }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); if (hooksConfig?.routing) return ; }); -afterMount(async () => { +afterMount(async () => { console.log(`After mount`); }); diff --git a/tests/components/ct-react-vite/tests/react-router.spec.tsx b/tests/components/ct-react-vite/tests/react-router.spec.tsx index 939154e9d49e3..534db1c2e1e08 100644 --- a/tests/components/ct-react-vite/tests/react-router.spec.tsx +++ b/tests/components/ct-react-vite/tests/react-router.spec.tsx @@ -1,9 +1,8 @@ import { test, expect } from '@playwright/experimental-ct-react'; import App from '@/App'; -import type { HooksConfig } from '../playwright'; test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(, { + const component = await mount(, { hooksConfig: { routing: true }, }); await expect(component.getByRole('main')).toHaveText('Login'); @@ -13,8 +12,8 @@ test('navigate to a page by clicking a link', async ({ page, mount }) => { await expect(page).toHaveURL('/dashboard'); }); -test('update should not reset mount hooks', async ({ page, mount }) => { - const component = await mount(, { +test('update should not reset mount hooks', async ({ mount }) => { + const component = await mount(, { hooksConfig: { routing: true }, }); await expect(component.getByRole('heading')).toHaveText('before'); diff --git a/tests/components/ct-react-vite/tsconfig.json b/tests/components/ct-react-vite/tsconfig.json index e706497adb7fe..5e7831dc7bded 100644 --- a/tests/components/ct-react-vite/tsconfig.json +++ b/tests/components/ct-react-vite/tsconfig.json @@ -21,6 +21,5 @@ "*": ["_"], } }, - "include": ["src", "tests"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tests/components/ct-react17/playwright/index.tsx b/tests/components/ct-react17/playwright/index.tsx index eb152a3558bbe..f3d9aae75b1b7 100644 --- a/tests/components/ct-react17/playwright/index.tsx +++ b/tests/components/ct-react17/playwright/index.tsx @@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-react17/hoo import { BrowserRouter } from 'react-router-dom'; import '../src/assets/index.css'; -export type HooksConfig = { - route?: string; - routing?: boolean; +declare module '@playwright/experimental-ct-react17/hooks' { + interface RegisterHooksConfig { + routing?: boolean; + } } -beforeMount(async ({ hooksConfig, App }) => { +beforeMount(async ({ hooksConfig, App }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); if (hooksConfig?.routing) return ; }); -afterMount(async () => { +afterMount(async () => { console.log(`After mount`); }); diff --git a/tests/components/ct-react17/tests/react-router.spec.tsx b/tests/components/ct-react17/tests/react-router.spec.tsx index 73c4a50c7e4f5..52fccc0dbc85a 100644 --- a/tests/components/ct-react17/tests/react-router.spec.tsx +++ b/tests/components/ct-react17/tests/react-router.spec.tsx @@ -1,9 +1,8 @@ import { test, expect } from '@playwright/experimental-ct-react17'; import App from '@/App'; -import type { HooksConfig } from '../playwright'; test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(, { + const component = await mount(, { hooksConfig: { routing: true }, }); await expect(component.getByRole('main')).toHaveText('Login'); @@ -14,7 +13,7 @@ test('navigate to a page by clicking a link', async ({ page, mount }) => { }); test('update should not reset mount hooks', async ({ page, mount }) => { - const component = await mount(, { + const component = await mount(, { hooksConfig: { routing: true }, }); await expect(component.getByRole('heading')).toHaveText('before'); diff --git a/tests/components/ct-react17/tsconfig.json b/tests/components/ct-react17/tsconfig.json index 48864aeb82bcd..e90f25b628cd9 100644 --- a/tests/components/ct-react17/tsconfig.json +++ b/tests/components/ct-react17/tsconfig.json @@ -25,8 +25,4 @@ "*": ["_"], } }, - "include": [ - "src", - "tests" - ] } diff --git a/tests/components/ct-solid/playwright/index.tsx b/tests/components/ct-solid/playwright/index.tsx index de3eea3285f5a..3871702a9ca1b 100644 --- a/tests/components/ct-solid/playwright/index.tsx +++ b/tests/components/ct-solid/playwright/index.tsx @@ -2,18 +2,19 @@ import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks import { Router } from "@solidjs/router"; import '../src/assets/index.css'; -export type HooksConfig = { - route?: string; - routing?: boolean; +declare module '@playwright/experimental-ct-solid/hooks' { + interface RegisterHooksConfig { + routing?: boolean; + } } -beforeMount(async ({ hooksConfig, App }) => { +beforeMount(async ({ hooksConfig, App }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); if (hooksConfig?.routing) return ; }); -afterMount(async () => { +afterMount(async () => { console.log(`After mount`); }); diff --git a/tests/components/ct-solid/tests/solid-router.spec.tsx b/tests/components/ct-solid/tests/solid-router.spec.tsx index 60f8f24367896..24bfa3b32bff9 100644 --- a/tests/components/ct-solid/tests/solid-router.spec.tsx +++ b/tests/components/ct-solid/tests/solid-router.spec.tsx @@ -1,9 +1,8 @@ import { test, expect } from '@playwright/experimental-ct-solid'; import App from '@/App'; -import type { HooksConfig } from '../playwright'; test('navigate to a page by clicking a link', async ({ page, mount }) => { - const component = await mount(, { + const component = await mount(, { hooksConfig: { routing: true }, }); await expect(component.getByRole('main')).toHaveText('Login'); diff --git a/tests/components/ct-svelte-vite/playwright/index.ts b/tests/components/ct-svelte-vite/playwright/index.ts index dcbcd47225bd0..e6d176bc1d407 100644 --- a/tests/components/ct-svelte-vite/playwright/index.ts +++ b/tests/components/ct-svelte-vite/playwright/index.ts @@ -1,13 +1,13 @@ import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks'; -export type HooksConfig = { - context?: string; - route?: string; +declare module '@playwright/experimental-ct-svelte/hooks' { + interface RegisterHooksConfig { + context?: string; + } } -beforeMount(async ({ hooksConfig, App }) => { - console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); +beforeMount(async ({ hooksConfig, App }) => { return new App({ context: new Map([ ['context-key', hooksConfig?.context] @@ -15,6 +15,6 @@ beforeMount(async ({ hooksConfig, App }) => { }); }); -afterMount(async () => { +afterMount(async () => { console.log(`After mount`); }); diff --git a/tests/components/ct-svelte-vite/tests/render.spec.ts b/tests/components/ct-svelte-vite/tests/render.spec.ts index bf830dd7152a8..b382fa879c442 100644 --- a/tests/components/ct-svelte-vite/tests/render.spec.ts +++ b/tests/components/ct-svelte-vite/tests/render.spec.ts @@ -1,5 +1,4 @@ import { test, expect } from '@playwright/experimental-ct-svelte'; -import type { HooksConfig } from '../playwright'; import Button from '@/components/Button.svelte'; import Empty from '@/components/Empty.svelte'; import Context from '@/components/Context.svelte'; @@ -21,7 +20,7 @@ test('get textContent of the empty component', async ({ mount }) => { }); test('render context', async ({ mount }) => { - const component = await mount(Context, { + const component = await mount(Context, { hooksConfig: { context: 'context-value', } diff --git a/tests/components/ct-svelte-vite/tsconfig.json b/tests/components/ct-svelte-vite/tsconfig.json index 4dc15b75b04c0..ddad149c68704 100644 --- a/tests/components/ct-svelte-vite/tsconfig.json +++ b/tests/components/ct-svelte-vite/tsconfig.json @@ -21,6 +21,5 @@ "*": ["_"], } }, - "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte", "src/**/*.spec.*/*", "tests/**/*.ts"], "references": [{ "path": "./tsconfig.node.json" }] } diff --git a/tests/components/ct-svelte/playwright/index.ts b/tests/components/ct-svelte/playwright/index.ts index fe89c98e10d87..7ea357ae6802c 100644 --- a/tests/components/ct-svelte/playwright/index.ts +++ b/tests/components/ct-svelte/playwright/index.ts @@ -2,14 +2,16 @@ import '../src/assets/index.css'; import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks'; -export type HooksConfig = { - route: string; +declare module '@playwright/experimental-ct-svelte/hooks' { + interface RegisterHooksConfig { + route?: string; + } } -beforeMount(async ({ hooksConfig }) => { +beforeMount(async ({ hooksConfig }) => { console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); }); - -afterMount(async () => { + +afterMount(async () => { console.log(`After mount`); }); diff --git a/tests/components/ct-vue-cli/playwright/index.ts b/tests/components/ct-vue-cli/playwright/index.ts index 8940db58b8167..3a0c79be5aba2 100644 --- a/tests/components/ct-vue-cli/playwright/index.ts +++ b/tests/components/ct-vue-cli/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 = { - route?: string; - routing?: boolean; +declare module '@playwright/experimental-ct-vue/hooks' { + interface RegisterHooksConfig { + routing?: boolean; + components?: Record; + } } -beforeMount(async ({ app, hooksConfig }) => { +beforeMount(async ({ app, hooksConfig }) => { if (hooksConfig?.routing) app.use(router as any); - 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(async ({ instance }) => { +afterMount(async ({ instance }) => { console.log(`After mount el: ${instance.$el.constructor.name}`); }); diff --git a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts b/tests/components/ct-vue-cli/tests/slots/slots.spec.ts index 2af38036b593d..ca0a92ff7a43c 100644 --- a/tests/components/ct-vue-cli/tests/slots/slots.spec.ts +++ b/tests/components/ct-vue-cli/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,7 +15,10 @@ test('render a default slot', async ({ mount }) => { test('render a component as slot', async ({ mount }) => { const component = await mount(DefaultSlot, { slots: { - default: '