feat(ct): typed hooks config (#18003)

This commit is contained in:
sand4rt 2022-10-18 22:04:54 +02:00 committed by GitHub
parent e0ce2a9bc1
commit 49901c8ed7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 226 additions and 98 deletions

View File

@ -18,5 +18,9 @@ type JsonPrimitive = string | number | boolean | null;
type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void; export declare function beforeMount<HooksConfig extends JsonObject>(
export declare function afterMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void; callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
): void;
export declare function afterMount<HooksConfig extends JsonObject>(
callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
): void;

View File

@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig['use'] & {
ctPort?: number, ctPort?: number;
ctTemplateDir?: string, ctTemplateDir?: string;
ctCacheDir?: string, ctCacheDir?: string;
ctViteConfig?: InlineConfig ctViteConfig?: InlineConfig;
} };
}; };
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
@ -39,8 +39,8 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export interface MountOptions { export interface MountOptions<HooksConfig extends JsonObject> {
hooksConfig?: JsonObject; hooksConfig?: HooksConfig;
} }
interface MountResult extends Locator { interface MountResult extends Locator {
@ -49,11 +49,15 @@ interface MountResult extends Locator {
} }
export interface ComponentFixtures { export interface ComponentFixtures {
mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>; mount<HooksConfig extends JsonObject>(
component: JSX.Element,
options?: MountOptions<HooksConfig>
): Promise<MountResult>;
} }
export const test: TestType< export const test: TestType<
PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures, PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
PlaywrightWorkerArgs & PlaywrightWorkerOptions>; PlaywrightWorkerArgs & PlaywrightWorkerOptions
>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

View File

@ -18,5 +18,9 @@ type JsonPrimitive = string | number | boolean | null;
type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void; export declare function beforeMount<HooksConfig extends JsonObject>(
export declare function afterMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void; callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
): void;
export declare function afterMount<HooksConfig extends JsonObject>(
callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
): void;

View File

@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig['use'] & {
ctPort?: number, ctPort?: number;
ctTemplateDir?: string, ctTemplateDir?: string;
ctCacheDir?: string, ctCacheDir?: string;
ctViteConfig?: InlineConfig ctViteConfig?: InlineConfig;
} };
}; };
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
@ -39,8 +39,8 @@ type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export interface MountOptions { export interface MountOptions<HooksConfig extends JsonObject> {
hooksConfig?: JsonObject; hooksConfig?: HooksConfig;
} }
interface MountResult extends Locator { interface MountResult extends Locator {
@ -48,11 +48,15 @@ interface MountResult extends Locator {
} }
export interface ComponentFixtures { export interface ComponentFixtures {
mount(component: JSX.Element, options?: MountOptions): Promise<MountResult>; mount<HooksConfig extends JsonObject>(
component: JSX.Element,
options?: MountOptions<HooksConfig>
): Promise<MountResult>;
} }
export const test: TestType< export const test: TestType<
PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures, PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
PlaywrightWorkerArgs & PlaywrightWorkerOptions>; PlaywrightWorkerArgs & PlaywrightWorkerOptions
>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

View File

@ -14,11 +14,18 @@
* limitations under the License. * limitations under the License.
*/ */
import type { SvelteComponent } from "svelte"; import type { SvelteComponent } from 'svelte';
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void; export declare function beforeMount<HooksConfig extends JsonObject>(
export declare function afterMount(callback: (params: { hooksConfig: JsonObject, svelteComponent: SvelteComponent }) => Promise<void>): void; callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
): void;
export declare function afterMount<HooksConfig extends JsonObject>(
callback: (params: {
hooksConfig: HooksConfig;
svelteComponent: SvelteComponent;
}) => Promise<void>
): void;

View File

@ -24,15 +24,15 @@ import type {
Locator, Locator,
} from '@playwright/test'; } from '@playwright/test';
import type { InlineConfig } from 'vite'; import type { InlineConfig } from 'vite';
import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime' import type { SvelteComponent, ComponentProps } from 'svelte/types/runtime';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig['use'] & {
ctPort?: number, ctPort?: number;
ctTemplateDir?: string, ctTemplateDir?: string;
ctCacheDir?: string, ctCacheDir?: string;
ctViteConfig?: InlineConfig ctViteConfig?: InlineConfig;
} };
}; };
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
@ -42,27 +42,36 @@ type JsonObject = { [Key in string]?: JsonValue };
type Slot = string | string[]; type Slot = string | string[];
export interface MountOptions<Component extends SvelteComponent = SvelteComponent> { export interface MountOptions<
HooksConfig extends JsonObject,
Component extends SvelteComponent
> {
props?: ComponentProps<Component>; props?: ComponentProps<Component>;
slots?: Record<string, Slot> & { default?: Slot }; slots?: Record<string, Slot> & { default?: Slot };
on?: Record<string, Function>; on?: Record<string, Function>;
hooksConfig?: JsonObject; hooksConfig?: HooksConfig;
} }
interface MountResult<Component extends SvelteComponent> extends Locator { interface MountResult<Component extends SvelteComponent> extends Locator {
unmount(): Promise<void>; unmount(): Promise<void>;
update(options: Omit<MountOptions<Component>, 'hooksConfig'|'slots'>): Promise<void> update(
options: Omit<MountOptions<never, Component>, 'hooksConfig' | 'slots'>
): Promise<void>;
} }
interface ComponentFixtures { interface ComponentFixtures {
mount<Component extends SvelteComponent>( mount<
HooksConfig extends JsonObject,
Component extends SvelteComponent = SvelteComponent
>(
component: new (...args: any[]) => Component, component: new (...args: any[]) => Component,
options?: MountOptions<Component> options?: MountOptions<HooksConfig, Component>
): Promise<MountResult<Component>>; ): Promise<MountResult<Component>>;
} }
export const test: TestType< export const test: TestType<
PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures, PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
PlaywrightWorkerArgs & PlaywrightWorkerOptions>; PlaywrightWorkerArgs & PlaywrightWorkerOptions
>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

