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

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

我认为不值得为此指令编写测试，因为它不包含任何逻辑。

如果你真的想测试它（即元素正是模板中的内容对你的应用程序或用户来说至关重要），你总是可以编写一个编译指令并检查它是否被替换的测试通过其模板正确。

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

Answer 2

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

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

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

How to test Directive that serves only as a Template

javascript

angularjs

angularjs-directive

jasmine

karma-jasmine