记录一次自动化测试

单元测试

单元测试就是判断一个输入和输出是否一致
以Vue为例，通常props里面的属性都要做测试用例，还有事件也要做测试用例
使用一个库 ‘chai’，来进行单元测试

BDD TDD

BDD,behavior driven development 行为驱动开发，强调用自然语言描述需求
TDD,test driven development 测试驱动开发
assert 断言，断定

console.assert( 1===1 )//你的断言是对的，不会发生什么
console.assert( 1===2 )//报错 Assertion failed，你的断言就是错的

console.assert( typeof '1' === 'string' )
console.assert('1').is.a('string') //这就很BDD,(瞎写的)

实例化一个.vue对象

import Button from './button.vue'
const Constructor = Vue.extend(Button)//将button对象转换成函数，以便实例化
const button = new Constructor

import chai from 'chai'

{
    const Constructor = Vue.extend(Button)
    const button = new Constructor({
        propsData: {
            icon: 'settings'
        }
    })
    button.$mount('#test')//手动挂载一个未挂载的实例
    let href = button.$el.querySelector('use').getAttribute('xlink:href')
    chai.expect(href).to.eq('#i-settings')
}

//使用chai-spies 监听点击事件的回调函数 安装npm i -D chai-spies

import Button from './button.vue'
import chai from 'chai'
import spies from 'chai-spies'
chai.use(spies)
const expect = chai.expect()
{
    const Constructor = Vue.extend(Button)
    let vm = new Constructor({
        prosData: {
            icon: 'settings'
        }
    }).$mount()
    
    let spy = chai.spy(function(){})
    vm.$on('click', spy)
    vm.$el.click()
    
    expect(spy).to.have.been.called()
}

自动化测试

1. 安装各种工具
   npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies
2. 新建karma.conf.js

    files: [
        'dist/**/*.test.js',
        'dist/**/*.test.css'
    ],
    browsers: ['ChromeHeadless'],

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

4. 配置package.json

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

5. 运行npm run test
   在干嘛？打包js->打开浏览器->输入网址->运行测试用例->关闭浏览器,

安装的自动化测试工具

Karma: 自动呼起浏览器，加载测试脚本
Mocha: 写测试用例
Sion: 辅助测试，一个spy/stub/mock库

• 项目代码用到的 chai.expect 进行断言
• Mocha 写测试用例 （describe、it）

    describe('有Button', ()=>{
        it('',()=>{
        })
        it....
    })

• Sion辅助测试 const callback = sion.fake

describ('Button', ()=>{
    it('存在',()=>{
        expect(Button).to.exist
    })
    
    it('icon可以设置', ()=>{
        ....
        expect(href).to.eq('#i-settings')
    })
    ...
    //deep 例
    expect([1,2]).to.eq([1,2])//报错
    expect([1,2]).to.deep.eq([1,2])//通过
})

• dispatchEvent()
  在一个自动化测试用例里面怎么触发onchange事件

const callback = sion.fake()
vm.$on('change', callback)

//这样触发
let event = new Event('change')
myElement.dispatchEvent(event)

//chai sion：calledwith(event)  
expect(callback).to.have.been.calledwith(event)

持续集成服务

一个免费的工具让我连npm run test都不用敲，travis ci
持续集成
- 持续测试
- 持续交付
- 持续部署

travis ci 帮你测试，没有限制 （github用的TravisCI）
circle ci 功能更强，但一次只能做一个 （vue用的CircleCI）

travisci

1. 建立travici与github项目的连接，https://travis-ci.org/
2. 新建.travis.yml文件，提交到刚刚连接好的github远程仓库

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"

3. 在travici网页查看跑的测试用例