View File

@ -14,11 +14,19 @@
* limitations under the License. * limitations under the License.
*/ */
import { App, ComponentPublicInstance } from 'vue'; import type { App, ComponentPublicInstance } from 'vue';
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export declare function beforeMount(callback: (params: { app: App, hooksConfig: JsonObject }) => Promise<void>): void; export declare function beforeMount<HooksConfig extends JsonObject>(
export declare function afterMount(callback: (params: { app: App, hooksConfig: JsonObject, instance: ComponentPublicInstance }) => Promise<void>): void; callback: (params: { app: App; hooksConfig: HooksConfig }) => Promise<void>
): void;
export declare function afterMount<HooksConfig extends JsonObject>(
callback: (params: {
app: App;
hooksConfig: HooksConfig;
instance: ComponentPublicInstance;
}) => Promise<void>
): void;

View File

@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig['use'] & {
ctPort?: number, ctPort?: number;
ctTemplateDir?: string, ctTemplateDir?: string;
ctCacheDir?: string, ctCacheDir?: string;
ctViteConfig?: InlineConfig ctViteConfig?: InlineConfig;
} };
}; };
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
@ -41,31 +41,46 @@ type JsonObject = { [Key in string]?: JsonValue };
type Slot = string | string[]; type Slot = string | string[];
export interface MountOptions<Props = Record<string, unknown>> { export interface MountOptions<
HooksConfig extends JsonObject,
Props extends Record<string, unknown>
> {
props?: Props; props?: Props;
slots?: Record<string, Slot> & { default?: Slot }; slots?: Record<string, Slot> & { default?: Slot };
on?: Record<string, Function>; on?: Record<string, Function>;
hooksConfig?: JsonObject; hooksConfig?: HooksConfig;
} }
interface MountResult<Props = Record<string, unknown>> extends Locator { interface MountResult<
Props extends Record<string, unknown>
> extends Locator {
unmount(): Promise<void>; unmount(): Promise<void>;
update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void> update(options: Omit<MountOptions<never, Props>, 'hooksConfig'>): Promise<void>;
} }
interface MountResultJsx extends Locator { interface MountResultJsx extends Locator {
unmount(): Promise<void>; unmount(): Promise<void>;
update(component: JSX.Element): Promise<void> update(component: JSX.Element): Promise<void>;
} }
export interface ComponentFixtures { export interface ComponentFixtures {
mount(component: JSX.Element): Promise<MountResultJsx>; mount(component: JSX.Element): Promise<MountResultJsx>;
mount(component: any, options?: MountOptions): Promise<MountResult>; mount<HooksConfig extends JsonObject>(
mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult<Props>>; component: any,
options?: MountOptions<HooksConfig, Record<string, unknown>>
): Promise<MountResult<Record<string, unknown>>>;
mount<
HooksConfig extends JsonObject,
Props extends Record<string, unknown> = Record<string, unknown>
>(
component: any,
options: MountOptions<HooksConfig, never> & { props: Props }
): Promise<MountResult<Props>>;
} }
export const test: TestType< export const test: TestType<
PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures, PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
PlaywrightWorkerArgs & PlaywrightWorkerOptions>; PlaywrightWorkerArgs & PlaywrightWorkerOptions
>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

