角1.5カルマジャスミンでのコンポーネントテンプレートユニットテスト

Question

カルマジャスミンでアンギュラコンポーネントとテンプレートをユニットテストしようとしています。私はng-html2jsを使用しています。テストコンポーネントコントローラは達成されましたが、テンプレートではありません。 私はthis Git Repositoryを参照しています。カルマconfファイルは上記のrepoと同じものです。

フォルダ構造

| .editorconfig 
| .jshintrc 
| gulpfile.js 
| index.html 
| karma.conf.js 
| package.json 
| 
+---app 
| | app-constants.js 
| | app-routes.js 
| | app.js 
| | 
| +---components 
| | | about-component.js 
| | | footer-component.js 
| | | header-component.js 
| | | home-component.js 
| | | 
| | \---shared 
| +---services 
| |  endpoint-service.js 
| |  
| \---templates 
|   about-template.html 
|   footer-template.html 
|   header-template.html 
|   home-template.html 
|   
\---tests 
    | app.spec.js 
    | 
    +---components 
    |  endpoint-service.mock.js 
    |  footer-component.spec.js 
    |  header-component.spec.js 
    |  home-component.spec.js 
    |  
    +---services 
    |  endpoint-services.spec.js 
    |  
    \---templates 
      home-template.spec.js 

コンポーネント

angular.module("app").component('headerComponent', { 
    templateUrl: 'app/templates/header-template.html' 
}); 

テンプレート

<header> 
    <nav class="navbar navbar-inverse"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#!/">Header Text</a> 
      </div>    
     </div> 
    </nav> 
</header> 

は、コンソールのスペック

'use strict'; 
describe('Component: headerComponent', function() { 
    beforeEach(module('errorlogger')); 
    beforeEach(module('templates')); 
    var element; 
    var scope; 
    beforeEach(inject(function ($rootScope, $compile) {   
     scope = $rootScope.$new();   
     element = angular.element('<header-component></header-component>');   
     scope.$apply(function() { 
      $compile(element)(scope); 
     });   
    })); 

    it('should render the header text', function() { 
     var title = element.find('a')[0]; 
     expect(title).toBeTruthy(); 
     expect(title.text()).toBe('Header Text'); 
    }); 
}); 

エラー（私が報告するためのカルマスペックを使用しています）

Component: headerComponent 
    × should render the title text (1160ms) 
     Error: [$compile:tpload] Failed to load template: app/templates/header-template.html (HTTP status: undefined undefined) 
     http://errors.angularjs.org/1.6.4/$compile/tpload?p0=app%2Ftemplates%2Fheader-template.html&p1=undefined&p2=undefined 
      at node_modules/angular/angular.js:66:12 
      at handleError (node_modules/angular/angular.js:19992:20) 
      at processQueue (node_modules/angular/angular.js:16832:37) 
      at node_modules/angular/angular.js:16876:27 
      at Scope.$digest (node_modules/angular/angular.js:17971:15) 
      at ChildScope.$apply (node_modules/angular/angular.js:18269:24) 
      at Object.<anonymous> (tests/components/header-component.spec.js:16:9) 
      at Object.invoke (node_modules/angular/angular.js:5003:19) 
      at Object.WorkFn (node_modules/angular-mocks/angular-mocks.js:3173:20) 
     Error: Declaration Location 
      at window.inject.angular.mock.inject (node_modules/angular-mocks/angular-mocks.js:3136:25) 
      at Suite.<anonymous> (tests/components/header-component.spec.js:7:13) 
      at tests/components/header-component.spec.js:2:1 

karma.confファイル

files: [ 
     'node_modules/jquery/dist/jquery.js', 
     'node_modules/angular/angular.js', 
     'node_modules/angular-ui-router/release/angular-ui-router.js', 
     'node_modules/angular-mocks/angular-mocks.js', 
     'app/app.js', 
     'app/services/*.js', 
     'app/components/*.js', 
     'app/**/*.js', 
     'app/templates/*.html', 
     'tests/app.spec.js', 
     'tests/components/header-component.spec.js'   
     //'tests/components/*.spec.js' 
     //'tests/**/*.js' 
], 
preprocessors: { 
    'app/templates/*.html': 'ng-html2js', 
    'app/**/!(*.mock|*.spec).js': ['coverage'] 
}, 

ngHtml2JsPreprocessor: { 
    // strip this from the file path 
    stripPrefix: 'app/', 
    // create a single module that contains templates from all the files 
    moduleName: 'templates' 
}, 

私はここで何も足りませんか？また

'use strict'; 
describe('Component: headerComponent', function() { 
    // beforeEach(module('errorlogger')); // <-- Is this needed? 
    beforeEach(module('app')); // <-- Add this 
    beforeEach(module('templates')); 
    var element; 
    var scope; 
    beforeEach(inject(function ($rootScope, $compile) {   
     scope = $rootScope.$new();   
     element = angular.element('<header-component></header-component>');   
     scope.$apply(function() { 
      $compile(element)(scope); 
     });   
    })); 

    it('should render the header text', function() { 
     //var title = element.find('a')[0]; // <-- Chnage this 
     var title = element.find('a'); // <-- To this 
     expect(title.text()).toBe('Header Text'); 
    }); 
}); 

は、にごkarma.confファイルを変更します：（ファイルのセクションを変更するには、すべてのjsファイルを含めることができますあなたの場合のように）あなたのspecファイルのモジュール参照を逃しているよう

Answer 1

に見えます

files: [ 
     'node_modules/jquery/dist/jquery.js', 
     'node_modules/angular/angular.js', 
     'node_modules/angular-ui-router/release/angular-ui-router.js', 
     'node_modules/angular-mocks/angular-mocks.js', 
     'app/**/*.js', 
     'app/**/*.html', 
     'tests/**/*.spec.js', 
], 
preprocessors: { 
    'app/templates/*.html': 'ng-html2js', 
    'app/**/!(*.mock|*.spec).js': ['coverage'] 
}, 

ngHtml2JsPreprocessor: { 
    // strip this from the file path 
    //stripPrefix: 'app/', // <-- Not needed in your case. 
    // create a single module that contains templates from all the files 
    moduleName: 'templates' 
}