Jasmine 使用 Promise 模拟 Angular 服务答案

【问题标题】：Jasmine Mock for Angular service using promiseJasmine 使用 Promise 模拟 Angular 服务
【发布时间】：2016-03-24 11:04:39
【问题描述】：

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

如您所见，我已在$rootScope 和$httpBackend 上致电$digest()。我很茫然。

你可以从 fiddle 中看到代码可以正常工作并显示来自服务的文本，但是 mock 不工作。

为什么？

小提琴在这里：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/>

【问题讨论】：

标签： javascript angularjs unit-testing jasmine

【解决方案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

【讨论】：