使用$ httpBackend用Jasmine / Karma测试AngularJS不起作用

Question

我正在尝试通过Karma对基于Jasmine的Angular构建的应用进行单元测试。 该应用程序涉及到对GitHub API的调用，并提取用户所有存储库的名称，并使用这些名称填充数组。 我正在尝试测试数组是否已满，但$ httpBackend遇到了一些问题。

我的控制器的相关部分是：

readmeSearch.controller('ReadMeSearchController', ['RepoSearch', function(RepoSearch) {

  var self = this;
  self.gitRepoNames = [];

  self.doSearch = function() {
    var namesPromise =
      RepoSearch.query(self.username)
        .then(function(repoResponse) {
          addRepoNames(repoResponse);
        }).catch(function(error) {
          console.log('error: ' + error);
        });
    return namesPromise;
  };

  addRepoNames = function(response) {
    self.repoSearchResult = response.data;
    for(var i = 0; i < self.repoSearchResult.length; i++) {
      var name = self.repoSearchResult[i]['name']
      self.gitRepoNames.push(name);
    };
  };

}]);

我的RepoSearch工厂是：

readmeSearch.factory('RepoSearch', ['$http', function($http) {

  return {
    query: function(searchTerm) {
      return $http({
        url: 'https://api.github.com/users/' + searchTerm + '/repos',
        method: 'GET',
        params: {
          'access_token': gitAccessToken
        }
      });
    }
  };

}]);

有问题的测试是这样的：

describe('ReadMeSearchController', function() {
  beforeEach(module('ReadMeter'));

  var ctrl;

  beforeEach(inject(function($controller) {
    ctrl = $controller('ReadMeSearchController');
  }));

  describe('when searching for a user\'s repos', function() {

    var httpBackend;

    beforeEach(inject(function($httpBackend) {
      httpBackend = $httpBackend
      httpBackend
        .expectGET('https://api.github.com/users/hello/repos?access_token=' + gitAccessToken)
        .respond(
        { data: items }
      );
    }));

    afterEach(function() {
      httpBackend.verifyNoOutstandingExpectation();
      httpBackend.verifyNoOutstandingRequest();
    });

    var items = [
      {
        "name": "test1"
      },
      {
        "name": "test2"
      }
    ];

    it('adds search results to array of repo names', function() {
      ctrl.username = 'hello';
      ctrl.doSearch();
      httpBackend.flush();
      expect(ctrl.gitRepoNames).toEqual(["test1", "test2"]);
    });

  });

});

运行测试时出现错误

预期[]等于['test1'，'test2']。

显然，这是因为self.gitRepoNames没有被填充。 当我在测试期望值之前控制台ctrl.repoSearchResult控制台时，我得到了

Object{data: [Object{name: ...}, Object{name: ...}]}

这是我感觉到的问题所在，因为在addRepoNames函数的for循环中调用self.repoSearchResult.length时，它将不确定。

所以我的问题是，为什么在测试的addRepoNames函数中调用response.data时不返回数组？

任何帮助将不胜感激。

编辑：我应该提到，该应用程序在服务器上运行时工作正常。

Answer 1

ctrl.doSearch是一个异步函数。 您应该以异步方式处理它。 尝试：

it('adds search results to array of repo names', function(done) {
  ctrl.username = 'hello';
  ctrl.doSearch().then(function() {
    expect(ctrl.gitRepoNames).toEqual(["test1", "test2"]);
    done();
  });
  httpBackend.flush();      
});