對Angular.js Controller如何進行單元測試

2019-11-20 08:40:03

字體：大中小

來源：轉載

供稿：網友

一、寫個簡單的Angular App

在開始寫測試之前，我們先寫一個簡單的計算App,它會計算兩個數字之和。

代碼如下：

<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>

二、簡單說說里面涉及的一些基本概念:

創建一個 module

什么是angular.module？它是用于創建，回收模塊的地方。我們創建一個名為calculatorApp新的模塊，我們并將組件添加到這個模塊里。

angular.module('calculatorApp', []);

關于第二個參數？第二個參數必須的，表明我們正在創造一個新的模塊。如果需要我們的應用程序有其他的依賴，我們可以將它們['ngResource'，'ngCookies']傳入進去。第二個參數的存在的表示這是一個請求返回的模塊的實例。

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

* 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; };});

控制器主要負責業務邏輯和視圖綁定，$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，我們還得提及下面幾點？ + 如何創建一個controller實例 + 如何get/set一個對象的屬性 + 如何調用$scope里面的函數

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函數，這樣可以解決controller的引用問題。

beforeEach(angular.mock.inject(function(_$controller_) {  $controller = _$controller_;}));

一旦app加載完了，我們使用了inject函數，$controller service可以獲取 CalculatorController 的實例。

var controller = $controller('CalculatorController', { $scope: $scope });

五、如何get/set一個對象的屬性

在上篇代碼中我們已經可以獲取一個controller的實例，在括號的第二個參數實際是controller自己，我們的controller只有一個參數 $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中的所展示的一樣。我們同意也可以讀取對象中的屬性，就像下面這段測試的斷言：