feat(ct): hooksConfig declaration merging

microsoft · Apr 26, 2024 · fafa376 · fafa376
1 parent 3018962
commit fafa376
Show file tree

Hide file tree

Showing 28 changed files with 105 additions and 103 deletions.
diff --git 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<void>;
     playwrightUnmount(rootElement: Element): Promise<void>;
     playwrightUpdate(rootElement: Element, component: Component): Promise<void>;
-    __pw_hooks_before_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
+    __pw_hooks_before_mount?: (<HooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<any>)[];
-    __pw_hooks_after_mount?: (<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
+    __pw_hooks_after_mount?: (<HooksConfig>(
       params: { hooksConfig?: HooksConfig; [key: string]: any }
     ) => Promise<void>)[];
     // Can't start with __pw due to core reuse bindings logic for __pw*.
-    __ctDispatchFunction: (ordinal: number, args: any[]) => void;
-    __pwUnwrapObject: (value: any) => Promise<any>;
-    __pwTransformObject: (value: any, mapping: (v: any) => { result: any } | undefined) => any;
+    __ctDispatchFunction(ordinal: number, args: any[]): void;
+    __pwUnwrapObject(value: any): Promise<any>;
+    __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
@@ -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<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
diff --git 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<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +28,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig = RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;

diff --git 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<HooksConfig extends JsonObject>(
+export declare function beforeMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig; App: () => JSX.Element }) => Promise<void | JSX.Element>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig = RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
diff --git 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<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +28,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;

diff --git 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<HooksConfig extends JsonObject>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig, App: () => JSXElement }) => Promise<void | JSXElement>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: { hooksConfig?: HooksConfig }) => Promise<void>
 ): void;
diff --git 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<HooksConfig extends JsonObject> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -28,7 +28,7 @@ export interface MountResult extends Locator {
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject>(
+  mount<HooksConfig extends RegisterHooksConfig>(
     component: JSX.Element,
     options?: MountOptions<HooksConfig>
   ): Promise<MountResult>;

diff --git 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<HooksConfig extends JsonObject>(
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig,
     App: new (options: Partial<ComponentConstructorOptions>) => SvelteComponent
   }) => Promise<SvelteComponent | void>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig;
     svelteComponent: SvelteComponent;

diff --git 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<string, ComponentSlot> & { default?: ComponentSlot };
 type ComponentEvents = Record<string, Function>;
 
-export interface MountOptions<HooksConfig extends JsonObject, Component extends SvelteComponent> {
+export interface MountOptions<HooksConfig extends RegisterHooksConfig, Component extends SvelteComponent> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
@@ -39,7 +39,7 @@ export interface MountResult<Component extends SvelteComponent> extends Locator
 }
 
 export const test: TestType<{
-  mount<HooksConfig extends JsonObject, Component extends SvelteComponent = SvelteComponent>(
+  mount<HooksConfig extends RegisterHooksConfig, Component extends SvelteComponent = SvelteComponent>(
     component: new (...args: any[]) => Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;

diff --git 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<HooksConfig extends JsonObject>(
-  callback: (params: { 
-    hooksConfig?: HooksConfig, 
-    Vue: VueConstructor<Vue>, 
+export interface RegisterHooksConfig {}
+
+export declare function beforeMount<HooksConfig extends RegisterHooksConfig>(
+  callback: (params: {
+    hooksConfig?: HooksConfig,
+    Vue: VueConstructor<Vue>,
   }) => Promise<void | ComponentOptions<Vue> & Record<string, unknown>>
 ): void;
-export declare function afterMount<HooksConfig extends JsonObject>(
+export declare function afterMount<HooksConfig extends RegisterHooksConfig>(
   callback: (params: {
     hooksConfig?: HooksConfig;
     instance: CombinedVueInstance<

diff --git 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<string, Slot> & { default?: Slot };
@@ -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<HooksConfig extends RegisterHooksConfig, Component> {
   props?: ComponentProps<Component>;
   slots?: ComponentSlots;
   on?: ComponentEvents;
   hooksConfig?: HooksConfig;
 }
 
-export interface MountOptionsJsx<HooksConfig extends JsonObject> {
+export interface MountOptionsJsx<HooksConfig extends RegisterHooksConfig> {
   hooksConfig?: HooksConfig;
 }
 
@@ -55,11 +55,11 @@ 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<HooksConfig extends RegisterHooksConfig, Component = unknown>(
     component: Component,
     options?: MountOptions<HooksConfig, Component>
   ): Promise<MountResult<Component>>;

diff --git 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<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`);
 });
diff --git 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<HooksConfig>(<App />, {
+  const component = await mount(<App />, {
     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<HooksConfig>(<App title='before'/>, {
+test('update should not reset mount hooks', async ({ mount }) => {
+  const component = await mount(<App title="before"/>, {
     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
@@ -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
@@ -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<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`);
 });
diff --git 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<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');

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