单元测试
单元测试就是判断一个输入和输出是否一致
以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()
}
自动化测试
- 安装各种工具
npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies - 新建karma.conf.js
files: [
'dist/**/*.test.js',
'dist/**/*.test.css'
],
browsers: ['ChromeHeadless'],
- 创建 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
})
})
- 配置package.json
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-minify && karma start --single-run"
},
- 运行
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
- 建立travici与github项目的连接，https://travis-ci.org/
- 新建.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"
- 在travici网页查看跑的测试用例