View File

@ -20,5 +20,18 @@ type JsonPrimitive = string | number | boolean | null;
type JsonValue = JsonPrimitive | JsonObject | JsonArray; type JsonValue = JsonPrimitive | JsonObject | JsonArray;
type JsonArray = JsonValue[]; type JsonArray = JsonValue[];
type JsonObject = { [Key in string]?: JsonValue }; type JsonObject = { [Key in string]?: JsonValue };
export declare function beforeMount(callback: (params: { hooksConfig: JsonObject }) => Promise<void>): void; export declare function beforeMount<HooksConfig extends JsonObject>(
export declare function afterMount(callback: (params: { hooksConfig: JsonObject, instance: CombinedVueInstance<Vue, object, object, object, Record<never, any>> }) => Promise<void>): void; callback: (params: { hooksConfig: HooksConfig }) => Promise<void>
): void;
export declare function afterMount<HooksConfig extends JsonObject>(
callback: (params: {
hooksConfig: HooksConfig;
instance: CombinedVueInstance<
Vue,
object,
object,
object,
Record<never, any>
>;
}) => Promise<void>
): void;

View File

@ -27,11 +27,11 @@ import type { InlineConfig } from 'vite';
export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & { export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
use?: BasePlaywrightTestConfig['use'] & { use?: BasePlaywrightTestConfig['use'] & {
ctPort?: number, ctPort?: number;
ctTemplateDir?: string, ctTemplateDir?: string;
ctCacheDir?: string, ctCacheDir?: string;
ctViteConfig?: InlineConfig ctViteConfig?: InlineConfig;
} };
}; };
type JsonPrimitive = string | number | boolean | null; type JsonPrimitive = string | number | boolean | null;
@ -41,31 +41,49 @@ type JsonObject = { [Key in string]?: JsonValue };
type Slot = string | string[]; type Slot = string | string[];
export interface MountOptions<Props = Record<string, unknown>> { export interface MountOptions<
HooksConfig extends JsonObject,
Props extends Record<string, unknown>
> {
props?: Props; props?: Props;
slots?: Record<string, Slot> & { default?: Slot }; slots?: Record<string, Slot> & { default?: Slot };
on?: Record<string, Function>; on?: Record<string, Function>;
hooksConfig?: JsonObject; hooksConfig?: JsonObject;
} }
interface MountResult<Props = Record<string, unknown>> extends Locator { interface MountResult<
HooksConfig extends JsonObject,
Props extends Record<string, unknown>
> extends Locator {
unmount(): Promise<void>; unmount(): Promise<void>;
update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void> update(
options: Omit<MountOptions<HooksConfig, Props>, 'hooksConfig'>
): Promise<void>;
} }
interface MountResultJsx extends Locator { interface MountResultJsx extends Locator {
unmount(): Promise<void>; unmount(): Promise<void>;
update(component: JSX.Element): Promise<void> update(component: JSX.Element): Promise<void>;
} }
export interface ComponentFixtures { export interface ComponentFixtures {
mount(component: JSX.Element): Promise<MountResultJsx>; mount(component: JSX.Element): Promise<MountResultJsx>;
mount(component: any, options?: MountOptions): Promise<MountResult>; mount<HooksConfig extends JsonObject>(
mount<Props>(component: any, options: MountOptions & { props: Props }): Promise<MountResult<Props>>; component: any,
options?: MountOptions<HooksConfig, any>
): Promise<MountResult<HooksConfig, any>>;
mount<
HooksConfig extends JsonObject,
Props extends Record<string, unknown> = Record<string, unknown>
>(
component: any,
options: MountOptions<HooksConfig, any> & { props: Props }
): Promise<MountResult<HooksConfig, Props>>;
} }
export const test: TestType< export const test: TestType<
PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures, PlaywrightTestArgs & PlaywrightTestOptions & ComponentFixtures,
PlaywrightWorkerArgs & PlaywrightWorkerOptions>; PlaywrightWorkerArgs & PlaywrightWorkerOptions
>;
export { expect, devices } from '@playwright/test'; export { expect, devices } from '@playwright/test';

