Unit test and Assert http.get queryString call in Angular2

Question

I have a DataService and I want to assert that the year is getting set in the query string correctly. Is there a way to spyOn the http.get call or to access it? I don't know the correct approach to testing this. I'm using Angular 2.2.0.

The DataService

    constructor(private http: Http) { }
    public getEnergyData(option: string): Promise<EnergyDataDto[]> {
        return this.http.get(this.getEnergyDataApiUrl(option)).toPromise().then((response) => {
            this.energyDataCache = this.parseEnergyDataResponse(response);
            return this.energyDataCache;
        }).catch(this.handleError);
    }

    protected getEnergyDataApiUrl(option: string) {
        return `/api/solar?year=${option}`;
    }

    protected parseEnergyDataResponse(response: Response) {
        return response.json().data;
    }

dataservice.spec.ts

describe('Given the DataService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpModule],
      providers: [DataService, { provide: XHRBackend, useClass: MockBackend }],
    });
  });
  describe('When getting the energy data', () => {
    let backend: MockBackend;
    let service: EnergyDataService;
    let fakeEnergyData: EnergyDataDto[];
    let response: Response;

    const makeEnergyData = () => {
      let data = [];
      let one = new EnergyDataDto();
      one.year = 2007;
      one.countryName = 'Denmark';
      one.quantity = '100000';
      data.push(one);
      return data;
    };
    beforeEach(inject([Http, XHRBackend], (http: Http, be: MockBackend) => {
      backend = be;
      service = new EnergyDataService(http);
      fakeEnergyData = makeEnergyData();
      let options = new ResponseOptions({ status: 200, body: { data: fakeEnergyData } });
      response = new Response(options);
    }));
    it('should return fake values', async(inject([], () => {
      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
      service.getEnergyData('all').then(data => {
        expect(data.length).toBe(1);
        expect(data[0].countryName).toBe('Denmark');
      });
    })));

    it('should use year in query string', async(inject([], () => {
      spyOn(service, 'getEnergyDataApiUrl').and.callThrough();
      backend.connections.subscribe((c: MockConnection) => c.mockRespond(response));
      service.getEnergyData('2007').then(data => {
        // I was hoping to use backendend somehow instead, but it's not in scope when I debug it.
        expect((<any>service).getEnergyDataApiUrl).toHaveBeenCalledWith('/api/solar?year=2007');
      });
    })));

Paul Samsotha · Accepted Answer · 2016-12-05 16:07:56Z

1

You should do this in the mockBackend.connections subscription. This is when you have access to the URL from the MockConnection

backend.connections.subscribe((c: MockConnection) => {
  expect(c.request.url).toBe(...)
  c.mockRespond(response)
});

answered Dec 5, 2016 at 16:07

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unit test and Assert http.get queryString call in Angular2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related