docs: [zh-cn] synced from #de89293 to #a5ad66a (#168)

* [zh-cn] synced from #de89293 to #a5ad66a

* [zh-cn] translated guides/dom-events

Author: Jinjiang

docs/zh-cn/README.md

@@ -5,6 +5,7 @@
 * [教程](guides/README.md)
   * [起步](guides/getting-started.md)
   * [常用技巧](guides/common-tips.md)
+  * [鼠标、键盘以及其它 DOM 事件](guides/dom-events.md)
   * [选择一个测试运行器](guides/choosing-a-test-runner.md)
   * [用 Jest 测试单文件组件](guides/testing-SFCs-with-jest.md)
   * [用 Mocha 和 webpack 测试单文件组件](guides/testing-SFCs-with-mocha-webpack.md)
@@ -44,6 +45,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
+    * [destroy](api/wrapper/destroy.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -59,5 +61,6 @@
     * [setProps](api/wrapper-array/setProps.md)
     * [trigger](api/wrapper-array/trigger.md)
     * [update](api/wrapper-array/update.md)
+    * [destroy](api/wrapper-array/destroy.md)
   * [选择器](api/selectors.md)
   * [createLocalVue](api/createLocalVue.md)

docs/zh-cn/SUMMARY.md

@@ -3,6 +3,7 @@
 * [教程](guides/README.md)
   * [起步](guides/getting-started.md)
   * [常用技巧](guides/common-tips.md)
+  * [鼠标、键盘以及其它 DOM 事件](guides/dom-events.md)
   * [选择一个测试运行器](guides/choosing-a-test-runner.md)
   * [用 Jest 测试单文件组件](guides/testing-SFCs-with-jest.md)
   * [用 Mocha 和 webpack 测试单文件组件](guides/testing-SFCs-with-mocha-webpack.md)
@@ -42,6 +43,7 @@
     * [text](api/wrapper/text.md)
     * [trigger](api/wrapper/trigger.md)
     * [update](api/wrapper/update.md)
+    * [destroy](api/wrapper/destroy.md)
   * [WrapperArray](api/wrapper-array/README.md)
     * [at](api/wrapper-array/at.md)
     * [contains](api/wrapper-array/contains.md)
@@ -57,5 +59,6 @@
     * [setProps](api/wrapper-array/setProps.md)
     * [trigger](api/wrapper-array/trigger.md)
     * [update](api/wrapper-array/update.md)
+    * [destroy](api/wrapper-array/destroy.md)
   * [选择器](api/selectors.md)
   * [createLocalVue](api/createLocalVue.md)

docs/zh-cn/api/README.md

@@ -33,6 +33,7 @@
   * [text](./wrapper/text.md)
   * [trigger](./wrapper/trigger.md)
   * [update](./wrapper/update.md)
+  * [destroy](./wrapper/destroy.md)
 * [WrapperArray](./wrapper-array/README.md)
   * [at](./wrapper-array/at.md)
   * [contains](./wrapper-array/contains.md)
@@ -48,5 +49,6 @@
   * [setProps](./wrapper-array/setProps.md)
   * [trigger](./wrapper-array/trigger.md)
   * [update](./wrapper-array/update.md)
+  * [destroy](./wrapper-array/destroy.md)
 * [选择器](./selectors.md)
 * [createLocalVue](./createLocalVue.md)

docs/zh-cn/api/wrapper-array/destroy.md

@@ -0,0 +1,17 @@
+# `destroy()`
+
+销毁 `WrapperArray` 中的每个 Vue `Wrapper`。
+
+- **示例：**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import Foo from './Foo.vue'
+
+const wrapper = mount(Foo)
+const divArray = wrapper.findAll('div')
+expect(divArray.contains('p')).toBe(true)
+divArray.destroy()
+expect(divArray.contains('p')).toBe(false)
+```

docs/zh-cn/api/wrapper-array/hasStyle.md

@@ -2,7 +2,7 @@
 
 断言 `WrapperArray` 中的每一个 `Wrapper` 的 DOM 节点都有样式的匹配值。
 
-如果 `Wrapper` 的 DOM 节点有 `style` 样式值匹配 `string` 则返回 `true`。
+如果 `Wrapper` 的 DOM 节点有 `style` 样式值匹配 `value` 则返回 `true`。
 
 **注意：当运行在 `jsdom` 中的时候只会匹配内联样式。**
 

docs/zh-cn/api/wrapper/destroy.md

@@ -0,0 +1,20 @@
+# `destroy()`
+
+销毁一个 Vue 组件实例。
+
+- **示例：**
+
+```js
+import { mount } from 'vue-test-utils'
+import { expect } from 'chai'
+import sinon from 'sinon'
+
+const spy = sinon.stub()
+mount({
+  render: null,
+  destroyed () {
+    spy()
+  }
+}).destroy()
+expect(spy.calledOnce).to.equal(true)
+```

docs/zh-cn/guides/README.md

@@ -2,6 +2,7 @@
 
 * [起步](./getting-started.md)
 * [常用技巧](./common-tips.md)
+* [鼠标、键盘以及其它 DOM 事件](./dom-events.md)
 * [选择一个测试运行器](./choosing-a-test-runner.md)
 * [用 Jest 测试单文件组件](./testing-SFCs-with-jest.md)
 * [用 Mocha 和 webpack 测试单文件组件](./testing-SFCs-with-mocha-webpack.md)

docs/zh-cn/guides/choosing-a-test-runner.md

@@ -6,7 +6,7 @@
 
 当然在我们选用测试运行器的时候也需要考虑一些事项：功能集合、性能和对单文件组件预编译的支持等。在仔细比对现有的库之后，我们推荐其中的两个测试运行器：
 
-- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 `jest-vue` 预处理器来处理最常见的单文件组件特性，但仍不是 `vue-loader` 100% 的功能。
+- [Jest](https://facebook.github.io/jest/docs/en/getting-started.html#content) 是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 `vue-jest` 预处理器来处理最常见的单文件组件特性，但仍不是 `vue-loader` 100% 的功能。
 
 - [mocha-webpack](https://github.com/zinserjan/mocha-webpack) 是一个 webpack + Mocha 的包裹器，同时包含了更顺畅的接口和侦听模式。这些设置的好处在于我们能够通过 webpack + `vue-loader` 得到完整的单文件组件支持，但这本身是需要很多配置的。
 
@@ -29,7 +29,7 @@ require('jsdom-global')()
 
 Vue 的单文件组件在它们运行于 Node 或浏览器之前是需要预编译的。我们推荐两种方式完成编译：通过一个 Jest 预编译器，或直接使用 webpack。
 
-`jest-vue` 预处理器支持基本的单文件组件功能，但是目前还不能处理样式块和自定义块，这些都只在 `vue-loader` 中支持。如果你依赖这些功能或其它 webpack 特有的配置项，那么你需要基于 webpack + `vue-loader` 进行设置。
+`vue-jest` 预处理器支持基本的单文件组件功能，但是目前还不能处理样式块和自定义块，这些都只在 `vue-loader` 中支持。如果你依赖这些功能或其它 webpack 特有的配置项，那么你需要基于 webpack + `vue-loader` 进行设置。
 
 对于不同的设置方式请移步下面的教程：
 

docs/zh-cn/guides/dom-events.md

@@ -0,0 +1,196 @@
+# 测试键盘、鼠标等其它 DOM 事件
+
+## 触发事件
+
+`Wrapper` 暴露了一个 `trigger` 方法。它可以用来触发 DOM 事件。
+
+```js
+const wrapper = mount(MyButton)
+
+wrapper.trigger('click')
+```
+
+你应该注意到了，`find` 也会返回一个包裹器。假设 `MyComponent` 包含一个按钮，下面的代码会点击这个按钮。
+
+```js
+const wrapper = mount(MyComponent)
+
+wrapper.find('button').trigger('click')
+```
+
+## 选项
+
+该触发方法接受一个可选的 `options` 对象。这个 `options` 对象里的属性会被添加到事件中。
+
+你可以通过在 `options` 里传入 `preventDefault: true` 来运行事件上的 `preventDefault`。
+
+```js
+const wrapper = mount(MyButton)
+
+wrapper.trigger('click', { preventDefault: true })
+```
+
+
+## 鼠标点击示例
+
+**待测试的组件**
+
+```html
+<template>
+<div>
+  <button class="yes" @click="callYes">Yes</button>
+  <button class="no" @click="callNo">No</button>
+</div>
+</template>
+<script>
+export default {
+  name: 'YesNoComponent',
+  props: {
+    callMe: {
+      type: Function
+    }
+  },
+  methods: {
+    callYes() {
+      this.callMe('yes')
+    },
+    callNo() {
+      this.callMe('no')
+    }
+  }
+}
+</script>
+
+```
+
+**测试**
+
+```js
+import YesNoComponent from '@/components/YesNoComponent'
+import { mount } from 'vue-test-utils'
+import sinon from 'sinon'
+
+describe('点击事件', () => {
+  it('在 yes 按钮上点击会调用我们的方法并附带参数 "yes"', () => {
+    const spy = sinon.spy()
+    const wrapper = mount(YesNoComponent, {
+      propsData: {
+        callMe: spy
+      }
+    })
+    wrapper.find('button.yes').trigger('click')
+
+    spy.should.have.been.calledWith('yes')
+  })
+})
+```
+
+## 键盘示例
+
+**待测试的组件**
+
+这个组件允许使用不同的按键将数量递增/递减。
+
+```html
+<template>
+<input type="text" @keydown.prevent="onKeydown" v-model="quantity" />
+</template>
+<script>
+const KEY_DOWN = 40
+const KEY_UP = 38
+const ESCAPE = 27
+const CHAR_A = 65
+
+export default {
+  data() {
+    return {
+      quantity: 0
+    }
+  },
+  methods: {
+    increment() {
+      this.quantity += 1
+    },
+    decrement() {
+      this.quantity -= 1
+    },
+    clear() {
+      this.quantity = 0
+    },
+    onKeydown(e) {
+      if (e.keyCode === ESCAPE) {
+        this.clear()
+      }
+      if (e.keyCode === KEY_DOWN) {
+        this.decrement()
+      }
+      if (e.keyCode === KEY_UP) {
+        this.increment()
+      }
+      if (e.which === CHAR_A) {
+        this.quantity = 13
+      }
+    }
+  },
+  watch: {
+    quantity: function (newValue) {
+      this.$emit('input', newValue)
+    }
+  }
+}
+</script>
+
+```
+
+**Test**
+
+```js
+import QuantityComponent from '@/components/QuantityComponent'
+import { mount } from 'vue-test-utils'
+
+describe('键盘事件测试', () => {
+  it('默认的数量是零', () => {
+    const wrapper = mount(QuantityComponent)
+    expect(wrapper.vm.quantity).to.equal(0)
+  })
+
+  it('上按键将数量设置为 1', () => {
+    const wrapper = mount(QuantityComponent)
+    wrapper.trigger('keydown.up')
+    expect(wrapper.vm.quantity).to.equal(1)
+  })
+
+  it('下按键将数量减 1', () => {
+    const wrapper = mount(QuantityComponent)
+    wrapper.vm.quantity = 5
+    wrapper.trigger('keydown.down')
+    expect(wrapper.vm.quantity).to.equal(4)
+  })
+
+  it('ESC 键将数量设置为 0', () => {
+    const wrapper = mount(QuantityComponent)
+    wrapper.vm.quantity = 5
+    wrapper.trigger('keydown.esc')
+    expect(wrapper.vm.quantity).to.equal(0)
+  })
+
+  it('魔术字符 "a" 键将数量设置为 13', () => {
+    const wrapper = mount(QuantityComponent)
+    wrapper.trigger('keydown', {
+      which: 65
+    })
+    expect(wrapper.vm.quantity).to.equal(13)
+  })
+})
+
+```
+
+**限制**
+
+点后面的按键名 `keydown.up` 会被翻译成一个 `keyCode`。这些被支持的按键名有：
+
+* `enter`, `tab`, `delete`, `esc`, `space`, `up`, `down`, `left`, `right`
+
+## 重要事项
+
+`vue-test-utils` 是同步触发事件。因此 `vue.nextTick` 不是必须的。

docs/zh-cn/guides/testing-SFCs-with-jest.md

@@ -27,10 +27,10 @@ $ npm install --save-dev jest vue-test-utils
 
 ## 在 Jest 中处理单文件组件
 
-为了告诉 Jest 如何处理 `*.vue` 文件，我们需要安装和配置 `jest-vue` 预处理器：
+为了告诉 Jest 如何处理 `*.vue` 文件，我们需要安装和配置 `vue-jest` 预处理器：
 
 ``` bash
-npm install --save-dev jest-vue
+npm install --save-dev vue-jest
 ```
 
 接下来在 `package.json` 中创建一个 `jest` 块：
@@ -46,15 +46,15 @@ npm install --save-dev jest-vue
       "vue"
     ],
     "transform": {
-      // 用 `jest-vue` 处理 `*.vue` 文件
-      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
+      // 用 `vue-jest` 处理 `*.vue` 文件
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
     },
     "mapCoverage": true
   }
 }
 ```
 
-> **注意：**`jest-vue` 目前并不支持 `vue-loader` 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用它们，请阅读教程里的[用 Mocha + webpack 测试单文件组件](./testing-SFCs-with-mocha-webpack.md)。
+> **注意：**`vue-jest` 目前并不支持 `vue-loader` 所有的功能，比如自定义块和样式加载。额外的，诸如代码分隔等 webpack 特有的功能也是不支持的。如果要使用它们，请阅读教程里的[用 Mocha + webpack 测试单文件组件](./testing-SFCs-with-mocha-webpack.md)。
 
 ## 处理 webpack 别名