View File

@ -2,10 +2,14 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
beforeMount(async ({ hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
}); });
afterMount(async ({}) => { afterMount<HooksConfig>(async () => {
console.log(`After mount`); console.log(`After mount`);
}); });

View File

@ -5,6 +5,7 @@ import MultipleChildren from './components/MultipleChildren';
import MultiRoot from './components/MultiRoot'; import MultiRoot from './components/MultiRoot';
import Counter from './components/Counter'; import Counter from './components/Counter';
import EmptyFragment from './components/EmptyFragment'; import EmptyFragment from './components/EmptyFragment';
import type { HooksConfig } from '../playwright';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
@ -101,7 +102,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = []; const messages: string[] = [];
page.on('console', m => messages.push(m.text())); page.on('console', m => messages.push(m.text()));
await mount(<Button title="Submit" />, { await mount<HooksConfig>(<Button title="Submit" />, {
hooksConfig: { hooksConfig: {
route: 'A' route: 'A'
} }

View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright/index.js"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

View File

@ -1,10 +1,14 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-react/hooks';
beforeMount(async ({ hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
}); });
afterMount(async ({}) => { afterMount<HooksConfig>(async () => {
console.log(`After mount`); console.log(`After mount`);
}); });

View File

@ -8,6 +8,7 @@ import MultipleChildren from './components/MultipleChildren';
import MultiRoot from './components/MultiRoot'; import MultiRoot from './components/MultiRoot';
import Counter from './components/Counter'; import Counter from './components/Counter';
import EmptyFragment from './components/EmptyFragment'; import EmptyFragment from './components/EmptyFragment';
import type { HooksConfig } from '../playwright';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
@ -104,7 +105,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = []; const messages: string[] = [];
page.on('console', m => messages.push(m.text())); page.on('console', m => messages.push(m.text()));
await mount(<Button title="Submit" />, { await mount<HooksConfig>(<Button title="Submit" />, {
hooksConfig: { hooksConfig: {
route: 'A' route: 'A'
} }

View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright/index.js"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

View File

@ -1,10 +1,14 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-solid/hooks';
beforeMount(async ({ hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
}); });
afterMount(async ({}) => { afterMount<HooksConfig>(async () => {
console.log(`After mount`); console.log(`After mount`);
}); });

View File

@ -4,6 +4,7 @@ import DefaultChildren from './components/DefaultChildren';
import MultipleChildren from './components/MultipleChildren'; import MultipleChildren from './components/MultipleChildren';
import MultiRoot from './components/MultiRoot'; import MultiRoot from './components/MultiRoot';
import EmptyFragment from './components/EmptyFragment'; import EmptyFragment from './components/EmptyFragment';
import type { HooksConfig } from '../playwright';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
@ -76,7 +77,7 @@ test('execute callback when a child node is clicked', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = []; const messages: string[] = [];
page.on('console', (m) => messages.push(m.text())); page.on('console', (m) => messages.push(m.text()));
await mount(<Button title="Submit" />, { await mount<HooksConfig>(<Button title="Submit" />, {
hooksConfig: { hooksConfig: {
route: 'A', route: 'A',
}, },

View File

@ -1,11 +1,14 @@
//@ts-check
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
beforeMount(async ({ hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
}); });
afterMount(async ({}) => { afterMount<HooksConfig>(async () => {
console.log(`After mount`); console.log(`After mount`);
}); });

View File

@ -21,6 +21,7 @@ import DefaultSlot from './components/DefaultSlot.svelte';
import NamedSlots from './components/NamedSlots.svelte'; import NamedSlots from './components/NamedSlots.svelte';
import MultiRoot from './components/MultiRoot.svelte'; import MultiRoot from './components/MultiRoot.svelte';
import Empty from './components/Empty.svelte'; import Empty from './components/Empty.svelte';
import type { HooksConfig } from '../playwright';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
@ -102,7 +103,7 @@ test('render a component with a named slot', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(Button, { await mount<HooksConfig>(Button, {
props: { props: {
title: 'Submit' title: 'Submit'
}, },

View File

@ -2,10 +2,14 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
beforeMount(async ({ hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
}); });
afterMount(async ({}) => { afterMount<HooksConfig>(async () => {
console.log(`After mount`); console.log(`After mount`);
}); });

View File

@ -22,6 +22,7 @@ import DefaultSlot from './components/DefaultSlot.svelte';
import NamedSlots from './components/NamedSlots.svelte' import NamedSlots from './components/NamedSlots.svelte'
import MultiRoot from './components/MultiRoot.svelte'; import MultiRoot from './components/MultiRoot.svelte';
import Empty from './components/Empty.svelte'; import Empty from './components/Empty.svelte';
import type { HooksConfig } from '../playwright';
test.use({ viewport: { width: 500, height: 500 } }); test.use({ viewport: { width: 500, height: 500 } });
@ -108,7 +109,7 @@ test('render a component without options', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(Button, { await mount<HooksConfig>(Button, {
props: { props: {
title: 'Submit' title: 'Submit'
}, },

View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright/index.js"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

View File

@ -2,10 +2,14 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
beforeMount(async ({ app, hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
}); });
afterMount(async ({ instance }) => { afterMount<HooksConfig>(async ({ instance }) => {
console.log(`After mount el: ${instance.$el.constructor.name}`); console.log(`After mount el: ${instance.$el.constructor.name}`);
}); });

View File

@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue' import NamedSlots from './components/NamedSlots.vue'
import MultiRoot from './components/MultiRoot.vue' import MultiRoot from './components/MultiRoot.vue'
import EmptyTemplate from './components/EmptyTemplate.vue' import EmptyTemplate from './components/EmptyTemplate.vue'
import type { HooksConfig } from '../playwright'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })
@ -83,7 +84,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(<Button title="Submit" />, { await mount<HooksConfig>(<Button title="Submit" />, {
hooksConfig: { route: 'A' } hooksConfig: { route: 'A' }
}) })
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement']) expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])

View File

@ -6,6 +6,7 @@ import NamedSlots from './components/NamedSlots.vue'
import MultiRoot from './components/MultiRoot.vue' import MultiRoot from './components/MultiRoot.vue'
import Component from './components/Component.vue' import Component from './components/Component.vue'
import EmptyTemplate from './components/EmptyTemplate.vue' import EmptyTemplate from './components/EmptyTemplate.vue'
import type { HooksConfig } from '../playwright'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })
@ -89,7 +90,7 @@ test('render a component without options', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(Button, { await mount<HooksConfig>(Button, {
props: { props: {
title: 'Submit' title: 'Submit'
}, },

View File

@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright/index.js"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

View File

@ -2,10 +2,14 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue/hooks';
beforeMount(async ({ app, hooksConfig }) => { export type HooksConfig = {
route: string;
}
beforeMount<HooksConfig>(async ({ app, hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}, app: ${!!app}`);
}); });
afterMount(async ({ instance }) => { afterMount<HooksConfig>(async ({ instance }) => {
console.log(`After mount el: ${instance.$el.constructor.name}`); console.log(`After mount el: ${instance.$el.constructor.name}`);
}); });

View File

@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue' import NamedSlots from './components/NamedSlots.vue'
import MultiRoot from './components/MultiRoot.vue' import MultiRoot from './components/MultiRoot.vue'
import EmptyTemplate from './components/EmptyTemplate.vue' import EmptyTemplate from './components/EmptyTemplate.vue'
import type { HooksConfig } from '../playwright'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })
@ -113,7 +114,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(<Button title="Submit" />, { await mount<HooksConfig>(<Button title="Submit" />, {
hooksConfig: { route: 'A' } hooksConfig: { route: 'A' }
}) })
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement']) expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])

View File

@ -7,6 +7,7 @@ import NamedSlots from './components/NamedSlots.vue'
import MultiRoot from './components/MultiRoot.vue' import MultiRoot from './components/MultiRoot.vue'
import Component from './components/Component.vue' import Component from './components/Component.vue'
import EmptyTemplate from './components/EmptyTemplate.vue' import EmptyTemplate from './components/EmptyTemplate.vue'
import type { HooksConfig } from '../playwright'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })
@ -118,7 +119,7 @@ test('render a component without options', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(Button, { await mount<HooksConfig>(Button, {
props: { props: {
title: 'Submit' title: 'Submit'
}, },

View File

@ -7,6 +7,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/playwright/index.js"></script> <script type="module" src="/playwright/index.ts"></script>
</body> </body>
</html> </html>

View File

@ -2,6 +2,10 @@
import '../src/assets/index.css'; import '../src/assets/index.css';
import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks'; import { beforeMount, afterMount } from '@playwright/experimental-ct-vue2/hooks';
export type hooksConfig = {
route: string;
}
beforeMount(async ({ hooksConfig }) => { beforeMount(async ({ hooksConfig }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`); console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
}); });

View File

@ -4,6 +4,7 @@ import Counter from './components/Counter.vue'
import DefaultSlot from './components/DefaultSlot.vue' import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue' import NamedSlots from './components/NamedSlots.vue'
import EmptyTemplate from './components/EmptyTemplate.vue' import EmptyTemplate from './components/EmptyTemplate.vue'
import type { hooksConfig } from '../playwright'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })
@ -113,7 +114,7 @@ test('emit a event when a slot is clicked', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(<Button title="Submit" />, { await mount<hooksConfig>(<Button title="Submit" />, {
hooksConfig: { route: 'A' } hooksConfig: { route: 'A' }
}) })
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount el: HTMLButtonElement']) expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount el: HTMLButtonElement'])

View File

@ -5,6 +5,7 @@ import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue' import NamedSlots from './components/NamedSlots.vue'
import Component from './components/Component.vue' import Component from './components/Component.vue'
import EmptyTemplate from './components/EmptyTemplate.vue' import EmptyTemplate from './components/EmptyTemplate.vue'
import type { hooksConfig } from '../playwright'
test.use({ viewport: { width: 500, height: 500 } }) test.use({ viewport: { width: 500, height: 500 } })
@ -122,7 +123,7 @@ test('render a component without options', async ({ mount }) => {
test('run hooks', async ({ page, mount }) => { test('run hooks', async ({ page, mount }) => {
const messages: string[] = [] const messages: string[] = []
page.on('console', m => messages.push(m.text())) page.on('console', m => messages.push(m.text()))
await mount(Button, { await mount<hooksConfig>(Button, {
props: { props: {
title: 'Submit' title: 'Submit'
}, },