Angular2 Jasmine spyOn http calls

Question

I would like to spy on the Http service to see if it calls the right endpoint. Is it possible to do that ?

So far, in my services, all I'm testing is that they send back data ... I would like to make them more useful.

If you ever need it, here is my current spec file :

import { TestBed, async, inject } from '@angular/core/testing';
import { SignupService } from './signup.service';
import { Observable } from 'rxjs/Observable';

import { HttpModule, Http, Response, ResponseOptions, RequestOptions, Headers, XHRBackend } from '@angular/http';
import { MockBackend, MockConnection } from '@angular/http/testing';
import { ErrorHandlerService } from '../../services/error-handler.service';

describe('SignupService', () => {

  let errorStub = {};

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule],
      providers: [
        SignupService,
        { provide: XHRBackend, useClass: MockBackend },
        { provide: ErrorHandlerService, useValue: errorStub }
      ]
    });
  });

  it('signup should return an application error if no apps are provided', inject([SignupService], (service: SignupService) => {
    service.signup('', [], null).subscribe(
      suc => { },
      err => expect(err).toMatch(/application/)
    );
  }));

  it('signup should return a role error if no roles are provided', inject([SignupService], (service: SignupService) => {
    service.signup('', null, []).subscribe(
      suc => { },
      err => expect(err).toMatch(/rôle/)
    );
  }));

  it(
    'signup should return a response with a "contenu" parameter',
    inject([SignupService, XHRBackend], (service: SignupService, mockBackEnd: MockBackend) => {
      let content = 'anything';
      mockBackEnd.connections.subscribe((connection: MockConnection) => {
        connection.mockRespond(new Response(new ResponseOptions({
          body: JSON.stringify({
            contenu: content
          })
        })));
      });
      service.signup('', [], []).subscribe(
        suc => expect(suc).toBe(content)
      );
    }));

  it(
    'checkUser should return a response with a "contenu" parameter',
    inject([SignupService, XHRBackend], (service: SignupService, mockBackEnd: MockBackend) => {
      let content = 'anything';
      mockBackEnd.connections.subscribe((connection: MockConnection) => {
        connection.mockRespond(new Response(new ResponseOptions({
          body: JSON.stringify({
            contenu: content
          })
        })));
      });
      service.checkUser('').subscribe(
        suc => expect(suc).toBe(content)
      );
    }));
});

score 4 · Accepted Answer · answered Apr 03 '17 at 15:26

4

Almost there! Just add expect inside the mockBackend declaration.

Example:

    mockBackend.connections.subscribe(connection => {

      // Check if it invokes a http POST call
      expect(connection.request.method).toBe(RequestMethod.Post);

      // Check if the URL is correct
      expect(connection.request.url).toBe('/some-url');

      connection.mockRespond(new Response(new ResponseOptions({
        body: JSON.stringify(''),
        status: 200
      })));

    });

answered Apr 03 '17 at 15:26

qdivision

401
2
9

Wow, I went on a week off at work and totally forgot about that post (I had given up and decided not to test it). Your solution does work, that's amazing ! Thank you dude – Apr 19 '17 at 13:33

Angular2 Jasmine spyOn http calls

1 Answers1