使用httpBackend测试指令的角度单位

Question

我目前遇到了一个问题，我无法获得指令在标签上运行。我是新来的单元测试和角度，所以请描述我做错了什么，或者我应该看看。

指令

.directive('documents', function(){ 
    return { 
     restrict: 'E', 
     templateUrl: '/abc/def/documents.html' 
    }; 
}) 

单元测试

beforeEach(module('myApp.home')); 
var $rootScope; 
beforeEach(inject(function (_$rootScope_) { 
    $rootScope = _$rootScope_; 
})); 

describe('Documents Directive', function(){ 
    var $compile; 
    beforeEach(inject(function (_$compile_, $httpBackend) { 
     $compile = _$compile_; 
     $httpBackend.when('GET', '/abc/def/documents.html').respond("What To Put here!"); 
    })); 

    it('Should call documents.html', function() { 
     var element = $compile("<documents>This should be hashed out</documents>")($rootScope); 
     console.log(element); 
     $rootScope.$digest(); 
     console.log(element); 
     console.log(element.html()); 
     expect(element.html()).toContain("Documents"); 
    }); 

}); 

documents.html

<h2>Documents</h2> 

运行测试时，这些都是我的结果：

INFO [watcher]: Changed file "C:/webroot/member_portal/app/home/home_test.js". 
LOG: Object{0: <documents class="ng-scope"></documents>, length: 1} 
LOG: Object{0: <documents class="ng-scope"></documents>, length: 1} 
LOG: '' 
Chrome 45.0.2454 (Windows 7 0.0.0) myApp.home module Documents Directive Should call documents.html FAILED 
    Expected '' to contain 'Documents'. 
     at Object.<anonymous> (C:/webroot/member_portal/app/home/home_test.js:265:36) 
Chrome 45.0.2454 (Windows 7 0.0.0): Executed 1 of 47 (1 FAILED) (skipped 46) ERROR (0.563 secs/0.01 secs) 

Answer 1

下面的代码按预期工作。您需要在致电$ httpBackend.flush（）后调用您的期望;对/abc/def/documents.html的调用是一个异步调用，因此直到调用flush（）之前它才被解析。

另一种解决方案是预先编译模板文件。这将消除使用$ httpBackend的需要。你可以找到文档here和搜索堆栈溢出大量的例子。

describe('', function(){ 

    beforeEach(module('myApp.home')); 
    var $rootScope; 
    beforeEach(inject(function (_$rootScope_) { 
     $rootScope = _$rootScope_; 
    })); 

    describe('Documents Directive', function(){ 
     var $compile, $httpBackend, expectedResults = '<h2>Documents</h2>'; 
     beforeEach(inject(function (_$compile_, _$httpBackend_) { 
      $compile = _$compile_; 
      $httpBackend = _$httpBackend_; 
      $httpBackend.expectGET('/abc/def/documents.html').respond(200, expectedResults); 
     })); 

     it('Should call documents.html', function() { 
      var $element = $compile("<documents>This should be hashed out</documents>")($rootScope); 
      $rootScope.$digest(); 
      $httpBackend.flush(); 
      expect($element.eq(0).html()).toEqual(expectedResults); 
     }); 

    }); 
});