Read more

Jasmine: Mocking API requests in an Angular service spec

Dominik Schöler
November 08, 2017Software engineer at makandra GmbH

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

Illustration UI/UX Design

UI/UX Design by makandra brand

We make sure that your target audience has the best possible experience with your digital product. You get:

  • Design tailored to your audience
  • Proven processes customized to your needs
  • An expert team of experienced designers
Read more Show archive.org snapshot
Dominik Schöler
November 08, 2017Software engineer at makandra GmbH
Posted by Dominik Schöler to makandra dev (2017-11-08 11:46)