microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-12 11:50:22 +03:00
Code Issues Projects Releases Wiki Activity

chore(ct): change setProps to rerender (#16204)

Browse Source
This commit is contained in:
sand4rt 2022-08-04 03:14:00 +02:00 committed by GitHub
parent e4efc300c7
commit e5cc78af67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 91 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,25 +34,22 @@ export type PlaywrightTestConfig = Omit<BasePlaywrightTestConfig, 'use'> & {
}
};
interface MountResult<Props = { [key: string]: any }> 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>;
setProps(props: Partial<Props>): 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<Props>>;
mount(component: any, options?: MountOptions): Promise<MountResult>;
mount<Props>(component: any, options: MountOptions<Required<Props>>): Promise<MountResult<Props>>;
}
export const test: TestType<

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

@ -181,11 +181,11 @@ window.playwrightUnmount = async element => {
app.unmount();
};
window.playwrightSetProps = async (element, props) => {
window.playwrightRerender = async (element, options) => {
const component = element[componentKey].component;
if (!component)
throw new Error('Component was not mounted');
for (const [key, value] of Object.entries(props))
for (const [key, value] of Object.entries(options.props || {}))
component.props[key] = value;
};

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

@ -15,13 +15,13 @@
*/
import type { Fixtures, Locator, Page, BrowserContextOptions, PlaywrightTestArgs, PlaywrightTestOptions, PlaywrightWorkerArgs, PlaywrightWorkerOptions, BrowserContext } from './types';
import type { Component, JsxComponent, ObjectComponentOptions } from '../types/component';
import type { Component, JsxComponent, MountOptions } from '../types/component';
let boundCallbacksForMount: Function[] = [];
interface MountResult extends Locator {
unmount: (locator: Locator) => Promise<void>;
setProps: (props: { [key: string]: any }) => Promise<void>;
unmount(locator: Locator): Promise<void>;
rerender(options: Omit<MountOptions, 'hooksConfig'>): Promise<void>;
}
export const fixtures: Fixtures<
@ -48,7 +48,7 @@ export const fixtures: Fixtures<
},
mount: async ({ page }, use) => {
await use(async (component: JsxComponent | string, options?: ObjectComponentOptions) => {
await use(async (component: JsxComponent | string, options?: MountOptions) => {
const selector = await (page as any)._wrapApiCall(async () => {
return await innerMount(page, component, options);
}, true);
@ -60,10 +60,10 @@ export const fixtures: Fixtures<
await window.playwrightUnmount(element, rootElement);
});
},
setProps: async (props: { [key: string]: any }) => {
await locator.evaluate(async (element, props) => {
return await window.playwrightSetProps(element, props);
}, props);
rerender: async (options: Omit<MountOptions, 'hooksConfig'>) => {
await locator.evaluate(async (element, options) => {
return await window.playwrightRerender(element, options);
}, options);
}
});
});
@ -71,7 +71,7 @@ export const fixtures: Fixtures<
},
};
async function innerMount(page: Page, jsxOrType: JsxComponent | string, options: ObjectComponentOptions = {}): Promise<string> {
async function innerMount(page: Page, jsxOrType: JsxComponent | string, options: MountOptions = {}): Promise<string> {
let component: Component;
if (typeof jsxOrType === 'string')
component = { kind: 'object', type: jsxOrType, options };

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

@ -17,13 +17,13 @@
export type JsxComponent = {
kind: 'jsx',
type: string,
props: {[key: string]: any},
props: Record<string, any>,
children: (Component | string)[],
};
export type ObjectComponentOptions = {
props?: { [key: string]: any },
slots?: { [key: string]: any },
export type MountOptions = {
props?: Record<string, any>,
slots?: Record<string, any>,
on?: { [key: string]: Function },
hooksConfig?: any,
};
@ -31,7 +31,7 @@ export type ObjectComponentOptions = {
export type ObjectComponent = {
kind: 'object',
type: string,
options?: ObjectComponentOptions
options?: MountOptions
};
export type Component = JsxComponent | ObjectComponent;
@ -40,6 +40,6 @@ declare global {
interface Window {
playwrightMount(component: Component, rootElement: Element, hooksConfig: any): Promise<void>;
playwrightUnmount(element: Element, rootElement: Element): Promise<void>;
playwrightSetProps(element: Element, props: { [key: string]: any }): Promise<void>;
playwrightRerender(element: Element, props: Omit<MountOptions, 'hooksConfig'>): Promise<void>;
}
}

3
tests/components/ct-vue-vite/src/components/Button.vue
View File

@ -3,9 +3,6 @@ defineProps({
title: {
type: String,
required: true
},
emits: {
submit: null,
}
})
</script>

21
tests/components/ct-vue-vite/src/components/Counter.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<span id="remount-count">{{ remountCount }}</span>
<span id="rerender-count">{{ count }}</span>
</div>
</template>
<script>
let remountCount = 0
</script>
<script setup>
defineProps({
count: {
type: Number,
required: true
}
})
remountCount++
</script>

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

@ -1,20 +1,27 @@
import { test, expect } from '@playwright/experimental-ct-vue'
import Button from './components/Button.vue'
import Counter from './components/Counter.vue'
import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue'
test.use({ viewport: { width: 500, height: 500 } })
test('props should work', async ({ mount }) => {
const component = await mount(<Button title='Submit'></Button>)
const component = await mount(<Button title="Submit" />)
await expect(component).toContainText('Submit')
})
test('update props should work', async ({ mount }) => {
const component = await mount(<Button title='Submit'></Button>);
await expect(component).toContainText('Submit');
await component.setProps({ title: 'Loading' });
await expect(component).toContainText('Loading');
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 }) => {
@ -71,7 +78,7 @@ test('slot should emit events', async ({ mount }) => {
test('should run hooks', async ({ page, mount }) => {
const messages = []
page.on('console', m => messages.push(m.text()))
await mount(<Button title='Submit'></Button>, {
await mount(<Button title="Submit" />, {
hooksConfig: { route: 'A' }
})
expect(messages).toEqual(['Before mount: {\"route\":\"A\"}, app: true', 'After mount el: HTMLButtonElement'])

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

@ -1,5 +1,6 @@
import { test, expect } from '@playwright/experimental-ct-vue'
import Button from './components/Button.vue'
import Counter from './components/Counter.vue'
import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue'
import Component from './components/Component.vue'
@ -15,17 +16,24 @@ test('props should work', async ({ mount }) => {
await expect(component).toContainText('Submit')
})
test('update props should work', async ({ mount }) => {
const component = await mount(Button, {
props: {
title: 'Submit'
test('renderer and keep the component instance intact', async ({ mount }) => {
const component = await mount(Counter, {
props: {
count: 9001
}
});
await expect(component).toContainText('Submit');
await component.setProps({ title: 'Loading' });
await expect(component).toContainText('Loading');
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, {

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

@ -1,6 +1,7 @@
import { test, expect } from '@playwright/experimental-ct-vue'
import Button from './components/Button.vue'
import Counter from './components/Counter.vue'
import DefaultSlot from './components/DefaultSlot.vue'
import NamedSlots from './components/NamedSlots.vue'
import Component from './components/Component.vue'
@ -16,15 +17,21 @@ test('props should work', async ({ mount }) => {
await expect(component).toContainText('Submit')
})
test('update props should work', async ({ mount }) => {
const component = await mount(Button, {
test('renderer and keep the component instance intact', async ({ mount }) => {
const component = await mount<{ count: number }>(Counter, {
props: {
title: 'Submit'
count: 9001
}
});
await expect(component).toContainText('Submit')
await component.setProps({ title: 'Loading' })
await expect(component).toContainText('Loading')
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 }) => {