tester des composants avec un gabarit externe (angularjs> = 1,5)

Question

Je voudrais tester un composant avec un gabarit externe. Mais chaque fois que j'essaie de trouver un élément dans un composant, je n'obtiens aucun résultat. Il semble que le composant était vide.

Y at-il quelque chose qui ne va pas dans la façon dont je charge les modèles ou compile-t-on correctement le composant?

structure du projet:

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 je pense que je peux avoir une solution temporaire. Le fait est que je peux voir tous les modèles sont chargés correctement en vérifiant le $templateCache. Cependant, ils ne sont pas repris dans le cadre du processus de compilation. Donc, pour le faire fonctionner, j'ai dû définir explicitement le modèle pour la méthode $compile().

Le problème principal ici est que lorsque le nom du modèle change, je vais devoir mettre à jour les fichiers spec aussi.

'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

Comme indiqué par @StanislavKvitash, le templateUrl doit être exactement le même que défini dans le composant. Dans mon cas, le './' principal provoquait que le modèle ne puisse pas être résolu lors de la compilation du composant.

Pour résoudre ce problème, je viens d'ajouter le './' manquant à tous les résultats dans la méthode 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' 
},