建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
前言
成都創(chuàng)新互聯(lián)公司企業(yè)建站,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn)，專(zhuān)注于網(wǎng)站建設(shè)技術(shù)，精于網(wǎng)頁(yè)設(shè)計(jì)，有多年建站和網(wǎng)站代運(yùn)營(yíng)經(jīng)驗(yàn)，設(shè)計(jì)師為客戶(hù)打造網(wǎng)絡(luò)企業(yè)風(fēng)格，提供周到的建站售前咨詢(xún)和貼心的售后服務(wù)。對(duì)于成都做網(wǎng)站、網(wǎng)站制作中不同領(lǐng)域進(jìn)行深入了解和探索，創(chuàng)新互聯(lián)在網(wǎng)站建設(shè)中充分了解客戶(hù)行業(yè)的需求，以靈動(dòng)的思維在網(wǎng)頁(yè)中充分展現(xiàn)，通過(guò)對(duì)客戶(hù)行業(yè)精準(zhǔn)市場(chǎng)調(diào)研，為客戶(hù)提供的解決方案。
在前端開(kāi)發(fā)中，測(cè)試常常是被忽略的一環(huán)。因此最近在研究前端自動(dòng)化測(cè)試框架Karma，把個(gè)人的學(xué)習(xí)過(guò)程分享出來(lái)，希望對(duì)大家有幫助。
什么是Karma?
Karma是由Google團(tuán)隊(duì)開(kāi)發(fā)的一套前端測(cè)試運(yùn)行框架。它不同于測(cè)試框架(例如jasmine，mocha等)，運(yùn)行在這些測(cè)試框架之上。主要完成一下工作：
Karma啟動(dòng)一個(gè)web服務(wù)器，生成包含js源代碼和js測(cè)試腳本的頁(yè)面;
運(yùn)行瀏覽器加載頁(yè)面，并顯示測(cè)試的結(jié)果;
如果開(kāi)啟檢測(cè)，則當(dāng)文件有修改時(shí)，執(zhí)行繼續(xù)執(zhí)行以上過(guò)程。
Karma的安裝配置
初始項(xiàng)目結(jié)構(gòu)
- karma-example
- ├── src
- ├── index.js
- ├── test
- ├── package.json
index.js的內(nèi)容如下
- function isNum(num) {
- if (typeof num === 'number') {
- return true
- } else {
- return false
- }
- }
安裝Karma環(huán)境
為了方便搭建Karma環(huán)境，我們可以全局安裝karma-cli來(lái)幫我們初始化測(cè)試環(huán)境：
- npm i -g karma-cli
然后在項(xiàng)目中安裝karma包
- npm i --save-dev karma
接下來(lái)在工程目錄中運(yùn)行karma init來(lái)進(jìn)行測(cè)試環(huán)境初始化，并按照指示一步步完成。
上圖是選項(xiàng)的示例，這里使用jasmine測(cè)試框架，PhantomJS作為代碼運(yùn)行的環(huán)境(也可以選擇其他瀏覽器作為運(yùn)行環(huán)境，比如Chrome，IE等)。***在項(xiàng)目中生成karma.conf.js文件。
至此就搭建好了基本的Karma運(yùn)行環(huán)境。
運(yùn)行Karma
在test目錄里編寫(xiě)一個(gè)簡(jiǎn)單的測(cè)試腳本，我們使用的是jasmine測(cè)試框架，具體的api可以參考jasmine api，內(nèi)容如下
- describe('index.js: ', function() {
- it('isNum() should work fine.', function() {
- expect(isNum(1)).toBe(true)
- expect(isNum('1')).toBe(false)
- })
- })
然后在項(xiàng)目根目錄下運(yùn)行karma start命令,我們可以看到運(yùn)行的結(jié)果如下
可以看到，運(yùn)行的結(jié)果顯示測(cè)試成功。
同時(shí)，因?yàn)槲覀冎霸O(shè)置了監(jiān)控文件的修改，所以當(dāng)我們修改源文件或者測(cè)試腳本的時(shí)候，Karma會(huì)自動(dòng)幫我們?cè)俅芜\(yùn)行，無(wú)需我們手動(dòng)操作。
Coverage
如何衡量測(cè)試腳本的質(zhì)量呢?其中一個(gè)參考指標(biāo)就是代碼覆蓋率(coverage)。
什么是代碼覆蓋率?簡(jiǎn)而言之就是測(cè)試中運(yùn)行到的代碼占所有代碼的比率。其中又可以分為行數(shù)覆蓋率，分支覆蓋率等。具體的含義不再細(xì)說(shuō)，有興趣的可以自行查閱資料。
雖然并不是說(shuō)代碼覆蓋率越高，測(cè)試的腳本寫(xiě)得越好(可以看看參考文獻(xiàn)4)，但是代碼覆蓋率對(duì)撰寫(xiě)測(cè)試腳本還是有一定的指導(dǎo)意義的。因此接下來(lái)我們?cè)贙arma環(huán)境中添加Coverage。
首先安裝好Karma覆蓋率工具
- npm i --save-dev karma-coverage
然后修改配置文件karma.conf.js，
- module.exports = function(config) {
- config.set({
- basePath: '',
- frameworks: ['jasmine'],
- files: [
- 'src/**/*.js',
- 'test/**/*.js'
- ],
- exclude: [],
- // modified
- preprocessors: {
- 'src/**/*.js': ['coverage']
- },
- //modified
- reporters: ['progress', 'coverage'],
- // add
- coverageReporter: {
- type : 'html',
- dir : 'coverage/'
- },
- port: 9876,
- colors: true,
- logLevel: config.LOG_INFO,
- autoWatch: true,
- browsers: ['PhantomJS'],
- singleRun: false,
- concurrency: Infinity
- })
- }
再運(yùn)行karma start后，會(huì)在目錄下生成coverage目錄，里面有本次測(cè)試的覆蓋報(bào)告。打開(kāi)后的結(jié)果如下
使用Webpack+Babel
在實(shí)際項(xiàng)目中，有事會(huì)需要用到Webpack和ES6，所以接下來(lái)將Webpack和Babel集成進(jìn)Karma環(huán)境中。
安裝karma-webpack
- npm i --save-dev karma-webpack
安裝babel
- npm i --save-dev babel-loader babel-core babel-preset-es2015
然后文件進(jìn)行改造，src/index.js文件修改為
- function isNum(num) {
- if (typeof num === 'number') {
- return true
- } else {
- return false
- }
- }
- exports.isNum = isNum
text/index.js文件修改為
- const Util = require('../src/index')
- describe('index.js: ', () => {
- it('isNum() should work fine.', () => {
- expect(Util.isNum(1)).toBe(true)
- expect(Util.isNum('1')).toBe(false)
- })
- })
接下來(lái)修改配置文件karma.conf.js
- module.exports = function(config) {
- config.set({
- basePath: '',
- frameworks: ['jasmine'],
- files: [
- 'test/**/*.js'
- ],
- exclude: [],
- preprocessors: {
- 'test/**/*.js': ['webpack', 'coverage']
- },
- reporters: ['progress', 'coverage'],
- coverageReporter: {
- type: 'html',
- dir: 'coverage/'
- },
- port: 9876,
- colors: true,
- logLevel: config.LOG_INFO,
- autoWatch: true,
- browsers: ['PhantomJS'],
- singleRun: false,
- concurrency: Infinity,
- webpack: {
- module: {
- loaders: [{
- test: /\.js$/,
- loader: 'babel',
- exclude: /node_modules/,
- query: {
- presets: ['es2015']
- }
- }]
- }
- }
- })
- }
注意這里的修改：
- files只留下test文件。因?yàn)閣ebpack會(huì)自動(dòng)把需要的其它文件都打包進(jìn)來(lái)，所以只需要留下入口文件。
- preprocessors也修改為test文件，并加入webpack域處理器
- 加入webpack配置選項(xiàng)。可以自己定制配置項(xiàng)，但是不需要entry和output。這里加上babel-loader來(lái)編譯ES6代碼
運(yùn)行karma start，成功了~
再看看Coverage，臥槽。。居然不是***了。。。
原因很簡(jiǎn)單，webpack會(huì)加入一些代碼，影響了代碼的Coverage。如果我們引入了一些其它的庫(kù)，比如jquery之類(lèi)的，將源代碼和庫(kù)代碼打包在一起后，覆蓋率會(huì)更難看。。這樣的Coverage就沒(méi)有了參考的價(jià)值。
還好有大神給我們提供了解決方案，需要安裝插件
- npm i --save-dev babel-plugin-istanbul
修改webpack中babel-loader的配置
- {
- test: /\.js$/,
- loader: 'babel',
- exclude: /node_modules/,
- query: {
- presets: ['es2015'],
- plugins: ['istanbul']
- }
- }
因?yàn)檫@里引入了istanbul插件來(lái)檢測(cè)Coverage，所以要把preprocessors里的coverage去掉。
搞定以后，運(yùn)行karma start。當(dāng)當(dāng)當(dāng)當(dāng)~一切OK啦，盡情編寫(xiě)測(cè)試腳本把~
***附上示例項(xiàng)目地址:karma-example
網(wǎng)頁(yè)標(biāo)題：前端單元測(cè)試之Karma環(huán)境搭建
本文鏈接：http://www.5511xx.com/article/djjedid.html
