单元测试小记

BDD - 行为驱动开发

Behavior - 行为
Driven - 驱动
Develop - 开发

TDD - 测试驱动开发

test - 测试
Driven - 驱动
Develop - 开发

Behavior - 行为

Assert - 断言

should
expect
assert

单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作

可以理解为对功能的基本验证

目前node中的测试框架，一般使用的是 mocha + 断言库 chai

安装

npm install mocha -g
npm install mocha
npm install chai

mocha API

describe

describe 是一个 用例测试集， 他可以进行嵌套
describe('进行首页的测试', function() {
  // ....
})

it

一个it对应一个单元测试用例
it('测试接口xxx', function() {
  // ....
})

only skip

only – 在当前的父describe块下，只执行该单元的测试
skip – 在当前的父describe块下，跳过该单元的测试

describe('Array', function() {
  describe.only('父describe块下只执行该测试单元', () => {
    it.skip('跳过的测试单元', () => { });
  })
})

describe 和 it 都可以使用这两个方法

timeout - 设超时

测试集合上定义超时时间，会对这个测试集合中所有的测试用例和测试集合起作用

const sleep = time => new Promise(resolve => setTimeout(resolve, time))
 it('timeout', async function () {
    this.timeout(1000)
    await sleep(3000)
    expect(true).to.be.ok
  })

hooks

提供了几个函数，在特定的事件发生时被触发
before()、after()、beforeEach()、afterEach()
同一个describe下的执行顺序为before、beforeEach、afterEach、after
before, after 执行一次
beforeEach，afterEach 每一个测试用例都会触发一次
before(() => console.info('首页测试开始'))
after(() => console.info('首页测试结束'))

beforeEach('check check check ', function() {
  console.log('i am check')
})

chai API

chai有三种断言风格，expect，should，assert, 我的项目使用的是 expect
expect
列出几个常用的方法

方法
含义

equal
相等（严格比较）

not
取反

include
包含

判断数据类型

expect('username').to.be.a('string')
expect(false).to.be.a('boolean')
expect(obj).to.have.property('foo')

复制代码异步测试
项目中的大部分函数为异步的，这个需要借助 done 来处理

it(`处理异步请求`, (done) => {
  // ...
  done()
})

异步函数在函数内部手动调用done()表示测试成功，done(err)表示测试出错
async await 可以不使用done

  it('更新用户对于文章的态度', async () => {
    const result = await updateAttitude({ articleId: 123, userId: 131, status: 0})
    expect(result).to.be.a('number')
  })

最常见的接口测试

  it('获取某一个频道下的所有文章列表', async function ()  {
    const result = await chai
      .request(app)
      .get('/articles/3/1')
      .then((res) => {
        return res.body
      })
    expect(result).to.have.property('data')
  })

测试结果检查

测试报告

生成测试报告使用的是 mochawesome 模块

"mocha:report": "mocha --reporter mochawesome"

会自动在项目创建 一个 mochawesome-report 目录,

测试覆盖率

简单来说，就是判断你的测试用例对于函数的覆盖程度

npm install -g istanbul

生成测试率覆盖报告

istanbul cover _mocha -- -R spec

注： 这里是 _mocha 不要丢掉这下划线

会在项目中自动创建 coverage 文件夹

在浏览器中打开

open coverage/lcov-report/index.html

other

• 是否所有的函数都要编写测试用例

接口是肯定需要编写测试用例的，至于是否需要对函数做处理，个人感觉可以对重要的函数进行测试

自动化测试

使用 Karma + Mocha做单元测试

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

安装各种工具

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

创建 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
        })
    }

创建 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('可以设置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('可以设置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

     })
 })

创建测试脚本

在 package.json 里面找到 scripts 并改写 scripts

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

运行测试脚本

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

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

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