images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2024-11-10 09:39:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add test for object slots

Browse Source
This commit is contained in:
Amour1688 2020-12-12 00:36:24 +08:00
parent c04904f209
commit 87f614b703
2 changed files with 34 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/babel-plugin-jsx/src/transform-vue-jsx.ts
View File

@ -121,8 +121,8 @@ const transformJSXElement = (
} else if (
t.isCallExpression(child) && child.loc && isComponent
) { // the element was generated and doesn't have location information
const slotId = path.scope.generateUidIdentifier('slot');
const scope = path.scope;
const { scope } = path;
const slotId = scope.generateUidIdentifier('slot');
if (scope) {
scope.push({
id: slotId,

38
packages/babel-plugin-jsx/test/index.test.tsx
View File

@ -571,23 +571,49 @@ describe('should support passing object slots via JSX children', () => {
expect(wrapper.html()).toBe('<span>foo<!----></span>');
});
test('single expression, array map expression', () => {
const Test = defineComponent({
setup(_, { slots }) {
return () => <span>{slots.default?.()}</span>;
test('single expression, function expression variable', () => {
const foo = () => 'foo';
const wrapper = mount({
render() {
return (
<A>{foo}</A>
);
},
});
expect(wrapper.html()).toBe('<span>foo<!----></span>');
});
test('single expression, array map expression', () => {
const data = ['A', 'B', 'C'];
const wrapper = mount({
render() {
return (
<div>{data.map((item: string) => <Test><span>{item}</span></Test>)}</div>
<>
{data.map((item) => <A><span>{item}</span></A>)}
</>
);
},
});
expect(wrapper.html()).toBe('<div><span><span>A</span></span><span><span>B</span></span><span><span>C</span></span></div>');
expect(wrapper.html()).toBe('<span><span>A</span><!----></span><span><span>B</span><!----></span><span><span>C</span><!----></span>');
});
test('xx', () => {
const data = ['A', 'B', 'C'];
const wrapper = mount({
render() {
return (
<>
{data.map((item) => <A>{() => <span>{item}</span>}</A>)}
</>
);
},
});
expect(wrapper.html()).toBe('<span><span>A</span><!----></span><span><span>B</span><!----></span><span><span>C</span><!----></span>');
});
});