對(duì)Angular.js Controller如何進(jìn)行單元測(cè)試
一、寫(xiě)個(gè)簡(jiǎn)單的Angular App
在開(kāi)始寫(xiě)測(cè)試之前,我們先寫(xiě)一個(gè)簡(jiǎn)單的計(jì)算App,它會(huì)計(jì)算兩個(gè)數(shù)字之和。
代碼如下:
<html> <head> <script type="text/javascript" src="https://code.angularjs.org/1.4.0-rc.2/angular.min.js"></script> </head> <body> <!-- This div element corresponds to the CalculatorController we created via the JavaScript--> <div ng-controller="CalculatorController"> <input ng-model="x" type="number"> <input ng-model="y" type="number"> <strong>{{z}}</strong> <!-- the value for ngClick maps to the sum function within the controller body --> <input type="button" ng-click="sum()" value="+"> </div> </body> <script type="text/javascript"> // Creates a new module called 'calculatorApp' angular.module('calculatorApp', []); // Registers a controller to our module 'calculatorApp'. angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) { $scope.z = 0; $scope.sum = function() { $scope.z = $scope.x + $scope.y; }; }); // load the app angular.element(document).ready(function() { angular.bootstrap(document, ['calculatorApp']); }); </script> </html>
二、簡(jiǎn)單說(shuō)說(shuō)里面涉及的一些基本概念:
創(chuàng)建一個(gè) module
什么是angular.module?它是用于創(chuàng)建,回收模塊的地方 。我們創(chuàng)建一個(gè)名為calculatorApp新的模塊,我們并將組件添加到這個(gè)模塊里。
angular.module('calculatorApp', []);
關(guān)于第二個(gè)參數(shù)?第二個(gè)參數(shù)必須的,表明我們正在創(chuàng)造一個(gè)新的模塊。如果需要我們的應(yīng)用程序有其他的依賴(lài),我們可以將它們['ngResource','ngCookies']
傳入進(jìn)去。 第二個(gè)參數(shù)的存在的表示這是一個(gè)請(qǐng)求返回的模塊的實(shí)例。
從概念上講,它本意是類(lèi)似下面的意思:
* angular.module.createInstance(name, requires); * angular.module.getInstance(name)
然而實(shí)際我們是這樣寫(xiě)的:
* angular.module('calculatorApp', []); // i.e. createInstance * angular.module('calculatorApp'); // i.e. getInstance
關(guān)于module的更多信息 https://docs.angularjs.org/api/ng/function/angular.module
2.給module添加controller
接著我們給angular module的示例添加一個(gè)controller
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) { $scope.z = 0; $scope.sum = function() { $scope.z = $scope.x + $scope.y; }; });
控制器主要負(fù)責(zé)業(yè)務(wù)邏輯和視圖綁定,$scope
者是視圖的控制器直線的信使。
3.連接視圖中的元素
在下面 HTML 中,我們需要計(jì)算input里面的值,而這些都包含在這個(gè)controller的div中。
<div ng-controller="CalculatorController"> <input ng-model="x" type="number"> <input ng-model="y" type="number"> <strong>{{z}}</strong> <!-- the value for ngClick maps to the sum function within the controller body --> <input type="button" ng-click="sum()" value="+"> </div>
input 中的ng-model
綁定的的值及時(shí)$scope
上定義的比如$scope.x
,我們還在button元素使用ng-click
綁定了$scope.sum
方法。
三、添加測(cè)試
接下來(lái)終于到了我們的主題,添加一些單元測(cè)試給controller,我們忽略代碼中html部分,主要集中在controller的代碼中。
angular.module('calculatorApp').controller('CalculatorController', function CalculatorController($scope) { $scope.z = 0; $scope.sum = function() { $scope.z = $scope.x + $scope.y; }; });
為了測(cè)試 controller,我們還得提及下面幾點(diǎn)? + 如何創(chuàng)建一個(gè)controller實(shí)例 + 如何get/set一個(gè)對(duì)象的屬性 + 如何調(diào)用$scope
里面的函數(shù)
describe('calculator', function () { beforeEach(angular.mock.module('calculatorApp')); var $controller; beforeEach(angular.mock.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); }); }); });
開(kāi)始前我們需要引入ngMock,我們?cè)跍y(cè)試的代碼加入angular.mock
,ngMock模塊提供了一種機(jī)制進(jìn)行諸如以及虛擬的service進(jìn)行單元測(cè)試。
四、如何獲取controller的實(shí)例
使用ngMock我們可以注冊(cè)一個(gè)calculator app實(shí)例。
beforeEach(angular.mock.module('calculatorApp'));
一旦calculatorApp初始化后,我們可以使用inject
函數(shù),這樣可以解決controller的引用問(wèn)題。
beforeEach(angular.mock.inject(function(_$controller_) { $controller = _$controller_; }));
一旦app加載完了,我們使用了inject
函數(shù),$controller service
可以獲取 CalculatorController
的實(shí)例。
var controller = $controller('CalculatorController', { $scope: $scope });
五、如何get/set一個(gè)對(duì)象的屬性
在上篇代碼中我們已經(jīng)可以獲取一個(gè)controller的實(shí)例,在括號(hào)的第二個(gè)參數(shù)實(shí)際是controller自己,我們的controller只有一個(gè)參數(shù) $scope
對(duì)象
function CalculatorController($scope) { ... }
在我們的測(cè)試中$scope
代表的就是一個(gè)簡(jiǎn)單的JavaScript對(duì)象。
var $scope = {}; var controller = $controller('CalculatorController', { $scope: $scope }); // set some properties on the scope object $scope.x = 1; $scope.y = 2;
我們?cè)O(shè)置x,y的值,模擬剛才的gif中的所展示的一樣。我們同意也可以讀取對(duì)象中的屬性,就像下面這段測(cè)試的斷言:
expect($scope.z).toBe(3);
六、如何調(diào)用$scope里面的函數(shù)
最后一件事情就是我們?nèi)绾文M用戶(hù)的點(diǎn)擊,就像我們?cè)诮^大多數(shù)JS中使用的一致,,其實(shí)就是簡(jiǎn)單的調(diào)用函數(shù)就行,
$scope.sum();
總結(jié)
本篇文章簡(jiǎn)單的基本的介紹了如何對(duì)angular controller進(jìn)行單元測(cè)試,但是這是建立在不停的刷新瀏覽器基礎(chǔ)上, 而這些流暢可以再好,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
- angularjs中的單元測(cè)試實(shí)例
- 使用Angular CLI進(jìn)行單元測(cè)試和E2E測(cè)試的方法
- AngularJs unit-testing(單元測(cè)試)詳解
- 利用Jasmine對(duì)Angular進(jìn)行單元測(cè)試的方法詳解
- AngularJS 單元測(cè)試(一)詳解
- 在JavaScript的AngularJS庫(kù)中進(jìn)行單元測(cè)試的方法
- AngularJS 單元測(cè)試(二)詳解
- Angular單元測(cè)試之事件觸發(fā)的實(shí)現(xiàn)
- 淺談Angular單元測(cè)試總結(jié)
- Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例
相關(guān)文章
關(guān)于angularJs指令的Scope(作用域)介紹
下面小編就為大家?guī)?lái)一篇angularJs指令的Scope(作用域)介紹。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Angular中$broadcast和$emit的使用方法詳解
本篇文章主要介紹了Angular中$broadcast和$emit的使用方法詳解,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05利用Angularjs和原生JS分別實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動(dòng)態(tài)的效果,這樣對(duì)于用戶(hù)體檢來(lái)說(shuō)非常好,這篇文章分別用Angularjs和原生JS兩種方法來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框,具有一定的參考價(jià)值,有需要的小伙伴們可以來(lái)參考借鑒。2016-09-09Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation功能
這篇文章主要介紹了Angular?結(jié)合?dygraphs?實(shí)現(xiàn)?annotation,本文,我們直接結(jié)合 Angular 來(lái)演示,如何通過(guò) dygraphs 實(shí)現(xiàn)折線圖上的 annotation 的功能,需要的朋友可以參考下2022-08-08Angular.js回顧ng-app和ng-model使用技巧
這篇文章主要回顧Angular.js中ng-app和ng-model使用技巧,感興趣的小伙伴們可以參考一下2016-04-04Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能
這篇文章主要為大家詳細(xì)介紹了Angular實(shí)現(xiàn)搜索框及價(jià)格上下限功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景
這篇文章主要介紹了詳解Angular之constructor和ngOnInit差異及適用場(chǎng)景的相關(guān)資料,有興趣的可以了解一下2017-06-06