Skip to content

Commit 41b2d64

Browse files
KocalKocal
committed
Add functional test for Vue and JSX
1 parent edc5a63 commit 41b2d64

File tree

11 files changed

+244
-0
lines changed

11 files changed

+244
-0
lines changed

‎fixtures/vuejs-jsx/App.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#app {
2+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
3+
-webkit-font-smoothing: antialiased;
4+
-moz-osx-font-smoothing: grayscale;
5+
text-align: center;
6+
color: #2c3e50;
7+
margin-top: 60px;
8+
}

‎fixtures/vuejs-jsx/App.jsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import './App.css';
2+
import './App.scss';
3+
import './App.less';
4+
import Hello from './components/Hello';
5+
6+
class TestClassSyntax {
7+
8+
}
9+
10+
export default {
11+
name: 'app',
12+
render() {
13+
return (
14+
<div id="app">
15+
<img src={require('./assets/logo.png')}/>
16+
<Hello></Hello>
17+
</div>
18+
);
19+
},
20+
};

‎fixtures/vuejs-jsx/App.less

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
#app {
2+
margin-top: 40px;
3+
}

‎fixtures/vuejs-jsx/App.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
#app {
2+
display: flex;
3+
color: #2c3e90;
4+
}

‎fixtures/vuejs-jsx/assets/logo.png

6.69 KB
Loading

‎fixtures/vuejs-jsx/components/Hello.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
h1, h2 {
2+
font-weight: normal;
3+
}
4+
5+
ul {
6+
list-style-type: none;
7+
padding: 0;
8+
}
9+
10+
li {
11+
display: inline-block;
12+
margin: 0 10px;
13+
}
14+
15+
a {
16+
color: #42b983;
17+
}

‎fixtures/vuejs-jsx/components/Hello.jsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import './Hello.css';
2+
3+
export default {
4+
name: 'hello',
5+
data() {
6+
return {
7+
msg: 'Welcome to Your Vue.js App',
8+
};
9+
},
10+
render() {
11+
return (
12+
<div class="hello">
13+
<h1>{this.msg}</h1>
14+
<h2>Essential Links</h2>
15+
<ul>
16+
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
17+
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
18+
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
19+
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
20+
<br/>
21+
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
22+
</ul>
23+
<h2>Ecosystem</h2>
24+
<ul>
25+
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
26+
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
27+
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
28+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
29+
</ul>
30+
</div>
31+
);
32+
},
33+
};

‎fixtures/vuejs-jsx/main.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from 'vue'
2+
import App from './App'
3+
4+
new Vue({
5+
el: '#app',
6+
template: '<App/>',
7+
components: { App }
8+
})

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@
5959
"devDependencies": {
6060
"@babel/plugin-transform-react-jsx": "^7.0.0",
6161
"@babel/preset-react": "^7.0.0",
62+
"@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
63+
"@vue/babel-preset-jsx": "^1.0.0-beta.3",
6264
"autoprefixer": "^8.5.0",
6365
"babel-eslint": "^10.0.1",
6466
"chai": "^3.5.0",

‎test/functional.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1445,6 +1445,69 @@ module.exports = {
14451445
}, true);
14461446
});
14471447

1448+
it('Vue.js is compiled correctly with JSX support', (done) => {
1449+
const appDir = testSetup.createTestAppDir();
1450+
1451+
fs.writeFileSync(
1452+
path.join(appDir, 'postcss.config.js'),
1453+
`
1454+
module.exports = {
1455+
plugins: [
1456+
require('autoprefixer')()
1457+
]
1458+
} `
1459+
);
1460+
1461+
const config = testSetup.createWebpackConfig(appDir, 'www/build', 'dev');
1462+
config.enableSingleRuntimeChunk();
1463+
config.setPublicPath('/build');
1464+
config.addEntry('main', './vuejs-jsx/main');
1465+
config.enableVueLoader(() => {}, {
1466+
useJsx: true,
1467+
});
1468+
config.enableSassLoader();
1469+
config.enableLessLoader();
1470+
config.configureBabel(function(config) {
1471+
expect(config.presets[0][0]).to.equal('@babel/preset-env');
1472+
config.presets[0][1].targets = {
1473+
chrome: 52
1474+
};
1475+
});
1476+
1477+
testSetup.runWebpack(config, (webpackAssert) => {
1478+
expect(config.outputPath).to.be.a.directory().with.deep.files([
1479+
'main.js',
1480+
'main.css',
1481+
'images/logo.82b9c7a5.png',
1482+
'manifest.json',
1483+
'entrypoints.json',
1484+
'runtime.js',
1485+
]);
1486+
1487+
// test that our custom babel config is used
1488+
webpackAssert.assertOutputFileContains(
1489+
'main.js',
1490+
'class TestClassSyntax'
1491+
);
1492+
1493+
testSetup.requestTestPage(
1494+
path.join(config.getContext(), 'www'),
1495+
[
1496+
'build/runtime.js',
1497+
'build/main.js'
1498+
],
1499+
(browser) => {
1500+
// assert that the vue.js app rendered
1501+
browser.assert.text('#app h1', 'Welcome to Your Vue.js App');
1502+
// make sure the styles are not inlined
1503+
browser.assert.elements('style', 0);
1504+
1505+
done();
1506+
}
1507+
);
1508+
});
1509+
});
1510+
14481511
it('configureUrlLoader() allows to use the URL loader for images/fonts', (done) => {
14491512
const config = createWebpackConfig('web/build', 'dev');
14501513
config.setPublicPath('/build');

‎yarn.lock

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,13 @@
345345
dependencies:
346346
"@babel/helper-plugin-utils" "^7.0.0"
347347

348+
"@babel/plugin-syntax-jsx@^7.2.0":
349+
version "7.2.0"
350+
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.2.0.tgz#0b85a3b4bc7cdf4cc4b8bf236335b907ca22e7c7"
351+
integrity sha512-VyN4QANJkRW6lDBmENzRszvZf3/4AXaj9YR7GwrWeeN9tEBPuXbmDYVU9bYBN0D70zCWVwUy0HWq2553VCb6Hw==
352+
dependencies:
353+
"@babel/helper-plugin-utils" "^7.0.0"
354+
348355
"@babel/plugin-syntax-object-rest-spread@^7.2.0":
349356
version "7.2.0"
350357
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
@@ -792,6 +799,70 @@
792799
"@types/uglify-js" "*"
793800
source-map "^0.6.0"
794801

802+
"@vue/babel-helper-vue-jsx-merge-props@^1.0.0-beta.3":
803+
version "1.0.0-beta.3"
804+
resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0-beta.3.tgz#e4c2e7125b3e0d2a9d493e457850b2abb0fd3cad"
805+
integrity sha512-cbFQnd3dDPsfWuxbWW2phynX2zsckwC4GfAkcE1QH1lZL2ZAD2V97xY3BmvTowMkjeFObRKQt1P3KKA6AoB0hQ==
806+
807+
"@vue/babel-plugin-transform-vue-jsx@^1.0.0-beta.3":
808+
version "1.0.0-beta.3"
809+
resolved "https://registry.yarnpkg.com/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.0.0-beta.3.tgz#a1a44e801d8ed615e49f145ef1b3eaca2c16e2e6"
810+
integrity sha512-yn+j2B/2aEagaxXrMSK3qcAJnlidfXg9v+qmytqrjUXc4zfi8QVC/b4zCev1FDmTip06/cs/csENA4law6Xhpg==
811+
dependencies:
812+
"@babel/helper-module-imports" "^7.0.0"
813+
"@babel/plugin-syntax-jsx" "^7.2.0"
814+
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0-beta.3"
815+
html-tags "^2.0.0"
816+
lodash.kebabcase "^4.1.1"
817+
svg-tags "^1.0.0"
818+
819+
"@vue/babel-preset-jsx@^1.0.0-beta.3":
820+
version "1.0.0-beta.3"
821+
resolved "https://registry.yarnpkg.com/@vue/babel-preset-jsx/-/babel-preset-jsx-1.0.0-beta.3.tgz#15c584bd62c0286a80f0196749ae38cde5cd703b"
822+
integrity sha512-qMKGRorTI/0nE83nLEM7MyQiBZUqc62sZyjkBdVaaU7S61MHI8RKHPtbLMMZlWXb2NCJ0fQci8xJWUK5JE+TFA==
823+
dependencies:
824+
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0-beta.3"
825+
"@vue/babel-plugin-transform-vue-jsx" "^1.0.0-beta.3"
826+
"@vue/babel-sugar-functional-vue" "^1.0.0-beta.3"
827+
"@vue/babel-sugar-inject-h" "^1.0.0-beta.3"
828+
"@vue/babel-sugar-v-model" "^1.0.0-beta.3"
829+
"@vue/babel-sugar-v-on" "^1.0.0-beta.3"
830+
831+
"@vue/babel-sugar-functional-vue@^1.0.0-beta.3":
832+
version "1.0.0-beta.3"
833+
resolved "https://registry.yarnpkg.com/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.0.0-beta.3.tgz#41a855786971dacbbe8044858eefe98de089bf12"
834+
integrity sha512-CBIa0sQWn3vfBS2asfTgv0WwdyKvNTKtE/cCfulZ7MiewLBh0RlvvSmdK9BIMTiHErdeZNSGUGlU6JuSHLyYkQ==
835+
dependencies:
836+
"@babel/plugin-syntax-jsx" "^7.2.0"
837+
838+
"@vue/babel-sugar-inject-h@^1.0.0-beta.3":
839+
version "1.0.0-beta.3"
840+
resolved "https://registry.yarnpkg.com/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.0.0-beta.3.tgz#be1d00b74a1a89fed35a9b1415a738c36f125966"
841+
integrity sha512-HKMBMmFfdK9GBp3rX2bHIwILBdgc5F3ahmCB72keJxzaAQrgDAnD+ho70exUge+inAGlNF34WsQcGPElTf9QZg==
842+
dependencies:
843+
"@babel/plugin-syntax-jsx" "^7.2.0"
844+
845+
"@vue/babel-sugar-v-model@^1.0.0-beta.3":
846+
version "1.0.0-beta.3"
847+
resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.0.0-beta.3.tgz#ea935b0e08bf58c125a1349b819156059590993c"
848+
integrity sha512-et39eTEh7zW4wfZoSl9Jf0/n2r9OTT8U02LtSbXsjgYcqaDQFusN0+n7tw4bnOqvnnSVjEp7bVsQCWwykC3Wgg==
849+
dependencies:
850+
"@babel/plugin-syntax-jsx" "^7.2.0"
851+
"@vue/babel-helper-vue-jsx-merge-props" "^1.0.0-beta.3"
852+
"@vue/babel-plugin-transform-vue-jsx" "^1.0.0-beta.3"
853+
camelcase "^5.0.0"
854+
html-tags "^2.0.0"
855+
svg-tags "^1.0.0"
856+
857+
"@vue/babel-sugar-v-on@^1.0.0-beta.3":
858+
version "1.0.0-beta.3"
859+
resolved "https://registry.yarnpkg.com/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.0.0-beta.3.tgz#2f5fedb43883f603fe76010f253b85c7465855fe"
860+
integrity sha512-F+GapxCiy50jf2Q2B4exw+KYBzlGdeKMAMW1Dbvb0Oa59SA0CH6tsUOIAsXb0A05jwwg/of0LaVeo+4aLefVxQ==
861+
dependencies:
862+
"@babel/plugin-syntax-jsx" "^7.2.0"
863+
"@vue/babel-plugin-transform-vue-jsx" "^1.0.0-beta.3"
864+
camelcase "^5.0.0"
865+
795866
"@vue/component-compiler-utils@^1.2.1":
796867
version "1.3.1"
797868
resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-1.3.1.tgz#686f0b913d59590ae327b2a1cb4b6d9b931bbe0e"
@@ -4072,6 +4143,11 @@ html-entities@^1.2.0:
40724143
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
40734144
integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
40744145

4146+
html-tags@^2.0.0:
4147+
version "2.0.0"
4148+
resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
4149+
integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
4150+
40754151
htmlparser2@~3.3.0:
40764152
version "3.3.0"
40774153
resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
@@ -4979,6 +5055,11 @@ lodash.debounce@^4.0.8:
49795055
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
49805056
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
49815057

5058+
lodash.kebabcase@^4.1.1:
5059+
version "4.1.1"
5060+
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
5061+
integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
5062+
49825063
lodash.memoize@^4.1.2:
49835064
version "4.1.2"
49845065
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7920,6 +8001,11 @@ supports-color@^6.1.0:
79208001
dependencies:
79218002
has-flag "^3.0.0"
79228003

8004+
svg-tags@^1.0.0:
8005+
version "1.0.0"
8006+
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
8007+
integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
8008+
79238009
svgo@^1.0.0:
79248010
version "1.1.1"
79258011
resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985"

0 commit comments

Comments
 (0)