CODEWITHSUNDEEP
angularjsjsonunit-testinghttpkarma-jasmine
manu
manu

Reputation: 77

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

Upvotes: 0

Views: 142

Answers (2)

Suneet Bansal
Suneet Bansal

Reputation: 2702

getData() will never return data instead it will return promise object. If you want to test it then firstly you would have to mock the data for service then you can call it and match the result in the success handler.

Code is attached below:

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

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

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.

Upvotes: 1

Related Questions