diff --git a/packages/playwright-ct-vue2/index.d.ts b/packages/playwright-ct-vue2/index.d.ts index 7962cad690..684e7a1e89 100644 --- a/packages/playwright-ct-vue2/index.d.ts +++ b/packages/playwright-ct-vue2/index.d.ts @@ -34,24 +34,22 @@ export type PlaywrightTestConfig = Omit & { } }; -interface MountResult extends Locator { +export interface MountOptions> { + props?: Props, + slots?: Record, + on?: Record, + hooksConfig?: any, +} + +interface MountResult> extends Locator { unmount(): Promise; + rerender(options: { props: Props }): Promise } export interface ComponentFixtures { mount(component: JSX.Element): Promise; - mount(component: any, options?: { - props?: { [key: string]: any }, - slots?: { [key: string]: any }, - on?: { [key: string]: Function }, - hooksConfig?: any, - }): Promise; - mount(component: any, options: { - props: Props, - slots?: { [key: string]: any }, - on?: { [key: string]: Function }, - hooksConfig?: any, - }): Promise; + mount(component: any, options?: MountOptions): Promise; + mount(component: any, options: MountOptions>): Promise>; } export const test: TestType< diff --git a/packages/playwright-ct-vue2/registerSource.mjs b/packages/playwright-ct-vue2/registerSource.mjs index 32185c2523..eb22de82e6 100644 --- a/packages/playwright-ct-vue2/registerSource.mjs +++ b/packages/playwright-ct-vue2/registerSource.mjs @@ -157,3 +157,12 @@ window.playwrightUnmount = async rootElement => { component.$destroy(); component.$el.remove(); }; + +window.playwrightRerender = async (element, options) => { + const component = /** @type {any} */(element)[instanceKey]; + if (!component) + throw new Error('Component was not mounted'); + + for (const [key, value] of Object.entries(/** @type {any} */(options).props)) + component.$children[0][key] = value; +}; diff --git a/tests/components/ct-vue2-cli/src/components/Counter.vue b/tests/components/ct-vue2-cli/src/components/Counter.vue new file mode 100644 index 0000000000..9f4251ae9f --- /dev/null +++ b/tests/components/ct-vue2-cli/src/components/Counter.vue @@ -0,0 +1,21 @@ + + + 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 a6928e89cf..31a02359be 100644 --- a/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx +++ b/tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx @@ -1,5 +1,6 @@ import { test, expect } from '@playwright/experimental-ct-vue2' import Button from './components/Button.vue' +import Counter from './components/Counter.vue' import DefaultSlot from './components/DefaultSlot.vue' import NamedSlots from './components/NamedSlots.vue' @@ -10,6 +11,19 @@ test('props should work', async ({ mount }) => { await expect(component).toContainText('Submit') }) +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({ props: { count: 1337 } }) + await expect(component.locator('#rerender-count')).toContainText('1337') + + await component.rerender({ props: { count: 42 } }) + await expect(component.locator('#rerender-count')).toContainText('42') + + await expect(component.locator('#remount-count')).toContainText('1') +}) + test('event should work', async ({ mount }) => { const messages = [] const component = await mount(