AngularJSカルマテスト：予期しないリクエスト：GET.template.html

Question

私はAngularJSアプリのカルマテストを設定しようとしていますが、何とか失敗しています。 私はすべてのステップhereを実行しましたが、ng-html2jsプリプロセッサが正しく動作していないと感じました。私はいつも、次のメッセージを取得しています：

Error: Unexpected request: GET js/templates/my-template.template.html

ここに私のコードの構造は、私がテストしようとしていますディレクティブがある

そして、ここに私のテスト構造

です：

angular 
    .module('myapp') 
    .directive('myDirective', ['myService', function (myService) { 
     return { 
      restrict: 'E', 
      templateUrl: 'js/templates/my-template.template.html', 
      scope: {}, 
      link: function (scope) { 
      } 
     } 
    }]); 

私のカルマconfには、次のようになります。このような

module.exports = function (config) { 
config.set({ 

    basePath: '../../', 

    frameworks: ['jasmine'], 


    files: [ 
     //some omitted like angular and so on... 
     'main/resources/static/**/*.js', 
     '**/*.html', 
     'test/js/**/*Spec.js' 
    ], 

    preprocessors: { 
     '**/*.html': ['ng-html2js'] 
    }, 

    ngHtml2JsPreprocessor: { 
     moduleName: 'templates' 
    } 
... (more default stuff omitted) 
} 

とmySpec.js：

describe('directive', function() { 
    'use strict'; 

    beforeEach(module('myapp')); 
    beforeEach(module('templates')); 

    var elm, 
     scope; 

    beforeEach(inject(function ($rootScope, $compile) { 
     elm = angular.element(
     '<my-directive>' + 
     '</my-directive>'); 

     scope = $rootScope.$new(); 

     $compile(elm)(scope); 
     scope.$digest(); 
    })); 

    describe('Does something', function() { 
     console.log('test'); 
     expect(true).toBe(true); 
    }); 
}); 

Answer 1

私はそれを持っていると思います。ソリューションはkarma.conf.jsにありました：

ngHtml2JsPreprocessor: { 
    cacheIdFromPath: function (filepath) { 
     //The suggested filepath.strip would through an error 
     var cacheId = filepath.replace('main/resources/static/', ''); 
     return cacheId; 
    }, 
    moduleName: 'templates' 
} 

Answer 2

あなたbeforeEach機能であなたのディレクティブのあなたのHTMLテンプレートのモックのテンプレートを追加します。使用する$templateCache：

describe('directive', function() { 
    'use strict'; 

    beforeEach(module('myapp')); 
    beforeEach(module('templates')); 

    var elm, 
     scope; 

    beforeEach(inject(function ($rootScope, $compile, $templateCache) { 


     $templateCache.put('js/templates/my-template.template.html','HTML_OF_YOUR_DIRECTIVE'); 

     elm = angular.element(
     '<my-directive>' + 
     '</my-directive>'); 

     scope = $rootScope.$new(); 

     $compile(elm)(scope); 
     scope.$digest(); 
    })); 

    describe('Does something', function() { 
     console.log('test'); 
     expect(true).toBe(true); 
    }); 
});