javascript - 使用 Promise 进行 Angular 服务的 Jasmine Mock

Question

我有以下 Angular 服务和模拟/测试设置。我无法让模拟 http 请求正常工作。我正在从工厂返回一个 promise ，并模拟 HTTP 请求，但 Controller 范围内的数据不是从工厂调用的 http 服务返回的数据。

如您所见，我在 $rootScope 和 $httpBackend 上调用了 $digest()。我很茫然。

您可以从 fiddle 中看到代码工作正常并显示来自服务的文本，但模拟不起作用。

为什么？

fiddle 在这里:https://jsfiddle.net/mbaranski/gnxxbgy3/ 这是代码:

var myApp = angular.module('myApp', []);
var ep = '/echo/json/';
myApp.factory('dataFactory', function($http) {
  var getData = function() {
    var data = $.param({
      json: JSON.stringify({
        name: "Name from Echo Service"
      })
    });
    return $http.post(ep, data);
  }

  return {
    getData: getData
  }
});

myApp.controller('MyCtrl', function($scope, dataFactory) {
  $scope.name = 'Original Name';
  dataFactory.getData().then(function(data) {
    $scope.name = data.data.name;
  });
});

describe('Test For Site', function() {
  beforeEach(angular.mock.module('myApp'));
  var $controller;
  var $httpBackend;
  var $q;
  var $rootScope;
  beforeEach(angular.mock.inject(function(_$controller_, _$httpBackend_, _$q_, _$rootScope_) {
    $controller = _$controller_;
    $httpBackend = _$httpBackend_;
    $q = _$q_;
    $rootScope = _$rootScope_;
  }));

  describe('test pageController', function() {
    it('Should pass', function() {
      var scope = {};
      $httpBackend.expect('POST', ep);
      $httpBackend.whenPOST(ep, function(str) {
        return true;
      }).respond(
        function() {
          return {
            name: "Name from Echo Service"
          };
        });
      var controller = $controller('MyCtrl', {
        $scope: scope,
      });
      $httpBackend.flush();
      $rootScope.$digest();
      $rootScope.$flush();

      expect(scope.name).toBe('Name from Echo Service');
    });
  });
});

这是 HTML

<div ng-controller="MyCtrl">
  Hello, {{name}}!
</div>
<br/>

Answer 1

我确实是一个很小的问题，花了很多时间才找到它。 .whenPOST的$httpBackend应该只返回 object/string &你正在返回一个从 .respond 返回的函数的..whenPOST方法。

只需返回纯 JSON，而不是返回 function解决了问题。

代码

$httpBackend.whenPOST(ep, function(str) {
    return true;
}).respond({
    name: "Name from Echo Service"
});

同时删除 $rootScope.$flush();这条线。 $rootScope没有$flush其中的方法。

Forked JSFiddle