angular 服务测试未能达到 return 要求的响应

Question

我正在尝试使用 jasmine 和 karma 为 angular 服务编写测试。我的服务调用有以下代码：

angular.module('omdb', [])
  .factory('myservice', MyService);
MyService.$inject = ['$http'];

function MyService($http) {
  var vm = this;
  var service = {};
  service.getData = function() {
    return $http.get('omdb/mydata.json').then(function(response) {
      return response.data;
    });
  };
  return service;
};

我正在使用以下规范文件对其进行测试：

describe('myservice', function() {
  var mockservicedata = [{
    "name": "value1",
    "id": "1"
  }, {
    "name": "value2",
    "id": "2"
  }, {
    "name": "value3",
    "id": "3"
  }];

  var myservice = {};
  beforeEach(module('omdb'));
  beforeEach(inject(function(_myservice_) {
    myservice = _myservice_;
  }));

  it('should return search myservice data', function() {
    expect(myservice.getData()).toEqual(mockservicedata);
  });
});

这基本上会引发错误：

Expected d({ $$state: Object({ status: 0 }) }) to equal [ Object({ name: 'value1', id: '1' }), Object({ name: 'value2', id: '2' }), Object({ name: 'value3', id: '3' }) ].

stack@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1482:17 
buildExpectationResult@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1452:14 
Env/expectationResultFactory@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:583:18       
Spec.prototype.addExpectationResult@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:324:29 addExpectationResult@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:533:16
Expectation.prototype.wrapCompare/<@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1406:7 
@http://localhost:59239/movie-app/spec/omdb/myservice.spec.js:14:9 
attemptSync@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1789:9 
QueueRunner.prototype.run@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1777:9 QueueRunner.prototype.execute@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1762:5 
Env/queueRunnerFactory@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:627:7 
Spec.prototype.execute@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:353:5 executeNode/<.fn@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:2360:32 attemptAsync@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1819:9 
QueueRunner.prototype.run@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1774:9 
QueueRunner.prototype.execute@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1762:5 
Env/queueRunnerFactory@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:627:7 
executeNode/<.fn@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:2345:13 attemptAsync@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1819:9 
QueueRunner.prototype.run@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1774:9 
QueueRunner.prototype.execute@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:1762:5 
Env/queueRunnerFactory@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:627:7 
TreeProcessor/this.execute@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:2209:7 
Env/this.execute@http://localhost:59239/movie-app/lib/jasmine-2.3.4/jasmine.js:678:7 
window.onload@http://localhost:59239/movie-app/lib/jasmine-2.3.4/boot.js:110:5

我不明白为什么它没有return数据来测试。请帮忙

Answer 1

调用 myservice.getData() 实际上不会为您提供您期望的数据。

由于 MyService 中的 getData 方法依赖于 $http 的 get 方法，因此您应该模拟它然后期望数据返回。

所以你的测试用例应该是这样的：

describe('myservice', function() {
  var mockservicedata = [{
    "name": "value1",
    "id": "1"
  }, {
    "name": "value2",
    "id": "2"
  }, {
    "name": "value3",
    "id": "3"
  }];

  var myservice = {};
  beforeEach(module('omdb'));
  beforeEach(inject(function(_myservice_, _$httpBackend_) {
    myservice = _myservice_;
    $httpBackend = _$httpBackend_;

    $httpBackend.when('GET', "omdb/mydata.json").respond({
      status: 200,
      data: mockservicedata
    });
  }));

  it('should return search myservice data', function() {
    var response = myservice.getData()
    response.then(function(response) {
      expect(response.data).toEqual(mockservicedata);
    });
    $httpBackend.flush();
  });
});

希望这对您有所帮助。

Answer 2

getData() 永远不会 return 数据，而是 return promise 对象。如果你想测试它，那么首先你必须模拟服务数据，然后你可以调用它并匹配成功处理程序中的结果。

代码附在下面：

describe('myservice', function() {
  var mockservicedata = [{
    "name": "value1",
    "id": "1"
  }, {
    "name": "value2",
    "id": "2"
  }, {
    "name": "value3",
    "id": "3"
  }];

  var myservice, httpBackend;
  beforeEach(module('omdb'));
  beforeEach(inject(function(_myservice_, $httpBackend) {
    myservice = _myservice_;
    httpBackend = $httpBackend;
  }));

  it('should return search myservice data', function() {
    httpBackend.when("GET", "omdb/mydata.json").respond(mockservicedata);

    var promise = myservice.getData();
    promise.then(function(response) {
       expect(response.data).toEqual(mockservicedata);
    });
    httpBackend.flush();
  });
});

angular 服务测试未能达到 return 要求的响应

angular service test fails to return required response

json

unit-testing

http

angularjs

karma-jasmine