ホームページ > 記事 > ウェブフロントエンド > Angular.js コントローラーの単体テストを行う方法
Angular.js コントローラーの単体テストを行う方法
- 高洛峰オリジナル
- 2016-12-09 09:33:401167ブラウズ
1. 簡単な Angular アプリを作成します
テストを書き始める前に、まず 2 つの数値の合計を計算する簡単な計算アプリを作成します。
コードは次のとおりです:
<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>
次に、関連するいくつかの基本概念について簡単に説明します:
モジュールを作成する
angular.moduleとは何ですか?モジュールを作成およびリサイクルするための場所です。 calculatorApp という新しいモジュールを作成し、このモジュールにコンポーネントを追加します。
angular.module('calculatorApp', []);
2番目のパラメータについて? 2 番目のパラメータは必須であり、新しいモジュールを作成していることを示します。アプリケーションに他の依存関係が必要な場合は、['ngResource', 'ngCookies'] を渡すことができます。 2 番目のパラメーターの存在は、これがリクエストによって返されたモジュールのインスタンスであることを示します。
概念的には、次のようなことを意味します:
* angular.module.createInstance(name, requires); * angular.module.getInstance(name)
ただし、実際には次のように書きます:
* angular.module('calculatorApp', []); // i.e. createInstance
* angular.module('calculatorApp'); // i.e. getInstance
モジュールの詳細 https://docs.angularjs .org /api/ng/function/angular.module
2. モジュールにコントローラーを追加します
次に、Angular モジュールの例にコントローラーを追加します
angular.module('calculatorApp').controller('CalculatorController', 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('calculatorApp').controller('CalculatorController', function CalculatorController($scope) {
$scope.z = 0;
$scope.sum = function() {
$scope.z = $scope.x + $scope.y;
};
});
コントローラーをテストするには、次の点に言及する必要がありますか? + コントローラーインスタンスの作成方法 + オブジェクトのプロパティを取得/設定する方法 + $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 を追加する必要があります
。 、テスト コードへの ngMock モジュールは、仮想サービスの単体テストのメカニズムを提供します。
4. コントローラーインスタンスの取得方法
ngMockを使用して、電卓アプリのインスタンスを登録できます。
beforeEach(angular.mock.module('calculatorApp'));
calculatorApp が初期化されると、inject 関数を使用できるようになり、コントローラー参照の問題を解決できます。
beforeEach(angular.mock.inject(function(_$controller_) {
$controller = _$controller_;
}));
アプリがロードされたら、inject 関数を使用し、$controller サービスは CalculatorController のインスタンスを取得できます。
var controller = $controller('CalculatorController', { $scope: $scope });
5. オブジェクトの属性を取得/設定する方法
前のコードでは、すでにコントローラーのインスタンスを取得できています。実際には、括弧内の 2 番目のパラメーターはコントローラー自体です。コントローラーにはパラメーターのみがあります $scope object
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;
先ほどの gif に示したものと同じになるように x と y の値を設定します。次のテストのアサーションと同じように、オブジェクト内のプロパティを読み取ることもできることに同意します。
expect($scope.z).toBe(3);
6. $scope で関数を呼び出す方法
最後に、ユーザーのクリックは、ほとんどの JS で使用するものと同じように、実際には関数への単純な呼び出しです。