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（＆＃39;文本＆＃39;））。toBe（＆＃34;测试文本＆＃34;）它会通过，但是很明显没有测试我的实际指令，也不是我想要做的。

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

单元测试角度指令

1 个答案: