finish docs

yyx990803 · yyx990803 · commit d9f50e08af7a · 2015-12-17T23:59:00.000-05:00
diff --git a/docs/workflow/production.md b/docs/workflow/production.md
@@ -32,8 +32,8 @@ module.exports = {
 
 Obviously we don't want to use this config during development, so there are several ways to approach this:
 
-1. Dynamically build up the configuration object based on an environment variable, as shown in [vue-loader-example](https://github.com/vuejs/vue-loader-example/blob/master/webpack.config.js#L40-L56);
+1. Dynamically build up the configuration object based on an environment variable;
 
-2. Use two separate Webpack config files, one for development and one for production. And maybe share some common options between them in a third file.
+2. Or, use two separate Webpack config files, one for development and one for production. And maybe share some common options between them in a third file, as shown in [vue-loader-example](https://github.com/vuejs/vue-loader-example/tree/master/build).
 
 It's really up to you as long as it achieves the goal.
diff --git a/docs/workflow/testing.md b/docs/workflow/testing.md
@@ -1,3 +1,93 @@
 # Testing
 
-### Karma + karma-webpack
+When testing `*.vue` files, we cannot use a plain CommonJS-based test runner because it won't know how to handle `*.vue` files. Instead, we still use Webpack + vue-loader to bundle our test files. The recommended setup is using [Karma](http://karma-runner.github.io/0.13/index.html) and [karma-webpack](https://github.com/webpack/karma-webpack).
+
+Karma is a test runner that launches browsers and runs your tests for you. You can choose what browsers you want to test in and what test framework (e.g. Mocha or Jasmine) you want to use. Here is an example Karma configuration that runs the tests inside [PhantomJS](http://phantomjs.org/) with the [Jasmine](http://jasmine.github.io/edge/introduction.html) test framework:
+
+``` bash
+npm install\
+  karma karma-webpack\
+  karma-jasmine jasmine-core\
+  karma-phantomjs-launcher phantomjs\
+  --save-dev
+```
+
+``` js
+// karma.conf.js
+module.exports = function (config) {
+  config.set({
+    browsers: ['PhantomJS'],
+    frameworks: ['jasmine'],
+    // this is the entry file for all our tests.
+    files: ['test/index.js'],
+    // we will pass the entry file to webpack for bundling.
+    preprocessors: {
+      'test/index.js': ['webpack']
+    },
+    // we can just use the exact same webpack config by requiring it
+    webpack: require('./webpack.config.js'),
+    // avoid walls of useless text
+    webpackMiddleware: {
+      noInfo: true
+    },
+    singleRun: true
+  })
+}
+```
+
+And for the entry `test/index.js` file:
+
+``` js
+// test/index.js
+// require all test files using special Webpack feature
+// https://webpack.github.io/docs/context.html#require-context
+var testsContext = require.context('.', true, /\.spec$/)
+testsContext.keys().forEach(testsContext)
+```
+
+This entry file simply requires all other files that ends in `.spec.js` in the same folder. Now we can actually write some tests:
+
+``` js
+// test/component-a.spec.js
+var Vue = require('vue')
+var ComponentA = require('../../src/components/a.vue')
+
+describe('a.vue', function () {
+
+  // asserting JavaScript options
+  it('should have correct message', function () {
+    expect(ComponentA.data().msg).toBe('Hello from Component A!')
+  })
+
+  // asserting rendered result by actually rendering the component
+  it('should render correct message', function () {
+    var vm = new Vue({
+      template: '<div><test></test></div>',
+      components: {
+        'test': ComponentA
+      }
+    }).$mount()
+    expect(vm.$el.querySelector('h2.red').textContent).toBe('Hello from Component A!')
+  })
+})
+```
+
+To run the tests, add the following NPM script:
+
+``` js
+// package.json
+...
+"scripts": {
+  ...
+  "test": "karma start karma.conf.js"
+}
+...
+```
+
+Finally, run:
+
+``` bash
+npm test
+```
+
+Again, [vue-loader-example](https://github.com/vuejs/vue-loader-example) contains a fully working example with tests.
