angularjs - 如何测试在具有 promise 的 Controller 中保存资源

Question

我有一个保存资源的 Controller 。我不知道如何“访问” promise 解决后执行的代码部分。我需要对我的测试或 Controller 进行哪些更改才能使其正常工作？这是代码。

Controller :

'use strict';

/**
 * @ngdoc function
 * @name lunchHubApp.controller:AnnouncementsCtrl
 * @description
 * # AnnouncementsCtrl
 * Controller of the lunchHubApp
 */
angular.module('lunchHubApp')
  .controller('AnnouncementsCtrl', ['$scope', 'Announcement', function ($scope, Announcement) {
    $scope.announcements = [];

    $scope.save = function() {

      // This next line is the part I'm finding hard to test.
      new Announcement($scope.announcement).create().then(function(announcement) {
        $scope.foo = 'bar'
      });
    };
  }]);

测试:

'use strict';

describe('AnnouncementsCtrl', function() {
  beforeEach(function() {
    module('lunchHubApp', 'ng-token-auth')
  });

  it('sets scope.announcements to an empty array', inject(function($controller, $rootScope) {
    var scope = $rootScope.$new(),
        ctrl = $controller('AnnouncementsCtrl', { $scope: scope });

    expect(scope.announcements).toEqual([]);
  }));

  describe('save', function() {
    it('works', inject(function($controller, $rootScope, _$httpBackend_) {
      var $httpBackend = _$httpBackend_;
      var scope = $rootScope.$new(),
          ctrl = $controller('AnnouncementsCtrl', { $scope: scope });

      expect(scope.announcements.length).toBe(0);

      var announcement = {
        restaurantName: 'Bangkok Taste',
        userId: 1
      };
      scope.announcement = announcement;

      $httpBackend.expect('POST', '/api/announcements').respond(200, announcement);
      scope.save();
      scope.$digest();

      expect(scope.foo).toEqual('bar');
    }));
  });
});

更新:这是我最终修改 Controller 测试的方式。以下内容通过并已根据原始内容进行了重构。

'use strict';

describe('AnnouncementsCtrl', function() {
  var $httpBackend,
      announcement,
      scope,
      ctrl;

  beforeEach(function() {
    module('lunchHubApp');

    inject(function($injector) {
      $httpBackend       = $injector.get('$httpBackend');
      scope              = $injector.get('$rootScope').$new();
      ctrl               = $injector.get('$controller')('AnnouncementsCtrl', { $scope: scope });
      announcement       = { restaurantName: 'Bangkok Taste' };
      scope.announcement = { restaurantName: 'Jason\'s Pizza' };

      $httpBackend.expect('GET', '/api/announcements').respond([announcement]);
    });
  });

  it('sets scope.announcements to an empty array', function() {
    expect(scope.announcements).toEqual([]);
  });

  it('grabs a list of announcements', function() {
    expect(scope.announcements.length).toBe(0);
    $httpBackend.flush();
    expect(scope.announcements.length).toBe(1);
  });

  describe('save', function() {
    beforeEach(function() {
      $httpBackend.expect('POST', '/api/announcements').respond(200, { restaurantName: 'Foo' });
      scope.save();
      $httpBackend.flush();
    });

    it('adds an announcement', function() {
      expect(scope.announcements.length).toBe(2);
    });

    it('clears the restaurant name', function() {
      expect(scope.announcement.restaurantName).toEqual('');
    });
  });
});

Answer 1

我觉得你做的很好。由于 Angular 资源 是使用 $http 的工厂服务以 Restful 方式，您应该使用 $httpBackend 的 expect就像你一样。

然而，您错过的一件事是您需要确保您的 promise 得到解决。但是在某些情况下编写异步测试可能会很棘手。为此，您必须使用 flush() $httpBackend 的方法强制您的测试同步。

flush 之后，你可以让你的expect 正常。此外，您可能必须将 expectPOST 移动到 $rootScope.$new() 语句之前。

您可以像这样进行更改，我认为 $digest() 不是必需的:

$httpBackend.expect('POST', '/api/announcements').respond(200, announcement);
scope.save();

$httpBackend.flush();
expect(scope.foo).toEqual('bar');