对<select>指令进行单元测试

Question

我有一个名为<dimension>的指令，它呈现html:

angular.module('myApp.directives').
  directive('dimension', ['$rootScope', 'Dimension', function($rootScope, Dimension) {
    return {
      restrict: 'E',
      scope: {
        ngModel: '=',
        inputs: '=inputsModel',
        url: '@',
        listenFor: '@',
        broadcastOnChange: '@'
      },
      controller: function($scope, $element, $attrs, $transclude, Dimension) {
        this.get = function() {
          Dimension.get($attrs.url, $scope.inputs).then(function(data) {
            $scope.alloptions = data;
          });
        };
      },
      link: function($scope, $element, $attrs, $controller) {
        $controller.get();
        // Listen for changes to select, and broadcast those changes out to rootScope
        var dimension = $($element).find('select');
        dimension.on('change', function(event) {
          $rootScope.$broadcast('DimensionDirective.change', $attrs.broadcastOnChange);
        });
        // Listen for the broadcast, and react if the value of the broadcast is in the listen-for attribute list
        $rootScope.$on('DimensionDirective.change', function(event, value) {
          if (value == $scope.listenForArray) {
            $controller.get();
          }
        });
      },
      template:
          '<div>' + 
            '<label ng-transclude></label>' +
            '<fieldset>' +
                '<div class="form-group">' +
                  '<select ng-model="ngModel" ng-options="x for x in alloptions" multiple class="form-control"></select>' +
                '</div>' +
             '</fieldset>' +
          '</div>',
      replace: true,
      transclude: true
    };
  }]).
  factory('Dimension',
    ["$http", function($http) {
      return {
        get: function(_url, _inputs) {
          var future;
          future = $http({
            url: _url,
            method: 'POST',
            data: _inputs
          });
          return future.then(function(response) {
            return response.data;
          });
        }
      };
    }
  ]);

我现在想创建一个单元测试，在从xhr加载元素后，验证select中是否有正确数量的元素。我创建了一个单元测试，大致如下：

describe('directive', function() {
  var $httpBackend;
  beforeEach(module('myApp.directives'));
  beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
    $httpBackend = _$httpBackend_;
    $httpBackend.expectPOST('url').
      respond(["Item 1", "Item 2"]);
  }));
  it('should load select's options from xhr on render', function() {
    inject(function($compile, $rootScope) {
      var element = $compile('<dimension ng-model="inputs.model" url="url">Dimension</dimension>')($rootScope);
      var select = element.find('select');
      expect(element.find('select').length).toBe(2); //TODO this isn't right.
    });
  });
});

然而，最后一个期望（）并没有做正确的事情。关于如何测试<select>加载正确的信息并显示它，有什么建议吗？

Answer 1

我发现您的测试代码有三个问题：

• 您没有调用$httpBackend.flush，因此没有模拟HTTP响应
• 您没有触发摘要循环，因此Angular不会呈现指令的标记
• 您正在尝试计算渲染了多少select，但始终只有一个。您应该计算生成了多少option

所有这些都很容易解决（我对你的代码做了一点更改，以清楚地了解发生了什么）：

describe('directive', function() {
  var $httpBackend;
  beforeEach(function() {
    module('myApp.directives');
    inject(function(_$httpBackend_, $rootScope, $controller) {
      $httpBackend = _$httpBackend_;
    });
  });
  it('should load select's options from xhr on render', function() {
    inject(function($compile, $rootScope) {
      // Arrange
      $httpBackend.expectPOST('url').respond(["Item 1", "Item 2"]);
      var element = $compile('<dimension ng-model="inputs.model" url="url">Dimension</dimension>')($rootScope);
      // Act
      $httpBackend.flush(); // Simulates a response
      $rootScope.$digest(); // Triggers a digest cycle
      // Assert
      expect(element.find('option').length).toBe(2); 
    });
  });
});

这是一个Plunker脚本，上面的测试正在运行。