Как проверить директивы, использующие templateUrl и контроллеры?

Question

EDIT: после того, как я задал вопрос, теперь я редактирую это, чтобы подробно остановиться на моих выводах.

Мое приложение modularized using директивы. Я пишу свои директивы таким образом, что они (1) создают свою собственную область (2), используя templateUrl, и (3) выполняют большую часть логических и серверных данных, получаемых в своем контроллере.

Вопрос в том, как выполнить его тестирование, используя Mocha с кармой.

Answer 1

тест написан для каждой директивы. Поскольку директива использует templateUrl, я использовал html2js. ключ html должен быть включен как модуль, который помещает шаблон в шаблонCache.

Затем я скомпилировал директиву и запустил функцию ссылки с помощью rootScope. У меня возникли проблемы с получением шаблона html - с помощью $ digest. Имели проблемы с привязкой данных, которые были решены путем понимания. Все это описано ниже.

код ниже,

Директива:

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