如何測試僅用作模板的指令

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

在我看來，這是不值得寫這個指令的測試，因爲它不包含任何邏輯。

如果您真的想要測試它（例如，對您的應用程序或用戶來說，該元素與模板中的元素完全相同），您總是可以編寫測試來編譯指令並檢查它是否被正確替換通過它的模板。

在這種情況下，單元測試可以防止對模板進行任何不需要的更改。這不是單元測試的責任，但自動化用戶測試更適合這項工作。