摘要:塊被稱為測(cè)試用例,第個(gè)參數(shù)是實(shí)際執(zhí)行的函數(shù)。每當(dāng)有代碼更新的時(shí)候,先獲取對(duì)應(yīng)的源碼,然后一步步根據(jù)配置執(zhí)行,剛涉及到前端測(cè)試,以上內(nèi)容如有錯(cuò)誤的地方,請(qǐng)不吝指正。
前端測(cè)試
說(shuō)起前端測(cè)試,經(jīng)常會(huì)聽(tīng)到assert,shouldjs,mocha,karma,travis等等,
這些是都是分別用來(lái)干什么的呢?
本人目前工作中,其實(shí)沒(méi)有涉及到前端測(cè)試,周?chē)娜艘埠苌儆玫竭^(guò)前端測(cè)試,
那為什么需要前端測(cè)試呢?
大的前端框架比如jquery等等,都是必須要有測(cè)試,
比如由于添加功能,要將現(xiàn)在的jquery版本由1.7升級(jí)到1.8,
如果沒(méi)有測(cè)試,添加的新功能對(duì)以前的code有沒(méi)有影響,
我們需要一步一步去手動(dòng)調(diào)試,會(huì)是一個(gè)很大的工作量,
但是通過(guò)執(zhí)行測(cè)試代碼,可以很方便的幫助我們檢測(cè)以前的功能還是不是能很好的運(yùn)行。
同時(shí)通過(guò)執(zhí)行測(cè)試代碼,對(duì)我們的各個(gè)功能模塊的代碼也是一個(gè)很好的性能檢測(cè)。
首先需要了解如何寫(xiě)測(cè)試代碼,可以將測(cè)試代碼看成一種語(yǔ)言(雖然它便不是)。
它有它的語(yǔ)法,及框架。
test.js
var assert = require("assert") describe("Array", function() { describe("#indexOf()", function() { it("should return -1 when the value is not present", function() { assert.equal(-1, [1, 2, 3].indexof("4")) }) }) })
上面是一段非常簡(jiǎn)單的測(cè)試代碼,這就是測(cè)試代碼的語(yǔ)法。
一個(gè)測(cè)試文件中應(yīng)該包含一個(gè)或者多個(gè)describe塊,
一個(gè)describe塊應(yīng)該包含一個(gè)或者多個(gè)it塊。
describe塊被稱為測(cè)試套件,第2個(gè)參數(shù)是實(shí)際執(zhí)行的函數(shù)。
it塊被稱為測(cè)試用例,第2個(gè)參數(shù)是實(shí)際執(zhí)行的函數(shù)。
assert模塊是nodejs的斷言庫(kù),主要使用了過(guò)來(lái)判斷結(jié)果是否符合預(yù)期值,
比如 assert.equal(-1, [1, 2, 3].indexof("4")),
就是判斷[1, 2, 3].indexof("4")的值和-1是否相等,
相等就測(cè)試通過(guò),否則不通過(guò)。
關(guān)于assert語(yǔ)法可以參考這里。
shouldjs就是對(duì)assert模塊的一個(gè)擴(kuò)展。
上面的測(cè)試代碼如何運(yùn)行呢,可以通過(guò)測(cè)試框架,如mocha等來(lái)運(yùn)行。
先安裝 npm install mocha -g,
然后在package.js中添加一條scripttest: mocha;
mocha默認(rèn)會(huì)去執(zhí)行相同目錄下中的test下的js文件,
也就是說(shuō)將上面的js文件test.js放入package同目錄下的test文件夾下,mocha會(huì)默認(rèn)執(zhí)行。
執(zhí)行npm run test,就可以看到如下的結(jié)果。
![測(cè)試結(jié)果](http://zoucz.com/blogimgs/201...)
通過(guò)mocha測(cè)試框架確實(shí)能運(yùn)行測(cè)試代碼了,但是在終端去查看測(cè)試結(jié)果多少有些不方便,
可以通過(guò)karma測(cè)試工具來(lái)實(shí)現(xiàn)在瀏覽器上運(yùn)行測(cè)試代碼,
甚至可以在瀏覽器上打斷點(diǎn)來(lái)運(yùn)行測(cè)試代碼。
安裝karma npm install -g karma-cli,
然后在package.js中添加一條scriptkarma: karma start;
karma可以通過(guò)karma init來(lái)初始化配置文件,
配置文件中可以設(shè)置瀏覽器,測(cè)試代碼的使用框架,熱更新功能等等。
執(zhí)行npm run karma后,能自動(dòng)打開(kāi)在karma配置文件中設(shè)置的瀏覽器,
以及在此瀏覽器上運(yùn)行測(cè)試代碼。
持續(xù)集成就是,每次源碼(如github上的)有更新,比如有人push了一段代碼,
持續(xù)集成工具就下載源碼,根據(jù)配置文件,執(zhí)行相應(yīng)的代碼(經(jīng)常是測(cè)試代碼),
然后反饋執(zhí)行結(jié)果。
travis對(duì)于開(kāi)源項(xiàng)目是免費(fèi)的,推薦使用。
Travis CI 只支持 Github,不支持其他代碼托管服務(wù)。
在Travis上添加想要持續(xù)集成的github源。
Travis CI需要有一個(gè)配置文件travis.yml,用來(lái)指定travis的行為。
language: node_js node_js: - "8" before_install: - export CHROME_BIN=chromium-browser - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start install: - npm install -g karma - npm install script: - npm run test
每當(dāng)有代碼更新的時(shí)候,travis先獲取github對(duì)應(yīng)的源碼,
然后一步步根據(jù)配置執(zhí)行,before_install =>install => npm run test
剛涉及到前端測(cè)試,以上內(nèi)容如有錯(cuò)誤的地方,請(qǐng)不吝指正。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/95654.html
摘要:而測(cè)試驅(qū)動(dòng)開(kāi)發(fā)技術(shù)并不只是單純的測(cè)試工作。需求向來(lái)就是軟件開(kāi)發(fā)過(guò)程中感覺(jué)最不好明確描述易變的東西。這里說(shuō)的需求不只是指用戶的需求,還包括對(duì)代碼 可能很多人和我一樣, 首次聽(tīng)到前端架構(gòu)這個(gè)詞, 第一反應(yīng)是: 前端還有架構(gòu)這一說(shuō)呢? 在后端開(kāi)發(fā)領(lǐng)域, 系統(tǒng)規(guī)劃和可擴(kuò)展性非常關(guān)鍵, 因此架構(gòu)師備受重視, 早在開(kāi)發(fā)工作啟動(dòng)之前, 他們就被邀請(qǐng)加入到項(xiàng)目中, 而且他們會(huì)跟客戶討論即將建成的平臺(tái)的...
摘要:而測(cè)試驅(qū)動(dòng)開(kāi)發(fā)技術(shù)并不只是單純的測(cè)試工作。需求向來(lái)就是軟件開(kāi)發(fā)過(guò)程中感覺(jué)最不好明確描述易變的東西。這里說(shuō)的需求不只是指用戶的需求,還包括對(duì)代碼 可能很多人和我一樣, 首次聽(tīng)到前端架構(gòu)這個(gè)詞, 第一反應(yīng)是: 前端還有架構(gòu)這一說(shuō)呢? 在后端開(kāi)發(fā)領(lǐng)域, 系統(tǒng)規(guī)劃和可擴(kuò)展性非常關(guān)鍵, 因此架構(gòu)師備受重視, 早在開(kāi)發(fā)工作啟動(dòng)之前, 他們就被邀請(qǐng)加入到項(xiàng)目中, 而且他們會(huì)跟客戶討論即將建成的平臺(tái)的...
摘要:測(cè)試光譜光譜的一端單元測(cè)試顧名思義,代碼以單元為單位進(jìn)行測(cè)試。這個(gè)系列文章整體如下測(cè)試你的前端代碼單元測(cè)試測(cè)試你的前端代碼端到端測(cè)試測(cè)試你的前端代碼集成測(cè)試。 showImg(https://segmentfault.com/img/remote/1460000008812278?w=998&h=354); 本文作者:Gil Tayar 編譯:胡子大哈 翻譯原文:http://hu...
摘要:測(cè)試光譜光譜的一端單元測(cè)試顧名思義,代碼以單元為單位進(jìn)行測(cè)試。這個(gè)系列文章整體如下測(cè)試你的前端代碼單元測(cè)試測(cè)試你的前端代碼端到端測(cè)試測(cè)試你的前端代碼集成測(cè)試。 showImg(https://segmentfault.com/img/remote/1460000008812278?w=998&h=354); 本文作者:Gil Tayar 編譯:胡子大哈 翻譯原文:http://hu...
摘要:還可以自動(dòng)完成單元測(cè)試的配置,工具選型為準(zhǔn)備出發(fā)有了以上的初步了解,我們就可以準(zhǔn)備著手搭建我們自己的測(cè)試環(huán)境了,讓我們短暫休息一下,下一章見(jiàn)下一篇搭建自己的前端自動(dòng)化測(cè)試腳手架二 搭建自己的前端自動(dòng)化測(cè)試腳手架(一) LancerComet at 17:55, 2016.07.17.歡迎轉(zhuǎn)載,轉(zhuǎn)載時(shí)還請(qǐng)保留作者署名。 隨著前端項(xiàng)目規(guī)模的日益膨脹,自動(dòng)化測(cè)試越來(lái)越受到廣大前端與測(cè)試朋友關(guān)...
閱讀 3396·2021-11-24 09:38
閱讀 1392·2021-11-22 15:08
閱讀 1468·2021-09-29 09:35
閱讀 485·2021-09-02 15:11
閱讀 1310·2019-08-30 12:55
閱讀 392·2019-08-29 17:16
閱讀 498·2019-08-29 11:30
閱讀 423·2019-08-26 13:23