title: Unit test html element with ngif async call in angular 2 jasmine
body: <p>I am writing unit test for html div having a <code>*ngIf</code> condition. </p>
  
  <pre><code>&lt;div *ngIf="clientSearchResults$ | async  as searchResults" class = 'fgf'  #datalist id="mydata" &gt;
    &lt;app-client-list id="clientDataTable1" class="clientDataTable dataTable" [clients]='searchResults'&gt;&lt;/app-client-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This <code>ngIf</code> condition gets true, when I recieved the data from <a href="https://github.com/ngrx/store" rel="nofollow noreferrer">ngrx</a> store. Below is the component code, which filled this data.</p>
  
  <pre><code>searchData(client: Client) {
        //// some conditions
        this._clientService.getClientList()
       .subscribe(data =&gt; {
        const filteredData = this.filterData(data, client);
        this.isDataFound = filteredData !== null &amp;&amp; filteredData.length &gt; 0;
        this.testbool = true;
        /// In this line, my div got the data and using async condition, we 
        /// fill the div element.
        this.store.dispatch(new SetClientSearchResultsAction(filteredData));
  
      });
  }
  </code></pre>
  
  <p>Now, when writing the unit test case for this.</p>
  
  <pre><code>it('should search the data with valid client passed from UI', async(() =&gt; {
      let debugFixture: DebugElement = fixture.debugElement;
      let htmlElement: HTMLElement = debugFixture.nativeElement;
      let clientListGrid = htmlElement.getElementsByClassName('fgf');
      let testbool= htmlElement.getElementsByClassName('testbool');
  
      spyOn(component, 'searchData').and.callThrough();
      spyOn(component, 'filterData').and.returnValue(CLIENT_OBJECT);
      spyOn(clientService, 'getClientList').and.callThrough();
  
      console.log("=========before======="+ clientListGrid.length);
  
      component.searchData(validClient);
      component.clientSearchResults$ = store.select('searchResults');
      fixture.detectChanges();
      debugFixture = fixture.debugElement;
      htmlElement = debugFixture.nativeElement;
      clientListGrid = htmlElement.getElementsByClassName('fgf');
  
      console.log("=========after ======="+ clientListGrid.length);
  
      expect(component.searchData).toHaveBeenCalled();
    }));
  </code></pre>
  
  <p>Problem is, in console, before calling the function, I am getting the length as 0 and after calling the function also, I am getting the length as 0. It should be 1, When We have received the data from store.
  And It is just because of this *ngif condition, <code>*ngIf="clientSearchResults$ | async  as searchResults"</code></p>
  
  <p>Data is getting load in DIV, but still, in unit test I am not able to test this thing ?</p>