Angular.js コントローラーの単体テストを行う方法-jsチュートリアル-php.cn

Angular.js コントローラーの単体テストを行う方法

高洛峰

リリース： 2016-12-09 09:33:40

オリジナル

1218 人が閲覧しました

1. 簡単な Angular アプリを作成します

テストを書き始める前に、まず 2 つの数値の合計を計算する簡単な計算アプリを作成します。

Angular.js コントローラーの単体テストを行う方法

コードは次のとおりです:

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

ログイン後にコピー

次に、関連するいくつかの基本概念について簡単に説明します:

モジュールを作成する

angular.moduleとは何ですか?モジュールを作成およびリサイクルするための場所です。 calculatorApp という新しいモジュールを作成し、このモジュールにコンポーネントを追加します。

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

ログイン後にコピー

2番目のパラメータについて? 2 番目のパラメータは必須であり、新しいモジュールを作成していることを示します。アプリケーションに他の依存関係が必要な場合は、['ngResource', 'ngCookies'] を渡すことができます。 2 番目のパラメーターの存在は、これがリクエストによって返されたモジュールのインスタンスであることを示します。

概念的には、次のようなことを意味します:

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

ログイン後にコピー

ただし、実際には次のように書きます:

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

ログイン後にコピー

モジュールの詳細 https://docs.angularjs .org /api/ng/function/angular.module

2. モジュールにコントローラーを追加します

次に、Angular モジュールの例にコントローラーを追加します

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

ログイン後にコピー

コントローラーは主にビジネスロジックとビューを担当しますbinding の場合、 $scope はビューのコントローラーへの直接のメッセンジャーです。

3. ビュー内の要素を接続します

以下の HTML では、入力の値を計算する必要があり、これらはこのコントローラーの 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>

ログイン後にコピー

入力 ng-model にバインドされた値は、$scope.x などの $scope で定義された値と同じです。また、ng-click を使用して $scope.sum メソッドをボタン要素にバインドしました。

3. テストを追加します

次に、いよいよ本題に入ります。コードの HTML 部分は無視し、主にコントローラーコードに焦点を当てます。

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

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 を追加する必要があります

。、テストコードへの ngMock モジュールは、仮想サービスの単体テストのメカニズムを提供します。

4. コントローラーインスタンスの取得方法

ngMockを使用して、電卓アプリのインスタンスを登録できます。

beforeEach(angular.mock.module(&#39;calculatorApp&#39;));

ログイン後にコピー

calculatorApp が初期化されると、inject 関数を使用できるようになり、コントローラー参照の問題を解決できます。

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

ログイン後にコピー

アプリがロードされたら、inject 関数を使用し、$controller サービスは CalculatorController のインスタンスを取得できます。

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

ログイン後にコピー

5. オブジェクトの属性を取得/設定する方法

前のコードでは、すでにコントローラーのインスタンスを取得できています。実際には、括弧内の 2 番目のパラメーターはコントローラー自体です。コントローラーにはパラメーターのみがあります $scope object

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;

ログイン後にコピー

先ほどの gif に示したものと同じになるように x と y の値を設定します。次のテストのアサーションと同じように、オブジェクト内のプロパティを読み取ることもできることに同意します。