Javascript 使用templateUrl的故障单元测试指令

我在使用

templateUrl

的单元测试指令时遇到问题

有一个关于AngularJS测试的非常棒的教程[1]，它甚至有一个Github repo与之配套[2]

因此，我对其进行了分叉[3]，并做了以下更改：

在

directives.js

上，我创建了两个新指令：

.directive('helloWorld', function() {
    return {
      restrict: 'E',
      replace: true,
      scope:{},
      template: '<div>hello world!</div>',
      controller: ['$scope', function ($scope) {}]
    }
})

.directive('helloWorld2', function() {
    return {
      restrict: 'E',
      replace: true,
      scope:{},
      templateUrl: 'mytemplate.html',
      controller: ['$scope', function ($scope) {}]
    }
})

//
// test/unit/directives/directivesSpec.js
//
describe("Unit: Testing Directives", function() {

  var $compile, $rootScope, $templateCache;

  beforeEach(angular.mock.module('App'));

  beforeEach(inject(
    ['$compile','$rootScope', '$templateCache', function($c, $r, $tc) {
      $compile = $c;
      $rootScope = $r;

      //Added $templateCache and mytemplate
      $templateCache = $tc;
      $templateCache.put('mytemplate.html', '<div>hello world 2!</div>');
    }]
  ));

  //This was already here
  it("should display the welcome text properly", function() {
    var element = $compile('<div data-app-welcome>User</div>')($rootScope);
    expect(element.html()).to.match(/Welcome/i);
  });


  //Added this test - it passes
  it("should render inline templates", function() {
    var element = $compile('<hello-world></hello-world>')($rootScope);
    expect(element.text()).equal("hello world!");
  });

  //Added this test - it fails
  it("should render cached templates", function() {
    var element = $compile('<hello-world2></hello-world2>')($rootScope);
    expect(element.text()).equal("hello world 2!");
  });

});

最后一个测试失败，因为Angular不会像应该的那样编译模板

$ grunt test:unit
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 35.0.1916 (Linux)]: Connected on socket ChISVr0ZABZ1fusdyv3m
Chrome 35.0.1916 (Linux) Unit: Testing Directives should render cached templates FAILED
    expected '' to equal 'hello world 2!'
    AssertionError: expected '' to equal 'hello world 2!'
Chrome 35.0.1916 (Linux): Executed 18 of 18 (1 FAILED) (0.441 secs / 0.116 secs)
Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

我很确定这应该是可行的。 至少，它与[4]上@SleepyMurth提出的解决方案非常相似

但是我觉得我已经到了理解AngularJS的极限

救命！：-）

[1]

[2]

[3]

[4]

问题 指定

templateUrl

时，使用

$http

获取模板（甚至对于缓存的模板，

$http

从

$templateCache

提供服务）。因此，

$http

的承诺需要有一个$digest循环，才能用模板内容解决，并由指令处理

---

解决方案 由于承诺在$digest循环中得到解析（并且由于我们处于“角度上下文”之外），因此在评估断言之前，我们需要手动调用

$rootScope.$digest（）

。
因此，最后一个测试应修改如下：

it("should render cached templates", function() {
    var element = $compile('<hello-world2></hello-world2>')($rootScope);
    $rootScope.$digest();   // <-- manually force a $digest cycle
    expect(element.text()).toBe(tmplText);
});

it（“应该呈现缓存的模板”，函数（）{
var元素=$compile（“”）（$rootScope）；
$rootScope.$digest（）；//那么，
element.text（）
返回了什么？对不起，我会更新这个问题，让它包括（这是一个空字符串）我爱这个网站！请向上投票，先生。非常感谢！我只想回到这里，重申我对这个答案的速度和质量印象深刻。天哪！：-）我已经设置了templateCache，编译了我的元素，消化了它编译到的范围，但是指令元素没有被模板替换。=（我没有得到错误，只是在单元测试期间它没有编译。@FlavorScape：用相关的代码和（如果可能的话）发布一个问题）一个可复制的小提琴或plunkr。我可以制作一个plunkr，但我的相关代码几乎相同。除非它包含一个ng重复…只有一个注释掉的