国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
自動(dòng)化測(cè)試之karma和jasmine | 皓眸IT

測(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

  1. 安裝nodejs,注意相關(guān)版本要求

  2. 安裝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è)試。

  1. 編寫源文件src.js
1
2
3
function reverse(name){
return name.split("").reverse().join("");
}
  1. 編寫測(cè)試代碼test.js
1
2
3
4
5
describe("A suite of basic functions", function() {
it("reverse word",function(){
expect("DCBA").toEqual(reverse("ABCD"));
});
});
  1. 修改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
});
};

剛才通過命令行的方式生成的配置文件和上面的可能有所不同,作參考。

  1. 啟動(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í)行

1
protractor --version

來測(cè)試是否安裝成功。然后通過執(zhí)行

1
webdriver-manager update

上面的命令會(huì)下載必要的支持組建,然后可以通過

1
webdriver-manager start

來啟動(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í)例

  1. 編寫測(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方法。

  1. 編寫配置文件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瀏覽器。

  1. 運(yùn)行測(cè)試
1
protractor conf.js

你會(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)叫我皓眸哥(^_^)  

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
給 Web 開發(fā)者的 25 款最有用的 AngularJS 工具
說說NG里的單元測(cè)試
前端單元測(cè)試之Karma環(huán)境搭建
前端測(cè)試回顧及我們?yōu)槭裁催x擇Karma | Web前端 騰訊AlloyTeam Blog | 愿景: 成為地球卓越的Web團(tuán)隊(duì)!
JS單元測(cè)試框架 -- Jasmine
chrome擴(kuò)展程序開發(fā)/chrome運(yùn)行本地JS腳本
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服