Jak przetestować dyrektywy korzystające z templateUrl i kontrolerów?

Question

EDYCJA: po zadaniu pytania, teraz edytuję to w celu opracowania moich ustaleń.

Moja aplikacja jest modularyzowana za pomocą dyrektyw. Piszę moje dyrektywy w taki sposób, że (1) tworzą swój własny zakres (2) używają templateUrl i (3) wykonują większość logiki i danych serwera pobierając w swoim kontrolerze.

Pytanie brzmi, jak sprawdzić to urządzenie, używając Mocha z karmą.

Answer 1

test jest napisany dla każdej dyrektywy. Ponieważ dyrektywa używa templateUrl, użyłem html2js. klucz html powinien zostać dołączony jako moduł - który umieści szablon w szablonCache.

Następnie skompilowałem dyrektywę i uruchomiłem funkcję łączenia z rootScope. Miałem problemy z uzyskaniem szablonu html - rozwiązanego przy użyciu $ digest. Miałem problemy z powiązaniem danych, rozwiązane przez zrozumienie. Wszystko to udokumentowałem poniżej.

kod poniżej

dyrektywa:

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