6

ディレクティブをユニットテストするにはどうすればよいですか？

私が持っているのは

angular.module('MyModule').
    directive('range', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                bindLow: '=',
                bindHigh: '=',
                min: '@',
                max: '@'
            },
        template: '<div><select ng-options="n for n in [min, max] | range" ng-model="bindLow"></select><select ng-options="n for n in [min, max] | range" ng-model="bindHigh"></select></div>'
    };
})

私の単体テストでは、非常に簡単なテストから始めたいと思います

describe('Range control', function () {
    var elm, scope;

    beforeEach(inject(function(_$compile_, _$rootScope) {
        elm = angular.element('<range min="1" max="20" bind-low="low" bind-high="high"></range>');

        var scope = _$rootScope_;
        scope.low = 1;
        scope.high = 20;
        _$compile_(elm)(scope);
        scope.$digest();
    }));

    it('should render two select elements', function() {
        var selects = elm.find('select');

        expect(selects.length).toBe(2);
    });
});

ただし、ディレクティブがappモジュールに登録されているため、これは機能しません。モジュールを含めたくないので、すべてのconfigコードrunが実行されます。それは、ディレクティブを別個のユニットとしてテストするという目的を無効にします。

すべてのディレクティブを別のモジュールに入れて、それだけをロードすることになっていますか？または、これを解決する他の賢い方法はありますか？

4

3 に答える 3

3

編集：前回の回答から質問が変わったようです。

ディレクティブを独立したモジュールに配置する必要があります。

例えば：

angular.module('MyModule.directives');

そのモジュールのみをテストするには、次のようにテストでそのモジュールを明示的にロードできます。

beforeEach(module('MyModule.directives'));

これにより、そのモジュールとそのすべての依存関係が読み込まれます。

アプリのMyModule定義で、ディレクティブモジュールを依存関係として指定することを忘れないでください。

angular.module('MyModule', ['MyModule.directives', ...]);
于 2013-03-25T22:14:15.103 に答える
2

'youapp.directives'モジュールですべてのディレクティブを宣言し、そのモジュールをディレクティブテストに含める必要があります。

app.jsで

angular.module('myApp', ['myApp.controllers', 'myApp.directives', 'myApp.services', 'myApp.filters']).config(...)

あなたのdirectives.jsで

angular.module('myApp.directives', []) .directive(.....)

最後にdirectivesSpec.js

describe('directives specs', function() {
    beforeEach(module('myApp.directives'));

    describe('range', function() {
    ...
    });
});
于 2013-03-27T08:35:44.833 に答える
0

角度シードプロジェクト https://github.com/angular/angular-seed は、ディレクティブはベースアプリモジュールの依存関係である独自のモジュールに配置する必要があるという意見を持っているようです。

したがって、ディレクティブは「myApp.directives」というモジュールに入ります。

angular.module('myApp.directives', []).
  directive('appVersion', ['version', function(version) {
    return function(scope, elm, attrs) {
      elm.text(version);
    };
  }]);

次に、ベースアプリモジュールがディレクティブモジュールを依存関係として追加します

// Declare app level module which depends on filters, and services
angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: MyCtrl1});
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: MyCtrl2});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

したがって、それらのテスト例はディレクティブモジュールに依存します

describe('directives', function() {
  beforeEach(module('myApp.directives'));
etc...

私はまだあなたや私のコードでこれを試していませんが、あなたはほとんどの場合、最も一般的な実践ガイダンスを探していたようです。

于 2013-03-26T00:13:13.590 に答える