I am encountering an issue when trying to access a button inside an ng-container in my testing environment. Despite manually setting the value of the ngIf condition to true, the elements inside are not being rendered. Here is what I have attempted so far:
- Adding async
- Updating the value of the ngIf condition in beforeEach
- Updating the value of the ngIf condition inside the it function itself
Unfortunately, none of these solutions seem to work as I continue to receive the error message "TypeError: Cannot read properties of null (reading 'nativeElement')"
it('should call assignGroup function', fakeAsync(() => {
component.Show = true;
fixture.detectChanges();
let button = fixture.debugElement.query(By.css('#assignGrpBtn')).nativeElement;
console.log(button); // getting null for the btn
}));<ng-container *ngIf="Show">
<ng-template pTemplate="caption">
<div style="float: left;">
<button class="btn btn-secondary" (click)="assignGroup()" [ngClass]="{'assignGrpDisabled': assignToGrpBtnStatus,'assignToGrpBtn':!assignToGrpBtnStatus}" id="assignGrpBtn"><i class="fa fa-plus-square fa-lg"></i> Assign to Group(s)</button>
</div>
</ng-template>
</ng-container>