microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-01-05 19:04:43 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sand4rt 2022-10-11 04:56:33 +02:00 committed by GitHub
parent 3592269caf
commit 1a43af3fb6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/playwright-ct-react/index.d.ts vendored
View File

@ -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 {

2
packages/playwright-ct-react/registerSource.mjs
View File

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

2
packages/playwright-ct-svelte/index.d.ts vendored
View File

@ -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 {

2
packages/playwright-ct-svelte/registerSource.mjs
View File

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

4
packages/playwright-ct-vue/index.d.ts vendored
View File

@ -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 {

2
packages/playwright-ct-vue/registerSource.mjs
View File

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

4
packages/playwright-ct-vue2/index.d.ts vendored
View File

@ -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 {

2
packages/playwright-ct-vue2/registerSource.mjs
View File

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

12
packages/playwright-test/src/mount.ts
View File

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

2
packages/playwright-test/types/component.d.ts vendored
View File

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

6
tests/components/ct-react-vite/src/tests.spec.tsx
View File

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

6
tests/components/ct-react/src/tests.spec.tsx
View File

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

4
tests/components/ct-svelte-vite/src/tests.spec.ts
View File

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

4
tests/components/ct-svelte/src/tests.spec.ts
View File

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

4
tests/components/ct-vue-cli/src/notation-jsx.spec.tsx
View File

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

4
tests/components/ct-vue-cli/src/notation-vue.spec.ts
View File

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

6
tests/components/ct-vue-vite/src/notation-jsx.spec.tsx
View File

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

6
tests/components/ct-vue-vite/src/notation-vue.spec.js
View File

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

6
tests/components/ct-vue-vite/src/notation-vue.spec.ts
View File

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

6
tests/components/ct-vue2-cli/src/notation-jsx.spec.tsx
View File

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

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

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