angularjs – 测试元素指令 – 在测试期间无法访问隔离的范围方

发布时间：2020-12-17 08:28:07 所属栏目：安全来源：网络整理

导读：我有以下指令。 directivesModule.directive('wikis',function() {var urlRegex = new RegExp('^(https?)://.+$');return { restrict: 'E',templateUrl: 'templates/wiki-list.html',scope: { wikis: '=' },link: function(scope,element,attrs) { scope.new

我有以下指令。

directivesModule.directive('wikis',function() {
var urlRegex = new RegExp('^(https?)://.+$');

return {
    restrict: 'E',templateUrl: 'templates/wiki-list.html',scope: {
        wikis: '='
    },link: function(scope,element,attrs) {
        scope.newWikiURL = '';

        scope.$watch('wikis',function() {
            if (scope.wikis == undefined || scope.wikis.length === 0) {
                scope.class = 'hide';
            } else {
                scope.class = 'show';
            }
        },false);

        scope.addWiki = function() {
            if (scope.wikis == undefined) {
                scope.wikis = [];
            }

            var nw = scope.newWikiURL;
            if (nw != undefined && nw.trim() != '' && urlRegex.exec(nw)) { 
                scope.wikis.push(nw);
                scope.newWikiURL = '';
            }
        }

    }
};

});

当我测试它：

describe('Wikis Directive Test Suite',function() {
    var scope,elem,directive,linkFn,html;

    beforeEach(function() {
        html = '<wikis wikis=''></wikis>';

        inject(function($compile,$rootScope) {
            scope = $rootScope.$new();
            scope.wikis = [];

            elem = angular.element(html);

            $compile(elem)(scope);

            scope.$digest();
        });

    });

    it('add Wiki should add a valid wiki URL to artist',function() {
        var url = 'http://www.foo.com';
        scope.newWikiURL = url;
        scope.addWiki();

        expect(scope.wikis.length).toBe(1);
        expect(scope.wikis[0]).toBe(url);
        expect(scope.newWikiURL).toBe('');
    });
});

我得到一个错误说，对象没有addWiki方法。我试图调试它，并且链接功能在测试期间不被调用。我怀疑这就是为什么addWiki方法不是范围的一部分。任何人都知道为什么我得到这个错误？

顺便说一句，是一个正常的做法，添加一些逻辑到指令的链接函数，因为它将是一个控制器本身？因为看代码我知道这是为什么在现实中我在做。

>你需要加载包含你的指令的模块，否则angular不知道什么< wikis>是
>你的指令创建一个隔离范围，所以一旦它被编译，你需要使用elem.isolateScope()获取新的范围，

所以有了这些变化：

describe('Wikis Directive Test Suite',function() {
    var $scope,scope,html;

    beforeEach(module('app'));

    beforeEach(function() {
        html = '<wikis></wikis>';

        inject(function($compile,$rootScope,$templateCache) {
            $templateCache.put('templates/wiki-list.html','<div>wiki template</div>');

            $scope = $rootScope.$new();
            $scope.wikis = [];

            elem = angular.element(html);

            $compile(elem)($scope);

            scope = elem.isolateScope();
            scope.$apply();
        });

    });

    it('add Wiki should add a valid wiki URL to artist',function() {
        var url = 'http://www.foo.com';
        scope.newWikiURL = url;
        scope.addWiki();

        expect(scope.wikis.length).toBe(1);
        expect(scope.wikis[0]).toBe(url);
        expect(scope.newWikiURL).toBe('');
    });
});

http://jsfiddle.net/QGmCF/1/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!