如何测试使用 templateUrl 和控制器的指令? [英] How to test directives that use templateUrl and controllers?

问题描述

提出问题后，我现在正在编辑它以详细说明我的发现.

after asking the question, i'm now editing this to elaborate on my findings.

我的应用程序使用指令进行模块化.我正在编写指令，以便它们 (1) 创建自己的作用域 (2) 使用 templateUrl，以及 (3) 在其控制器中执行大部分逻辑和服务器数据获取.

My app is modularized using directives. I'm writing my directives such that they (1) create their own scope (2) use templateUrl, and (3) do most of the logic and server data fetching in their controller.

问题是如何使用 Mocha 和 Karma 对其进行单元测试.

The question is how to unit test it, using Mocha with Karma.

推荐答案

为每个指令编写了一个测试.由于该指令使用了 templateUrl，因此我使用了 html2js.html 键应该作为一个模块包含 - 将模板放入模板缓存中.

a test is written for each directive. Since the directive uses templateUrl, I used html2js. the html key should be included as a module - that puts the template into the templateCache.

然后，我编译了指令，并使用 rootScope 运行链接函数.我在获取模板 html 时遇到问题 - 使用 $digest 解决.有数据绑定问题，通过理解解决.全部记录在下面.

Then, I compiled the directive, and run the link function with rootScope. I had issues with getting the template html - solved using $digest. Had data binding issues, solved through understanding. All documented it below.

代码如下，

指令:

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

这篇关于如何测试使用 templateUrl 和控制器的指令?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！