13

私は Jasmine/AngularJS ユニット テストの初心者です。Angular アプリの単体テストを作成する方法を学習できるように、2 つの数値を追加する単純な角度アプリを作成しました。単体テストに関するAngular Doc は不完全です。ブログとスタック オーバーフローの回答に基づいて、最初のテストを作成すると、「インジェクター」の未定義エラーが発生します。単体テストには Jasmine フレームワークを使用しています。
HTML

<body>
<div ng-controller="additionCtrl">
    First Number: <input ng-model="NumberOne"/><br/>
    Second Number: <input ng-model="NumberTwo"/>
    <button ng-click="add(NumberOne, NumberTwo)">Add</button><br/>
    Result: {{Result}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script src="Scripts/additionCtrl.js"></script>
</body>

コントローラ：

function additionCtrl($scope) {
$scope.NumberOne = 0;
$scope.NumberTwo = 0;
$scope.Result = 0;
$scope.add = function (a, b) {
};
}

Jasmine 仕様ファイル。

describe("Addition", function () {
var $scope, ctrl;

beforeEach(inject(function ($rootScope, $controller) {
    this.scope = $rootScope.$new();
    ctrl = $controller('additionCtrl', {
       $scope: this.scope 
    });
}));

it("should add two integer numbers.", inject(function ($controller) {        
    expect(ctrl.add(2, 3)).toEqual(5);
}));
});

Specrunner.html

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
  <script type="text/javascript" src="lib/angular-mocks.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="../App/Scripts/additionCtrl.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/addition.spec.js"></script>

これは失敗したテストであり、テストが期待どおりの結果で失敗したら、コードを変更して合格させることができますが、角度のあるモックがインジェクターを取得していないという問題に直面しています。
インジェクターを使用する代わりにコントローラーを新規作成できる例を見ましたが、より複雑なテストをセットアップできるように、インジェクターの使用について学びたいと思います。
ここで単純なものが不足している可能性があります。私が見逃した可能性のある記事を教えてください。
ありがとう

4

2 に答える 2