From 557db4c35efdd6d0c13f814588f3d55cb9922690 Mon Sep 17 00:00:00 2001 From: sand4rt Date: Sat, 30 Jul 2022 05:07:23 +0200 Subject: [PATCH] chore(ct): mount result refactor (#16067) --- packages/playwright-ct-react/index.d.ts | 7 +++- packages/playwright-ct-svelte/index.d.ts | 9 ++-- packages/playwright-ct-vue/index.d.ts | 13 +++--- packages/playwright-ct-vue2/index.d.ts | 11 +++-- packages/playwright-test/src/mount.ts | 41 +++++++++---------- .../components/ct-react-vite/src/App.spec.tsx | 4 +- .../ct-svelte-vite/src/lib/Counter.spec.ts | 4 +- .../ct-vue-vite/src/notation-jsx.spec.tsx | 4 +- .../ct-vue-vite/src/notation-vue.spec.js | 6 +-- .../ct-vue-vite/src/notation-vue.spec.ts | 10 ++--- .../ct-vue2-cli/src/notation-vue.spec.ts | 4 +- 11 files changed, 61 insertions(+), 52 deletions(-) diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts index 3ed9f5083f..4be9b96787 100644 --- a/packages/playwright-ct-react/index.d.ts +++ b/packages/playwright-ct-react/index.d.ts @@ -34,9 +34,12 @@ export type PlaywrightTestConfig = Omit & { } }; +interface MountResult extends Locator { + unmount(): Promise; +} + export interface ComponentFixtures { - mount(component: JSX.Element, options?: { hooksConfig?: any }): Promise; - unmount(component: Locator): Promise; + mount(component: JSX.Element, options?: { hooksConfig?: any }): Promise; } export const test: TestType< diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts index 33f5508099..c2eab38902 100644 --- a/packages/playwright-ct-svelte/index.d.ts +++ b/packages/playwright-ct-svelte/index.d.ts @@ -34,20 +34,23 @@ export type PlaywrightTestConfig = Omit & { } }; +interface MountResult extends Locator { + unmount(): Promise; +} + interface ComponentFixtures { mount(component: any, options?: { props?: { [key: string]: any }, slots?: { [key: string]: any }, on?: { [key: string]: Function }, hooksConfig?: any, - }): Promise; + }): Promise; mount(component: any, options: { props: Props, slots?: { [key: string]: any }, on?: { [key: string]: Function }, hooksConfig?: any, - }): Promise; - unmount(component: Locator): Promise; + }): Promise; } export const test: TestType< diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts index 918fe4f012..5f60f387cc 100644 --- a/packages/playwright-ct-vue/index.d.ts +++ b/packages/playwright-ct-vue/index.d.ts @@ -34,22 +34,25 @@ export type PlaywrightTestConfig = Omit & { } }; +interface MountResult extends Locator { + unmount(): Promise; + setProps(props: Partial): Promise +} + export interface ComponentFixtures { - mount(component: JSX.Element): Promise; + mount(component: JSX.Element): Promise; mount(component: any, options?: { props?: { [key: string]: any }, slots?: { [key: string]: any }, on?: { [key: string]: Function }, hooksConfig?: any, - }): Promise; + }): Promise; mount(component: any, options: { props: Props, slots?: { [key: string]: any }, on?: { [key: string]: Function }, hooksConfig?: any, - }): Promise; - unmount(locator: Locator): Promise; - setProps(locator: Locator, props: Props): Promise + }): Promise>; } export const test: TestType< diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts index 5981c4725d..7962cad690 100644 --- a/packages/playwright-ct-vue2/index.d.ts +++ b/packages/playwright-ct-vue2/index.d.ts @@ -34,21 +34,24 @@ export type PlaywrightTestConfig = Omit & { } }; +interface MountResult extends Locator { + unmount(): Promise; +} + export interface ComponentFixtures { - mount(component: JSX.Element): Promise; + mount(component: JSX.Element): Promise; mount(component: any, options?: { props?: { [key: string]: any }, slots?: { [key: string]: any }, on?: { [key: string]: Function }, hooksConfig?: any, - }): Promise; + }): Promise; mount(component: any, options: { props: Props, slots?: { [key: string]: any }, on?: { [key: string]: Function }, hooksConfig?: any, - }): Promise; - unmount(locator: Locator): Promise; + }): Promise; } export const test: TestType< diff --git a/packages/playwright-test/src/mount.ts b/packages/playwright-test/src/mount.ts index 19347a6992..d5a875ed6e 100644 --- a/packages/playwright-test/src/mount.ts +++ b/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; + setProps: (props: { [key: string]: any }) => Promise; +} + export const fixtures: Fixtures< PlaywrightTestArgs & PlaywrightTestOptions & { - mount: (component: any, options: any) => Promise; - unmount: (locator: Locator) => Promise; - setProps: (locator: Locator, props: { [key: string]: any }) => Promise; + mount: (component: any, options: any) => Promise; }, PlaywrightWorkerArgs & PlaywrightWorkerOptions & { _ctWorker: { context: BrowserContext | undefined, hash: string } }, { _contextFactory: (options?: BrowserContextOptions) => Promise, _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 { diff --git a/tests/components/ct-react-vite/src/App.spec.tsx b/tests/components/ct-react-vite/src/App.spec.tsx index 51fbd81716..4de184d7c0 100644 --- a/tests/components/ct-react-vite/src/App.spec.tsx +++ b/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(); 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!'); }); diff --git a/tests/components/ct-svelte-vite/src/lib/Counter.spec.ts b/tests/components/ct-svelte-vite/src/lib/Counter.spec.ts index f540a3c1e0..7b7c183f25 100644 --- a/tests/components/ct-svelte-vite/src/lib/Counter.spec.ts +++ b/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'); }); diff --git a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx index 483140f559..954ea93b33 100644 --- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx +++ b/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(); await expect(component).toContainText('Submit'); - await setProps(component, { title: 'Loading' }); + await component.setProps({ title: 'Loading' }); await expect(component).toContainText('Loading'); }) diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.js b/tests/components/ct-vue-vite/src/notation-vue.spec.js index 6d208ec374..5d32ee8327 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.js +++ b/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'); }) diff --git a/tests/components/ct-vue-vite/src/notation-vue.spec.ts b/tests/components/ct-vue-vite/src/notation-vue.spec.ts index 20a1a6e992..21a2394459 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts +++ b/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'); }); diff --git a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts index e6d6d2a967..4a96827b1a 100644 --- a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts +++ b/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'); });