使用 Karma + Mocha做單元測試

1. Karma（[?kɑrm?] 卡瑪）是一個(gè)測試運(yùn)行器滥玷，它可以呼起瀏覽器虫埂，加載測試腳本，然后運(yùn)行測試用例
2. Mocha（[?mo?k?] 摩卡）是一個(gè)單元測試框架/庫讲婚，它可以用來寫測試用例
3. Sinon（西農(nóng)）是一個(gè) 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. 創(chuàng)建 karma 配置

    // 新建 karma.conf.js，內(nèi)容如下
    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. 創(chuàng)建 test/button.test.js 文件

    const expect = chai.expect;
    import Vue from 'vue'
    import Button from '../src/button'
   
    Vue.config.productionTip = false
    Vue.config.devtools = false
   
    describe('Button', () => {
        it('存在.', () => {
            expect(Button).to.be.ok
        })
        it('可以設(shè)置icon.', () => {
            const Constructor = Vue.extend(Button)
            const vm = new Constructor({
            propsData: {
                icon: 'settings'
            }
            }).$mount()
            const useElement = vm.$el.querySelector('use')
            expect(useElement.getAttribute('xlink:href')).to.equal('#i-settings')
            vm.$destroy()
        })
        it('可以設(shè)置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 默認(rèn)的 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('設(shè)置 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('點(diǎn)擊 button 觸發(fā) 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. 創(chuàng)建測試腳本
   在 package.json 里面找到 scripts 并改寫 scripts

    "scripts": {
        "dev-test": "parcel watch test/* --no-cache & karma start",
        "test": "parcel build test/* --no-minify && karma start --single-run"
    },
   
   

5. 運(yùn)行測試腳本

   1. 要么使用 npm run test 一次性運(yùn)行

      截圖

   2. 要么使用 npm run dev-test 進(jìn)行 watch 運(yùn)行

      截圖

成果

如此一來狭归，你開發(fā)的時(shí)候新開一個(gè)命令行窗口運(yùn)行 npm run dev-test 就可以實(shí)時(shí)查看測試結(jié)果夭坪。
如果你只想看一次結(jié)果，就只用運(yùn)行 npm run test

持續(xù)集成

在根目錄新建文件夾.travis.yml过椎，代碼如下

language: node_js
node_js:
  - "8"
  - "9"
  - "10"
addons:
  chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"

提交代碼到github室梅，并在https://travis-ci.org/
關(guān)聯(lián)github后將自己的項(xiàng)目托管測試

image.png

image.png