feat(ct): vue2 rerender (#16734)

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

@@ -34,24 +34,22 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
   }
 };
 
-interface MountResult extends Locator {
+export interface MountOptions<Props = Record<string, unknown>> {
+  props?: Props,
+  slots?: Record<string, unknown>,
+  on?: Record<string, Function>,
+  hooksConfig?: any,
+}
+
+interface MountResult<Props = Record<string, unknown>> extends Locator {
   unmount(): Promise<void>;
+  rerender(options: { props: Props }): Promise<void>
 }
 
 export interface ComponentFixtures {
   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<MountResult>;
-  mount<Props>(component: any, options: {
-    props: Props,
-    slots?: { [key: string]: any },
-    on?: { [key: string]: Function },
-    hooksConfig?: any,
-  }): Promise<MountResult>;
+  mount(component: any, options?: MountOptions): Promise<MountResult>;
+  mount<Props>(component: any, options: MountOptions<Required<Props>>): Promise<MountResult<Props>>;
 }
 
 export const test: TestType<

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;
+};

tests/components/ct-vue2-cli/src/components/Counter.vue

@@ -0,0 +1,21 @@
+<template>
+   <div>
+     <span id="remount-count">{{ remountCount }}</span>
+     <span id="rerender-count">{{ count }}</span>
+   </div>
+ </template>
+
+<script>
+  let remountCount = 0;
+  
+  export default {
+    name: 'Button',
+    props: ['count'],
+    data() {
+      return { remountCount }
+    },
+    beforeCreate() {
+      remountCount++;
+    },
+  }
+</script>

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(<Counter count={9001} />)
+  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(<Button title='Submit' v-on:submit={data => {

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

@@ -1,6 +1,7 @@
 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'
 
@@ -15,6 +16,23 @@ 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<{ count: number }>(Counter, {
+    props: {
+      count: 9001
+    }
+  })
+  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(Button, {