yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ct): empty slots or children (#28225)

Browse Source 
closes: https://github.com/microsoft/playwright/issues/28212
This commit is contained in:
Sander 2023-11-28 00:53:50 +01:00 committed by GitHub
parent 96ce1a8f88
commit f58c1f37eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 55 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/playwright-ct-core/src/tsxTransform.ts
View File

@ -121,12 +121,15 @@ export default declare((api: BabelAPI) => {
children.push(t.spreadElement(child.expression));
}
path.replaceWith(t.objectExpression([
const component = [
t.objectProperty(t.identifier('kind'), t.stringLiteral('jsx')),
t.objectProperty(t.identifier('type'), t.stringLiteral(componentName)),
t.objectProperty(t.identifier('props'), t.objectExpression(props)),
t.objectProperty(t.identifier('children'), t.arrayExpression(children)),
]));
];
if (children.length)
component.push(t.objectProperty(t.identifier('children'), t.arrayExpression(children)));
path.replaceWith(t.objectExpression(component));
}
}
};

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

@ -25,7 +25,7 @@ export type JsxComponent = {
kind: 'jsx',
type: string,
props: Record<string, any>,
children: JsxComponentChild[],
children?: JsxComponentChild[],
};
export type MountOptions = {

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

@ -71,7 +71,7 @@ async function __pwResolveComponent(component) {
if (componentFactory)
__pwRegistry.set(component.type, await componentFactory());
if ('children' in component)
if (component.children?.length)
await Promise.all(component.children.map(child => __pwResolveComponent(child)));
}
@ -91,7 +91,7 @@ function __renderChild(child) {
*/
function __pwRender(component) {
const componentFunc = __pwRegistry.get(component.type);
const children = component.children.map(child => __renderChild(child)).filter(child => {
const children = component.children?.map(child => __renderChild(child)).filter(child => {
if (typeof child === 'string')
return !!child.trim();
return true;

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

@ -70,7 +70,7 @@ async function __pwResolveComponent(component) {
if (componentFactory)
__pwRegistry.set(component.type, await componentFactory());
if ('children' in component)
if (component.children?.length)
await Promise.all(component.children.map(child => __pwResolveComponent(child)));
}
@ -90,7 +90,7 @@ function __renderChild(child) {
*/
function __pwRender(component) {
const componentFunc = __pwRegistry.get(component.type);
const children = component.children.map(child => __renderChild(child)).filter(child => {
const children = component.children?.map(child => __renderChild(child)).filter(child => {
if (typeof child === 'string')
return !!child.trim();
return true;

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

@ -69,7 +69,7 @@ async function __pwResolveComponent(component) {
if (componentFactory)
__pwRegistry.set(component.type, await componentFactory());
if ('children' in component)
if (component.children?.length)
await Promise.all(component.children.map(child => __pwResolveComponent(child)));
}
@ -89,7 +89,7 @@ function __pwCreateChild(child) {
*/
function __pwCreateComponent(component) {
const componentFunc = __pwRegistry.get(component.type);
const children = component.children.map(child => __pwCreateChild(child)).filter(child => {
const children = component.children?.map(child => __pwCreateChild(child)).filter(child => {
if (typeof child === 'string')
return !!child.trim();
return true;

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

@ -72,7 +72,7 @@ async function __pwResolveComponent(component) {
if (componentFactory)
__pwRegistry.set(component.type, await componentFactory());
if ('children' in component)
if ('children' in component && component.children?.length)
await Promise.all(component.children.map(child => __pwResolveComponent(child)));
}
@ -156,7 +156,7 @@ function __pwCreateComponent(component) {
if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
slots[slot] = child.children.map(__pwCreateChild);
slots[slot] = child.children?.map(__pwCreateChild);
} else {
children.push(__pwCreateChild(child));
}

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

@ -71,7 +71,7 @@ async function __pwResolveComponent(component) {
if (componentFactory)
__pwRegistry.set(component.type, await componentFactory());
if ('children' in component)
if ('children' in component && component.children?.length)
await Promise.all(component.children.map(child => __pwResolveComponent(child)));
}
@ -124,7 +124,7 @@ function __pwCreateComponent(component) {
if (typeof child !== 'string' && child.type === 'template' && child.kind === 'jsx') {
const slotProperty = Object.keys(child.props).find(k => k.startsWith('v-slot:'));
const slot = slotProperty ? slotProperty.substring('v-slot:'.length) : 'default';
nodeData.scopedSlots[slot] = () => child.children.map(c => __pwCreateChild(c));
nodeData.scopedSlots[slot] = () => child.children?.map(c => __pwCreateChild(c));
} else {
children.push(__pwCreateChild(child));
}

3
tests/components/ct-react-vite/src/components/EmptyFragment.tsx
View File

@ -1,3 +1,4 @@
export default function EmptyFragment() {
export default function EmptyFragment(props: unknown) {
Object.assign(window, { props });
return <>{[]}</>;
}

3
tests/components/ct-react-vite/tests/render.spec.tsx
View File

@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
await expect(component).toHaveClass('primary');
});
test('get textContent of the empty fragment', async ({ mount }) => {
test('render an empty component', async ({ mount, page }) => {
const component = await mount(<EmptyFragment />);
expect(await page.evaluate(() => 'props' in window && window.props)).toEqual({});
expect(await component.allTextContents()).toEqual(['']);
expect(await component.textContent()).toBe('');
await expect(component).toHaveText('');

3
tests/components/ct-react17/src/components/EmptyFragment.tsx
View File

@ -1,3 +1,4 @@
export default function EmptyFragment() {
export default function EmptyFragment(props: unknown) {
Object.assign(window, { props });
return <>{[]}</>;
}

3
tests/components/ct-react17/tests/render.spec.tsx
View File

@ -20,8 +20,9 @@ test('render delayed data', async ({ mount }) => {
await expect(component).toHaveText('complete');
});
test('get textContent of the empty fragment', async ({ mount }) => {
test('render an empty component', async ({ mount, page }) => {
const component = await mount(<EmptyFragment />);
expect(await page.evaluate(() => 'props' in window && window.props)).toEqual({});
expect(await component.allTextContents()).toEqual(['']);
expect(await component.textContent()).toBe('');
await expect(component).toHaveText('');

3
tests/components/ct-solid/src/components/EmptyFragment.tsx
View File

@ -1,3 +1,4 @@
export default function EmptyFragment() {
export default function EmptyFragment(props: unknown) {
Object.assign(window, { props });
return <>{[]}</>;
}

3
tests/components/ct-solid/tests/render.spec.tsx
View File

@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
await expect(component).toHaveClass('primary');
});
test('get textContent of the empty fragment', async ({ mount }) => {
test('render an empty component', async ({ mount, page }) => {
const component = await mount(<EmptyFragment />);
expect(await page.evaluate(() => 'props' in window && window.props)).toEqual({});
expect(await component.allTextContents()).toEqual(['']);
expect(await component.textContent()).toBe('');
await expect(component).toHaveText('');

8
tests/components/ct-vue-cli/src/components/EmptyTemplate.vue
View File

@ -1,2 +1,8 @@
<script lang="ts" setup>
import { useSlots } from 'vue';
const slots = useSlots();
Object.assign(window, { slots });
</script>
<template>
</template>
</template>

3
tests/components/ct-vue-cli/tests/render/render.spec.tsx
View File

@ -7,8 +7,9 @@ test('render props', async ({ mount }) => {
await expect(component).toContainText('Submit');
});
test('get textContent of the empty template', async ({ mount }) => {
test('render an empty component', async ({ page, mount }) => {
const component = await mount(<EmptyTemplate />);
expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
expect(await component.allTextContents()).toEqual(['']);
expect(await component.textContent()).toBe('');
await expect(component).toHaveText('');

7
tests/components/ct-vue-vite/src/components/EmptyTemplate.vue
View File

@ -1,2 +1,7 @@
<script lang="ts" setup>
import { useSlots } from 'vue';
const slots = useSlots();
Object.assign(window, { slots });
</script>
<template>
</template>
</template>

3
tests/components/ct-vue-vite/tests/render/render.spec.tsx
View File

@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
await expect(component).toHaveClass('primary');
});
test('get textContent of the empty template', async ({ mount }) => {
test('render an empty component', async ({ page, mount }) => {
const component = await mount(<EmptyTemplate />);
expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
expect(await component.allTextContents()).toEqual(['']);
expect(await component.textContent()).toBe('');
await expect(component).toHaveText('');

8
tests/components/ct-vue2-cli/src/components/EmptyTemplate.vue
View File

@ -1,2 +1,8 @@
<script lang="ts" setup>
import { useSlots } from 'vue';
const slots = useSlots();
Object.assign(window, { slots });
</script>
<template>
</template>
</template>

3
tests/components/ct-vue2-cli/tests/render/render.spec.tsx
View File

@ -12,8 +12,9 @@ test('render attributes', async ({ mount }) => {
await expect(component).toHaveClass('primary');
});
test('get textContent of the empty template', async ({ mount }) => {
test('render an empty component', async ({ page, mount }) => {
const component = await mount(<EmptyTemplate />);
expect(await page.evaluate(() => 'slots' in window && window.slots)).toEqual({});
expect(await component.allTextContents()).toEqual(['']);
expect(await component.textContent()).toBe('');
await expect(component).toHaveText('');