mardi 12 février 2019

How to access to observable's data from testing Angular 7

I'm making an app in Angular 7 which makes an http request (get) to a json server, then the json server returns the data.

getMembers():Observable<IMember[]> {
    return this.http.get<IMember[]>(url);
}

which I can subscribe with:

service.getMembers().subscribe(data => {
  this.members = data;
  console.log("Called 'getMembers'");
  console.log(this.members);
});

when i subscribe to the service and print the data:

Called 'getMembers'
Array(495)
0:
id: "496.000"
name: "John Titor"
group: "D"
url: "https://myprofile/"
memberNum: "fakenum1"

... And goes like this till the end of the returned data ....

495:
id: "1.000"
name: "Carl Sagan"
group: "M"
url: "https://myprofile/"
memberNum: "fakenum495"

I'm trying to test the service with the httpClientTestingModule:

import { TestBed, inject, getTestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

import { MemberService } from './member.service';

//An interface for the returned data
import { IMember } from './imember'

describe('MemberService', () => {

  let injector: TestBed;
  let service: MemberService;
  let httpMock: HttpTestingController;
  let typeMember: IMember[];
  //let members;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientModule],
      providers: [MemberService, HttpTestingController]
    });
    injector = getTestBed();
    service = injector.get(MemberService);
    httpMock = injector.get(HttpTestingController);

    //Getting the data from the service 
    service.getMembers().subscribe(data => {
      var members = data;
    });
  });

  //This test success
  it('should be created', inject([MemberService], (service: MemberService) => {
    expect(service).toBeTruthy();
  }));

  //This test returns an error
  it('should return an Observable<IMember[]>', (members) => {
    let type1 = typeof(members);
    let type2 = typeof(typeMember);
    expect(typeof(type1)).toEqual(typeof(type2));
  });

  //This test returns an error too
  it('first id should equal to 496.00', (data) => {
    expect(data[0].id).toBe("496.00");
  });

});

The problem is that when I try to run these test with karma (ng test) it returns:

MemberService should return an Observable<IMember[]>
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.

and

MemberService first id should equal to 496.00
TypeError: Cannot read property 'id' of undefined

As you can see, Karma isn't able to read id from the data returned from the observable (which actually works), I tried to run this test in a different way (without initializing the service in the beforeEach):

it('first id should equal to 496.00 V2', () => {
    service.getMembers().subscribe(data => {
        let myMembers = data;
        expect(myMembers[0].id).toBe("9999.00");
    });
});

But despite I actually have set an impossible test case, Karma says that this test is success (and if I do the same case with the 'should return an Observable' it doesn't recognize the 'expect sentence'.

What I'm missing here? I tried to move the service to the beforeEach section because I suspect that karma doesn't recognize well the suspect sentence because it is inside the subscribe service section.

Could anybody help me?:(

Aucun commentaire:

Enregistrer un commentaire