3、学习 mocha + chai + sinon

1、mocha的使用

1、安装

　　cnpm install --save-dev mocha

2、基本语法

　　- describe

　　　　. 对应测试的模块

　　　　. /函数

　　- it

　　　　对应test case

　　- 异步代码测试

　　　　- callback

　　　　- promis

　　　　- async / await

　　- 钩子hoks

　　　　- before / after

　　　　- beforeEach / afterEach // 每个用例前后生效

　　- only / skip

　　　　- 只运行/忽略一个或者一组用例

2、chai

1、安装

　　cnpm install --save-dev chai

2、基本语法

BDD

　　- expert

　　　　> chai.expert

　　- should

　　　　> chai.should

TDD

　　- assert

　　　　> chai.assert

3、sinon

1、安装

　　npm install --save-dev sinon

2、基本语法

　　1、Spies

　　　　- 提供函数调用的信息，但不改变函数行为

　　2、Stubs

　　　　- 替换掉指定的函数

　　3、Mocks

　　　　- 组合spies和stubs，可以替换一个完整对象

单元测试的案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <link rel="stylesheet" href="../node_modules/mocha/mocha.css">
</head>
<body>
  <!-- 放置单元测试的结果 -->
  <div id="mocha"></div>
  
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/sinon/pkg/sinon.js"></script>
<script type="module" src="./test.js"></script>
<script type="module" src="./async.spec.js"></script>
</body>
</html>

　　测试函数

test.js

import { formatDate, addFun } from '../src/utils/base.js'

// 指定BDD的测试风格
mocha.setup('bdd')

// 引入语法
let expect = chai.expect
chai.should()
let assert = chai.assert

// 测试
describe('test base#addFun', function() {
  it('should return amuont = 4', function() {
    console.log('test case------------------------------')
    // expect(addFun(1, 3)).to.eql(4)  // expect - BDD
    addFun(1, 3).should.eql(4)  // should - BDD
    // assert.equal(addFun(1, 3), 4)   // asset - TDD
  })
  it('应该返回 amuont = 8', function() {
    // expect(addFun(1, 3)).to.eql(4)  // expect - BDD
    addFun(2, 6).should.eql(8)  // should - BDD
    // assert.equal(addFun(1, 3), 4)   // asset - TDD
  })
})

mocha.run()

测试异步代码

　　获取用户信息

async.js

import { getFirstPageInfo  } from '../src/service/cstapi.js'

// 指定BDD的测试风格
mocha.setup('bdd')

// 引入语法
let expect = chai.expect

/**
 * 异步测试 - callback
 */
describe('async test', function() {
  it('it themeStyle should be "grey"', () => {
    async.getFirstPageInfo(data => {
      console.log('test case------------------------------', data)
      expect(data.themeStyle).to.eql('red')
    })
  })
})

/**
 * 异步测试 - promise
 */
describe('async test', function() {
  it('it themeStyle should be "grey"', () => {
    async.getFirstPageInfo()
      .then(data => {
        console.log('test case------------------------------', data)
        expect(data.themeStyle).to.eql('red')
      })
  })
})

/**
 * 异步测试 - async/awit
 */
describe('async test', function() {
  it('it themeStyle should be "grey"', () => {
    let res = await async.getFirstPageInfo()
    return expect(data.themeStyle).to.eql('red')
  })
})

mocha.run()

测试异步代码 - mock接口

　　- 使用spy获取接口调用信息

　　- 使用stub替换接口调用方法

import { getFirstPageInfo  } from '../src/service/cstapi.js'

// 指定BDD的测试风格
mocha.setup('bdd')

// 引入语法
chai.should()

/**
 * 异步测试 - spy
 */
describe('async test', function() {
  it('it themeStyle should be "grey"', () => {
    let ajaxSpy = sinon.spy(jQuery, 'ajax')
    getFirstPageInfo(data => {
      console.log('test case------------------------------', data)
      expect(data.themeStyle).to.eql('red')
    })
    console.log(ajaxSpy.callCount)
    sinon.assert.calledOnce(ajaxSpy)
    ajaxSpy.restore()
  })
})


/**
 * 异步测试 - spy
 */
describe('async test', function() {
  it('it themeStyle should be "grey"', () => {
    let ajaxSpy = sinon.stub(jQuery, 'ajax')
    getFirstPageInfo()
    console.log(ajaxSpy.callCount)
    ajaxSpy.restore()
  })
})

/**
 * 异步测试 - stub and spy
 */
describe('async test', function() {
  it('it themeStyle should be "grey"', () => {
    let ajaxStub = sinon.stub(jQuery, 'post')
    ajaxStub.yields()
    let callback = sinon.spy( () => {
      console.log('mock的回调') // 返回自己想要的结果
    })
    getFirstPageInfo(callback)

    console.log(ajaxStub.callCount)
    console.log(callback.callCount)
    ajaxSpy.restore()
  })
})

mocha.run()