如何单元测试角度指令

Question

单元测试角度指令不是很难，但我发现有不同的方法来做到这一点。

对于这篇文章的目的，让我们假设下面的指令

angular.module('myApp') 
    .directive('barFoo', function() { 
     return { 
      restrict: 'E', 
      scope: true, 
      template: '<p ng-click="toggle()"><span ng-hide="active">Bar Foo</span></p>', 
      controller: function ($element, $scope) { 
       this.toggle() { 
        this.active = !this.active; 
       } 
      } 
     }; 
    }); 

现在我能想到的两种方法进行单元测试这个

方法1：

describe('Directive: barFoo', function() { 
    ... 
    beforeEach(inject(function($rootScope, barFooDirective) { 
     element = angular.element('<bar-foo></bar-foo>'); 
     scope = $rootScope.$new(); 
     controller = new barFooDirective[0].controller(element, scope); 
    })); 

    it('should be visible when toggled', function() { 
     controller.toggle(); 
     expect(controller.active).toBeTruthy(); 
    }); 
}); 

方法2 ：

beforeEach(inject(function ($compile, $rootScope) { 
    element = angular.element('<bar-foo></bar-foo>'); 
    scope = $rootScope.$new(); 
    $compile(element)(scope); 
    scope.$digest(); 
})); 

it ('should be visible when toggled', function() { 
    element.click(); 
    expect(element.find('span')).not.toHaveClass('ng-hide'); 
}); 

所以，我很好奇哪些方法和哪个方法最强大？

Answer 1

我喜欢做的是创建像我这个虚拟示例一样的测试故事。因此，我想你只是没有在第二个例子中说明它，但如果你这样做，测试时总是使用describe enclosure，只是一个很好的做法。对于测试本身，我建议避免显式调用范围的方法$ digest（），尤其是对于您的测试而言，它似乎不是必需的。

不久，我会去的方法1.

Answer 2

我觉得第一种方法更“正确”，因为它不依赖于点击事件。我相信，如果你想测试一个元素的点击和它的效果，你应该使用量角器并且只对单元测试使用茉莉花。这样你将在单元测试和UI测试之间有一个很好的分离。

此外，它使测试更可维护。例如如果您决定在悬停时点击toggle而不是点击第二种方法，则您还必须更新测试。

Answer 3

这里是你如何测试你的AngularJS指令：

describe('Directive: barFoo', function() { 
 
    var createElement, element, parentScope, directiveScope; 
 
    
 
    beforeEach(module('myApp')); 
 

 
    beforeEach(inject(function($injector) { 
 
    var $compile = $injector.get('$compile'); 
 
    var $rootScope = $injector.get('$rootScope'), 
 

 
    parentScope = $rootScope.$new(); 
 
    parentScope.paramXyz = ... <-- prepare whatever is expected from parent scope 
 

 
    createElement = function() { 
 
     element = $compile('<bar-foo></bar-foo>')(parentScope); 
 
     directiveScope = element.isolateScope(); 
 
     parentScope.$digest(); 
 
     $httpBackend.flush(); <-- if needed 
 
    }; 
 
    })); 
 

 

 
    it('should do XYZ', function() { 
 
    parentScope.xyz = ... <-- optionnal : adjust scope according to your test 
 
    createElement(); 
 

 
    expect(...) <-- whatever, examples : 
 

 
    var submitButton = element.find('button[type="submit"]'); 
 
    expect(submitButton).to.have.value('Validate'); 
 
    expect(submitButton).to.be.disabled; 
 
    submitButton.click(); 
 
    });