Skip to content

Commit 0d809ec

Browse files
author
Andre Asselin
committed
Add unit tests
1 parent cd32373 commit 0d809ec

File tree

7 files changed

+186
-2
lines changed

7 files changed

+186
-2
lines changed

‎docs/en/configurations/advanced.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ module.exports = {
4141
{
4242
test: /\.vue$/,
4343
loader: 'vue',
44-
// vue-loader options goes here
44+
// vue-loader options go here
4545
options: {
4646
loaders: {
4747
// load all <script> without "lang" attribute with coffee-loader

‎docs/en/start/spec.md‎

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,66 @@ More details can be found in [Using Pre-Processors](../configurations/pre-proces
7070

7171
- By default, contents will be extracted and dynamically inserted into the document's `<head>` as an actual `<style>` tag using `style-loader`. It's also possible to [configure Webpack so that all styles in all components are extracted into a single CSS file](../configurations/extract-css.md).
7272

73-
### Custom Language Blocks
73+
### Custom Blocks
7474

7575
Additional custom blocks can be included in a `*.vue` file for any project specific needs. `vue-loader` will use the tag name to look up which webpack loaders should be applied to the contents of the section. The webpack loaders should be specified in the `loaders` hash of the `vue` section of the webpack configuration in the same way that languages are specified for the standard sections of the file. See [Advanced Loader Configuration](../configurations/advanced.md).
7676

77+
Example:
78+
79+
#### component.vue
80+
``` html
81+
<unit-test>
82+
describe('example', function () {
83+
it('basic', function (done) {
84+
done();
85+
})
86+
})
87+
</unit-test>
88+
89+
<template>
90+
<h2 class="red">{{msg}}</h2>
91+
</template>
92+
93+
<script>
94+
export default {
95+
data () {
96+
return {
97+
msg: 'Hello from Component A!'
98+
}
99+
}
100+
}
101+
</script>
102+
103+
<style>
104+
comp-a h2 {
105+
color: #f00;
106+
}
107+
</style>
108+
```
109+
110+
#### webpack.config.js
111+
112+
``` js
113+
// Webpack 2.x (^2.1.0-beta.25)
114+
module.exports = {
115+
module: {
116+
rules: [
117+
{
118+
test: /\.vue$/,
119+
loader: 'vue',
120+
// vue-loader options go here
121+
options: {
122+
loaders: {
123+
unit-test: 'buble-loader',
124+
}
125+
}
126+
}
127+
]
128+
}
129+
}
130+
```
131+
132+
77133
### Src Imports
78134

79135
If you prefer splitting up your `*.vue` components into multiple files, you can use the `src` attribute to import an external file for a language block:
@@ -91,6 +147,13 @@ Beware that `src` imports follow the same path resolution rules to CommonJS `req
91147
<style src="todomvc-app-css/index.css">
92148
```
93149
150+
`src` imports also work with custom blocks, e.g.:
151+
152+
``` html
153+
<unit-test src="./unit-test.js">
154+
</unit-test>
155+
```
156+
94157
### Syntax Highlighting
95158
96159
Currently there is syntax highlighting support for [Sublime Text](https://github.com/vuejs/vue-syntax-highlight), [Atom](https://atom.io/packages/language-vue), [Vim](https://github.com/posva/vim-vue), [Visual Studio Code](https://marketplace.visualstudio.com/items/liuji-jim.vue), [Brackets](https://github.com/pandao/brackets-vue), and [JetBrains products](https://plugins.jetbrains.com/plugin/8057) (WebStorm, PhpStorm, etc). Contributions for other editors/IDEs are highly appreciated! If you are not using any pre-processors in Vue components, you can also get by by treating `*.vue` files as HTML in your editor.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,8 +67,10 @@
6767
"mocha": "^3.2.0",
6868
"node-libs-browser": "^2.0.0",
6969
"normalize-newline": "^3.0.0",
70+
"null-loader": "^0.1.1",
7071
"postcss": "^5.0.21",
7172
"pug": "^2.0.0-beta6",
73+
"raw-loader": "^0.5.1",
7274
"rimraf": "^2.4.0",
7375
"stylus": "^0.54.5",
7476
"stylus-loader": "^2.0.0",

‎test/fixtures/custom-import.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<unit-test src="./unit-test.js">
2+
</unit-test>
3+
4+
<template>
5+
<h2 class="red">{{msg}}</h2>
6+
</template>
7+
8+
<script>
9+
export default {
10+
data () {
11+
return {
12+
msg: 'Hello from Component A!'
13+
}
14+
}
15+
}
16+
</script>
17+
18+
<style>
19+
comp-a h2 {
20+
color: #f00;
21+
}
22+
</style>

‎test/fixtures/custom-language.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<unit-test>
2+
describe('example', function () {
3+
it('basic', function (done) {
4+
done();
5+
})
6+
})
7+
</unit-test>
8+
9+
<documentation>
10+
This is example documentation for a component.
11+
</documentation>
12+
13+
<template>
14+
<h2 class="red">{{msg}}</h2>
15+
</template>
16+
17+
<script>
18+
export default {
19+
data () {
20+
return {
21+
msg: 'Hello from Component A!'
22+
}
23+
}
24+
}
25+
</script>
26+
27+
<style>
28+
comp-a h2 {
29+
color: #f00;
30+
}
31+
</style>

‎test/fixtures/unit-test.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
describe('example', function () {
2+
it('basic', function (done) {
3+
done();
4+
})
5+
})

‎test/test.js‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,4 +465,65 @@ describe('vue-loader', function () {
465465
done()
466466
})
467467
})
468+
469+
it('extract custom blocks to a separate file', function (done) {
470+
bundle(Object.assign({}, globalConfig, {
471+
entry: './test/fixtures/custom-language.vue',
472+
vue: {
473+
loaders: {
474+
'documentation': ExtractTextPlugin.extract('raw-loader'),
475+
}
476+
},
477+
plugins: [
478+
new ExtractTextPlugin('doc.md')
479+
]
480+
}), function () {
481+
var unitTest = mfs.readFileSync('/doc.md').toString()
482+
unitTest = normalizeNewline(unitTest)
483+
expect(unitTest).to.contain('This is example documentation for a component.')
484+
done()
485+
})
486+
})
487+
488+
it('add custom blocks to the webpack output', function (done) {
489+
bundle(Object.assign({}, globalConfig, {
490+
entry: './test/fixtures/custom-language.vue',
491+
vue: {
492+
loaders: {
493+
'unit-test': 'babel-loader'
494+
}
495+
}
496+
}), function (code) {
497+
expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
498+
done()
499+
})
500+
})
501+
502+
it('custom blocks work with src imports', function (done) {
503+
bundle(Object.assign({}, globalConfig, {
504+
entry: './test/fixtures/custom-import.vue',
505+
vue: {
506+
loaders: {
507+
'unit-test': 'babel-loader'
508+
}
509+
}
510+
}), function (code) {
511+
expect(code).to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
512+
done()
513+
})
514+
})
515+
516+
it('custom blocks can be removed from the output', function (done) {
517+
bundle(Object.assign({}, globalConfig, {
518+
entry: './test/fixtures/custom-language.vue',
519+
vue: {
520+
loaders: {
521+
'unit-test': 'null-loader'
522+
}
523+
}
524+
}), function (code) {
525+
expect(code).not.to.contain('describe(\'example\', function () {\n it(\'basic\', function (done) {\n done();\n });\n})')
526+
done()
527+
})
528+
})
468529
})

0 commit comments

Comments
 (0)