摘要:前面我們寫過了的一篇文章開始對進行單元測試而提供了非常有用的工具去幫助我們進行的測試。接下來,會增加一些內容寫測試用例接下來我們可以開始進行測試了,我們在命令行工具里輸入下面的命令我們將下面的代碼粘貼到中去。
緊隨前文如何對Angular Controller進行單元測試,
但是我們也提到了前文工作流程的不方便,簡單總結上前文進行測試的一個流程:
修改測試代碼;
刷新瀏覽器;
查看測試結果;
該方法最大的缺陷就是,我們每次都得手動的去刷新我們的瀏覽器。但是如果我們需要測試不同的瀏覽器我們又應該如何處理呢?
而本文將提出一個自動化測試的方案,從而解決這些問題。
Karma是一個由AngularJS 團隊創造的JavaScript測試工具。前面我們寫過了Jasmine的一篇文章《開始對Angular App進行單元測試》
而Karma提供了非常有用的工具去幫助我們進行Jasmine的測試。
你在這里可以看到更為詳細的安裝
文章,而本文隨后也會概括總結一些。首先你得安裝node.js,如果安裝了則跳過,沒有安裝的可以看這里
注意官方文檔中有說明,Karma在某些版本的node工作不那么友好。然而作者本身的v0.12.x并沒遇見什么問題。打開你的命令行軟件,我們輸入下面命令,
mkdir CalculatorKarma cd CalculatorKarma echo {} >> package.json bash
接下來我么用npm安裝karma
npm install karma --save-dev
如果安裝成功, package.json中將會有下面內容:
{ "devDependencies": { "karma": "^0.12.31" } }
接著我們最好安裝下karma-cli,這樣可以全局使用karma命令。
npm install -g karma-cli
下一步我們需要安裝一些karma的插件,這樣可以Jasmine測試框架能夠工作,并且設置Google Chrome 作為我們的測試瀏覽器。
npm install karma-jasmine karma-chrome-launcher --save-dev
接下來,package.json會增加一些內容:
{ "devDependencies": { "jasmine-core": "^2.3.4", "karma": "^0.12.31", "karma-chrome-launcher": "^0.1.12", "karma-jasmine": "^0.3.5" } }寫測試用例
接下來我們可以開始進行測試了,我們在命令行工具里輸入下面的命令:
mkdir tests touch tests/calculator.controller.test.js
我們將下面的代碼粘貼到calculator.controller.test.js中去。
describe("calculator", function () { beforeEach(module("calculatorApp")); var $controller; beforeEach(inject(function(_$controller_){ $controller = _$controller_; })); describe("sum", function () { it("1 + 1 should equal 2", function () { var $scope = {}; var controller = $controller("CalculatorController", { $scope: $scope }); $scope.x = 1; $scope.y = 2; $scope.sum(); expect($scope.z).toBe(3); }); }); });讓測試跑起來
在進行測試之前,我們創建一個配置文件用于進行karma的一些設置。關于配置的內容您可以閱讀 官方文檔。
接下來我們開始創建這個配置文件我們需要輸入下面的內容:
karma init karma.conf.js
然后回答命令行的問題就行了
Which testing framework do you want to use?(你所使用的測試框架?)
接受一個默認的值,比如:jasmine
Do you want to use Require.js ?(你希望使用 Require.js嗎?)
接受一個默認的值,比如:no
Do you want to capture any browsers automatically ?(你想自動捕獲瀏覽器嗎?)
接受一個默認的值 比如:chrome
What is the location of your source and test files ?(你測試文件的地址)
輸入下面的地址:
tests/*.test.js
當然你并不需要擔心你跳過那些詢問,稍后我們都可以手動修改配置文件。
Should any of the files included by the previous patterns be excluded ?(是否有需要排除的符合前面格式的問文件)
Do you want Karma to watch all the files and run the tests on change ?(是否動態監聽文件變化)
接受一個默認的值,比如:yes
接下來我們可以在根目錄看到配置文件karma.conf.js創建成功。
我們輸入下面的命令開始測試
karma start karma.conf.js
測試后的輸出就像下面這樣:
> @ test /Users/devuser/repos/CalculatorKarma > ./node_modules/karma/bin/karma start karma.conf.js INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [Chrome 42.0.2311 (Mac OS X 10.10.3)]: Connected on socket 2absOkNfa1asasaX0fCJ with id 71338229 Chrome 42.0.2311 (Mac OS X 10.10.3) calculator encountered a declaration exception FAILED ReferenceError: module is not defined at Suite.(/Users/devuser/repos/CalculatorKarma/tests/calculator.controller.test.js:3:13) at /Users/devuser/repos/CalculatorKarma/tests/calculator.controller.test.js:1:1 Chrome 42.0.2311 (Mac OS X 10.10.3): Executed 1 of 1 (1 FAILED) ERROR (0.01 secs / 0.005 secs)
按住ctrl/command+c就可以停止這個進程。
小提示: 我們可以在package.json中的scripts里加入測試的命令,方便實用
{ "scripts": { "test": "karma start karma.conf.js" }, "devDependencies": { "jasmine-core": "^2.3.4", "karma": "^0.12.31", "karma-chrome-launcher": "^0.1.12", "karma-jasmine": "^0.3.5" } }
加入這段代碼后,我們可以輸入npm test進行karma的測試了。如果我們要驗證package.json是否修改正確。
通過測試并添加新功能接下來我們添加一些controller的邏輯進去.
mkdir app touch app/calculator.controller.js
然后我們需要下載angular的類庫文件和angular mock的文件。
mkdir lib curl -o lib/angular.min.js https://code.angularjs.org/1.4.0-rc.2/angular.min.js curl -o lib/angular-mocks.js https://code.angularjs.org/1.4.0-rc.2/angular-mocks.js
我們需要將新增的目錄加入到配置中去,打開 karma.conf.js 然后添加成下面內容:
// list of files / patterns to load in the browser files: [ "lib/angular.min.js", "lib/angular-mocks.js", "app/*.js", "tests/*.js" ],
再次在命令行中輸入命令:
npm test
運行結果依舊是失敗的,因為我們并沒有添加我們的controller,接下來我們將下面的代碼粘貼到 app/calculator.controller.js。
angular.module("calculatorApp", []).controller("CalculatorController", function CalculatorController($scope) { $scope.sum = function() { $scope.z = $scope.x + $scope.y; }; });
在命令行工具里面我們可以看到karma檢測到了文件變化,重新進行測試,這個時候測試就會通過了。
接下來我們添加一個新的測試用例,我們將它增加到calculator.controller.test.js中去,把它放到describe作用域內。
it("z should have default value of zero", function () { var $scope = {}; var controller = $controller("CalculatorController", { $scope: $scope }); expect($scope.z).toBe(0); });
命令行這個時候會輸出測試不通過,這個時候我們需要更新我們的controller代碼
angular.module("calculatorApp", []).controller("CalculatorController", function CalculatorController($scope) { $scope.z = 0; $scope.sum = function() { $scope.z = $scope.x + $scope.y; }; });
測試通過的輸出如下:
更多原文作者寫過一篇文章更為詳細的介紹Karam,大家可以去深入的了解karma的使用。
karma支持不同的瀏覽器,我們可以在測試的時候設置這些瀏覽器:
chrome
safari
firefox
IE
除此之外,karma還有很多可供使用的插件,你可以在這里搜索到他們:https://www.npmjs.com/package/karma-ie-launcher
項目代碼
原文地址: http://www.bradoncode.com/blog/2015/05/19/karma-angularjs-testing/
@ Bradley Braithwaite
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79629.html
摘要:單元測試我們可以將其分成兩類獨立單獨測試與測試工具集。工具集還有更多,這一切我們將在單元測試組件與指令單元測試逐一說明。那么下一篇,我們將介紹如何使用進行單元測試。 本文將探討如何搭建測試環境、以及Angular測試工具集。 測試環境 絕大部分都是利用Angular Cli來創建項目,因此,默認已經集成我們所需要的npm包與腳本;當然,如果你是使用自建或官網 quickstart 的話...
摘要:簡介模塊為單元測試提供模塊定義加載注入等支持。為使用了的應用提供單元測試的偽后臺。根據提示進行設置即可。將該文件保存為,測試時需按順序將測試項目文件及依賴文件引入。最后在請求后執行就會立即執行完成請求。參考官方單元測試學習筆記 Angular-mock簡介 Angular-mock模塊為angular單元測試提供模塊定義、加載、注入等支持。輔助Karma、Jasmine等JS測試工具來...
摘要:首先,我們需要在入口頁面的中配置根路徑然后創建一個路由模塊路由配置在主模塊中導入配置好的路由模塊而在頁面中需要一個容器去承載上面代碼中的定義了用戶點擊后的路由跳轉,定義該路由激活時的樣式類。 剛實習的時候用過AngularJS,那時候真的是連原生JavaScript都不會寫,依樣畫葫蘆做了幾個管理后臺。然后突然換項目了,AngularJS就不寫了,感覺前前后后接觸了一年多的Angula...
摘要:包括腳手架依賴管理準備測試包括單元測試和端到端測試。我們用來開發的工具有。是一個工具集,包含個核心組件,,和腳手架工具。當你正在做自己的一個項目時,使用哪些模塊將取決于你自己。這個目錄當然是測試文件。 介紹 有很多可用的工具可以幫助你開發AngularJS 應用,那些非常復雜的框架不在我的討論范圍之中,這也是我開始這系列教程的原因。 在第一部分,我們掌握了AngularJS框架的基本...
摘要:可發布這一部分會在下一章管理對子項目引用中詳細說明。總結本文總結了多項目共享子項目工程化方面的一些實踐,并不涉及到復雜的代碼,主要涉及到的概念,使用進行包管理,使用作為自動化工具等工程化的知識。 背景 公司的產品線涵蓋多個產品,這些產品中會有一些相同的功能,如登錄,認證等,為了保持這些功能在各個產品中的一致性,我們在各個產品中維護一份相同的代碼。這帶來了很大的不便:當出現新的需求時,不...
閱讀 3049·2021-11-18 10:02
閱讀 3315·2021-11-02 14:48
閱讀 3384·2019-08-30 13:52
閱讀 527·2019-08-29 17:10
閱讀 2070·2019-08-29 12:53
閱讀 1392·2019-08-29 12:53
閱讀 1018·2019-08-29 12:25
閱讀 2155·2019-08-29 12:17