chore(ct): mount result refactor (#16067)

packages/playwright-ct-react/index.d.ts

@@ -34,9 +34,12 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   }
 };
 
+interface MountResult extends Locator {
+  unmount(): Promise<void>;
+}
+
 export interface ComponentFixtures {
-  mount(component: JSX.Element, options?: { hooksConfig?: any }): Promise<Locator>;
-  unmount(component: Locator): Promise<void>;
+  mount(component: JSX.Element, options?: { hooksConfig?: any }): Promise<MountResult>;
 }
 
 export const test: TestType<

packages/playwright-ct-svelte/index.d.ts

@@ -34,20 +34,23 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   }
 };
 
+interface MountResult extends Locator {
+  unmount(): Promise<void>;
+}
+
 interface ComponentFixtures {
   mount(component: any, options?: {
     props?: { [key: string]: any },
     slots?: { [key: string]: any },
     on?: { [key: string]: Function },
     hooksConfig?: any,
-  }): Promise<Locator>;
+  }): Promise<MountResult>;
   mount<Props>(component: any, options: {
     props: Props,
     slots?: { [key: string]: any },
     on?: { [key: string]: Function },
     hooksConfig?: any,
-  }): Promise<Locator>;
-  unmount(component: Locator): Promise<void>;
+  }): Promise<MountResult>;
 }
 
 export const test: TestType<

packages/playwright-ct-vue/index.d.ts

@@ -34,22 +34,25 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   }
 };
 
+interface MountResult<Props = { [key: string]: any }> extends Locator {
+  unmount(): Promise<void>;
+  setProps(props: Partial<Props>): Promise<void>
+}
+
 export interface ComponentFixtures {
-  mount(component: JSX.Element): Promise<Locator>;
+  mount(component: JSX.Element): Promise<MountResult>;
   mount(component: any, options?: {
     props?: { [key: string]: any },
     slots?: { [key: string]: any },
     on?: { [key: string]: Function },
     hooksConfig?: any,
-  }): Promise<Locator>;
+  }): Promise<MountResult>;
   mount<Props>(component: any, options: {
     props: Props,
     slots?: { [key: string]: any },
     on?: { [key: string]: Function },
     hooksConfig?: any,
-  }): Promise<Locator>;
-  unmount(locator: Locator): Promise<void>;
-  setProps<Props = { [key: string]: any }>(locator: Locator, props: Props): Promise<void>
+  }): Promise<MountResult<Props>>;
 }
 
 export const test: TestType<

packages/playwright-ct-vue2/index.d.ts

@@ -34,21 +34,24 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   }
 };
 
+interface MountResult extends Locator {
+  unmount(): Promise<void>;
+}
+
 export interface ComponentFixtures {
-  mount(component: JSX.Element): Promise<Locator>;
+  mount(component: JSX.Element): Promise<MountResult>;
   mount(component: any, options?: {
     props?: { [key: string]: any },
     slots?: { [key: string]: any },
     on?: { [key: string]: Function },
     hooksConfig?: any,
-  }): Promise<Locator>;
+  }): Promise<MountResult>;
   mount<Props>(component: any, options: {
     props: Props,
     slots?: { [key: string]: any },
     on?: { [key: string]: Function },
     hooksConfig?: any,
-  }): Promise<Locator>;
-  unmount(locator: Locator): Promise<void>;
+  }): Promise<MountResult>;
 }
 
 export const test: TestType<

packages/playwright-test/src/mount.ts

@@ -19,11 +19,14 @@ import type { Component, JsxComponent, ObjectComponentOptions } from '../types/c
 
 let boundCallbacksForMount: Function[] = [];
 
+interface MountResult extends Locator {
+  unmount: (locator: Locator) => Promise<void>;
+  setProps: (props: { [key: string]: any }) => Promise<void>;
+}
+
 export const fixtures: Fixtures<
   PlaywrightTestArgs & PlaywrightTestOptions & {
-    mount: (component: any, options: any) => Promise<Locator>;
-    unmount: (locator: Locator) => Promise<void>;
-    setProps: (locator: Locator, props: { [key: string]: any }) => Promise<void>;
+    mount: (component: any, options: any) => Promise<MountResult>;
   },
   PlaywrightWorkerArgs & PlaywrightWorkerOptions & { _ctWorker: { context: BrowserContext | undefined, hash: string } },
   { _contextFactory: (options?: BrowserContextOptions) => Promise<BrowserContext>, _contextReuseEnabled: boolean }> = {
@@ -49,27 +52,23 @@ export const fixtures: Fixtures<
         const selector = await (page as any)._wrapApiCall(async () => {
           return await innerMount(page, component, options);
         }, true);
-        return page.locator(selector);
+        const locator = page.locator(selector);
+        return Object.assign(locator, {
+          unmount: async () => {
+            await locator.evaluate(async element => {
+              const rootElement = document.getElementById('root')!;
+              await window.playwrightUnmount(element, rootElement);
+            });
+          },
+          setProps: async (props: { [key: string]: any }) => {
+            await locator.evaluate(async (element, props) => {
+              return await window.playwrightSetProps(element, props);
+            }, props);
+          }
+        });
       });
       boundCallbacksForMount = [];
     },
