title: Angular unit testing access component's DOM element conditioned by *ngif after updating the model
body: <p>I am setting up unit test case for emit event set to table row selection(or click) operation, also I have configured the component with needed data. Here the table is another component, and even upon assigning the needed data it doesn't renders the needed DOM element of table(i.e row elements) to target  the row element for querySelect. I am adding the code snippet here:</p>
  
  <p>component: Typescript </p>
  
  <pre><code>@Component({
     selector: 'app-user-list',
     templateUrl: './user-list.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush
  })
  
  export class UserListComponent implements OnChanges {
  
     @Input() userSearchResult:UserSearchResult;
     @Output() navigateToUser: EventEmitter&lt;UserInfo&gt; = new EventEmitter();
  
     navigateToUserInfo(selectedUser: any) {
         this.navigateToUser.emit(selectedUser);
     }
  }
  </code></pre>
  
  <p>component: Markup</p>
  
  <pre><code>&lt;div *ngIf="userSearchResult"&gt;
     &lt;div class="vdl-row"&gt;
     &lt;div class="vdl-col-md-12"&gt;
     &lt;app-table [headers]="userSearchResult.columnNames"
                [dataset]="userSearchResult.userList"
                tableStyle="list" (tableRowClick) = "navigateToUserInfo($event)"&gt;
    &lt;/app-table&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the spec file code: </p>
  
  <pre><code>import { ComponentFixture, async, TestBed } from '@angular/core/testing';
  import { NO_ERRORS_SCHEMA } from '@angular/core';
  import { TextboxComponent } from '@axyz/components/textbox';
  import { UserListComponent } from './user-list.component';
  import { UserSearchResult } from '../../../shared/models/user-search-result.model';
  beforeEach(async( () =&gt; {
  TestBed.configureTestingModule({
    imports: [],
    schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
    declarations: [UserListComponent],
    providers: [TextboxComponent]
    }).compileComponents();
  }))
  beforeEach(() =&gt; {
  fixture = TestBed.overrideComponent(UserListComponent, {
    set: new Component({
      selector: 'app-user-list',
      templateUrl: './user-list.component.html',
      changeDetection: ChangeDetectionStrategy.Default
    })
  }).createComponent(UserListComponent);
  //fixture = TestBed.createComponent(UserListComponent);
  component = fixture.componentInstance;
  debugEle = fixture.debugElement;
  
  it('should emit on click', fakeAsync(() =&gt; {
      debugger;
      let data;
      fixture.detectChanges();
  
      let spy = spyOn(component.navigateToUser, 'emit');
      console.log("1")
  
      console.log(debugEle.nativeElement);
  
      component.userSearchResult = userSearchResult; 
      fixture.detectChanges();
      // console.log("2")
      console.log(debugEle.nativeElement);
  
      debugEle.query(By.css('app- 
      table')).triggerEventHandler('click',selectedUser);
  
      component.navigateToUserInfo(selectedUser);
      expect(spy).toHaveBeenCalledWith(selectedUser);
    }));
   });
  </code></pre>
  
  <p>And with that ever that I have tried, I get this error in the console when I use "overrideComponent" </p>
  
  <p>Uncaught Error: Cannot find module 'tslib'
      at webpackEmptyContext (./node_modules/@angular/compiler/src_sync?:2)
      at eval (:9876/node_modules/@angular/compiler/src/core.js?:22)
      at eval (:9876/node_modules/@angular/compiler/src/core.js?:10)
      at eval (:9876/node_modules/@angular/compiler/src/core.js?:19)
      at Object../node_modules/@angular/compiler/src/core.js (vendor.js:46)
      at <strong>webpack_require</strong> (main.js:79)
      at eval (:9876/src/user-search/components/user-list/user-list.component.spec.ts?:7)
      at Object../src/user-search/components/user-list/user-list.component.spec.ts (main.js:231)
      at <strong>webpack_require</strong> (main.js:79)
      at webpackContext (./src_sync_.spec.ts$?:9)</p>
  
  <p>I have even installed tslib in my project, cleared nodemodules and did npm install, Is there anything that I am not doing right?</p>