mardi 18 décembre 2018

Unable to test an input which is in ng-template

As it says in the title, i'm trying to test an input which is in a ng-template. The problem is, that i can't access the input. If i take the input out from the ng-template, it works, but i need it inside the ng-template.

The code for the emp.html is from the primefaces documentation. Link:https://www.primefaces.org/primeng/#/table Filtering section

emp.html

<ng-template pTemplate="caption">         
 <div style="text-align: right">
  <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
   <input type="text" pInputText size="50" placeholder="Global Filter" 
   (input)="dt.filterGlobal($event.target.value, 'contains')"
   style="width:auto">
 </div>
</ng-template>

emp.component.spec.ts

it('check input', fakeAsync(() => {

  tick();
  fixture.detectChanges();

  const inputElement = 
  fixture.debugElement.query(By.css('input')).nativeElement;// Here it fails

  inputElement.value = 'some value';
  inputElement.dispatchEvent(new Event('input'));

  fixture.whenStable().then(() => {
    fixture.detectChanges();
    expect(inputElement.value).toEqual('some value');
  });  
}))

It gives the following error: Cannot read property 'nativeElement' of null

Aucun commentaire:

Enregistrer un commentaire