You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+2-3Lines changed: 2 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -39,10 +39,9 @@ The development server will run on port 8080 by default. If that port is already
39
39
- Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production `index.html` with proper URLs to these generated assets.
40
40
- Use `npm run build --report`to build with bundle size analytics.
41
41
42
-
-`npm run unit`: Unit tests run in PhantomJS with [Karma](http://karma-runner.github.io/0.13/index.html) + [Mocha](http://mochajs.org/) + [karma-webpack](https://github.com/webpack/karma-webpack).
42
+
-`npm run unit`: Unit tests run in [JSDOM](https://github.com/tmpvar/jsdom) with [Jest](https://facebook.github.io/jest/), or in PhantomJS with Karma + Mocha + karma-webpack.
43
43
- Supports ES2015+ in test files.
44
-
- Supports all webpack loaders.
45
-
- Easy mock injection.
44
+
- Easy mocking.
46
45
47
46
-`npm run e2e`: End-to-end tests with [Nightwatch](http://nightwatchjs.org/).
Copy file name to clipboardExpand all lines: docs/pre-processors.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Pre-Processors
2
2
3
-
This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is installing the appropriate webpack loader for it. For example, to use SASS:
3
+
This boilerplate has pre-configured CSS extraction for most popular CSS pre-processors including LESS, SASS, Stylus, and PostCSS. To use a pre-processor, all you need to do is install the appropriate webpack loader for it. For example, to use SASS:
Copy file name to clipboardExpand all lines: docs/static.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,9 +6,9 @@ You will notice in the project structure we have two directories for static asse
6
6
7
7
To answer this question, we first need to understand how Webpack deals with static assets. In `*.vue` components, all your templates and CSS are parsed by `vue-html-loader` and `css-loader` to look for asset URLs. For example, in `<img src="./logo.png">` and `background: url(./logo.png)`, `"./logo.png"` is a relative asset path and will be **resolved by Webpack as a module dependency**.
8
8
9
-
Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This boilerplate has already configured these loaders for you, so you basically get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
9
+
Because `logo.png` is not JavaScript, when treated as a module dependency, we need to use `url-loader` and `file-loader` to process it. This template has already configured these loaders for you, so you get features such as filename fingerprinting and conditional base64 inlining for free, while being able to use relative/module paths without worrying about deployment.
10
10
11
-
Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, along side other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
11
+
Since these assets may be inlined/copied/renamed during build, they are essentially part of your source code. This is why it is recommended to place Webpack-processed static assets inside `/src`, alongside other source files. In fact, you don't even have to put them all in `/src/assets`: you can organize them based on the module/component using them. For example, you can put each component in its own directory, with its static assets right next to it.
Copy file name to clipboardExpand all lines: docs/unit.md
+25-5Lines changed: 25 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,26 @@
1
1
# Unit Testing
2
2
3
-
An overview of the tools used by this boilerplate for unit testing:
3
+
This project offers two options for unit testing:
4
+
5
+
1. Jest
6
+
2. Karma and Mocha.
7
+
8
+
9
+
## Jest
10
+
11
+
-[Jest](https://facebook.github.io/jest/): the test runner that launches JSDOM runs the tests and reports the results to us.
12
+
13
+
### Files
14
+
15
+
-`setup.js`
16
+
17
+
Jest runs this file before it runs the unit tests. It sets the Vue production tip to false.
18
+
19
+
### Mocking Dependencies
20
+
21
+
The Jest boilerplate comes with the ability to mock dependencies. See the [mock functions guide](https://facebook.github.io/jest/docs/mock-functions.html) for more details.
22
+
23
+
## Karma and Mocha
4
24
5
25
-[Karma](https://karma-runner.github.io/): the test runner that launches browsers, runs the tests and reports the results to us.
6
26
-[karma-webpack](https://github.com/webpack/karma-webpack): the plugin for Karma that bundles our tests using Webpack.
@@ -10,7 +30,7 @@ An overview of the tools used by this boilerplate for unit testing:
10
30
11
31
Chai and Sinon are integrated using [karma-sinon-chai](https://github.com/kmees/karma-sinon-chai), so all Chai interfaces (`should`, `expect`, `assert`) and `sinon` are globally available in test files.
12
32
13
-
And the files:
33
+
### Files
14
34
15
35
-`index.js`
16
36
@@ -24,10 +44,10 @@ And the files:
24
44
25
45
This is the Karma configuration file. See [Karma docs](https://karma-runner.github.io/) for more details.
26
46
27
-
## Running Tests in More Browsers
47
+
###Running Tests in More Browsers
28
48
29
49
You can run the tests in multiple real browsers by installing more [karma launchers](https://karma-runner.github.io/1.0/config/browsers.html) and adjusting the `browsers` field in `test/unit/karma.conf.js`.
30
50
31
-
## Mocking Dependencies
51
+
###Mocking Dependencies
32
52
33
-
This boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).
53
+
The Karma unit test boilerplate comes with [inject-loader](https://github.com/plasticine/inject-loader) installed by default. For usage with `*.vue` components, see [vue-loader docs on testing with mocks](http://vue-loader.vuejs.org/en/workflow/testing-with-mocks.html).
0 commit comments