Jasmine: Mocking API requests in an Angular service spec

Situation: You want to write a spec for a function inside an Angular service. This function at some point makes an API request and acts upon response. Notably, your Angular app employs uiRouter, although it is not used nor actually required for this test.

Working test setup

# Capitalized expressions are intended to be replaced with YOUR values

describe 'SERVICE', ->

  beforeEach ->
    module 'MODULE'

    module ($urlRouterProvider) ->
      # Prevent uiRouter's initialization, i.e. do not sync the current URL
      # with its routes
      $urlRouterProvider.deferIntercept()

    inject (_$httpBackend_, _SERVICE_) =>
      @$httpBackend = _$httpBackend_
      @SERVICE = _SERVICE_

  afterEach ->
    @$httpBackend.verifyNoOutstandingExpectation()
    @$httpBackend.verifyNoOutstandingRequest()

  describe 'FUNCTION()', ->
    it 'does something', ->
      # Maybe some code here
      
      # Call function under test (triggers API request, which will be intercepted)
      @SERVICE.FUNCTION()
      
      # ... do something before request is answered
      
      # Set up request expectation
      @$httpBackend.expectGET('/api/something').respond
        nested:
          example: 'json'
      
      # Run all queued requests
      @$httpBackend.flush()
      
      # Have a Jasmine expectation
      expect(something).toHaveHappened()

Notes

• This example assumes you have already employed ngMock Show archive.org snapshot
• MODULE is your Angular module, e.g. backend
• All calls to module must occur before any calls to inject Show archive.org snapshot
• You need to disable uiRouter's initialization Show archive.org snapshot . Otherwise it would attempt to sync the current URL (Jasmine's!) with its routes, fall back to the default route and then fail to load the corresponding template, which in turn would produce unexpected requests
• $httpBackend must be injected first for your service to be using it. It will replace the $http service.
• Details on Angular's $httpBackend: https://docs.angularjs.org/api/ngMock/service/$httpBackend Show archive.org snapshot