SO: Testing angular $http service with Mocha and Sinon

http://angularjs.org/

by vipul Patel

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mocha/2.0.1/mocha.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mocha/2.0.1/mocha.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/chai/1.9.2/chai.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sinon.js/1.7.3/sinon-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<!-- We are going to use Mocha + Chai setup for testing -->
<script>
  mocha.setup('bdd');
  var expect = chai.expect;

</script>

<body>
  <div id="mocha"></div>
</body>
<!-- Adding angular mocks to have 'module' and 'inject' functions -->
<script src="http://code.angularjs.org/1.3.0/angular-mocks.js"></script>

JavaScript

// App
var myApp = angular.module('myApp', []);

myApp.service('myAppService', function($http) {
  this.doGet = function() {
    return $http.post('dummyUrl', {
      dummyData: 'dummy'
    }, {
      headers: {
        'Content-Type': 'application/json',
      },
    }).then(function(data) {
      console.log('sucess');
      return data;
    });
  }
});

// Test suite
describe('service test case', function() {
  var $scope,
    $httpBackend,
    service,
    successCallback,
    errorCallback;

  beforeEach(module('myApp'));
  beforeEach(inject(function(_$httpBackend_, $rootScope, myAppService) {
    $scope = $rootScope.$new();
    $httpBackend = _$httpBackend_;
    service = myAppService;
    successCallback = sinon.spy();
    errorCallback = sinon.spy();
  }));

  it('should resolve with correct data', () => {
    sinon.spy(successCallback);
    sinon.spy(errorCallback);
    $httpBackend.whenPOST(u => u === 'dummyUrl')
      .respond({
        dummy: 'dummy'
      });
    service.doGet().then(successCallback, errorCallback)
    $httpBackend.flush();
    expect(successCallback.called).to.be.ok;
    expect(errorCallback.called).not.to.be.ok;

  });

  it('should resolve with error status', () => {
    $httpBackend.whenPOST(u => u === 'dummyUrl')
      .respond(function() {
        return [500]; // error scenario
      });
    service.doGet().then(successCallback, errorCallback);
    $httpBackend.flush();
    expect(successCallback.called).not.be.ok;
    expect(errorCallback.called).to.be.ok;
  });


});

// Run tests
mocha.run();