2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

轉(zhuǎn)自http://blog.fens.me/nodejs-karma-jasmine/

前言

在Java領(lǐng)域，Apache, Spring, JBoss 三大社區(qū)的開源庫(kù)，包羅萬(wàn)象，但每個(gè)庫(kù)都在其領(lǐng)域中都鶴立雞群。而Nodejs中各種各樣的開源庫(kù)，卻讓人眼花繚亂，不知從何下手。

Nodejs領(lǐng)域:?Jasmine做單元測(cè)試，Karma自動(dòng)化完成單元測(cè)試，Grunt啟動(dòng)Karma統(tǒng)一項(xiàng)目管理，Yeoman最后封裝成一個(gè)項(xiàng)目原型模板，npm做nodejs的包依賴管理，bower做javascript的包依賴管理。Java領(lǐng)域：JUnit做單元測(cè)試, Maven自動(dòng)化單元測(cè)試，統(tǒng)一項(xiàng)目管理，構(gòu)建項(xiàng)目原型模板，包依賴管理。

Nodejs讓組合變得更豐富，卻又在加重我們的學(xué)習(xí)門檻。我還說(shuō)不清楚，也看不透！

上面寫的有點(diǎn)遠(yuǎn)了，回到文章的主題，Jasmine+Karma自動(dòng)化單元測(cè)試。

Karma的介紹

Karma是Testacular的新名字，在2012年google開源了Testacular，2013年Testacular改名為Karma。Karma是一個(gè)讓人感到非常神秘的名字，表示佛教中的緣分，因果報(bào)應(yīng)，比Cassandra這種名字更讓人猜不透！

Karma是一個(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é)果。

Jasmine是單元測(cè)試框架，本單將介紹用Karma讓Jasmine測(cè)試自動(dòng)化完成。Jasmine的介紹，請(qǐng)參考文章：jasmine行為驅(qū)動(dòng),測(cè)試先行

istanbul是一個(gè)單元測(cè)試代碼覆蓋率檢查工具，可以很直觀地告訴我們，單元測(cè)試對(duì)代碼的控制程度。

Karma的安裝

系統(tǒng)環(huán)境:

win7?64bit,?node?v0.10.5,?npm?1.2.19

安裝Karma

~?D:\workspace\javascript>mkdir?karma ~?D:\workspace\javascript>cd?karma ~?D:\workspace\javascript\karma>npm?install?-g?karma#?測(cè)試是否安裝成功 ~?D:\workspace\javascript\karma>karma?start INFO?[karma]:?Karma?v0.10.2?server?started?at?http://localhost:9876/ INFO?[Chrome?28.0.1500?(Windows?7)]:?Connected?on?socket?nIlM1yUy6ELMp5ZTN9Ek

從瀏覽器看到karam界面。

下面我們要開始配置karam。

Karma + Jasmine配置

初始化karma配置文件karma.conf.js

~?D:\workspace\javascript\karma>karma?initWhich?testing?framework?do?you?want?to?use?? Press?tab?to?list?possible?options.?Enter?to?move?to?the?next?question. >?jasmineDo?you?want?to?use?Require.js?? This?will?add?Require.js?plugin. Press?tab?to?list?possible?options.?Enter?to?move?to?the?next?question. >?noDo?you?want?to?capture?a?browser?automatically?? Press?tab?to?list?possible?options.?Enter?empty?string?to?move?to?the?next?question. >?Chrome >What?is?the?location?of?your?source?and?test?files?? You?can?use?glob?patterns,?eg.?"js/*.js"?or?"test/**/*Spec.js". Enter?empty?string?to?move?to?the?next?question. >Should?any?of?the?files?included?by?the?previous?patterns?be?excluded?? You?can?use?glob?patterns,?eg.?"**/*.swp". Enter?empty?string?to?move?to?the?next?question. >Do?you?want?Karma?to?watch?all?the?files?and?run?the?tests?on?change?? Press?tab?to?list?possible?options. >?yesConfig?file?generated?at?"D:\workspace\javascript\karma\karma.conf.js".

安裝集成包karma-jasmine

~?D:\workspace\javascript\karma>npm?install?karma-jasmine

自動(dòng)化單元測(cè)試

3步準(zhǔn)備工作：

• 1. 創(chuàng)建源文件：用于實(shí)現(xiàn)某種業(yè)務(wù)邏輯的文件，就是我們平時(shí)寫的js腳本

• 2. 創(chuàng)建測(cè)試文件：符合jasmineAPI的測(cè)試js腳本

• 3. 修改karma.conf.js配置文件

1). 創(chuàng)建源文件：用于實(shí)現(xiàn)某種業(yè)務(wù)邏輯的文件，就是我們平時(shí)寫的js腳本
有一個(gè)需求，要實(shí)現(xiàn)單詞倒寫的功能。如：”ABCD” ==> “DCBA”

~?vi?src.jsfunction?reverse(name){return?name.split("").reverse().join(""); }

2). 創(chuàng)建測(cè)試文件：符合jasmineAPI的測(cè)試js腳本

describe("A?suite?of?basic?functions",?function()?{it("reverse?word",function(){expect("DCBA").toEqual(reverse("ABCD"));}); });

3). 修改karma.conf.js配置文件
我們這里需要修改：files和exclude變量

module.exports?=?function?(config)?{config.set({basePath:?'',frameworks:?['jasmine'],files:?['*.js'],exclude:?['karma.conf.js'],reporters:?['progress'],port:?9876,colors:?true,logLevel:?config.LOG_INFO,autoWatch:?true,browsers:?['Chrome'],captureTimeout:?60000,singleRun:?false}); };

注:最新版的可能需要添加下面的段，否則會(huì)出現(xiàn)

WARN [launcher]: Can not load "Chrome", it is not registered!Perhaps you are missing some plugin?

而且 chrome瀏覽器也不會(huì)自動(dòng)打開

plugins:?[ 'karma-chrome-launcher', 'karma-jasmine' ],

啟動(dòng)karma
單元測(cè)試全自動(dòng)執(zhí)行

~?D:\workspace\javascript\karma>karma?start?karma.conf.js INFO?[karma]:?Karma?v0.10.2?server?started?at?http://localhost:9876/ INFO?[launcher]:?Starting?browser?Chrome WARN?[launcher]:?The?path?should?not?be?quoted.Normalized?the?path?to?C:\Program?Files?(x86)\Google\Chrome\Application\chrome.exe INFO?[Chrome?28.0.1500?(Windows?7)]:?Connected?on?socket?bVGffDWpc1c7QNdYye_6 INFO?[Chrome?28.0.1500?(Windows?7)]:?Connected?on?socket?DtTdVbd4ZsgnMQrgye_7 Chrome?28.0.1500?(Windows?7):?Executed?1?of?1?SUCCESS?(3.473?secs?/?0.431?secs) Chrome?28.0.1500?(Windows?7):?Executed?1?of?1?SUCCESS?(0.068?secs?/?0.021?secs) TOTAL:?2?SUCCESS

瀏覽器會(huì)自動(dòng)打開

我們修改test.js

~?vi?test.jsdescribe("A?suite?of?basic?functions",?function()?{it("reverse?word",function(){expect("DCBA").toEqual(reverse("ABCD"));expect("Conan").toEqual(reverse("nano"));}); });

由于karma.conf.js配置文件中autoWatch: true, 所以test.js文件保存后，會(huì)自動(dòng)執(zhí)行單元測(cè)試。

執(zhí)行日志如下：提示我們單元測(cè)試出錯(cuò)了。

INFO?[watcher]:?Changed?file?"D:/workspace/javascript/karma/test.js". Chrome?28.0.1500?(Windows?7)?A?suite?of?basic?functions?reverse?word?FAILEDExpected?'Conan'?to?equal?'onan'.Error:?Expected?'Conan'?to?equal?'onan'.at?null.?(D:/workspace/javascript/karma/test.js:4:25) Chrome?28.0.1500?(Windows?7):?Executed?1?of?1?(1?FAILED)?ERROR?(0.3?secs?/?0.006?secs)

Karma和istanbul代碼覆蓋率

增加代碼覆蓋率檢查和報(bào)告，增加istanbul依賴

~?D:\workspace\javascript\karma>npm?install?karma-coverage

修改karma.conf.js配置文件

~?vi?karma.conf.jsreporters:?['progress','coverage'], preprocessors?:?{'src.js':?'coverage'}, coverageReporter:?{type?:?'html',dir?:?'coverage/' }

啟動(dòng)karma start，在工程目錄下面找到index.html文件，coverage/chrome/index.html

打開后，我們看到代碼測(cè)試覆蓋綠報(bào)告

覆蓋率是100%，說(shuō)明我們完整了測(cè)試了src.js的功能。

接下來(lái)，我們修改src.js，增加一個(gè)if分支

function?reverse(name){if(name=='AAA')?return?"BBB";return?name.split("").reverse().join(""); }

再看覆蓋率報(bào)告，

Statements：75%覆蓋，Branches：50%覆蓋。

為了產(chǎn)品的質(zhì)量我們要盡量達(dá)到更多的覆蓋率，一般對(duì)于JAVA項(xiàng)目來(lái)說(shuō)，能達(dá)到80%就是相當(dāng)高的標(biāo)準(zhǔn)了。對(duì)于Javascript的代碼測(cè)試及覆蓋率研究，我還要做更多的驗(yàn)證。

Karma第一次啟動(dòng)時(shí)出現(xiàn)的問(wèn)題

CHROME_BIN的環(huán)境變量問(wèn)題

~?D:\workspace\javascript\karma>karma?start?karma.conf.js INFO?[karma]:?Karma?v0.10.2?server?started?at?http://localhost:9876/ INFO?[launcher]:?Starting?browser?Chrome ERROR?[launcher]:?Cannot?start?ChromeCan?not?find?the?binary?C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exePlease?set?env?variable?CHROME_BIN

設(shè)置方法：找到系統(tǒng)中chrome的安裝位置，找到chrome.exe文件

~?D:\workspace\javascript\karma>set?CHROME_BIN="C:\Program?Files?(x86)\Google\Chrome\Application\chrome.exe"

轉(zhuǎn)載于:https://my.oschina.net/shanlilaideyu/blog/487884

總結(jié)

以上是生活随笔為你收集整理的Karma和Jasmine自动化单元测试的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。