-
-    unmount: async ({}, use) => {
-      await use(async (locator: Locator) => {
-        await locator.evaluate(async element => {
-          const rootElement = document.getElementById('root')!;
-          await window.playwrightUnmount(element, rootElement);
-        });
-      });
-    },
-
-    setProps: async ({}, use) => {
-      await use(async (locator: Locator, props: { [key: string]: any }) => {
-        return await locator.evaluate(async (element, props) => {
-          return await window.playwrightSetProps(element, props);
-        }, props);
-      });
-    }
   };
 
 async function innerMount(page: Page, jsxOrType: JsxComponent | string, options: ObjectComponentOptions = {}): Promise<string> {

tests/components/ct-react-vite/src/App.spec.tsx

@@ -19,9 +19,9 @@ test('should configure app', async ({ page, mount }) => {
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
 });
 
-test('should unmount', async ({ page, mount, unmount }) => {
+test('should unmount', async ({ page, mount }) => {
   const component = await mount(<App></App>);
   await expect(page.locator('#root')).toContainText('Hello Vite + React!');
-  await unmount(component);
+  await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Hello Vite + React!');
 });

tests/components/ct-svelte-vite/src/lib/Counter.spec.ts

@@ -48,13 +48,13 @@ test('should configure app', async ({ page, mount }) => {
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount']);
 });
 
-test('should unmount', async ({ page, mount, unmount }) => {
+test('should unmount', async ({ page, mount }) => {
   const component = await mount(Counter, {
     props: {
       suffix: 'my suffix',
     },
   });
   await expect(page.locator('#root')).toContainText('my suffix')
-  await unmount(component);
+  await component.unmount();
   await expect(page.locator('#root')).not.toContainText('my suffix');
 });

tests/components/ct-vue-vite/src/notation-jsx.spec.tsx

@@ -10,10 +10,10 @@ test('props should work', async ({ mount }) => {
   await expect(component).toContainText('Submit')
 })
 
-test('update props should work', async ({ mount, setProps }) => {
+test('update props should work', async ({ mount }) => {
   const component = await mount(<Button title='Submit'></Button>);
   await expect(component).toContainText('Submit');
-  await setProps(component, { title: 'Loading' });
+  await component.setProps({ title: 'Loading' });
   await expect(component).toContainText('Loading');
 })
 

tests/components/ct-vue-vite/src/notation-vue.spec.js

@@ -1,6 +1,4 @@
 import { test, expect } from '@playwright/experimental-ct-vue'
-
-import has from 'has'
 import Button from './components/Button.vue'
 import DefaultSlot from './components/DefaultSlot.vue'
 import NamedSlots from './components/NamedSlots.vue'
@@ -17,14 +15,14 @@ test('props should work', async ({ mount }) => {
   await expect(component).toContainText('Submit')
 })
 
-test('update props should work', async ({ mount, setProps }) => {
+test('update props should work', async ({ mount }) => {
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     }
   });
   await expect(component).toContainText('Submit');
-  await setProps(component, { title: 'Loading' });
+  await component.setProps({ title: 'Loading' });
   await expect(component).toContainText('Loading');
 })
 

tests/components/ct-vue-vite/src/notation-vue.spec.ts

@@ -16,15 +16,15 @@ test('props should work', async ({ mount }) => {
   await expect(component).toContainText('Submit')
 })
 
-test('update props should work', async ({ mount, setProps }) => {
+test('update props should work', async ({ mount }) => {
   const component = await mount(Button, {
     props: { 
       title: 'Submit'
     }
   });
   await expect(component).toContainText('Submit')
-  await setProps(component, { title: 'Loading' });
-  await expect(component).toContainText('Loading');
+  await component.setProps({ title: 'Loading' })
+  await expect(component).toContainText('Loading')
 })
 
 test('event should work', async ({ mount }) => {
@@ -90,13 +90,13 @@ test('should run hooks', async ({ page, mount }) => {
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])
 })
 
-test('should unmount', async ({ page, mount, unmount }) => {
+test('should unmount', async ({ page, mount }) => {
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     }
   })
   await expect(page.locator('#root')).toContainText('Submit')
-  await unmount(component);
+  await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });

tests/components/ct-vue2-cli/src/notation-vue.spec.ts

@@ -73,13 +73,13 @@ test('should run hooks', async ({ page, mount }) => {
   expect(messages).toEqual(['Before mount: {\"route\":\"A\"}', 'After mount el: HTMLButtonElement'])
 })
 
-test('should unmount', async ({ page, mount, unmount }) => {
+test('should unmount', async ({ page, mount }) => {
   const component = await mount(Button, {
     props: {
       title: 'Submit'
     }
   })
   await expect(page.locator('#root')).toContainText('Submit')
-  await unmount(component);
+  await component.unmount();
   await expect(page.locator('#root')).not.toContainText('Submit');
 });