Come testare le direttive che utilizzano templateUrl e controller?

Question

EDIT: dopo aver fatto la domanda, ora sto modificando questo per approfondire le mie scoperte.

La mia app è modulare utilizzando le direttive. Sto scrivendo le mie direttive in modo tale che esse (1) creino il proprio ambito (2) usano templateUrl e (3) eseguano la maggior parte dei recuperi di dati logici e server nel loro controller.

La domanda è come testare l'unità, usando Mocha con Karma.

Answer 1

un test è scritto per ogni direttiva. Dal momento che la direttiva utilizza templateUrl, ho usato html2js. la chiave html deve essere inclusa come modulo - che inserisce il modello nel templateCache.

Quindi, ho compilato la direttiva ed eseguito la funzione di collegamento con rootScope. Ho avuto problemi con il template html - risolto usando $ digest. Aveva problemi di associazione dei dati, risolti attraverso la comprensione. Tutto lo ha documentato qui sotto.

codice qui sotto,

direttiva:

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 
    }); 
});