如何测试从 $http 异步加载 JSON 的 Angular 服务答案

【问题标题】：How to test an angular service that asynchronously loads JSON from $http如何测试从 $http 异步加载 JSON 的 Angular 服务
【发布时间】：2016-04-08 19:03:52
【问题描述】：

对于角度单元测试来说还是比较新的。我在模块“示例”中有一个服务，它通过 $http 服务加载本地 JSON 文件并异步返回响应数据。

我发现我需要测试（使用 Jasmine）

http GET 连接本地资源
http 服务加载 JSON 并获取正确的 json 内容
服务履行了返回响应数据的承诺

我的服务代码

  /**
   * Service to load JSON data.
   */
  .service('jsonLoader', ['$http','$timeout', 'TABLE_DATA_LOC', function($http, $timeout, TABLE_DATA_LOC) {
    this.load = function() {
      return $timeout(function() {
        return $http.get(TABLE_DATA_LOC).then(function(response) {
          return response.data;
        });
      }, 30);
    };

我目前的测试：

describe('jsonLoader service', function() {

  var jsonLoader, httpBackend;

  beforeEach(module("example"));

  beforeEach(inject(function(_jsonLoader_, $httpBackend) {
    jsonLoader = _jsonLoader_;
    httpBackend = $httpBackend;
  }));

  it("should load json", function() {
    httpBackend.whenGET('./mock/sample.json').respond({
        "people": [
          {
            "person": {
              "firstName": "jim",
              "lastName": "bob"
            }
          }
        ]
      });
  });
});

第一部分是对的，我将如何使用 jasmine 来测试异步承诺？

【问题讨论】：

我唯一能看到要测试的是jsonLoader.load 调用$timeout 并带有一个回调，当执行时，调用$http.get 和TABLE_DATA_LOC。您可以选择测试 promise 是否返回 response.data

标签： angularjs jasmine

【解决方案1】：

根据我的评论，这是我的处理方法。

describe('jsonLoader service', function() {
    var uri;

    beforeEach(module('example', function($provide) {
        $provide.constant('TABLE_DATA_LOC', uri = 'mock/sample.json');
    }));

    it('should load JSON in a $timeout and return the response data', inject(function($httpBackend, $timeout, jsonLoader) {
        var responseData = 'whatever', resolved = false;

        $httpBackend.expectGET(uri).respond(responseData);

        jsonLoader.load().then(function(data) {
            expect(data).toBe(responseData);
            resolved = true;
        });

        $timeout.flush();
        $timeout.verifyNoPendingTasks();

        expect(resolved).toBeFalsy();

        $httpBackend.flush();
        $httpBackend.verifyNoOutstandingRequest();

        expect(resolved).toBeTruthy();
    }));
});

Plunker 演示~http://plnkr.co/edit/jmc9FWjbOkpmT6Lu8kVn?p=preview

【讨论】：