你如何测试有延迟的角度承诺？

Question

如何使用模拟的 Angular 和经过一段时间解决的 Promise 运行测试？

更简单地说：下面的测试永远不会运行

var injector = angular.injector(['ngMock']);
var scope = injector.get('$rootScope').$new();
var q = injector.get('$q');

var promise = function() {
  return q(function(resolve, reject) {
    setTimeout(function() {
      resolve();
    }, 500);
  });
};

promise()
  .then(function() {
    document.getElementById('result').innerHTML = 'TEST RUN';
  });

//resolve the promises
scope.$digest();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-mocks.js"></script>
<p id="result">starting test...</p>

Answer 1

好的，我知道了。

解决方案其实是@mido22提出的，不过我更喜欢稍微不同的版本，可以从$scope和inprog的文档中推导出来。

根据angular documentation，当您使用异步函数时，您需要调用$apply()，如明确表示的setTimeout。 Here解释比较好：

作为对来自 DOM 或 3rd 方库的某个外部事件的回调而直接触发的代码，应该期望它永远不会从 Angular 内部调用，因此它调用的任何 Angular 应用程序代码都应该首先被包装在对 $apply 的调用中。”

因此解决方案是将所有会影响 Angular 的调用（包括 resolve() 和 reject()）包装到 $apply 中。

为避免 inprog 错误，不得在另一个内部调用 $apply()。在这个例子中不是这样，但是，假设我们有另一个嵌套的 setTimeout，只有最后一个被调用的应该调用 $apply()。

更新：

根据this，避免inprog 错误的最佳方法是将非角度代码包装在$timeout() 中。这是有角的人推荐的策略。

var injector = angular.injector(['ngMock']);
var scope = injector.get('$rootScope').$new();
var q = injector.get('$q');

var promise = function() {
  return q(function(resolve, reject) {
    setTimeout(function() {
      scope.$apply(function() {
        resolve();
      });
    }, 500);
  });
};

promise()
  .then(function() {
    document.getElementById('result').innerHTML = 'TEST RUN';
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-mocks.js"></script>
<p id="result">starting test...</p>

Answer 2

显然，$q 与 $rootScope.Scope Scope 模型观察机制以角度方式集成，这意味着可以更快地将分辨率或拒绝传播到您的模型中，并避免不必要的浏览器重绘，这会导致 UI 闪烁。 （有关更多详细信息，请检查 docs 中 Q 和 $q 之间的差异）。我刚刚将 scope.$apply() 添加到您的 sn-p 中：

var injector = angular.injector(['ngMock']);
var scope = injector.get('$rootScope').$new();
var q = injector.get('$q');

var promise = function() {
  return q(function(resolve, reject) {
    setTimeout(function() {
      resolve();
      scope.$apply();
    }, 500);
  });
};

promise()
  .then(function() {
    document.getElementById('result').innerHTML = 'TEST RUN';
  });

//resolve the promises
scope.$digest();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-mocks.js"></script>
<p id="result">starting test...</p>

Answer 3

所以你不应该将setTimeout 函数与angular 一起使用，而是可以使用angular 提供的$timeout 服务。在单元测试中，诸如超时之类的事情将无法像在页面中那样有效地计算和控制。为了解决超时问题，您可以使用$timeout.flush()，而是这样做：

var injector = angular.injector(['ngMock']);
var scope = injector.get('$rootScope').$new();
var q = injector.get('$q');
var timeout = injector.get('$timeout');

var promise = function() {
  return q(function(resolve, reject) {
    timeout(function() {
      resolve();
      scope.$apply();
    }, 500);
  });
};

promise()
  .then(function() {
    document.getElementById('result').innerHTML = 'TEST RUN';
  });

//resolve the promises
timeout.flush();
scope.$digest();