這篇文章主要給大家介紹了如何對(duì)Angular Controller進(jìn)行單頁(yè)測(cè)試。如果你不太了解angular也沒(méi)關(guān)系，本文也會(huì)提及關(guān)于Angular的一些知識(shí)。文中通過(guò)示例代碼介紹的很詳細(xì)，詳細(xì)對(duì)大家的理解和學(xué)習(xí)很有幫助，下面來(lái)一起看看吧。

一、寫(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)用程序有其他的依賴，我們可以將它們['ngResource'，'ngCookies']傳入進(jìn)去。第二個(gè)參數(shù)的存在的表示這是一個(gè)請(qǐng)求返回的模塊的實(shí)例。

從概念上講，它本意是類似下面的意思:

* 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用戶的點(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)大家可以留言交流。

您可能感興趣的文章: