Question

我有一个我正试图测试的指令。这是指令：

App.directive('resize', function($animate) {
  return function(scope, element, attrs) {
    scope.$watch(attrs.resize, function(newVal) {
      if(newVal) {
        $animate.addClass(element, 'span8');
      }
    });
  };
});

这是我的测试：

describe('resize', function() {
  var element, scope;
  beforeEach(inject(function($compile, $rootScope) {
    var directive = angular.element('<div class="span12" resize="isHidden"></div>');
    element = $compile(directive)($rootScope);
    $rootScope.$digest();
    scope = $rootScope;
  }));

  it('should change to a span8 after resize', function() {
    expect($(element).hasClass('span12')).toBeTruthy();
    expect($(element).hasClass('span8')).toBeFalsy();
    element.scope.newVal = 'changed';
    scope.$apply();
    expect($(element).hasClass('span8')).toBeTruthy();
  });
});

我正在尝试访问我的attrs变量，更改它，$apply并查看class是否按预期更改。我无法更改attrs。我实际上甚至找不到访问它的方法。如何在我的测试中访问attrs？

Answer 1

element是一个jqLite object，或一个普通的jQuery对象（如果你在AngularJS之前加载jQuery）。只需使用.attr()方法：

it('should do something on attr change', function(){
    element.attr('resize', 'newValue');
    $scope.$apply();
});

没有必要将元素包装在新的jQuery对象中：$(element)以使用.hasClass(value)方法

如何在测试时访问指令中的attr - Angularjs

1 个答案: