最近研究vue項(xiàng)目的自動(dòng)化測(cè)試，網(wǎng)上有很多教程顶霞，因此也是一個(gè)坑一個(gè)坑的踩肄程，差一點(diǎn)就從開始到放棄了，最后又仔細(xì)研究了一下选浑，終于成功了蓝厌，這篇主要用來(lái)記錄成功過(guò)程。如有不對(duì)古徒，望各位大神多多指教拓提。
-
新建vue項(xiàng)目并默認(rèn)開啟unit tests和e2e tests
image.png
列舉一下用到的開源項(xiàng)目：
（1）karam:
是一個(gè)基于Node.js的JavaScript測(cè)試執(zhí)行過(guò)程管理工具（Test Runner）。該工具可用于測(cè)試所有主流Web瀏覽器隧膘，也可集成到CI（Continuous integration）工具代态，也可和其他代碼編輯器一起使用。這個(gè)測(cè)試工具的一個(gè)強(qiáng)大特性就是疹吃，它可以監(jiān)控(Watch)文件的變化蹦疑，然后自行執(zhí)行，通過(guò)console.log顯示測(cè)試結(jié)果萨驶。
（2）mocha: [用來(lái)描述測(cè)試用例]
是一款功能豐富的javascript單元測(cè)試框架歉摧，它既可以運(yùn)行在nodejs環(huán)境中，也可以運(yùn)行在瀏覽器環(huán)境中。
（3）nightwatch:
是一套基于Node.js的測(cè)試框架叁温，使用Selenium WebDriver API以將Web應(yīng)用測(cè)試自動(dòng)化再悼。它提供了簡(jiǎn)單的語(yǔ)法，支持使用JavaScript和CSS選擇器膝但，來(lái)編寫運(yùn)行在Selenium服務(wù)器上的端到端測(cè)試冲九。
（4）phantomjs: [作為運(yùn)行環(huán)境來(lái)跑測(cè)試用例]
一個(gè)基于webkit內(nèi)核的無(wú)頭瀏覽器，即沒(méi)有UI界面锰镀，即它就是一個(gè)瀏覽器娘侍，只是其內(nèi)的點(diǎn)擊咖刃、翻頁(yè)等人為相關(guān)操作需要程序設(shè)計(jì)實(shí)現(xiàn)泳炉。
[注: 如果你之間沒(méi)有安裝過(guò)phantom,phantomjs的依賴會(huì)比較難裝.如果phantomjs裝不上可以嘗試使用chrome作為運(yùn)行環(huán)境，這需要安裝 "karma-chrome-launcher"嚎杨，需要修改配置文件]
（5）sinon-chai: [用來(lái)斷言]
是 sinon和chai這兩個(gè)斷言庫(kù)的結(jié)合花鹅，提供豐富的斷言方法 -
npm run unit 跑一下unit tests
運(yùn)行結(jié)果：
image.png
此時(shí)的目錄結(jié)構(gòu)：
image.png - src/test/unit/index.js 文件配置如下（基本上不用修改）
import Vue from 'vue'
Vue.config.productionTip = false
// 加載所有的測(cè)試用例、 testsContext.keys().forEach(testsContext)這種寫法是webpack中的加載目錄下所有文件的寫法
const testsContext = require.context('./specs', true, /\.spec$/)
testsContext.keys().forEach(testsContext)
// 加載所有代碼文件枫浙，方便統(tǒng)計(jì)代碼覆蓋率
const srcContext = require.context('../../src', true, /^\.\/(?!main(\.js)?$)/)
srcContext.keys().forEach(srcContext)
-
src/test/karma.conf.js 文件配置如下 （基本上不用修改）
注：我使用的是 Chrome作為運(yùn)行環(huán)境刨肃，所以又安裝了 " karma-chrome-launcher"
image.png
var webpackConfig = require('../../build/webpack.test.conf')
module.exports = function karmaConfig (config) {
config.set({
// browsers: ['PhantomJS','Chrome'],
browsers: ['Chrome'],
// 默認(rèn)加載幾個(gè)框架
frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
// 使用那些匯報(bào)框架
reporters: ['spec', 'coverage'],
// 預(yù)加載文件
files: ['./index.js'],
// 預(yù)處理
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},
// webpack 配置
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
// coverage 配置
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' }
]
}
})
}
此時(shí)的 package.json 配置如下（若有缺少使用npm安裝）：
- 修改 src/components/HelloWorls.vue 文件，測(cè)試代碼覆蓋率
HelloWorls.vue組件修改如下：
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
console.log('data');
function aa() {
}
if(false) {
console.log('data aa');
}
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods: {
aa() {
console.log('methods aa');
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
</style>
-
npm run unit
image.png
瀏覽器中打開 src/test/coverage/lcov-report/src/components/index.html文件箩帚，可以清晰的看到代碼覆蓋情況：
image.png
點(diǎn)開HelloWord.vue 更直觀的方式展示了哪些代碼被覆蓋了真友，哪些沒(méi)有：
image.png
image.png
