Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ct): react declaration merging hooks config

Browse source
This commit is contained in:
sand4rt 2024-05-28 22:16:21 +02:00
parent e047c478a4
commit cd57031c19
7 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/playwright-ct-react/hooks.d.ts vendored
View file

@ -14,9 +14,11 @@
* limitations under the License.
*/
export declare function beforeMount<HooksConfig>(
export interface RegisterHooksConfig {}
export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
): void;
export declare function afterMount<HooksConfig>(
export declare function afterMount<HooksConfig = RegisterHooksConfig>(
callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
): void;

7
packages/playwright-ct-react/index.d.ts vendored
View file

@ -16,8 +16,9 @@
import type { Locator } from 'playwright/test';
import type { TestType } from '@playwright/experimental-ct-core';
import type { RegisterHooksConfig } from './hooks';
export interface MountOptions<HooksConfig> {
export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
hooksConfig?: HooksConfig;
}
@ -27,11 +28,11 @@ export interface MountResult extends Locator {
}
export const test: TestType<{
mount<HooksConfig>(
mount<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
component: JSX.Element,
options?: MountOptions<HooksConfig>
): Promise<MountResult>;
}>;
export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core';
export { defineConfig, type PlaywrightTestConfig } from '@playwright/experimental-ct-core';
export { expect, devices } from 'playwright/test';

6
packages/playwright-ct-react17/hooks.d.ts vendored
View file

@ -14,9 +14,11 @@
* limitations under the License.
*/
export declare function beforeMount<HooksConfig>(
export interface RegisterHooksConfig {}
export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
): void;
export declare function afterMount<HooksConfig>(
export declare function afterMount<HooksConfig = RegisterHooksConfig>(
callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
): void;

7
packages/playwright-ct-react17/index.d.ts vendored
View file

@ -16,8 +16,9 @@
import type { Locator } from 'playwright/test';
import type { TestType } from '@playwright/experimental-ct-core';
import type { RegisterHooksConfig } from './hooks';
export interface MountOptions<HooksConfig> {
export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
hooksConfig?: HooksConfig;
}
@ -27,11 +28,11 @@ export interface MountResult extends Locator {
}
export const test: TestType<{
mount<HooksConfig>(
mount<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
component: JSX.Element,
options?: MountOptions<HooksConfig>
): Promise<MountResult>;
}>;
export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core';
export { defineConfig, type PlaywrightTestConfig } from '@playwright/experimental-ct-core';
export { expect, devices } from 'playwright/test';

11
tests/components/ct-react-vite/playwright/index.tsx
View file

@ -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<HooksConfig>(async ({ hooksConfig, App }) => {
beforeMount(async ({ hooksConfig, App }) => {
console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
if (hooksConfig?.routing)
return <BrowserRouter><App /></BrowserRouter>;
});
afterMount<HooksConfig>(async () => {
afterMount(async () => {
console.log(`After mount`);
});

5
tests/components/ct-react-vite/tests/react-router.spec.tsx
View file

@ -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<HooksConfig>(<App />, {
const component = await mount(<App />, {
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<HooksConfig>(<App title='before'/>, {
const component = await mount(<App title='before'/>, {
hooksConfig: { routing: true },
});
await expect(component.getByRole('heading')).toHaveText('before');

1
tests/components/ct-react-vite/tsconfig.json
View file

@ -21,6 +21,5 @@
"*": ["_"],
}
},
"include": ["src", "tests"],
"references": [{ "path": "./tsconfig.node.json" }]
}