angularjs – 如何测试使用templateUrl和控制器的指令？

然后,我编译了该指令,并使用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 
    });
});