摘要:前言配合進(jìn)行單元測(cè)試,存在官方版本,版本雖然陳舊,但是功能實(shí)現(xiàn)沒(méi)有問(wèn)題。單元測(cè)試中配置文件與實(shí)際存在差異,所以單元測(cè)試保證模塊的可靠性,具體生產(chǎn)環(huán)境下注意模塊可正常加載就好。。為單元測(cè)試而安裝的模塊。
如有排版效果混亂,請(qǐng)移步https://www.zybuluo.com/bornkiller/note/24759。
前言karma配合requirejs進(jìn)行單元測(cè)試,存在官方版本http://karma-runner.github.io/0.8/plus/RequireJS.html,版本雖然陳舊,但是功能實(shí)現(xiàn)沒(méi)有問(wèn)題。
單元測(cè)試中配置文件test-main.js與實(shí)際main.js存在差異,所以單元測(cè)試保證模塊的可靠性,具體生產(chǎn)環(huán)境下注意模塊可正常加載就好。。
下面代碼僅為局部需特別注意代碼,其它字段省略。
package.json{ "dependencies": { }, "devDependencies": { "karma": "^0.12.19", "karma-chrome-launcher": "^0.1.4", "karma-cli": "^0.0.4", "karma-jasmine": "^0.1.5", "karma-requirejs": "^0.2.2", "requirejs": "^2.1.14" }, }
為單元測(cè)試而安裝的node模塊。
karma.config推薦在實(shí)際使用時(shí),用NPM在項(xiàng)目中再安裝一次,更容易理解一些。
// Karma configuration // Generated on Tue Jul 29 2014 10:24:37 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: "", // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ["jasmine", "requirejs"], // list of files / patterns to load in the browser files: [ {pattern: "lib/**/*.js", included: false}, {pattern: "service/**/*.js", included: false}, {pattern: "test/**/*spec.js", included: false}, "test-main.js" ], }); };
basePath使用默認(rèn)值即可。
framework如上填寫(xiě)后,頁(yè)面會(huì)自動(dòng)引入斷言庫(kù)和加載庫(kù),不在需要手動(dòng)引入。
需要注意的是files字段,included設(shè)置為false,表示不會(huì)直接通過(guò)標(biāo)簽直接顯式引入腳本,如果直接引入,會(huì)導(dǎo)致define無(wú)定義,導(dǎo)致報(bào)錯(cuò)。served字段默認(rèn)為true,表示會(huì)提供對(duì)應(yīng)靜態(tài)文件,可以異步加載。
test-main.jskarma init命令執(zhí)行時(shí),是否生成requirejs 模板文件,務(wù)必需要點(diǎn)是,生成模板如下:
第一部分——測(cè)試文件模塊化
var allTestFiles = []; var TEST_REGEXP = /(spec|test).js$/i; var pathToModule = function(path) { return path.replace(/^/base//, "").replace(/.js$/, ""); }; Object.keys(window.__karma__.files).forEach(function(file) { if (TEST_REGEXP.test(file)) { // Normalize paths to RequireJS module names. allTestFiles.push(pathToModule(file)); } });
功能其實(shí)很簡(jiǎn)單,將spec.js或者test.js結(jié)尾的文件去掉后綴,實(shí)際上為模塊化測(cè)試文件,后續(xù)使用requirejs加載。
第二部分——requirejs配置
require.config({ // Karma serves files under /base, which is the basePath from your config file baseUrl: "/base", paths : { "jquery" : "service/jquery", "movie" : "service/movie" }, // dynamically load all test files deps: allTestFiles, shim : { "jquery" : { deps : [], exports : "jQuery" } }, // we have to kickoff jasmine, as it is asynchronous callback: window.__karma__.start });
需要注意的是,baseUrl必須/base開(kāi)頭,表示karma webserver根目錄。注意deps字段,此處為測(cè)試文件異步加載,由于測(cè)試文件跟模塊文件在兩個(gè)文件夾下,所以,建議通過(guò)path配置模塊,避免文件組織結(jié)構(gòu)混亂。
service.spec.jsdefine(["jquery","movie"], function($,movie) { describe("just checking", function() { it("works for app", function() { expect($).toBeDefined(); }); it("works for moive type", function () { expect(movie.type).toEqual("comedy") }); it("works for movie name", function () { expect(movie.name).toEqual("500 days with summer"); }); }); });
包裝上,跟常規(guī)測(cè)試文件有差異,模塊必須由define引入內(nèi)部, 與describe it沒(méi)有明顯的位置排列要求。
問(wèn)題交流總的來(lái)說(shuō),感覺(jué)挺啰嗦的,從karma配置文件,requirejs配置文件,測(cè)試文件都需要進(jìn)行特殊處理??赡荜愂錾嫌袉?wèn)題,如有疑問(wèn)
QQ: 491229492
Email: 491229492@qq.com,注明交流即可。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/85248.html
摘要:的另一種形式測(cè)試踩坑之路代碼覆蓋率單元測(cè)試的代碼覆蓋率統(tǒng)計(jì),是衡量測(cè)試用例好壞的一個(gè)的方法。 showImg(https://segmentfault.com/img/remote/1460000012564211?w=640&h=280); 項(xiàng)目地址: diana文檔地址: http://muyunyun.cn/diana/ 造輪子的意義 為啥已經(jīng)有如此多的前端工具類(lèi)庫(kù)還要自己造輪...
摘要:我寫(xiě)過(guò)一些開(kāi)源項(xiàng)目,在開(kāi)源方面有一些經(jīng)驗(yàn),最近開(kāi)到了阮老師的微博,深有感觸,現(xiàn)在一個(gè)開(kāi)源項(xiàng)目涉及的東西確實(shí)挺多的,特別是對(duì)于新手來(lái)說(shuō)非常不友好最近我寫(xiě)了一個(gè),旨在從多方面快速幫大家搭建一個(gè)標(biāo)準(zhǔn)的庫(kù),本文將已為例,介紹寫(xiě)一個(gè)開(kāi)源庫(kù)的知識(shí) 我寫(xiě)過(guò)一些開(kāi)源項(xiàng)目,在開(kāi)源方面有一些經(jīng)驗(yàn),最近開(kāi)到了阮老師的微博,深有感觸,現(xiàn)在一個(gè)開(kāi)源項(xiàng)目涉及的東西確實(shí)挺多的,特別是對(duì)于新手來(lái)說(shuō)非常不友好 show...
摘要:模塊化編程,已經(jīng)成為一個(gè)迫切的需求。隨著網(wǎng)站功能逐漸豐富,網(wǎng)頁(yè)中的也變得越來(lái)越復(fù)雜和臃腫,原有通過(guò)標(biāo)簽來(lái)導(dǎo)入一個(gè)個(gè)的文件這種方式已經(jīng)不能滿(mǎn)足現(xiàn)在互聯(lián)網(wǎng)開(kāi)發(fā)模式,我們需要團(tuán)隊(duì)協(xié)作模塊復(fù)用單元測(cè)試等等一系列復(fù)雜的需求。 隨著網(wǎng)站逐漸變成互聯(lián)網(wǎng)應(yīng)用程序,嵌入網(wǎng)頁(yè)的Javascript代碼越來(lái)越龐大,越來(lái)越復(fù)雜。網(wǎng)頁(yè)越來(lái)越像桌面程序,需要一個(gè)團(tuán)隊(duì)分工協(xié)作、進(jìn)度管理、單元測(cè)試等等......開(kāi)發(fā)...
摘要:前端工程化的演化。前端較為流行的單元測(cè)試,等自動(dòng)化測(cè)試自動(dòng)化測(cè)試是軟件通過(guò)模擬瀏覽器,對(duì)頁(yè)面進(jìn)行操作,判斷是否產(chǎn)生預(yù)想的效果。 前端工程化 ??前端工程化的概念在近些年來(lái)逐漸成為主流構(gòu)建大型web應(yīng)用不可或缺的一部分,在此我通過(guò)以下這三方面總結(jié)一下自己的理解。 為什么需要前端工程化。 前端工程化的演化。 怎么實(shí)現(xiàn)前端工程化。 為什么需要工程化 ??隨著近些年來(lái)前端技術(shù)的不斷發(fā)展,越...
摘要:模塊中定義的全局變量只作用于該文件內(nèi)部,不污染其他模塊。由純編寫(xiě)的部分稱(chēng)為內(nèi)建模塊,例等模塊部分使用編寫(xiě)。兼容多種模塊規(guī)范檢測(cè)是否為或者檢測(cè)是否為或環(huán)境定義為普通模塊將模塊執(zhí)行結(jié)果掛載在對(duì)象下 1.為什么要CommonJS規(guī)范 javascript存在的缺點(diǎn) 沒(méi)有模塊系統(tǒng) 標(biāo)準(zhǔn)庫(kù)比較少 沒(méi)有標(biāo)準(zhǔn)接口 缺乏包管理系統(tǒng) CommonJS規(guī)范的提出,彌補(bǔ)了javascript沒(méi)有標(biāo)準(zhǔn)的缺...
閱讀 2247·2021-09-23 11:52
閱讀 1913·2021-09-02 15:41
閱讀 3032·2019-08-30 10:47
閱讀 1996·2019-08-29 17:14
閱讀 2354·2019-08-29 16:16
閱讀 3199·2019-08-28 18:29
閱讀 3433·2019-08-26 13:30
閱讀 2619·2019-08-26 10:49