Angular 4/5单元测试用例.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);
      });
  }));
});

Answer 1

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();
      });
  });