ng-html2js를 사용해도 각도 지시 테스트 시 카르마 '예상치 못한 요청'

ng-html2js를 사용해도 각도 지시 테스트 시 카르마 '예상치 못한 요청'

마지막 날을 이 일을 해낼 수 있도록 노력한 끝에, 저는 처음에 겪었던 것과 같은 오류로 되돌아갔다는 것을 알게 되었습니다.

오류: 예기치 않은 요청: GET test-directive.html

카르마와 재스민을 이용해 앵귤러에서 지시사항을 테스트하고 있습니다.StackOverflow에 대한 비슷한 질문을 살펴 보았지만 다른 예제에서 시도해 본 모든 것이 소용이 없음을 알게 되었습니다.

코드구조

테스트 앱
-src
--bower
--lib
--js
--
---testDir
----test.js
----시험-directive.
----테스트
-------test.spec.js
-시험을 보다
--config
--- karma.conf.js
--e2e

카르마 구성

'use strict';
module.exports = function(config){
    config.set({
    basePath: '../../',
    frameworks: ['jasmine'],
    files: [
        // Angular
        'src/bower/angular/angular.js',
        // Mocks
        'src/bower/angular-mocks/angular-mocks.js',
        // Libraries
        'src/lib/**/*.js',
        // App
        'src/js/*.js',
        'src/modules/*/*.js',
        // Tests
        'src/modules/**/test/*spec.js',
        // Templates
        'src/modules/**/*.html'
    ],
    autoWatch: false,
    singleRun: true,
    reporters: ['progress'],
    browsers: ['PhantomJS'],

    preprocessors: {
        'src/modules/**/*.html': 'ng-html2js'
    },
    ngHtml2JsPreprocessor: {
        moduleName: 'dir-templates'
    },
    plugins: [
        'karma-jasmine',
        'karma-ng-html2js-preprocessor',
        'karma-phantomjs-launcher',
        'karma-chrome-launcher',
        'karma-junit-reporter'
    ]
    });
};

test.js

'use strict';
angular.module('modules.test', []).
directive('testDirective', [function() {
    return {
        restrict: 'E',
        templateUrl: 'test-directive.html',
        link: function($scope, $elem, $attrs) {
            $scope.someFn = function() {
                angular.noop();
            };
        }
    };
}]);

시험 직하의

<span>Hello World</span>

test.spec.js

'use strict';
describe('test module', function() {
    beforeEach(module('modules.test'));
    /* -- DIRECTIVES------------------ */
    describe('directives', function() {
        var $compile, $scope, elm;
        beforeEach(module('dir-templates');
        beforeEach(inject(function($compile, $rootScope) {
            $scope = $rootScope.$new();
            elm = angular.element('<test-directive></test-directive>');
            $compile(elm)($scope);
            $scope.$digest();
        }));
        it('should have one span tag', function(){
            //Jasmine test here to check for one span tag.
        });
    });
});

몇 개의 파일을 줄여서 문제가 있는 위치에 고정했습니다.호출중beforeEach(module('dir-templates')), 일치하는 모든 .html 파일을 $templateCache에 로드하고 오류를 던지는 GET 요청을 방지해야 합니다.

어떤 도움이라도 주시면 감사하겠습니다. 정말 미칠 것 같아요.추가적으로 궁금한 점이 있으시면 댓글로 남겨주세요.

그래서, 두 줄을 고치는 것처럼 보이는 것에 대한 고통스러운 두통.크롬에서 카르마를 연 후 (팬텀 대신)JS) 및 소스 파일을 살펴보니 ng-html2js가 $templateCache에 지시문을 첨부할 때 지시문 정의에 제공된 경로가 아닌 전체 경로를 사용한다는 것을 알게 되었습니다.

요컨대,'src/modules/test/test-directive.html.js' !== 'test-directive.html.js'.

이렇게 하려면 karma.conf.js 파일 ngHtml2JsProcessor를 다음과 같이 수정합니다.

ngHtml2JsPreprocessor: {
    stripPrefix: 'src/',
    moduleName: 'dir-templates'
},

그리고 지시 선언문의 템플릿 Url은 다음과 같습니다.

templateUrl: 'modules/test/test-directive.html'

일치하는 템플릿 이름이 접두사와 일치하는지(선두 슬래시가 없음 등)에 대한 설명을 추가하려면 다음과 같이 확인해야 합니다.

템플릿 캐시 키는 대소문자를 구분하므로 지시자가 적절한 케이싱을 사용하여 HTML 파일을 참조하고 있는지 확인합니다.ngHtml2JsPreprocessor가 생성하는 템플릿 캐시 키는 파일 시스템의 실제 파일 이름과 디렉토리 이름의 케이싱을 사용합니다.

따라서 파일 이름이 Test-Directive.html이거나 폴더 이름이 "Modules"이지만 지시가 "Modules/test-Directive.html"을 참조하는 경우 캐시에서 해결되지 않습니다.

대소문자 구분은 지시문의 템플릿 URL을 실제(테스트가 아닌) 사용하는 데 문제가 되지 않습니다(GET 요청은 분명히 대소문자 구분이 없으며 템플릿 캐시 키는 초기 GET 요청이 무엇이었든 간에 따라 생성됩니다(즉, 지시문에 명시된 것이 무엇이든).

언급URL : https://stackoverflow.com/questions/22869668/karma-unexpected-request-when-testing-angular-directive-even-with-ng-html2js