Testen von Direktiven, die TemplateUrl und Controller verwenden?

Question

EDIT: Nachdem ich die Frage gestellt habe, bearbeite ich das nun, um meine Ergebnisse zu erläutern.

Meine App ist mit Direktiven modularisiert. Ich schreibe meine Direktiven so, dass sie (1) ihren eigenen Bereich erstellen (2) templateUrl verwenden und (3) den Großteil der Logik- und Serverdaten in ihrem Controller abrufen.

Die Frage ist, wie man es mit Mocha mit Karma testen kann.

Answer 1

ein Test wird für jede Direktive geschrieben. Da die Direktive templateUrl verwendet, habe ich html2js verwendet. Der html-Schlüssel sollte als Modul enthalten sein - das legt die Vorlage in den templateCache.

Dann kompilierte ich die Richtlinie und führen Sie die Link-Funktion mit RootScope. Ich hatte Probleme mit der Vorlage HTML - gelöst mit $ Digest. Hatte Datenbindungsprobleme, die durch Verständnis gelöst wurden. Alles dokumentiert es unten. unter

Code,

Richtlinie:

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