如何测试仅用作模板的指令

Question

我正在使用Jasmine来测试我的Angular组件。我能够但是测试功能，服务和控制器以及，如何测试一个只包含模板的指令，例如：

app.directive('myDirective', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     transclude: true, 
     template: '<header>' + 
         '<p>' + 
          '<a href="http://someurl1.com/home" target="_blank">Home</a>' + 
          '&nbsp;&nbsp;|&nbsp;&nbsp;' + 
          '<a href="http://someurl2.com/cookies" target="_blank">Cookies</a>' + 
          '&nbsp;&nbsp;|&nbsp;&nbsp;' + 
          '<a href="http://someurl3.com/Terms" target="_blank">Terms</a>' + 
         '</p>' + 
         '<p>Text text text text text text text text text text text text text text text text text</p>' + 
        '</header>'   
    }; 
}); 

---

我沿着这些路线尝试的东西：

describe('Directive: header', function() { 
    beforeEach(module('headerDirective')); 

    var element, scope; 

    beforeEach(inject(function ($rootScope, $compile) { 
     element = angular.element('<header>' + 
      '<p>' + 
       '<a href="http://someurl1.com/home" target="_blank">Home</a>' + 
       '&nbsp;&nbsp;|&nbsp;&nbsp;' + 
       '<a href="http://someurl2.com/cookies" target="_blank">Cookies</a>' + 
       '&nbsp;&nbsp;|&nbsp;&nbsp;' + 
       '<a href="http://someurl3.com/Terms" target="_blank">Terms</a>' + 
       '</p>' + 
       '<p>Text text text text text text text text text text text text text text text text text</p>' + 
      '</header>'); 

     scope = $rootScope; 

     $compile(element)(scope); 
     scope.$digest(); 
    })); 

    it("should have the correct amount of <a>", function() { 
     var list = element.find('a'); 
     expect(list.length).toBe(a); 
    }); 
}); 

Answer 1

您应该注入加载角应用程序模块，而不是指令。

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

    //load the angular app module 
    beforeEach(module('MyApp')); 

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

    it('should have 3 anchor tags', function() { 
     expect(element[0].querySelectorAll('a').length).toEqual(3); 
    }); 

    it('should have a Home link', function() { 
     expect(element[0].querySelectorAll('a')[0].textContent).toEqual('Home'); 
    }); 

    // add more. Test for P tags. 

}); 

JSFFIDDLE

Answer 2

在我看来，这是不值得写这个指令的测试，因为它不包含任何逻辑。

如果您真的想要测试它（例如，对您的应用程序或用户来说，该元素与模板中的元素完全相同），您总是可以编写测试来编译指令并检查它是否被正确替换通过它的模板。

在这种情况下，单元测试可以防止对模板进行任何不需要的更改。这不是单元测试的责任，但自动化用户测试更适合这项工作。