web-dev-qa-db-ja.com

Mochaを使用してAngular.jsでangular.module（）。controller（）で作成されたコントローラーをテストする方法

この状況のように、angular.module（）。controller（）で作成されたコントローラーがあります

myModule = angular.module('myApp.controllers', [])
                   .controller('testCtrl', ['$scope', function($scope){
                           $scope.test = 'this is a test';
                    }]);

ここで、mochaを使用して、コントローラーが正しく機能しているかどうかをテストする必要があります。 Angular）では、コントローラーがグローバル関数として宣言されている例がいくつかあります（例 http://docs.angularjs.org/tutorial/step_04 ）。

function PhoneListCtrl() {...}
.....
beforeEach(function() {
   scope = {},
   ctrl = new PhoneListCtrl(scope);
});

it('shod test whatever PhoneListCtrl does ', function() {
   expect(scope.someProp).toBe('whateverValue');
});

したがって、質問は次のとおりです。

1）angular.module（）。controller（）を使用して宣言されたコントローラーに対して同様のテストを行うにはどうすればよいですか？

2）モカを使用してそれを行う方法

unit-testingcontrollerangularjsmocha
16
Liviu

AngularJSは、テスト中に依存性注入に役立ついくつかの関数を利用できるようにするモックを提供します。

例：

（ジャスミン）

公式チュートリアル から最初のテストを実行し、コントローラーモジュールを定義したとします。 （モジュール名に名前空間を付けることもできますが、単純にしておきたいです）

var Controllers = angular.module('controllers', []);

Controllers.controller('PhoneListCtrl', ['$scope', function($scope){
    $scope.phones = [{name: "Nexus S", snippet: "Fast..."},
                     {name: "Motorola XOOM...", snippet: "The Next...."},
                     {name: "Motorola XOOM...", snippet: "The Next, Next..."}];
}]);

次に、アウトアプリ用のモジュールを作成し、コントローラーモジュールに挿入します

var PhonesApp = angular.module('phoneApp', ['controllers']);

最後に、このようにテストできます

describe('phonesApp', function() {
    describe('phoneApp controllers', function() {
        beforeEach(module('controllers'));
        describe('PhoneListCtrl', function() {
            it('should create "phones" model with 3 phones',
                inject(function($rootScope, $controller) {

                var scope = $rootScope.$new();
                var ctrl = $controller("PhoneListCtrl", {$scope: scope });
                expect(scope.phones.length).toBe(3);
            }));
        });
    });
});

私はモカでそれをしていませんが、プロセスは似ていると思います。

Pd：CoffeeScriptを使用してチュートリアルを行いました。関連するビットは次のとおりです https://Gist.github.com/4163147

28
jaime

Mochaを使用している場合は、angular-1.1.1にアップグレードしない限り、angular.mock.moduleまたはangular.mock.injectはサポートされないことに注意してください。同じ船に乗っていますが、別の問題でアップグレードできません。

サーバー側のテストはmochaで行われているため、mochaを使用したいと思います。また、両側で同じテストフレームワークを使用したいので、少し苦労しています。

したがって、inject/moduleを使用できない場合は、次の方法で試すことができます。

var $injector = angular.injector(['your-app-name', 'ng']),
  $controller = $injector.get('$controller'),
  $scope = $injector.get('$rootScope');

describe('my app controllers', function () {
  describe('FooCtrl', function () {
     it('should do something', function () {
        // scope can be any object you want; could be $rootScope from above
        var params = { $scope: { } },
          ctrl = $controller('FooCtrl', params);
        // TODO: test ctrl
     });
  });
});
15
zenocon