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

您应该注入角度应用模块，而不是指令。

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

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

2 个答案: