programing

테스트 요소 지시 - 테스트 중에 분리된 스코프 메서드에 액세스할 수 없습니다.

oldcodes 2023. 10. 21. 10:50
반응형

테스트 요소 지시 - 테스트 중에 분리된 스코프 메서드에 액세스할 수 없습니다.

저는 다음과 같은 지시사항이 있습니다.

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 방식이 범위에 포함되지 않는 것 같습니다.왜 이런 오류가 생기는지 아는 사람?

그런데, 지시어의 링크 기능에 컨트롤러 자체가 되는 것처럼 논리를 추가하는 것이 정상적인 관행입니까?코드를 보면 그게 내가 실제로 하는 이유라는 것을 알 수 있기 때문입니다.

각진 1.2.0 문서에 따르면 격리 범위를 얻는 방법은 isolateScope 방법을 사용합니다.

  • scope () - 현재 요소 또는 상위 요소의 범위를 검색합니다.

  • isolateScope() - 현재 요소에 직접 연결된 경우 isolateScope을 검색합니다.이 게터는 새 격리 범위를 시작하는 지시문이 포함된 요소에만 사용해야 합니다.이 요소에 있는 호출 범위()는 항상 원래 비분리 범위를 반환합니다.

Angular doc - 섹션 jQuery/jqLite 엑스트라

BREAKING CHANGE: jqLite#scope()

  1. 지시가 포함된 모듈을 로드해야 합니다. 그렇지 않으면 각도가 무엇을 알 수 없습니다.<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/

언급URL : https://stackoverflow.com/questions/18713909/testing-element-directive-cant-access-isolated-scope-methods-during-tests

반응형