title: How to access to observable's data from testing Angular 7
body: <p>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.</p>
  
  <p>My service is:</p>
  
  <pre><code>getMembers():Observable&lt;IMember[]&gt; {
      return this.http.get&lt;IMember[]&gt;(url);
  }
  </code></pre>
  
  <p>which I can subscribe with:</p>
  
  <pre><code>service.getMembers().subscribe(data =&gt; {
    this.members = data;
    console.log("Called 'getMembers'");
    console.log(this.members);
  });
  </code></pre>
  
  <p>when I subscribe to the service and print the data:</p>
  
  <pre><code>Called 'getMembers'
  Array(496)
  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"
  </code></pre>
  
  <p>I'm trying to test the service with the httpClientTestingModule:</p>
  
  <pre><code>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', () =&gt; {
  
    let injector: TestBed;
    let service: MemberService;
    let httpMock: HttpTestingController;
    let typeMember: IMember[];
    //let members;
  
    beforeEach(() =&gt; {
      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 =&gt; {
        var members = data;
      });
    });
  
    //This test success
    it('should be created', inject([MemberService], (service: MemberService) =&gt; {
      expect(service).toBeTruthy();
    }));
  
    //This test returns an error
    it('should return an Observable&lt;IMember[]&gt;', (members) =&gt; {
      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) =&gt; {
      expect(data[0].id).toBe("496.00");
    });
  
  });
  </code></pre>
  
  <p>The problem is that when I try to run these test with karma (ng test) it returns:</p>
  
  <pre><code>MemberService should return an Observable&lt;IMember[]&gt;
  Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  </code></pre>
  
  <p>and</p>
  
  <pre><code>MemberService first id should equal to 496.00
  TypeError: Cannot read property 'id' of undefined
  </code></pre>
  
  <p>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):</p>
  
  <pre><code>it('first id should equal to 496.00 V2', () =&gt; {
      service.getMembers().subscribe(data =&gt; {
          let myMembers = data;
          expect(myMembers[0].id).toBe("9999.00");
      });
  });
  </code></pre>
  
  <p>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').</p>
  
  <p>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 expect sentence because it is inside the subscribe service section.</p>
  
  <p>Could anybody help me?:(</p>