Comment tester les directives qui utilisent templateUrl et les contrôleurs ?

Question

EDIT : après avoir posé la question, je modifie maintenant ce texte pour développer mes conclusions.

Mon application est modularisée à l'aide de directives. J'écris mes directives de manière à ce qu'elles (1) créent leur propre portée (2) utilisent templateUrl, et (3) fassent la plupart de la logique et de la recherche de données sur le serveur dans leur contrôleur.

La question est de savoir comment le tester de manière unitaire, en utilisant Mocha avec Karma.

Answer 1

Un test est rédigé pour chaque directive. Comme la directive utilise templateUrl, j'ai utilisé html2js. La clé html devrait être incluse comme un module - ce qui place le modèle dans le templateCache.

Ensuite, j'ai compilé la directive et j'ai exécuté la fonction link avec rootScope. J'ai eu des problèmes pour obtenir le modèle html - résolu en utilisant $digest. J'ai eu des problèmes de liaison de données, résolus grâce à la compréhension. Tout est documenté ci-dessous.

ci-dessous,

Directive :

 angular.module('myApp')
 .directive('productThumb', function(){
    return {
     restrict: 'AE',
     scope: true,
     templateUrl: 'partials/directives/product-thumb.html',
     // controller does most of the work
     controller: ProductThumbController 

   }
}) ;

describe("Unit: Testing Directives", function() {
var elm, scope, linkFn;
beforeEach(
  module('ogApp','partials/directives/product-thumb.html') // puts product-thumb.html 
                                                          // into templateCache
);

beforeEach(inject(function($rootScope, $compile) {
    elm = angular.element('<product-thumb></product-thumb>');
    scope = $rootScope;
    linkFn = $compile(elm);
    scope.$digest(); // have to digest to bring html from templateCache
    console.log('post compile',elm.html());// <== the html here still have {{}}
}));

it('should show a thumb',function() {
    inject(function($controller)  {
        linkFn(scope); // <== this will create a new scope (since our directive creates 
                       // new scope), runs the controller with it, and bind 
                       // the element to that new scope
        scope.$digest();
        console.log('post link',elm.html());// <== the html is bound 

        // inject test data (controller sets up an $on handler for addProductData event)
        scope.$broadcast('addProductData',{title:"TEST DISPLAY NAME", 
                                          productId: "123", mainImageUrl: "TEST.JPG"});
        scope.$digest();
        expect(elm.find('H5').text()).to.equal("TEST DISPLAY NAME"); // <=== success 
    });
});