Question

我如何对我的指令进行单元测试？

我拥有的是

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代码运行。这样就无法将指令作为一个单独的单位进行测试。

我是否应该将所有指令放在一个单独的模块中并加载它？还是有其他聪明的方法来解决这个问题吗？

Answer 1

编辑：自从我上一次回答以来，我发现问题已经改变了。

您需要将您的指令放在一个独立的模块中。

例如：

angular.module('MyModule.directives');

要仅测试该模块，您可以在测试中明确加载该模块，如下所示：

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

这将加载该模块及其所有依赖项。

请记住将指令模块声明为应用中MyModule定义中的依赖项：

angular.module('MyModule', ['MyModule.directives', ...]);

Answer 2

您应该在'youapp.directives'模块中声明所有指令，并在指令测试中包含该模块。

在你的app.js

中

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

在你的directives.js

中

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

最后你的指令规范.js

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

    describe('range', function() {
    ...
    });
});

Answer 3

角种子项目 https://github.com/angular/angular-seed 似乎认为指令应该放在他们自己的模块中，然后是基础应用程序模块的依赖。

所以这些指令进入了一个名为＆＃34; myApp.directives＆＃34; ：

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

我还没有尝试使用您或我的代码，但看起来您主要是在寻找最常见的练习指南。

单元测试AngularJS指令

3 个答案: