feat(ct): rerender to update (#17972)

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

@@ -45,7 +45,7 @@ export interface MountOptions {
 
 interface MountResult extends Locator {
   unmount(): Promise<void>;
-  rerender(component: JSX.Element): Promise<void>;
+  update(component: JSX.Element): Promise<void>;
 }
 
 export interface ComponentFixtures {

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

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

@@ -51,7 +51,7 @@ export interface MountOptions<Component extends SvelteComponent = SvelteComponen
 
 interface MountResult<Component extends SvelteComponent> extends Locator {
   unmount(): Promise<void>;
-  rerender(options: Omit<MountOptions<Component>, 'hooksConfig'|'slots'>): Promise<void>
+  update(options: Omit<MountOptions<Component>, 'hooksConfig'|'slots'>): Promise<void>
 }
 
 interface ComponentFixtures {

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');

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

@@ -50,12 +50,12 @@ export interface MountOptions<Props = Record<string, unknown>> {
 
 interface MountResult<Props = Record<string, unknown>> extends Locator {
   unmount(): Promise<void>;
-  rerender(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
+  update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
 }
 
 interface MountResultJsx extends Locator {
   unmount(): Promise<void>;
-  rerender(component: JSX.Element): Promise<void>
+  update(component: JSX.Element): Promise<void>
 }
 
 export interface ComponentFixtures {

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');

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

@@ -50,12 +50,12 @@ export interface MountOptions<Props = Record<string, unknown>> {
 
 interface MountResult<Props = Record<string, unknown>> extends Locator {
   unmount(): Promise<void>;
-  rerender(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
+  update(options: Omit<MountOptions<Props>, 'hooksConfig'>): Promise<void>
 }
 
 interface MountResultJsx extends Locator {
   unmount(): Promise<void>;
-  rerender(component: JSX.Element): Promise<void>
+  update(component: JSX.Element): Promise<void>
 }
 
 export interface ComponentFixtures {

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');

packages/playwright-test/src/mount.ts

@@ -21,7 +21,7 @@ let boundCallbacksForMount: Function[] = [];
 
 interface MountResult extends Locator {
   unmount(locator: Locator): Promise<void>;
-  rerender(options: Omit<MountOptions, 'hooksConfig'> | string | JsxComponent): Promise<void>;
+  update(options: Omit<MountOptions, 'hooksConfig'> | string | JsxComponent): Promise<void>;
 }
 
 export const fixtures: Fixtures<
@@ -60,9 +60,9 @@ export const fixtures: Fixtures<
               await window.playwrightUnmount(rootElement);
             });
           },
-          rerender: async (options: JsxComponent | Omit<MountOptions, 'hooksConfig'>) => {
-            if (isJsxApi(options)) return await innerRerender(page, options);
-            await innerRerender(page, component, options);
+          update: async (options: JsxComponent | Omit<MountOptions, 'hooksConfig'>) => {
+            if (isJsxApi(options)) return await innerUpdate(page, options);
+            await innerUpdate(page, component, options);
           }
         });
       });
@@ -74,7 +74,7 @@ function isJsxApi(options: Record<string, unknown>): options is JsxComponent {
   return options?.kind === 'jsx';
 }
 
-async function innerRerender(page: Page, jsxOrType: JsxComponent | string, options: Omit<MountOptions, 'hooksConfig'> = {}): Promise<void> {
+async function innerUpdate(page: Page, jsxOrType: JsxComponent | string, options: Omit<MountOptions, 'hooksConfig'> = {}): Promise<void> {
   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 });
 }
 

packages/playwright-test/types/component.d.ts

@@ -40,6 +40,6 @@ declare global {
   interface Window {
     playwrightMount(component: Component, rootElement: Element, hooksConfig: any): Promise<void>;
     playwrightUnmount(rootElement: Element): Promise<void>;
-    playwrightRerender(rootElement: Element, component: Component): Promise<void>;
+    playwrightUpdate(rootElement: Element, component: Component): Promise<void>;
   }
 }

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(<Counter count={9001} />)
   await expect(component.locator('#props')).toContainText('9001')
 
-  await component.rerender(<Counter count={1337} />)
+  await component.update(<Counter count={1337} />)
   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(<Counter />)
 
   const messages: string[] = []
-  await component.rerender(<Counter onClick={message => {
+  await component.update(<Counter onClick={message => {
     messages.push(message)
   }} />)
   await component.click();
@@ -41,7 +41,7 @@ test('renderer updates slots without remounting', async ({ mount }) => {
   const component = await mount(<Counter>Default Slot</Counter>)
   await expect(component).toContainText('Default Slot')
 
-  await component.rerender(<Counter>Test Slot</Counter>)
+  await component.update(<Counter>Test Slot</Counter>)
   await expect(component).not.toContainText('Default Slot')
   await expect(component).toContainText('Test Slot')
 

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

@@ -20,7 +20,7 @@ test('renderer updates props without remounting', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />)
   await expect(component.locator('#props')).toContainText('9001')
 
-  await component.rerender(<Counter count={1337} />)
+  await component.update(<Counter count={1337} />)
   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(<Counter />)
 
   const messages: string[] = []
-  await component.rerender(<Counter onClick={message => {
+  await component.update(<Counter onClick={message => {
     messages.push(message)
   }} />)
   await component.click();
@@ -44,7 +44,7 @@ test('renderer updates slots without remounting', async ({ mount }) => {
   const component = await mount(<Counter>Default Slot</Counter>)
   await expect(component).toContainText('Default Slot')
 
-  await component.rerender(<Counter>Test Slot</Counter>)
+  await component.update(<Counter>Test Slot</Counter>)
   await expect(component).not.toContainText('Default Slot')
   await expect(component).toContainText('Test Slot')
 

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)
     }

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)
     }

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(<Counter count={9001} />);
   await expect(component.locator('#rerender-count')).toContainText('9001')
 
-  await component.rerender(<Counter count={1337} />)
+  await component.update(<Counter count={1337} />)
   await expect(component.locator('#rerender-count')).toContainText('1337')
 
-  await component.rerender(<Counter count={42} />)
+  await component.update(<Counter count={42} />)
   await expect(component.locator('#rerender-count')).toContainText('42')
 
   await expect(component.locator('#remount-count')).toContainText('1')

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')

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(<Counter count={9001} />)
   await expect(component.locator('#props')).toContainText('9001')
 
-  await component.rerender(<Counter count={1337} />)
+  await component.update(<Counter count={1337} />)
   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(<Counter />)
 
   const messages = []
-  await component.rerender(<Counter v-on:submit={count => { 
+  await component.update(<Counter v-on:submit={count => { 
     messages.push(count) 
   }} />)
   await component.click();
@@ -41,7 +41,7 @@ test('renderer updates slots without remounting', async ({ mount }) => {
   const component = await mount(<Counter>Default Slot</Counter>)
   await expect(component).toContainText('Default Slot')
 
-  await component.rerender(<Counter>
+  await component.update(<Counter>
     <template v-slot:main>Test Slot</template>
   </Counter>)
   await expect(component).not.toContainText('Default Slot')

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')

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')

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(<Counter count={9001} />)
   await expect(component.locator('#props')).toContainText('9001')
 
-  await component.rerender(<Counter count={1337} />)
+  await component.update(<Counter count={1337} />)
   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(<Counter />)
 
-  await component.rerender(<Counter v-on:submit={count => { 
+  await component.update(<Counter v-on:submit={count => { 
     messages.push(count) 
   }} />)
   await component.click();
@@ -40,7 +40,7 @@ test('renderer updates slots without remounting', async ({ mount }) => {
   const component = await mount(<Counter>Default Slot</Counter>)
   await expect(component).toContainText('Default Slot')
 
-  await component.rerender(<Counter>
+  await component.update(<Counter>
     <template v-slot:main>Test Slot</template>
   </Counter>)
   await expect(component).not.toContainText('Default Slot')

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')