javascript - 单元测试 Angular Directive(指令)

Question

所以我正在对指令进行单元测试，但我无法编译它......

指令

home.directive('myDirective', function($compile) {
    return {
        restrict: 'E',
        scope: {
            text: '@',
            href: '@'
        },
        link: function(scope, elem, attrs) {            
            var text = '<span>Text: <a href="'+scope.href+'">'+scope.text+'</a><br />';
            text += 'HREF: '+scope.href+'</span>';
            var newElement = $compile(text)(scope);            
            elem.replaceWith(newElement);
        }
    };
})

测试

describe( 'Test home controller', function() {
    beforeEach( module( 'home' ) );
    describe("myDirective", function() {    
        var $compile;
        beforeEach(inject(function(_$compile_, _$rootScope_){
            $compile = _$compile_;
            $rootScope = _$rootScope_;
        }));
        it ("Should transform my text", function() {
            element = $compile('<my-directive text="test text" href="http://yahoo.com"></my-directive>')($rootScope);
            $rootScope.$digest();
            console.log(element.text());
        });
    });
});

我的测试中的 console.log(element.text()) 吐出一个空字符串...我可以让它读取属性...即如果我添加 Expect(element.attr('text') ).toBe("test text") 它会通过，但显然不会测试我的实际指令，也不是我想要做的。

Answer 1

尝试像这样重写你的指令:

home.directive('myDirective', function($compile) {
    return {
        restrict: 'E',
        scope: {
            text: '@',
            link: '@'
        },
        template: '<p>Text: <a ng-href="{{link}}">{{text}}</a></p>',
        replace: true
    };
});

然后你可以像这样测试:

describe( 'Test home controller', function() {
    beforeEach( module( 'home' ) );
    describe("myDirective", function() {    
        var $compile,
            $rootScope;
        beforeEach(inject(function(_$compile_, _$rootScope_){
            $compile = _$compile_;
            $rootScope = _$rootScope_;
        }));
        it ("Should transform my text", function() {
            element = $compile('<my-directive text="test text" link="http://yahoo.com"></my-directive>')($rootScope);
            $rootScope.$digest();
            console.log(element.text());
        });
    });
});

更新 - 第二种方法

此更新的方法演示了如何将链接函数与 $observe 一起使用。

尝试像这样重写你的指令:

home.directive('myDirective', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: '<p>Text: <a ng-href="{{link}}">{{text}}</a></p>',
        link: function(scope, elm, attrs){
          attrs.$observe('text', function(newVal){
            scope.text = newVal + " tada";
          });
          attrs.$observe('link', function(newVal){
            scope.link = newVal + '/search?p=foo';
          });
        }
    };
});

然后你可以像这样测试:

describe( 'Test home controller', function() {
    beforeEach( module( 'home' ) );
    describe("myDirective", function() {    
        var $compile;
        beforeEach(inject(function(_$compile_, _$rootScope_){
            $compile = _$compile_;
            $rootScope = _$rootScope_;
        }));
        it ("Should transform my text", function() {
            element = $compile('<my-directive text="test text" link="http://yahoo.com"></my-directive>')($rootScope);
            $rootScope.$digest();
            expect(element.text()).toBe('Text: test text tada');
        });
    });
});

Here is a working plunker