web-dev-qa-db-ja.com

テスト要素ディレクティブ-テスト中に分離スコープメソッドにアクセスできません

次のディレクティブがあります。

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

ObjectにaddWikiメソッドがないというエラーが表示されます。デバッグしようとしたところ、テスト中にリンク機能が呼び出されませんでした。 addWikiメソッドがスコープの一部ではないのはそのためだと思います。誰かがこのエラーが発生する理由を知っていますか？

ちなみに、ディレクティブ自体のリンク関数にコントローラ自体を含めるため、ロジックを追加するのは通常のやり方ですか？コードを見ると、それが実際に私がやっている理由だとわかります。

angularjsangularjs-directiveangularjs-scope
24
leonfs

  1. ディレクティブを含むモジュールをロードする必要があります。そうしないと、angularは_<wikis>_が何であるかを認識しません

  2. ディレクティブは分離スコープを作成するため、コンパイルしたら、elem.isolateScope()を使用して新しいスコープを取得する必要があります

これらの変更により：

_describe('Wikis Directive Test Suite', function() {
    var $scope, scope, elem, directive, linkFn, 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/

39
noj

angular 1.2.0 docsによると、分離スコープを取得する方法はメソッドisolateScopeを使用することです

  • scope（）-現在の要素またはその親のスコープを取得します。

  • isolateScope（）-現在の要素に直接接続されている分離スコープを取得します。このゲッターは、新しい分離スコープを開始するディレクティブを含む要素でのみ使用する必要があります。この要素でscope（）を呼び出すと、常に元の分離されていないスコープが返されます。

Angular doc-セクションjQuery/jqLit​​e Extras

重大な変更：jqLit​​e＃scope（）

40
yeraycaballero