第二个环节：使用 Karma 配置测试环境

Author: fengweiyao

README.md

@@ -4,80 +4,127 @@
 
 ---
 
-**OK，你已经来到了第一个环节**
+**OK，你已经来到了第二个环节**
 
-这里环节我们会介绍如何使用 [Mocha](https://mochajs.org/) 和 [Chai](https://www.chaijs.com/) 来编写测试用例。
+上一个环节里我们介绍了如何使用 [Mocha](https://mochajs.org/) 和 [Chai](https://www.chaijs.com/) 来编写测试用例。当时我们的测试代码是运行在 node 环境中的。如果我想把一个 Vue 项目在浏览器里运行测试代码，要怎么做呢？
+
+这个环节里，我们会介绍如何使用 [Karma](https://karma-runner.github.io/2.0/index.html) 来配置测试环境，可以让我们的测试代码在实际浏览器里运行。
 
 ## 先看结果
 
 在项目下，通过 `npm run test` 可以看到测试结果。
 
 ```shell
-> unit-test-demo@1.0.0 test /Users/didi-feng/GitRepo/unit-test-demo
-> mocha
+17 09 2018 19:54:07.410:INFO [karma]: Karma v3.0.0 server started at http://0.0.0.0:9876/
+17 09 2018 19:54:07.413:INFO [launcher]: Launching browser Chrome with unlimited concurrency
+17 09 2018 19:54:07.424:INFO [launcher]: Starting browser Chrome
+17 09 2018 19:54:09.083:INFO [Chrome 68.0.3440 (Mac OS X 10.13.4)]: Connected on socket HvVkYqYm9NfvTy3xAAAA with id 29946103
+INFO LOG: 'Download the Vue Devtools extension for a better development experience:
+https://github.com/vuejs/vue-devtools'
+
+  我的 Vue 测试
+    #标题
+      ✓ 标题应该为 Welcome to Your Vue.js App
+
+Chrome 68.0.3440 (Mac OS X 10.13.4): Executed 1 of 1 SUCCESS (0.052 secs / 0.014 secs)
+TOTAL: 1 SUCCESS
+```
 
+## 我们都做了什么？
 
+上一个 Commit 我已经偷偷初始化了一个 Vue 项目。这个环节会针对这个 Vue 项目写一个测试用例。
 
-  Array
-    #indexOf()
-      ✓ should return -1 when the value is not present
+我们在 test/test.js 文件中编写了一个测试用例，判断我们 Vue 项目中 "h1" 标签中的内容是否为 "Welcome to Your Vue.js App"。
 
+test.js 文件的内容如下：
 
-  1 passing (7ms)
+```javascript
+import Vue from 'vue'
+import App from '../src/App'
+
+Vue.config.productionTip = false
+
+describe('我的 Vue 测试', function () {
+  describe('#标题', function () {
+    it('标题应该为 Welcome to Your Vue.js App', function () {
+      // 示例化 Vue, 此时示例对应的 DOM 元素没有在页面中。
+      const instance = new Vue({
+        render: h => h(App),
+        components: { App }
+      }).$mount()
+
+      // 手动将 DOM 添加到页面中。
+      document.body.appendChild(instance.$el)
+
+      let h1 = instance.$el.querySelector('.hello h1')
+      expect(h1.textContent).to.equal('Welcome to Your Vue.js App')
+    })
+  })
+})
 ```
 
-## 我们都做了什么？
-
-我们在 test/test.js 文件中编写了一个测试用例，判断数组`[1, 2, 3]`中是否存在`4`。然后我们添加 npm script：
+之后的内容就是我们今天要了解的重点了，配置 Karma 让我们的测试用例可以在 Chrome 中执行。Karma 的配置文件位置是 `test/karma.conf.js`，具体内容为：
 
 ```javascript
-{ // package.json
-  ...
-  "scripts": {
-    "test": "mocha"
-  },
-  ...
+const webpackConfig = require('../build/webpack.test.conf')
+
+module.exports = function (config) {
+  config.set({
+    // 指定要运行测试的浏览器，可以指定多个。必须要安装对应的加载器(launcher)，karma 会在调起本地的浏览器。
+    browsers: ['Chrome'],
+    // 指定要使用的测试框架
+    frameworks: ['mocha', 'chai'],
+    // 这个插件会将每个测试用例的测试结果打印到命令行 console 中。
+    reporters: ['spec'],
+    // 希望执行的测试文件, 这里的文件会经过 preprocessor 处理后，通过 script 便签添加到测试页面中。
+    // 更多设置可以查看 https://karma-runner.github.io/2.0/config/files.html
+    files: [
+      './test.js'
+    ],
+    // 使用 webapck 对文件进行编译打包，同时配置 sourcemap 方便调试代码
+    preprocessors: {
+      './test.js': ['webpack', 'sourcemap']
+    },
+    // wepack 配置项
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true
+    },
+    // 运行一次后退出，如果设为 true，运行后会默认 watch "files" 中指定的文件，如果有修改会自动重新执行。
+    singleRun: true
+  })
 }
 ```
 
-通过`npm run test`执行 Mocha 命令。Mocha 会自动在项目中搜索 test 文件夹，并执行该文件夹下的所有 js 文件（[文档](https://mochajs.org/#the-test-directory)）。
-
-test.js 文件的内容为 Mocha 官网的一个[例子](https://mochajs.org/#getting-started)。如下：
+这个配置文件中，我们设置使用 **Mocha** 测试框架，**Chai** 断言库，指定了测试代码的入口 `test.js`，同时配置了预处理器 **webpack** 对测试代码进行预处理（编译打包）。Karma 会在本地启动一个 server （默认端口号为9876）托管测试文件。之后会调起本地 **Chrome** 浏览器打开一个测试页面，将处理后的测试代码通过 `<script>` 便签添加到页面中执行。默认情况下，Karma 会在页面中创建一个 iFrame 来运行测试代码。
 
-```javascript
-// var assert = require('assert');
-var expect = require('chai').expect // 引入Chai
-
-describe('Array', function() {
-  describe('#indexOf()', function() {
-    it('should return -1 when the value is not present', function() {
-      // assert.equal([1,2,3].indexOf(4), -1); // node 自带的断言库
-      expect([1,2,3].indexOf(4)).to.equal(-1); // Chai expect 形式断言语句
-    });
-  });
-});
-```
-`describe(string, function)`<br>
-describe 块称为"测试套件"（test suite），表示一组相关的测试。它是一个函数，第一个参数是测试套件的名称（"Array"），第二个参数是一个实际执行的函数。上面可以看到，describe 块可以嵌套使用。
+另外需要注意的是：
 
-`it(string, function)`<br>
-it 块称为"测试用例"（test case），表示一个单独的测试，是测试的最小单位。它也是一个函数，第一个参数是测试用例的名称（"should return -1 when the value is not present"），第二个参数是一个实际执行的函数。
+> Most of the framework adapters, reporters, preprocessors and launchers need to be loaded as plugins.
 
-`expect([1,2,3].indexOf(4)).to.equal(-1)`<br>
-上面这句断言的意思是，调用`[1,2,3].indexOf(4)`，结果应该等于 -1。所谓"断言"，就是判断源码的实际执行结果与预期结果是否一致，如果不一致就抛出一个错误。
+框架适配器（framework adapters）比如：Karma-mocha, Karma-chai ，reporters 比如 Karma-spec-reporter （后面我们还会介绍 Karma-coverage），以及预处理器，比如 Karma-webpack, Karma-sourcemap-loader，还有加载器（launchers），比如 Karma-chrome-launcher，都是作为 Karma 插件工作的。
 
-所有的测试用例（it 块）都应该含有一句或多句的断言。它是编写测试用例的关键。断言功能由断言库来实现，Mocha本身不带断言库，所以必须先引入断言库。上面的例子中我们引入了 **[Chai](https://www.chaijs.com/)** 断言库的 [expect API](https://www.chaijs.com/api/bdd/),（注释部分代码是 node 自带断言库 assert）。Chai 支持 **expect, should, asset** 三种形式的断言 API 。
+针对这些 [Karma 插件](https://karma-runner.github.io/2.0/config/plugins.html) 我们都要安装对应的 npm 包，这些插件一般是以 `karma-` 开头，而 Karma 默认会自动加载 `karma-` 开头的 npm 包。因此我们没有在配置文件中明确指定 `plugins` 配置项（实际上它的默认配置项为 `karma-*`），但是一定要记得安装相应的 npm 包，特别是框架适配器和加载器，框架指定 Mocha 就要安装 Karma-mocha，浏览器指定 Chrome ，就要安装 Karma-chrome-launcher。
 
-## 总结
+最后我们配置 npm script，使用 `npm run test` ，就可以执行 Karma 命令在 Chrome 中执行测试代码了。
 
-Mocha 就是一个 Javascript 测试框架，我们会基于这个框架去写测试用的代码。那测试框架怎么知道一个测试用例是否通过？这就需要断言库了，比如：Chai 。如果一个测试用例中所有的 Chai 断言语句都没有抛出错误，那么测试框架就会判定这个测试用例通过，否则失败。
+```javascript
+{ // package.json
+  ...
+  "script": {
+    ...
+    "test": "karma start test/karma.conf.js"
+  },
+  ...
+}
+```
 
-现在我们已经大概了解了如何编写一个简单的测试用例！想要了解 [Mocha](https://mochajs.org/) 和 [Chai](https://www.chaijs.com/) 更多的使用方式，可以自行去官网查看文档。
+## 总结
 
-## 问题
+Karma 是一个配置测试环境的工具。可以通过配置选择不同的测试框架，将我们的测试代码运行的不同的浏览器上。同时支持各种插件，比如通过 webpack 插件对我们的测试代码进行编译打包。在之后的环节中我们还会介绍，通过插件计算测试代码的覆盖率。
 
-如果我想在给我的 vue 项目添加测试用例，并在浏览器里执行验证，该怎么做？
+想要了解更多有关 Karma 的使用方式，可以自行去 [Karma 官网](https://karma-runner.github.io/2.0/index.html) 查看文档。
 
 ## 下一个环节
 
-我们会介绍如何使用 Karma 配置测试环境，将 Vue 项目在实际测试环境中测试。
+下一个环节我们会介绍如何配置 Travis-CI 当我们在 Github 上提交代码的时候自动运行测试代码。

build/webpack.test.conf.js

@@ -0,0 +1,17 @@
+// This is the webpack config used for unit tests.
+
+var utils = require('./utils')
+var merge = require('webpack-merge')
+var baseConfig = require('./webpack.base.conf')
+
+var webpackConfig = merge(baseConfig, {
+  // use inline sourcemap for karma-sourcemap-loader
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: true
+    })
+  },
+  devtool: '#inline-source-map'
+})
+
+module.exports = webpackConfig