manu manu - 5 months ago 19
AngularJS Question

angular service test fails to return required response

I am trying to write tests for angular service using jasmine and karma. I have the following code for my service call:



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;
};





I am tesitng it using the following file for spec as:



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);
});
});





which basically throws an error as:

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


I don't understand why it does not return data to the test. please help

Answer

Calling myservice.getData() won't actually give you the data you're expecting.

Since your getData method from MyService relies on $http's get method, you should be mocking it and then expecting that data returned.

So your test case should be like:

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();
  });
});

Hope this helps.

Comments