コンポーネントを外部テンプレート（angularjs = 1.5）でテストする

Question

外部テンプレートを使用してコンポーネントをテストしたいと思います。しかし、コンポーネント内の要素を見つけようとするたびに、何の結果も得られません。あたかもコンポーネントが空であるかのように見えます。

テンプレートをロードする方法に問題がありますか、またはコンポーネントを正しくコンパイルしていますか？

プロジェクト構造：

libs/ 
app/ 
    arc/ 
     app.component.js 
     app.module.js 
     feature1/ 
      A.component.js 
      A.component.spec.js 
      A.controller.js 
      A.html 
     feature2/ 
      B.component.js 
      B.component.spec.js 
      B.controller.js 
      B.html 

karma.conf.js

//jshint strict: false 
module.exports = function(config) { 
    config.set({ 
    basePath: './src/app', 
    frameworks: ['jasmine'], 
    files: [ 
     '../../libs/angular/angular.js', 
     '../../libs/angular-mocks/angular-mocks.js', 
     '../../libs/angular-ui-router/release/angular-ui-router.js', 
     '../../libs/angular-animate/angular-animate.js', 
     '../../libs/angular-resource/angular-resource.js', 
     '**/*.module.js', 
     '**/*.spec.js', 
     '**/*.html', 
    ], 

    preprocessors: { 
     '**/*.html': ['ng-html2js'], 
     '**/!(*.mock|*.spec).js': ['coverage'] 
    }, 

    ngHtml2JsPreprocessor: { 
     // strip this from the file path 
     ///stripPrefix: '', 
     cacheIdFromPath: function(filepath) { 
     let cacheId = filepath.split('/'); 
     return cacheId[ cacheId.length - 1 ]; 
     }, 
     // create a single module that contains templates from all the files 
     moduleName: 'templates' 
    }, 

    colors: true, 

    autoWatch: true, 

    browsers: ['Chrome'], 

    reporters: ["spec"], 

    specReporter: { 
     maxLogLines: 5,    // limit number of lines logged per test 
     suppressErrorSummary: true, // do not print error summary 
     suppressFailed: false,  // do not print information about failed tests 
     suppressPassed: false,  // do not print information about passed tests 
     suppressSkipped: true,  // do not print information about skipped tests 
     showSpecTiming: false,  // print the time elapsed for each spec 
     failFast: true    // test would finish with error when a first fail occurs. 
    } 

    }); 
}; 

A.html

<header> test </header> 

A.component.js

var AComponent = { 
    templateUrl: './A.html', 
    controller: 'AController', 
    bindings: { 
    } 
}; 

angular 
    .module('app') 
    .component('feature1', AComponent); 

A.component.spec.js

'use strict'; 

describe('Component: AComponent', function() { 
    beforeEach(module('app')); 
    beforeEach(module('templates')); 

    var element; 
    var component; 
    var scope; 
    beforeEach(inject(function($rootScope, $compile){ 
    scope = $rootScope.$new(); 
    element = angular.element('<feature1> </feature1>'); 
    scope.$apply(function(){ 
     $compile(element)(scope); 
    }); 
    })); 

    it('should contain header element', function() { 
    console.log(element.find('header').length) 
    }); 

}); 

Answer 1

[OK]を私は、私は一時的な解決策を持っているかもしれないと思います。

実際には、$templateCacheをチェックすることで、テンプレートが正しく読み込まれているのがわかります。しかし、彼らはコンパイルプロセスの一環として取り上げられていません。したがって、それを機能させるために、$compile()メソッドのテンプレートを明示的に設定する必要がありました。

ここでの主な問題は、テンプレート名が変更されたときに、スペックファイルも更新する必要があることです。

'use strict'; 

describe('Component: AComponent', function() { 
    beforeEach(module('app')); 
    beforeEach(module('templates')); 

    var element; 
    var scope; 
    beforeEach(inject(function($rootScope, $compile, $templateCache){ 
    scope = $rootScope.$new(); 
    let template = $templateCache.get('A.html'); 
    element = angular.element('<feature1>'+template+'</feature1>'); 
    scope.$apply(function(){ 
     $compile(element)(scope); 
    }); 
    })); 

    it('should contain header element', function() { 
    var header = angular.element(element[0].querySelector('header')); 
    expect(header.length).not.toBe(0); 
    }); 

}); 

Answer 2

としては@StanislavKvitashが指摘、templateUrl成分で定義されるように正確に同じでなければなりません。私の場合、先頭の './'は、コンポーネントをコンパイルする際にテンプレートを解決できなかったことを引き起こしていました。

これを修正するために、私はcacheIdFromPathメソッドのすべての結果に欠落した './'を追加しました。

ngHtml2JsPreprocessor: { 
    cacheIdFromPath: function(htmlPath) { 
     let cacheId = htmlPath.split('/'); 
     return './'+cacheId[ cacheId.length - 1 ]; 
    }, 
    // create a single module that contains templates from all the files 
    moduleName: 'templates' 
},