单元测试角度指令

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 （“测试文本”）将会通过，但这显然不能测试我的实际指令，也不是我想要的。

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');
        });
    });
});

这是一个工作的家伙