測(cè)試的必須性
相信大家都知道測(cè)試的必要性,測(cè)試先行的概念。不過,寫了這么多年的代碼,除了之前用java的時(shí)候?qū)戇^一些測(cè)試用例,還真的很少寫過前端的測(cè)試用例,或者做一些自動(dòng)化測(cè)試。感覺做單元測(cè)試還是很有必須的,它能幫助你整理思路,換個(gè)角度思考問題,發(fā)現(xiàn)bug。最近正好研究一下,之前了解到j(luò)asmine是做js單元測(cè)試的利器,karma是用來自動(dòng)化運(yùn)行分析統(tǒng)計(jì)單元測(cè)試的,結(jié)合karma-coverage還能統(tǒng)計(jì)代碼覆蓋率,這么牛的神器,一定要試一試。另外最后會(huì)介紹另外一個(gè)端到端的測(cè)試神器protractor,不過目前只能測(cè)試angular的應(yīng)用。
轉(zhuǎn)載請(qǐng)注明出處:http://www.haomou.net/2015/03/10/2015_karma_jasmine/
karma安裝及使用
Karma是Testacular的新名字,在2012年google開源了Testacular,2013年Testacular改名為Karma。Karma是一個(gè)讓人感到非常神秘的名字,表示佛教中的緣分,因果報(bào)應(yīng),比Cassandra這種名字更讓人猜不透!
Karma是一個(gè)基于Node.js的JavaScript測(cè)試執(zhí)行過程管理工具(Test Runner)。該工具可用于測(cè)試所有主流Web瀏覽器,也可集成到CI(Continuous integration)工具,也可和其他代碼編輯器一起使用。這個(gè)測(cè)試工具的一個(gè)強(qiáng)大特性就是,它可以監(jiān)控(Watch)文件的變化,然后自行執(zhí)行,通過console.log顯示測(cè)試結(jié)果。
官網(wǎng):https://karma-runner.github.io
安裝karma
安裝nodejs,注意相關(guān)版本要求
安裝karma和相關(guān)插件,推薦的方法是在項(xiàng)目目錄安裝karma和相關(guān)插件
1 2 3 4 5
| # Install Karma: $ npm install karma --save-dev # Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher --save-dev
|
上面的命令會(huì)安裝karma, karma-jasmine 和 karma-chrome-launcher 到node_modules目錄,同時(shí)將配置保存到package.json中。接著可以運(yùn)行karma
1 2
| # Run Karma: $ ./node_modules/karma/bin/karma start
|
注意,直接運(yùn)行karma是不行的,肯定會(huì)報(bào)錯(cuò),需要用上面的方法運(yùn)行。如果想直接用karma命令,需要安裝karma-cli,如下所示:
1
| $ npm install -g karma-cli
|
然后你就可以直接運(yùn)行karma命令了。
我們執(zhí)行
1 2 3
| ./node_modules/karma/bin/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
|
可以看到karma會(huì)自動(dòng)打開瀏覽器,界面如下:
初始化karma配置
執(zhí)行:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| ./node_modules/karma/bin/karma init Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine Do 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. > no Do 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. > yes Config file generated at "D:\workspace\javascript\karma\karma.conf.js".
|
通過這種命令行的形式,我們就成功配置了karma自動(dòng)化運(yùn)行腳本。
后面可以根據(jù)需要做修改。
jasmine介紹
jasmine是為javascript提供的行為驅(qū)動(dòng)的測(cè)試開發(fā)框架,它不依賴于瀏覽器,DOM,或者其他javascript框架,可以為web項(xiàng)目,node項(xiàng)目或者其他運(yùn)行js的項(xiàng)目寫單元測(cè)試。
官網(wǎng):http://jasmine.github.io
使用文檔api介紹:http://jasmine.github.io/2.0/introduction.html
運(yùn)行示例
我們假設(shè)在當(dāng)前目錄,按照上面的方法安裝了karma,(需要注意的是上面安裝karma的時(shí)候已經(jīng)安裝了jasmine),然后我們做個(gè)測(cè)試。
- 編寫源文件src.js
1 2 3
| function reverse(name){ return name.split("").reverse().join(""); }
|
- 編寫測(cè)試代碼test.js
1 2 3 4 5
| describe("A suite of basic functions", function() { it("reverse word",function(){ expect("DCBA").toEqual(reverse("ABCD")); }); });
|
- 修改karma.conf.js配置文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| 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 }); };
|
剛才通過命令行的方式生成的配置文件和上面的可能有所不同,作參考。
- 啟動(dòng)karma測(cè)試
1 2 3 4 5 6 7 8 9 10 11
| ./node_modules/karma/bin/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)打開瀏覽器
代碼覆蓋率插件
安裝代碼覆蓋率插件karma-coverage
1
| ~ D:\workspace\javascript\karma>npm install karma-coverage
|
修改karma.conf.js配置文件
1 2 3 4 5 6
| reporters: ['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%,說明我們完整了測(cè)試了src.js的功能。
接下來,我們修改src.js,增加一個(gè)if分支
1 2 3 4
| function reverse(name){ if(name=='AAA') return "BBB"; return name.split("").reverse().join(""); }
|
再看覆蓋率報(bào)告,
protractor使用介紹
protractor是專為angular應(yīng)用設(shè)計(jì)的端到端的測(cè)試框架,它直接在瀏覽器中運(yùn)行,模擬類似于人在實(shí)際環(huán)境中的交互操作來測(cè)試。
官網(wǎng)主頁:http://angular.github.io/protractor/#/
安裝使用
執(zhí)行
1
| npm install -g protractor
|
改命令會(huì)安裝protractor 和 webdriver-manager兩個(gè)命令行工具,可以執(zhí)行
來測(cè)試是否安裝成功。然后通過執(zhí)行
1
| webdriver-manager update
|
上面的命令會(huì)下載必要的支持組建,然后可以通過
來啟動(dòng)一個(gè)server,我們運(yùn)行的protractor test會(huì)運(yùn)行在這個(gè)server上,可以在 http://localhost:4444/wd/hub 地址查看server的運(yùn)行狀態(tài)。
測(cè)試實(shí)例
- 編寫測(cè)試腳本,我們測(cè)試angular的官網(wǎng)示例todo list,編寫todo-spec.js如下:
1 2 3 4 5 6 7 8 9 10 11 12
| describe('angularjs homepage todo list', function() { it('should add a todo', function() { browser.get('http://www.angularjs.org'); element(by.model('todoText')).sendKeys('write a protractor test'); element(by.css('[value="add"]')).click(); var todoList = element.all(by.repeater('todo in todos')); expect(todoList.count()).toEqual(3); expect(todoList.get(2).getText()).toEqual('write a protractor test'); }); });
|
其中describe和it使用的是jasmine的語法,browser是protractor提供的全局對(duì)象,用于執(zhí)行瀏覽器級(jí)別的任務(wù),比如導(dǎo)航加載頁面可以用browser.get方法。
- 編寫配置文件conf.js
1 2 3 4
| exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['todo-spec.js'] };
|
這個(gè)配置文件主要告訴protractor測(cè)試的文件和服務(wù)器的地址,默認(rèn)使用chrom瀏覽器。
- 運(yùn)行測(cè)試
你會(huì)看見會(huì)自動(dòng)打開瀏覽器,跳轉(zhuǎn)到todolist頁面,然后關(guān)閉頁面。
謝謝!
轉(zhuǎn)載請(qǐng)注明出處:http://www.haomou.net/2015/03/10/2015_karma_jasmine/
有問題請(qǐng)留言。 請(qǐng)叫我皓眸哥(^_^)