From 1a43af3fb6e8cba8ce3dd7ad0550f74380d6225a Mon Sep 17 00:00:00 2001 From: sand4rt Date: Tue, 11 Oct 2022 04:56:33 +0200 Subject: [PATCH] feat(ct): rerender to update (#17972) --- packages/playwright-ct-react/index.d.ts | 2 +- packages/playwright-ct-react/registerSource.mjs | 2 +- packages/playwright-ct-svelte/index.d.ts | 2 +- packages/playwright-ct-svelte/registerSource.mjs | 2 +- packages/playwright-ct-vue/index.d.ts | 4 ++-- packages/playwright-ct-vue/registerSource.mjs | 2 +- packages/playwright-ct-vue2/index.d.ts | 4 ++-- packages/playwright-ct-vue2/registerSource.mjs | 2 +- packages/playwright-test/src/mount.ts | 12 ++++++------ packages/playwright-test/types/component.d.ts | 2 +- tests/components/ct-react-vite/src/tests.spec.tsx | 6 +++--- tests/components/ct-react/src/tests.spec.tsx | 6 +++--- tests/components/ct-svelte-vite/src/tests.spec.ts | 4 ++-- tests/components/ct-svelte/src/tests.spec.ts | 4 ++-- .../components/ct-vue-cli/src/notation-jsx.spec.tsx | 4 ++-- tests/components/ct-vue-cli/src/notation-vue.spec.ts | 4 ++-- .../components/ct-vue-vite/src/notation-jsx.spec.tsx | 6 +++--- .../components/ct-vue-vite/src/notation-vue.spec.js | 6 +++--- .../components/ct-vue-vite/src/notation-vue.spec.ts | 6 +++--- .../components/ct-vue2-cli/src/notation-jsx.spec.tsx | 6 +++--- .../components/ct-vue2-cli/src/notation-vue.spec.ts | 8 ++++---- 21 files changed, 47 insertions(+), 47 deletions(-) diff --git a/packages/playwright-ct-react/index.d.ts b/packages/playwright-ct-react/index.d.ts index ebf7ff473f..4b30d4b4c2 100644 --- a/packages/playwright-ct-react/index.d.ts +++ b/packages/playwright-ct-react/index.d.ts @@ -45,7 +45,7 @@ export interface MountOptions { interface MountResult extends Locator { unmount(): Promise; - rerender(component: JSX.Element): Promise; + update(component: JSX.Element): Promise; } export interface ComponentFixtures { diff --git a/packages/playwright-ct-react/registerSource.mjs b/packages/playwright-ct-react/registerSource.mjs index f1183f5392..6e79401cac 100644 --- a/packages/playwright-ct-react/registerSource.mjs +++ b/packages/playwright-ct-react/registerSource.mjs @@ -83,6 +83,6 @@ window.playwrightUnmount = async rootElement => { throw new Error('Component was not mounted'); }; -window.playwrightRerender = async (rootElement, component) => { +window.playwrightUpdate = async (rootElement, component) => { ReactDOM.render(render(/** @type {Component} */(component)), rootElement); }; diff --git a/packages/playwright-ct-svelte/index.d.ts b/packages/playwright-ct-svelte/index.d.ts index f7cb89e919..31705a0997 100644 --- a/packages/playwright-ct-svelte/index.d.ts +++ b/packages/playwright-ct-svelte/index.d.ts @@ -51,7 +51,7 @@ export interface MountOptions extends Locator { unmount(): Promise; - rerender(options: Omit, 'hooksConfig'|'slots'>): Promise + update(options: Omit, 'hooksConfig'|'slots'>): Promise } interface ComponentFixtures { diff --git a/packages/playwright-ct-svelte/registerSource.mjs b/packages/playwright-ct-svelte/registerSource.mjs index 6f7c7be600..3d19a5f9f3 100644 --- a/packages/playwright-ct-svelte/registerSource.mjs +++ b/packages/playwright-ct-svelte/registerSource.mjs @@ -114,7 +114,7 @@ window.playwrightUnmount = async rootElement => { svelteComponent.$destroy(); }; -window.playwrightRerender = async (rootElement, component) => { +window.playwrightUpdate = async (rootElement, component) => { const svelteComponent = /** @type {SvelteComponent} */ (rootElement[svelteComponentKey]); if (!svelteComponent) throw new Error('Component was not mounted'); diff --git a/packages/playwright-ct-vue/index.d.ts b/packages/playwright-ct-vue/index.d.ts index b67fec8912..657e3b1131 100644 --- a/packages/playwright-ct-vue/index.d.ts +++ b/packages/playwright-ct-vue/index.d.ts @@ -50,12 +50,12 @@ export interface MountOptions> { interface MountResult> extends Locator { unmount(): Promise; - rerender(options: Omit, 'hooksConfig'>): Promise + update(options: Omit, 'hooksConfig'>): Promise } interface MountResultJsx extends Locator { unmount(): Promise; - rerender(component: JSX.Element): Promise + update(component: JSX.Element): Promise } export interface ComponentFixtures { diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs index fc70131cba..29194e9a56 100644 --- a/packages/playwright-ct-vue/registerSource.mjs +++ b/packages/playwright-ct-vue/registerSource.mjs @@ -201,7 +201,7 @@ window.playwrightUnmount = async rootElement => { app.unmount(); }; -window.playwrightRerender = async (rootElement, options) => { +window.playwrightUpdate = async (rootElement, options) => { const wrapper = rootElement[wrapperKey]; if (!wrapper) throw new Error('Component was not mounted'); diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts index b67fec8912..657e3b1131 100644 --- a/packages/playwright-ct-vue2/index.d.ts +++ b/packages/playwright-ct-vue2/index.d.ts @@ -50,12 +50,12 @@ export interface MountOptions> { interface MountResult> extends Locator { unmount(): Promise; - rerender(options: Omit, 'hooksConfig'>): Promise + update(options: Omit, 'hooksConfig'>): Promise } interface MountResultJsx extends Locator { unmount(): Promise; - rerender(component: JSX.Element): Promise + update(component: JSX.Element): Promise } export interface ComponentFixtures { diff --git a/packages/playwright-ct-vue2/registerSource.mjs b/packages/playwright-ct-vue2/registerSource.mjs index 585258cb1a..f4ef0ee68c 100644 --- a/packages/playwright-ct-vue2/registerSource.mjs +++ b/packages/playwright-ct-vue2/registerSource.mjs @@ -171,7 +171,7 @@ window.playwrightUnmount = async rootElement => { component.$el.remove(); }; -window.playwrightRerender = async (element, options) => { +window.playwrightUpdate = async (element, options) => { const wrapper = /** @type {any} */(element)[wrapperKey]; if (!wrapper) throw new Error('Component was not mounted'); diff --git a/packages/playwright-test/src/mount.ts b/packages/playwright-test/src/mount.ts index 0583e033e0..94a273b662 100644 --- a/packages/playwright-test/src/mount.ts +++ b/packages/playwright-test/src/mount.ts @@ -21,7 +21,7 @@ let boundCallbacksForMount: Function[] = []; interface MountResult extends Locator { unmount(locator: Locator): Promise; - rerender(options: Omit | string | JsxComponent): Promise; + update(options: Omit | string | JsxComponent): Promise; } export const fixtures: Fixtures< @@ -60,9 +60,9 @@ export const fixtures: Fixtures< await window.playwrightUnmount(rootElement); }); }, - rerender: async (options: JsxComponent | Omit) => { - if (isJsxApi(options)) return await innerRerender(page, options); - await innerRerender(page, component, options); + update: async (options: JsxComponent | Omit) => { + if (isJsxApi(options)) return await innerUpdate(page, options); + await innerUpdate(page, component, options); } }); }); @@ -74,7 +74,7 @@ function isJsxApi(options: Record): options is JsxComponent { return options?.kind === 'jsx'; } -async function innerRerender(page: Page, jsxOrType: JsxComponent | string, options: Omit = {}): Promise { +async function innerUpdate(page: Page, jsxOrType: JsxComponent | string, options: Omit = {}): Promise { const component = createComponent(jsxOrType, options); wrapFunctions(component, page, boundCallbacksForMount); @@ -94,7 +94,7 @@ async function innerRerender(page: Page, jsxOrType: JsxComponent | string, optio unwrapFunctions(component); const rootElement = document.getElementById('root')!; - return await window.playwrightRerender(rootElement, component); + return await window.playwrightUpdate(rootElement, component); }, { component }); } diff --git a/packages/playwright-test/types/component.d.ts b/packages/playwright-test/types/component.d.ts index 3d4a805ef8..2c92a8e1ae 100644 --- a/packages/playwright-test/types/component.d.ts +++ b/packages/playwright-test/types/component.d.ts @@ -40,6 +40,6 @@ declare global { interface Window { playwrightMount(component: Component, rootElement: Element, hooksConfig: any): Promise; playwrightUnmount(rootElement: Element): Promise; - playwrightRerender(rootElement: Element, component: Component): Promise; + playwrightUpdate(rootElement: Element, component: Component): Promise; } } diff --git a/tests/components/ct-react-vite/src/tests.spec.tsx b/tests/components/ct-react-vite/src/tests.spec.tsx index 7cb5d6bc2e..38b525ada1 100644 --- a/tests/components/ct-react-vite/src/tests.spec.tsx +++ b/tests/components/ct-react-vite/src/tests.spec.tsx @@ -17,7 +17,7 @@ test('renderer updates props without remounting', async ({ mount }) => { const component = await mount() await expect(component.locator('#props')).toContainText('9001') - await component.rerender() + await component.update() await expect(component).not.toContainText('9001') await expect(component.locator('#props')).toContainText('1337') @@ -28,7 +28,7 @@ test('renderer updates callbacks without remounting', async ({ mount }) => { const component = await mount() const messages: string[] = [] - await component.rerender( { + await component.update( { messages.push(message) }} />) await component.click(); @@ -41,7 +41,7 @@ test('renderer updates slots without remounting', async ({ mount }) => { const component = await mount(Default Slot) await expect(component).toContainText('Default Slot') - await component.rerender(Test Slot) + await component.update(Test Slot) await expect(component).not.toContainText('Default Slot') await expect(component).toContainText('Test Slot') diff --git a/tests/components/ct-react/src/tests.spec.tsx b/tests/components/ct-react/src/tests.spec.tsx index 64e2727c52..303cc966de 100644 --- a/tests/components/ct-react/src/tests.spec.tsx +++ b/tests/components/ct-react/src/tests.spec.tsx @@ -20,7 +20,7 @@ test('renderer updates props without remounting', async ({ mount }) => { const component = await mount() await expect(component.locator('#props')).toContainText('9001') - await component.rerender() + await component.update() await expect(component).not.toContainText('9001') await expect(component.locator('#props')).toContainText('1337') @@ -31,7 +31,7 @@ test('renderer updates callbacks without remounting', async ({ mount }) => { const component = await mount() const messages: string[] = [] - await component.rerender( { + await component.update( { messages.push(message) }} />) await component.click(); @@ -44,7 +44,7 @@ test('renderer updates slots without remounting', async ({ mount }) => { const component = await mount(Default Slot) await expect(component).toContainText('Default Slot') - await component.rerender(Test Slot) + await component.update(Test Slot) await expect(component).not.toContainText('Default Slot') await expect(component).toContainText('Test Slot') diff --git a/tests/components/ct-svelte-vite/src/tests.spec.ts b/tests/components/ct-svelte-vite/src/tests.spec.ts index 415241dba3..041240bea6 100644 --- a/tests/components/ct-svelte-vite/src/tests.spec.ts +++ b/tests/components/ct-svelte-vite/src/tests.spec.ts @@ -39,7 +39,7 @@ test('renderer updates props without remounting', async ({ mount }) => { }) await expect(component.locator('#props')).toContainText('9001') - await component.rerender({ + await component.update({ props: { count: 1337 } }) await expect(component).not.toContainText('9001') @@ -52,7 +52,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const component = await mount(Counter) const messages: string[] = [] - await component.rerender({ + await component.update({ on: { submit: (data: string) => messages.push(data) } diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts index d1c3d007b9..d8486a9f0e 100644 --- a/tests/components/ct-svelte/src/tests.spec.ts +++ b/tests/components/ct-svelte/src/tests.spec.ts @@ -40,7 +40,7 @@ test('renderer updates props without remounting', async ({ mount }) => { }) await expect(component.locator('#props')).toContainText('9001') - await component.rerender({ + await component.update({ props: { count: 1337 } }) await expect(component).not.toContainText('9001') @@ -53,7 +53,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const component = await mount(Counter) const messages: string[] = [] - await component.rerender({ + await component.update({ on: { submit: (data: string) => messages.push(data) } diff --git a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx index b75f7956ae..7cadf6ba81 100644 --- a/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue-cli/src/notation-jsx.spec.tsx @@ -17,10 +17,10 @@ test('renderer and keep the component instance intact', async ({ mount }) => { const component = await mount(); await expect(component.locator('#rerender-count')).toContainText('9001') - await component.rerender() + await component.update() await expect(component.locator('#rerender-count')).toContainText('1337') - await component.rerender() + await component.update() await expect(component.locator('#rerender-count')).toContainText('42') await expect(component.locator('#remount-count')).toContainText('1') diff --git a/tests/components/ct-vue-cli/src/notation-vue.spec.ts b/tests/components/ct-vue-cli/src/notation-vue.spec.ts index 52b8c31a22..941e1fa2f1 100644 --- a/tests/components/ct-vue-cli/src/notation-vue.spec.ts +++ b/tests/components/ct-vue-cli/src/notation-vue.spec.ts @@ -27,10 +27,10 @@ test('renderer and keep the component instance intact', async ({ mount }) => { }); await expect(component.locator('#rerender-count')).toContainText('9001') - await component.rerender({ props: { count: 1337 } }) + await component.update({ props: { count: 1337 } }) await expect(component.locator('#rerender-count')).toContainText('1337') - await component.rerender({ props: { count: 42 } }) + await component.update({ props: { count: 42 } }) await expect(component.locator('#rerender-count')).toContainText('42') await expect(component.locator('#remount-count')).toContainText('1') 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 6c1bf931f0..c79283f1dd 100644 --- a/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue-vite/src/notation-jsx.spec.tsx @@ -17,7 +17,7 @@ test('renderer updates props without remounting', async ({ mount }) => { const component = await mount() await expect(component.locator('#props')).toContainText('9001') - await component.rerender() + await component.update() await expect(component).not.toContainText('9001') await expect(component.locator('#props')).toContainText('1337') @@ -28,7 +28,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const component = await mount() const messages = [] - await component.rerender( { + await component.update( { messages.push(count) }} />) await component.click(); @@ -41,7 +41,7 @@ test('renderer updates slots without remounting', async ({ mount }) => { const component = await mount(Default Slot) await expect(component).toContainText('Default Slot') - await component.rerender( + await component.update( ) await expect(component).not.toContainText('Default Slot') 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 f044eefe66..0ebc1011eb 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.js +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.js @@ -25,7 +25,7 @@ test('renderer updates props without remounting', async ({ mount }) => { }) await expect(component.locator('#props')).toContainText('9001') - await component.rerender({ + await component.update({ props: { count: 1337 } }) await expect(component).not.toContainText('9001') @@ -38,7 +38,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const component = await mount(Counter) const messages = [] - await component.rerender({ + await component.update({ on: { submit: count => messages.push(count) } @@ -55,7 +55,7 @@ test('renderer updates slots without remounting', async ({ mount }) => { }) await expect(component).toContainText('Default Slot') - await component.rerender({ + await component.update({ slots: { main: 'Test Slot' } }) await expect(component).not.toContainText('Default Slot') 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 356f1b5a32..fa939efb05 100644 --- a/tests/components/ct-vue-vite/src/notation-vue.spec.ts +++ b/tests/components/ct-vue-vite/src/notation-vue.spec.ts @@ -25,7 +25,7 @@ test('renderer updates props without remounting', async ({ mount }) => { }) await expect(component.locator('#props')).toContainText('9001') - await component.rerender({ + await component.update({ props: { count: 1337 } }) await expect(component).not.toContainText('9001') @@ -38,7 +38,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const component = await mount(Counter) const messages = [] - await component.rerender({ + await component.update({ on: { submit: data => messages.push(data) } @@ -55,7 +55,7 @@ test('renderer updates slots without remounting', async ({ mount }) => { }) await expect(component).toContainText('Default Slot') - await component.rerender({ + await component.update({ slots: { main: 'Test Slot' } }) await expect(component).not.toContainText('Default Slot') diff --git a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx index c99f2a9551..181da95909 100644 --- a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx @@ -16,7 +16,7 @@ test('renderer updates props without remounting', async ({ mount }) => { const component = await mount() await expect(component.locator('#props')).toContainText('9001') - await component.rerender() + await component.update() await expect(component).not.toContainText('9001') await expect(component.locator('#props')).toContainText('1337') @@ -27,7 +27,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const messages = [] const component = await mount() - await component.rerender( { + await component.update( { messages.push(count) }} />) await component.click(); @@ -40,7 +40,7 @@ test('renderer updates slots without remounting', async ({ mount }) => { const component = await mount(Default Slot) await expect(component).toContainText('Default Slot') - await component.rerender( + await component.update( ) await expect(component).not.toContainText('Default Slot') 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 533d48e322..c31f99f627 100644 --- a/tests/components/ct-vue2-cli/src/notation-vue.spec.ts +++ b/tests/components/ct-vue2-cli/src/notation-vue.spec.ts @@ -23,7 +23,7 @@ test('renderer updates props without remounting', async ({ mount }) => { }) await expect(component.locator('#props')).toContainText('9001') - await component.rerender({ + await component.update({ props: { count: 1337 } }) await expect(component).not.toContainText('9001') @@ -36,7 +36,7 @@ test('renderer updates event listeners without remounting', async ({ mount }) => const component = await mount(Counter) const messages = [] - await component.rerender({ + await component.update({ on: { submit: data => messages.push(data) } @@ -53,13 +53,13 @@ test('renderer updates slots without remounting', async ({ mount }) => { }) await expect(component).toContainText('Default Slot') - await component.rerender({ + await component.update({ slots: { main: 'Test Slot' } }) await expect(component).not.toContainText('Default Slot') await expect(component).toContainText('Test Slot') - await component.rerender({ + await component.update({ slots: { default: 'Default Slot' } }) await expect(component).toContainText('Default Slot')