一開始我是打算把數(shù)據(jù)庫(kù)的測(cè)試也準(zhǔn)備寫一篇剧劝，但是發(fā)現(xiàn)需要?jiǎng)?chuàng)建表格之間的關(guān)系雁芙，增刪查改的過(guò)程比較繁雜又多，先把前端vue的測(cè)試給寫了也給自己的知識(shí)點(diǎn)做個(gè)備份熬荆，學(xué)而不思則舟山、思而不學(xué)現(xiàn)在就開始do it。
Karma
karma測(cè)試庫(kù)是一個(gè)測(cè)試管理工具，可以幫你啟動(dòng)一個(gè)HTTP服務(wù)器運(yùn)行你的代碼文件捏顺，也可以通過(guò)其插件可以快速集成到各種環(huán)境中六孵。例如：本地環(huán)境、持續(xù)集成環(huán)境幅骄。
- karma安裝
npm install karma-cli -g
npm install karma --save-dev
npm install karma-mocha --save-dev
npm install karma-chai --save-dev
- 配置文件
新建一個(gè)karma.conf.js文件粘貼以下內(nèi)容，frameworks里面還包含sinon-chai是用來(lái)輔助測(cè)試的后面會(huì)講到本今。
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
});
};
- 命令
package.json文件中添加需要的腳本
"scripts": {
"dev-test": "parcel watch test/* --no-cache & karma start",
"test": "parcel build test/* --no-cache --no-minify && karma start --single-run"
}
Chai
chai是一個(gè)斷言庫(kù)拆座， 有多種的斷言風(fēng)格，目前有should冠息、expect和assert
想熟悉語(yǔ)言的話推薦API中文文檔里面有很多chai的用例
當(dāng)然斷言風(fēng)格主要還是看個(gè)人的使用習(xí)慣挪凑，下面簡(jiǎn)單介紹一下expect它的斷言使用語(yǔ)法
安裝
npm i -D chai
用例
// 相等或不相等
expect(1 + 2).to.be.equal(3);
expect(1 + 2).to.be.not.equal(4);
expect(foo).to.be.deep.equal({ bar: 'baz' });
// 布爾值為true
expect('everthing').to.be.ok;
expect(false).to.not.be.ok;
// typeof
expect('test').to.be.a('string');
expect({ foo: 'bar' }).to.be.an('object');
expect(foo).to.be.an.instanceof(Foo);
// include
expect([1,2,3]).to.include(2);
expect('foobar').to.contain('foo');
expect({ foo: 'bar', hello: 'universe' }).to.include.keys('foo');
// empty
expect([]).to.be.empty;
expect('').to.be.empty;
expect({}).to.be.empty;
// match
expect('foobar').to.match(/^foo/);
Mocha
Mocha 是一個(gè)單元測(cè)試框架，就是一個(gè)用來(lái)寫測(cè)試用例的運(yùn)行測(cè)試工具
先導(dǎo)出一個(gè)加法模塊 add.js
function add(x, y) {
return x + y;
}
module.exports = add;
接下來(lái)寫測(cè)試加法腳本 add.test.js逛艰，建議測(cè)試腳本和要執(zhí)行的文件模塊同名躏碳，
每一個(gè) describe 描述模塊相當(dāng)于一個(gè)大廠房，而 it 里面信息比如成一個(gè)小機(jī)房散怖，每個(gè)機(jī)房都有你將要執(zhí)行的東西在里面菇绵。
var add = require('./add.js');
var expect = require('chai').expect;
describe('一個(gè)加法測(cè)試', function() {
it('1 加 1 應(yīng)該等于 2', function() {
expect(add(1, 1)).to.be.equal(2);
});
});
文件測(cè)試
- 按鈕組件 src/button.vue
<template>
<button class="default" :class="color" @click="$emit('click');">
<slot></slot>
</button>
</template>
<script>
export default {
props: {
color: {
type: String
}
}
};
</script>
<style scoped>
.default {
cursor: pointer;
width: 200px;
height: 40px;
line-height: 40px;
border-width: 0px;
border-radius: 4px;
outline: none;
font-family: Microsoft YaHei;
color: black;
font-size: 15px;
background: #f8f8f8;
}
.blue {
background: #1e90ff;
}
</style>
- 添加組件 src/App.vue
<template>
<div id="app">
<test-button color="blue" @click="counter += 1;">Click me</test-button>
</div>
</template>
<script>
import TestButton from "./button";
export default {
name: "App",
components: {
TestButton
}
};
</script>
<style></style>
- 測(cè)試文件 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('存在 button', () => {
expect(Button).to.exist // expect語(yǔ)法期待組件的存在
})
it('點(diǎn)擊 button', () => {
const div = document.createElement('div')
document.body.appendChild(div)
const Constructor = Vue.extend(Button) // 使用button
const vm = new Constructor({
propsData: {
color: 'blue',
}
}).$mount(div)
const callback = sinon.fake(); // sinon記錄一個(gè)調(diào)用
vm.$on('click', callback) // 監(jiān)聽(tīng)回調(diào)
vm.$el.click() // click執(zhí)行
expect(callback).to.have.been.called // 期待這個(gè)事件被調(diào)用
})
})
- npm run dev 最后執(zhí)行結(jié)果, 這里錯(cuò)誤的示范就不做記錄了，看到的朋友自己花時(shí)間跑一次就知道坑在哪了~
...
√ Built in 193ms.
dist\button.test.js 270.2 B 120ms
dist\button.test.map 0 KB 65ms
...
HeadlessChrome 0.0.0 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.016 secs / 0.008 secs)
