對Angular.js Controller如何進行單元測試-js教程-PHP中文網

首頁

web前端

js教程

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

高洛峰

Dec 09, 2016 am 09:33 AM

angular.js

一、寫個簡單的Angular App

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

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

程式碼如下：

<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 &#39;calculatorApp&#39;
 angular.module(&#39;calculatorApp&#39;, []);
 
 // Registers a controller to our module &#39;calculatorApp&#39;.
 angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, 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, [&#39;calculatorApp&#39;]);
 });
 
 </script>
</html>

登入後複製

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

module
它是用於創建，回收模組的地方。我們建立一個名為calculatorApp新的模組，我們並將元件加入這個模組。

angular.module(&#39;calculatorApp&#39;, []);

登入後複製

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

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

* angular.module.createInstance(name, requires);
* angular.module.getInstance(name)

登入後複製

然而實際我們是這樣寫的:

* angular.module(&#39;calculatorApp&#39;, []); // i.e. createInstance
* angular.module('calculatorApp'); // i.e. getInstance

登入後複製

.org/api/ng/function/angular.module

2.給module添加controller

接著我們給angular module的示例添加一個controller

angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, 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-clicksum方法。

三、新增測試

接下來終於到了我們的主題，加入一些單元測試給controller,我們忽略程式碼中html部分，主要集中在controller的程式碼中。

angular.module(&#39;calculatorApp&#39;).controller(&#39;CalculatorController&#39;, function CalculatorController($scope) {
 $scope.z = 0;
 $scope.sum = function() {
 $scope.z = $scope.x + $scope.y;
 };
});

登入後複製

為了測試 controller，我們還得提及下面幾點？ + 如何建立controller實例+ 如何get/set一個物件的屬性+ 如何呼叫$scope裡面的函數

describe(&#39;calculator&#39;, function () {
 
 beforeEach(angular.mock.module(&#39;calculatorApp&#39;));
 
 var $controller;
 
 beforeEach(angular.mock.inject(function(_$controller_){
 $controller = _$controller_;
 }));
 
 describe(&#39;sum&#39;, function () {
 it(&#39;1 + 1 should equal 2&#39;, function () {
  var $scope = {};
  var controller = $controller(&#39;CalculatorController&#39;, { $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(&#39;calculatorApp&#39;));

登入後複製

一旦calculatorApp初始化後，我們可以使用inject函數，這樣可以解決controller的引用問題。

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

登入後複製

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

var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });

登入後複製

五、如何get/set一個物件的屬性

在上篇程式碼中我們已經可以取得一個controller的實例，在括號的第二個參數實際上是controller只有自己，我們的controller只有自己一個參數 $scope物件

function CalculatorController($scope) { ... }

登入後複製

在我們的測試中$scope代表的就是一個簡單的JavaScript物件。

var $scope = {};
var controller = $controller(&#39;CalculatorController&#39;, { $scope: $scope });
// set some properties on the scope object
$scope.x = 1;
$scope.y = 2;

登入後複製

我們設定x,y的值，模擬剛才的gif中的所顯示的一樣。我們同意也可以讀取物件中的屬性，就像下面這段測驗的斷言：