Question

我有一个角度指令链接功能如下：

link: function(scope, elem) {
   elem.css({height: 100%});
}

所以我想测试我的测试中是否在元素上调用了css函数。这是我尝试过的，但不起作用：

it('should apply correct css', function() {
    beforeEach(function() {
      elem = $compile('<my-directive></my-directive>')($scope)
   });

   elem.css = jasmine.createSpy('css').and.returnValue({height: 100%});

   expect(elem.css).toHaveBeenCalled();
   expect(elem[0].attr('style')).toContain('height: 100%');
});

我不确定测试此方法的最佳方法。我如何使这项工作？

Answer 1

为什么不在没有间谍的情况下测试指令的效果。见plunker

describe('myDirective', function () {
    var $scope, $compile, element;

    beforeEach(module('myApp'));

    beforeEach(inject(function (_$rootScope_, _$compile_) {
        $scope = _$rootScope_.$new();
        $compile = _$compile_;
        element = angular.element('<my-directive></my-directive>');
    }));

    it('should set height to 100%', function (){
      expect(element[0].style.height).toBe('');
      $compile(element)($scope);
      expect(element[0].style.height).toBe('100%');
      expect(element.attr('style')).toContain('height: 100%');
    });
});

在Jasmine测试中监视Angular element.css函数

1 个答案: