使用 Karma + Mocha做单元测试

1. Karma（[ˈkɑrmə] 卡玛）是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例
2. Mocha（[ˈmoʊkə] 摩卡）是一个单元测试框架/库，它可以用来写测试用例
3. Sinon（西农）是一个 spy / stub / mock 库，用以辅助测试（使用后才能理解）

步骤

1. 安装依赖
   npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

2. 创建 karma 配置

    // 新建 karma.conf.js，内容如下
    module.exports = function (config) {
        config.set({
   
            // base path that will be used to resolve all patterns (eg. files, exclude)
            basePath: '',
   
           // frameworks to use
           // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
           frameworks: ['mocha', 'sinon-chai'],
           client: {
               chai: {
                   includeStack: true
               }
           },
   
           // list of files / patterns to load in the browser
           files: [
               'dist/**/*.test.js',
               'dist/**/*.test.css'
           ],
   
           // list of files / patterns to exclude
           exclude: [],
   
           // preprocess matching files before serving them to the browser
           // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
           preprocessors: {},
   
           // test results reporter to use
           // possible values: 'dots', 'progress'
           // available reporters: https://npmjs.org/browse/keyword/karma-reporter
           reporters: ['progress'],
   
           // web server port
           port: 9876,
   
           // enable / disable colors in the output (reporters and logs)
           colors: true,
   
           // level of logging
           // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
           logLevel: config.LOG_INFO,
   
           // enable / disable watching file and executing tests whenever any file changes
           autoWatch: true,
   
           // start these browsers
           // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
           browsers: ['ChromeHeadless'],
   
           // Continuous Integration mode
           // if true, Karma captures browsers, runs the tests and exits
           singleRun: false,
   
           // Concurrency level
           // how many browser should be started simultaneous
           concurrency: Infinity
       })
   }
   
   
   
   

3. 创建 test/button.test.js 文件（每个组件放一个文件进行测试）

    const expect = chai.expect;  // 引入测试框架
    import Vue from 'vue'  // 引入Vue 和 组件
    import Button from '../src/button'
   
    Vue.config.productionTip = false
    Vue.config.devtools = false
   
    describe('[单元测试的组件]', () => {
        it('Button组件存在', () => {  // 单元测试描述
            expect(Button).to.be.ok  // 断言：Button组件存在
        })
        it('可以设置icon', () => {
            const Constructor = Vue.extend(Button)  // 传入Button对象，形成构造函数
            const vm = new Constructor({  // vm为一个实例对象，vm挂载后，dom元素就是vm.$el
            propsData: {  // 模拟父组件传给子组件的数据
                icon: 'settings'
            }
            }).$mount()  // 挂载Vue实例，可以不挂载在dom元素上，空挂载，但测css属性时不能空挂载（空挂载无法测css属性）。
            const useElement = vm.$el.querySelector('use')
            expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
            vm.$destroy()  // 销毁实例对象
        })
        it('可以设置loading.', () => {
            const Constructor = Vue.extend(Button)
            const vm = new Constructor({
            propsData: {
                icon: 'settings',
                loading: true
            }
            }).$mount()
            const useElements = vm.$el.querySelectorAll('use')
            expect(useElements.length).to.equal(1)
            expect(useElements[0].getAttribute('xlink:href')).to.equal('#i-loading')
            vm.$destroy()
        })
        it('icon 默认的 order 是 1', () => {
            const div = document.createElement('div')
            document.body.appendChild(div)
            const Constructor = Vue.extend(Button)
            const vm = new Constructor({
            propsData: {
                icon: 'settings',
            }
            }).$mount(div)
            const icon = vm.$el.querySelector('svg')
            expect(getComputedStyle(icon).order).to.eq('1')
            vm.$el.remove()
            vm.$destroy()
        })
        it('设置 iconPosition 可以改变 order', () => {
            const div = document.createElement('div')
            document.body.appendChild(div)
            const Constructor = Vue.extend(Button)
            const vm = new Constructor({
            propsData: {
                icon: 'settings',
                iconPosition: 'right'
            }
            }).$mount(div)
            const icon = vm.$el.querySelector('svg')
            expect(getComputedStyle(icon).order).to.eq('2')
            vm.$el.remove()
            vm.$destroy()
        })
        it('点击 button 触发 click 事件', () => {
            const Constructor = Vue.extend(Button)
            const vm = new Constructor({
            propsData: {
                icon: 'settings',
            }
            }).$mount()
   
            const callback = sinon.fake();
            vm.$on('click', callback)
            vm.$el.click()
            expect(callback).to.have.been.called
   
        })
    })
   
   

4. 运行测试脚本

• 要么使用 npm run test 一次性运行

  截图

• 要么使用 npm run dev-test 进行 watch 运行

截图

成果

如此一来，你开发的时候新开一个命令行窗口运行 npm run dev-test 就可以实时查看测试结果。
如果你只想看一次结果，就只用运行 npm run test

用Travis CI持续集成

搭建上面的单元测试框架，我们现在测试已经很方便了，只需一条命令。

但是，有没有可能更加方便呢？能不能不敲命令呢？？

可以。只需要用上持续继承，"雇一个机器人"帮我们，让"机器人帮我们自动测试"，这个机器人就是
https://travis-ci.org/

只要注册号，绑定我们的github和对应项目的仓库，同时在我们项目里加入配置文件，每当我们提交代码的时候，就可以在上面看到测试开始啦。

image.png
测试结果也会记录下来
image.png

配置文件如下

在根目录创建.travis.yml，写入：

language: node_js
node_js:  // 需要测试的node.js版本
  - "8"
  - "9"
  - "10"
addons:  // 在小机器人上安装的插件
  chrome: stable  // chrome 稳定版
sudo: required  // 下面照抄
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"