From cd57031c19ad6690686eaf49cd946463e5f9f269 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Tue, 28 May 2024 22:16:21 +0200 Subject: [PATCH] feat(ct): react declaration merging hooks config --- packages/playwright-ct-react/hooks.d.ts | 6 ++++-- packages/playwright-ct-react/index.d.ts | 7 ++++--- packages/playwright-ct-react17/hooks.d.ts | 6 ++++-- packages/playwright-ct-react17/index.d.ts | 7 ++++--- tests/components/ct-react-vite/playwright/index.tsx | 11 ++++++----- .../ct-react-vite/tests/react-router.spec.tsx | 5 ++--- tests/components/ct-react-vite/tsconfig.json | 1 - 7 files changed, 24 insertions(+), 19 deletions(-) diff --git a/packages/playwright-ct-react/hooks.d.ts b/packages/playwright-ct-react/hooks.d.ts index 1093f1a3a3..16015a4ad0 100644 --- a/packages/playwright-ct-react/hooks.d.ts +++ b/packages/playwright-ct-react/hooks.d.ts @@ -14,9 +14,11 @@ * limitations under the License. */ -export declare function beforeMount( +export interface RegisterHooksConfig {} + +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 c086d4bec5..753e3d4662 100644 --- a/packages/playwright-ct-react/index.d.ts +++ b/packages/playwright-ct-react/index.d.ts @@ -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 { +export interface MountOptions { hooksConfig?: HooksConfig; } @@ -27,11 +28,11 @@ export interface MountResult extends Locator { } export const test: TestType<{ - mount( + mount( component: JSX.Element, options?: MountOptions ): Promise; }>; -export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core'; +export { defineConfig, type PlaywrightTestConfig } from '@playwright/experimental-ct-core'; export { expect, devices } from 'playwright/test'; diff --git a/packages/playwright-ct-react17/hooks.d.ts b/packages/playwright-ct-react17/hooks.d.ts index 1093f1a3a3..16015a4ad0 100644 --- a/packages/playwright-ct-react17/hooks.d.ts +++ b/packages/playwright-ct-react17/hooks.d.ts @@ -14,9 +14,11 @@ * limitations under the License. */ -export declare function beforeMount( +export interface RegisterHooksConfig {} + +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 c086d4bec5..753e3d4662 100644 --- a/packages/playwright-ct-react17/index.d.ts +++ b/packages/playwright-ct-react17/index.d.ts @@ -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 { +export interface MountOptions { hooksConfig?: HooksConfig; } @@ -27,11 +28,11 @@ export interface MountResult extends Locator { } export const test: TestType<{ - mount( + mount( component: JSX.Element, options?: MountOptions ): Promise; }>; -export { defineConfig, PlaywrightTestConfig } from '@playwright/experimental-ct-core'; +export { defineConfig, type PlaywrightTestConfig } from '@playwright/experimental-ct-core'; export { expect, devices } from 'playwright/test'; diff --git a/tests/components/ct-react-vite/playwright/index.tsx b/tests/components/ct-react-vite/playwright/index.tsx index fa0563dbcd..9054dedfd2 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 939154e9d4..101ad9d737 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'); @@ -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-react-vite/tsconfig.json b/tests/components/ct-react-vite/tsconfig.json index e706497adb..5e7831dc7b 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" }] }