mirror of
https://github.com/vuejs/babel-plugin-jsx.git
synced 2025-07-02 18:13:26 +08:00
chore: add snapshot
This commit is contained in:
@ -41,9 +41,13 @@ export default () => ({
|
||||
.filter((specifier) => {
|
||||
if (t.isImportSpecifier(specifier)) {
|
||||
const { imported, local } = specifier;
|
||||
specifierNames.add(imported.name);
|
||||
return local.name !== imported.name;
|
||||
} if (t.isImportNamespaceSpecifier(specifier)) {
|
||||
if (local.name === imported.name) {
|
||||
specifierNames.add(imported.name);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
if (t.isImportNamespaceSpecifier(specifier)) {
|
||||
// should keep when `import * as Vue from 'vue'`
|
||||
shouldKeep = true;
|
||||
}
|
||||
|
@ -0,0 +1,159 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`MereProps Order: MereProps Order 1`] = `
|
||||
"import { createTextVNode, mergeProps, createVNode } from \\"vue\\";
|
||||
createVNode(\\"button\\", mergeProps({
|
||||
\\"loading\\": true
|
||||
}, x, {
|
||||
\\"type\\": \\"submit\\"
|
||||
}), [createTextVNode(\\"btn\\")], 16, [\\"loading\\"]);"
|
||||
`;
|
||||
|
||||
exports[`Merge class/ style attributes into array: Merge class/ style attributes into array 1`] = `
|
||||
"import { createVNode } from \\"vue\\";
|
||||
createVNode(\\"div\\", {
|
||||
\\"class\\": [\\"a\\", b],
|
||||
\\"style\\": [\\"color: red\\", s]
|
||||
}, null, 6);"
|
||||
`;
|
||||
|
||||
exports[`Without JSX should work: Without JSX should work 1`] = `
|
||||
"import { createVNode } from 'vue';
|
||||
createVNode('div', null, ['Without JSX should work']);"
|
||||
`;
|
||||
|
||||
exports[`Without props: Without props 1`] = `
|
||||
"import { createTextVNode, createVNode } from \\"vue\\";
|
||||
createVNode(\\"a\\", null, [createTextVNode(\\"a\\")]);"
|
||||
`;
|
||||
|
||||
exports[`custom directive: custom directive 1`] = `
|
||||
"import { resolveComponent, resolveDirective, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(resolveComponent(\\"A\\"), null, null, 512), [[resolveDirective(\\"cus\\"), x]]);"
|
||||
`;
|
||||
|
||||
exports[`dynamic type in input: dynamic type in input 1`] = `
|
||||
"import { vModelDynamic, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"input\\", {
|
||||
\\"type\\": type,
|
||||
\\"onUpdate:modelValue\\": $event => test = $event
|
||||
}, null, 8, [\\"type\\", \\"onUpdate:modelValue\\"]), [[vModelDynamic, test]]);"
|
||||
`;
|
||||
|
||||
exports[`input[type="checkbox"]: input[type="checkbox"] 1`] = `
|
||||
"import { vModelCheckbox, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"input\\", {
|
||||
\\"type\\": \\"checkbox\\",
|
||||
\\"onUpdate:modelValue\\": $event => test = $event
|
||||
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelCheckbox, test]]);"
|
||||
`;
|
||||
|
||||
exports[`input[type="radio"]: input[type="radio"] 1`] = `
|
||||
"import { Fragment, vModelRadio, createVNode, withDirectives } from \\"vue\\";
|
||||
createVNode(Fragment, null, [withDirectives(createVNode(\\"input\\", {
|
||||
\\"type\\": \\"radio\\",
|
||||
\\"value\\": \\"1\\",
|
||||
\\"onUpdate:modelValue\\": $event => test = $event,
|
||||
\\"name\\": \\"test\\"
|
||||
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelRadio, test]]), withDirectives(createVNode(\\"input\\", {
|
||||
\\"type\\": \\"radio\\",
|
||||
\\"value\\": \\"2\\",
|
||||
\\"onUpdate:modelValue\\": $event => test = $event,
|
||||
\\"name\\": \\"test\\"
|
||||
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelRadio, test]])]);"
|
||||
`;
|
||||
|
||||
exports[`input[type="text"] .lazy modifier: input[type="text"] .lazy modifier 1`] = `
|
||||
"import { vModelText, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"input\\", {
|
||||
\\"onUpdate:modelValue\\": $event => test = $event
|
||||
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test, void 0, {
|
||||
lazy: true
|
||||
}]]);"
|
||||
`;
|
||||
|
||||
exports[`input[type="text"]: input[type="text"] 1`] = `
|
||||
"import { vModelText, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"input\\", {
|
||||
\\"onUpdate:modelValue\\": $event => test = $event
|
||||
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test]]);"
|
||||
`;
|
||||
|
||||
exports[`reassign variable as component: reassign variable as component 1`] = `
|
||||
"import { defineComponent, createVNode } from \\"vue\\";
|
||||
let a = 1;
|
||||
const A = defineComponent({
|
||||
setup(_, {
|
||||
slots
|
||||
}) {
|
||||
return () => createVNode(\\"span\\", null, [slots.default()]);
|
||||
}
|
||||
|
||||
});
|
||||
const _a = 1;
|
||||
|
||||
const __a = function () {
|
||||
return a;
|
||||
}();
|
||||
|
||||
a = createVNode(A, null, {
|
||||
default: () => [__a],
|
||||
_: 2
|
||||
});"
|
||||
`;
|
||||
|
||||
exports[`select: select 1`] = `
|
||||
"import { createTextVNode, createVNode, vModelSelect, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"select\\", {
|
||||
\\"onUpdate:modelValue\\": $event => test = $event
|
||||
}, [createVNode(\\"option\\", {
|
||||
\\"value\\": \\"1\\"
|
||||
}, [createTextVNode(\\"a\\")]), createVNode(\\"option\\", {
|
||||
\\"value\\": 2
|
||||
}, [createTextVNode(\\"b\\")]), createVNode(\\"option\\", {
|
||||
\\"value\\": 3
|
||||
}, [createTextVNode(\\"c\\")])], 8, [\\"onUpdate:modelValue\\"]), [[vModelSelect, test]]);"
|
||||
`;
|
||||
|
||||
exports[`should keep \`import * as Vue from "vue"\`: should keep \`import * as Vue from "vue"\` 1`] = `
|
||||
"import { createTextVNode, createVNode } from \\"vue\\";
|
||||
import * as Vue from 'vue';
|
||||
createVNode(\\"div\\", null, [createTextVNode(\\"Vue\\")]);"
|
||||
`;
|
||||
|
||||
exports[`single no need for a mergeProps call: single no need for a mergeProps call 1`] = `
|
||||
"import { createTextVNode, createVNode } from \\"vue\\";
|
||||
createVNode(\\"div\\", x, [createTextVNode(\\"single\\")], 16);"
|
||||
`;
|
||||
|
||||
exports[`specifiers should be merged into a single importDeclaration: specifiers should be merged into a single importDeclaration 1`] = `
|
||||
"import { createVNode, vShow } from \\"vue\\";
|
||||
import { Fragment as _Fragment } from \\"vue\\";
|
||||
createVNode(_Fragment, null, null);"
|
||||
`;
|
||||
|
||||
exports[`textarea: textarea 1`] = `
|
||||
"import { vModelText, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"textarea\\", {
|
||||
\\"onUpdate:modelValue\\": $event => test = $event
|
||||
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test]]);"
|
||||
`;
|
||||
|
||||
exports[`v-show: v-show 1`] = `
|
||||
"import { createTextVNode, vShow, createVNode, withDirectives } from \\"vue\\";
|
||||
withDirectives(createVNode(\\"div\\", null, [createTextVNode(\\"vShow\\")], 512), [[vShow, x]]);"
|
||||
`;
|
||||
|
||||
exports[`vHtml: vHtml 1`] = `
|
||||
"import { createVNode } from \\"vue\\";
|
||||
createVNode(\\"h1\\", {
|
||||
\\"innerHTML\\": \\"<div>foo</div>\\"
|
||||
}, null, 8, [\\"innerHTML\\"]);"
|
||||
`;
|
||||
|
||||
exports[`vText: vText 1`] = `
|
||||
"import { createVNode } from \\"vue\\";
|
||||
createVNode(\\"div\\", {
|
||||
\\"textContent\\": text
|
||||
}, null, 8, [\\"textContent\\"]);"
|
||||
`;
|
@ -1,16 +0,0 @@
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { transformSync } from '@babel/core';
|
||||
import preset from '../babel.config.js';
|
||||
|
||||
test('coverage', () => {
|
||||
['index.test.tsx', 'v-model.test.tsx']
|
||||
.forEach((filename) => {
|
||||
const mainTest = fs.readFileSync(path.resolve(__dirname, `./${filename}`)).toString();
|
||||
transformSync(mainTest, {
|
||||
babelrc: false,
|
||||
presets: [preset],
|
||||
filename,
|
||||
});
|
||||
});
|
||||
});
|
144
packages/babel-plugin-jsx/test/snapshot.test.ts
Normal file
144
packages/babel-plugin-jsx/test/snapshot.test.ts
Normal file
@ -0,0 +1,144 @@
|
||||
import { transform } from '@babel/core';
|
||||
import JSX from '../src';
|
||||
|
||||
const transpile = (source: string) => new Promise((resolve, reject) => transform(
|
||||
source,
|
||||
{
|
||||
filename: '',
|
||||
presets: null,
|
||||
plugins: [[JSX, { optimize: true }]],
|
||||
configFile: false,
|
||||
}, (error, result) => {
|
||||
if (error) {
|
||||
return reject(error);
|
||||
}
|
||||
resolve(result?.code);
|
||||
},
|
||||
));
|
||||
|
||||
const tests = [
|
||||
{
|
||||
name: 'input[type="checkbox"]',
|
||||
from: '<input type="checkbox" v-model={test} />',
|
||||
},
|
||||
{
|
||||
name: 'input[type="radio"]',
|
||||
from: `
|
||||
<>
|
||||
<input type="radio" value="1" v-model={test} name="test" />
|
||||
<input type="radio" value="2" v-model={test} name="test" />
|
||||
</>
|
||||
`,
|
||||
},
|
||||
{
|
||||
name: 'select',
|
||||
from: `
|
||||
<select v-model={test}>
|
||||
<option value="1">a</option>
|
||||
<option value={2}>b</option>
|
||||
<option value={3}>c</option>
|
||||
</select>
|
||||
`,
|
||||
},
|
||||
{
|
||||
name: 'textarea',
|
||||
from: '<textarea v-model={test} />',
|
||||
},
|
||||
{
|
||||
name: 'input[type="text"]',
|
||||
from: '<input v-model={test} />',
|
||||
},
|
||||
{
|
||||
name: 'dynamic type in input',
|
||||
from: '<input type={type} v-model={test} />',
|
||||
},
|
||||
{
|
||||
name: 'v-show',
|
||||
from: '<div v-show={x}>vShow</div>',
|
||||
},
|
||||
{
|
||||
name: 'input[type="text"] .lazy modifier',
|
||||
from: `
|
||||
<input v-model={[test, ['lazy']]} />
|
||||
`,
|
||||
},
|
||||
{
|
||||
name: 'custom directive',
|
||||
from: '<A vCus={x} />',
|
||||
},
|
||||
{
|
||||
name: 'vHtml',
|
||||
from: '<h1 v-html="<div>foo</div>"></h1>',
|
||||
},
|
||||
{
|
||||
name: 'vText',
|
||||
from: '<div v-text={text}></div>',
|
||||
},
|
||||
{
|
||||
name: 'Without props',
|
||||
from: '<a>a</a>',
|
||||
},
|
||||
{
|
||||
name: 'MereProps Order',
|
||||
from: '<button loading {...x} type="submit">btn</button>',
|
||||
},
|
||||
{
|
||||
name: 'Merge class/ style attributes into array',
|
||||
from: '<div class="a" class={b} style="color: red" style={s}></div>',
|
||||
},
|
||||
{
|
||||
name: 'single no need for a mergeProps call',
|
||||
from: '<div {...x}>single</div>',
|
||||
},
|
||||
{
|
||||
name: 'should keep `import * as Vue from "vue"`',
|
||||
from: `
|
||||
import * as Vue from 'vue';
|
||||
|
||||
<div>Vue</div>
|
||||
`,
|
||||
},
|
||||
{
|
||||
name: 'specifiers should be merged into a single importDeclaration',
|
||||
from: `
|
||||
import { createVNode, Fragment as _Fragment } from 'vue';
|
||||
import { vShow } from 'vue'
|
||||
|
||||
<_Fragment />
|
||||
`,
|
||||
},
|
||||
{
|
||||
name: 'Without JSX should work',
|
||||
from: `
|
||||
import { createVNode } from 'vue';
|
||||
createVNode('div', null, ['Without JSX should work']);
|
||||
`,
|
||||
},
|
||||
{
|
||||
name: 'reassign variable as component',
|
||||
from: `
|
||||
import { defineComponent } from 'vue';
|
||||
let a = 1;
|
||||
const A = defineComponent({
|
||||
setup(_, { slots }) {
|
||||
return () => <span>{slots.default()}</span>;
|
||||
},
|
||||
});
|
||||
|
||||
const _a = 1;
|
||||
|
||||
a = <A>{a}</A>;
|
||||
`,
|
||||
},
|
||||
];
|
||||
|
||||
tests.forEach((
|
||||
{ name, from },
|
||||
) => {
|
||||
test(
|
||||
name,
|
||||
async () => {
|
||||
expect(await transpile(from)).toMatchSnapshot(name);
|
||||
},
|
||||
);
|
||||
});
|
Reference in New Issue
Block a user