[docs] testing & hot-reload

Author: yyx990803

docs/en/forms.md

@@ -20,8 +20,8 @@ vuex: {
     message: state => state.obj.message
   },
   actions: {
-    updateMessage: (store, e) => {
-      store.dispatch('UPDATE_MESSAGE', e.target.value)
+    updateMessage: ({ dispatch }, e) => {
+      dispatch('UPDATE_MESSAGE', e.target.value)
     }
   }
 }

docs/en/hot-reload.md

@@ -1,29 +1,44 @@
 # Hot Reloading
 
-Vuex supports hot-reloading actions and mutations during development, using Webpack's [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html). You can also use it in Browserify with the [browserify-hmr](https://github.com/AgentME/browserify-hmr/) plugin.
+Vuex supports hot-reloading mutations, modules, actions and getters during development, using Webpack's [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html). You can also use it in Browserify with the [browserify-hmr](https://github.com/AgentME/browserify-hmr/) plugin.
 
-It's as simple as calling `store.hotUpdate()` with the new actions and mutations:
+For mutations and modules, you need to use the `store.hotUpdate()` API method:
 
 ``` js
-// ...
+// store.js
+import Vue from 'vue'
+import Vuex from 'vuex'
+import mutations from './mutations'
+import moduleA from './modules/a'
+
+Vue.use(Vuex)
+
+const state = { ... }
+
 const store = new Vuex.Store({
   state,
-  actions,
-  mutations
+  mutations,
+  modules: {
+    a: moduleA
+  }
 })
 
 if (module.hot) {
   // accept actions and mutations as hot modules
-  module.hot.accept(['./actions', './mutations'], () => {
+  module.hot.accept(['./mutations', './modules/a'], () => {
     // require the updated modules
     // have to add .default here due to babel 6 module output
-    const newActions = require('./actions').default
     const newMutations = require('./mutations').default
+    const newModuleA = require('./modules/a').default
     // swap in the new actions and mutations
     store.hotUpdate({
-      actions: newActions,
-      mutations: newMutations
+      mutations: newMutations,
+      modules: {
+        a: newModuleA
+      }
     })
   })
 }
 ```
+
+You don't need to do anything specific for actions and getters. Webpack's hot module replacement system will "bubble" changes up the dependency chain - and changes in actions and getters will bubble up to the Vue components that imported them. Because Vue components loaded via `vue-loader` are automatically hot-reloadable, these affected components will hot-reload themselves and use the updated actions and getters.

docs/en/testing.md

@@ -1,8 +1,22 @@
 # Testing
 
-Mutations are very straightforward to test, because they are just functions that completely rely on their arguments. Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking - for example, we can abstract the API calls into a service and mock that service inside our tests. In order to easily mock dependencies, we can use Webpack and [inject-loader](https://github.com/plasticine/inject-loader) to bundle our test files.
+The main parts we want to unit test in Vuex are mutations and actions.
 
-If your mutations and actions are written properly, the tests should have no direct dependency on Browser APIs after proper mocking. Thus you can simply bundle the tests with Webpack and run it directly in Node. Alternatively, you can use `mocha-loader` or Karma + `karma-webpack` to run the tests in real browsers.
+### Testing Mutations
+
+Mutations are very straightforward to test, because they are just functions that completely rely on their arguments. One trick is that if you are using ES2015 modules and put your mutations inside your `store.js` file, in addition to the default export, you can also export the mutations as a named export:
+
+``` js
+const state = { ... }
+
+// export mutations as a named export
+export const mutations = { ... }
+
+export default new Vuex.Store({
+  state,
+  mutations
+})
+```
 
 Example testing a mutation using Mocha + Chai (you can use any framework/assertion libraries you like):
 
@@ -14,7 +28,10 @@ export const INCREMENT = state => state.count++
 ``` js
 // mutations.spec.js
 import { expect } from 'chai'
-import { INCREMENT } from './mutations'
+import { mutations } from './store'
+
+// destructure assign mutations
+const { INCREMENT } = mutations
 
 describe('mutations', () => {
   it('INCREMENT', () => {
@@ -28,6 +45,10 @@ describe('mutations', () => {
 })
 ```
 
+### Testing Actions
+
+Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking - for example, we can abstract the API calls into a service and mock that service inside our tests. In order to easily mock dependencies, we can use Webpack and [inject-loader](https://github.com/plasticine/inject-loader) to bundle our test files.
+
 Example testing an async action:
 
 ``` js
@@ -97,7 +118,11 @@ describe('actions', () => {
 })
 ```
 
-### Running in Node
+### Running Tests
+
+If your mutations and actions are written properly, the tests should have no direct dependency on Browser APIs after proper mocking. Thus you can simply bundle the tests with Webpack and run it directly in Node. Alternatively, you can use `mocha-loader` or Karma + `karma-webpack` to run the tests in real browsers.
+
+#### Running in Node
 
 Create the following webpack config:
 
@@ -130,9 +155,13 @@ webpack
 mocha test-bundle.js
 ```
 
-### Running in Browser
+#### Running in Browser
 
 1. Install `mocha-loader`
-2. Change the `entry` from the Webpack config above to `'mocha!babel!./test.js'`. 
+2. Change the `entry` from the Webpack config above to `'mocha!babel!./test.js'`.
 3. Start `webpack-dev-server` using the config
 4. Go to `localhost:8080/webpack-dev-server/test-bundle`.
+
+#### Running in Browser with Karma + karma-webpack
+
+Consult the setup in [vue-loader documentation](http://vuejs.github.io/vue-loader/workflow/testing.html).