Angular 4/5 unit test case .toBe in Services

Question

I am trying to write test case for calling Service and getting response from HTTP. Reference

Now the problem is as following :

expect(data.length).toBe(12); Even though data.length is 100, This code does not throw any exception

it('Should call HTTP!', inject([SampleDataService], (sampleDataService) => {
  expect(100).toBe(12); //<== This gives me correct exception i.e Expected 100 to be 12.
  sampleDataService.getData().subscribe(
    (data) => {
      console.log('ngOnInit', data.length); // here data.length is 100
      expect(data.length).toBe(12); // This does not throw any exception
    });
}));

SampleDataService.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class SampleDataService {

  constructor(private http:HttpClient) { }

  getData(){
    return this.http.get("http://jsonplaceholder.typicode.com/posts");
  }
}

app.component.spec.ts

import { TestBed, async, ComponentFixture,inject } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { SampleDataService } from './services/sample-data.service';
import { HttpClientModule,HttpClient } from '@angular/common/http';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientModule,
        FormsModule,
        ReactiveFormsModule
      ],
      declarations: [
        AppComponent
      ],
      providers:[SampleDataService]
    }).compileComponents();
  }));
  it('Should call HTTP!', inject([SampleDataService], (sampleDataService) => {
    expect(100).toBe(12);
    sampleDataService.getData().subscribe(
      (data) => {
        console.log('ngOnInit', data.length);
        expect(data.length).toBe(12);
      });
  }));
});

score 0 · Accepted Answer · answered Nov 17 '17 at 08:21

0

You typically want to mock Http calls during unit tests. But if really you don't want to, then since http is asynchronous, you need to only end the test once you received the response:

  it('Should call HTTP!', (done) => {
    const service = TestBed.get(SampleDataService);
    service.getData().subscribe(
      (data) => {
        console.log('ngOnInit', data.length);
        expect(data.length).toBe(12);
        done();
      });
  });

answered Nov 17 '17 at 08:21

JB Nizet

678,734
91
1,224
1,255

Your code worked like a charm, But can you please tell me what was wrong with my code? – Sangwin Gawande Nov 17 '17 at 09:12
The method returns as soon as you've sent the request, so Jasmine doesn't know that you're waiting for an asynchronous response to be received and checked. – JB Nizet Nov 17 '17 at 11:43
But I used `.subscribe` there, so that shouldn't have happened right? – Sangwin Gawande Nov 17 '17 at 11:46

Angular 4/5 unit test case .toBe in Services

1 Answers1