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