So, I am trying to access the button as seen in the HTML file, but I keep on getting the "Cannot read properties of null (reading 'nativeElement')". As per the angular document, I did the component.Show = true followed by fixture.detectChanges() but due to some reason anything inside <ng-container *ngIf="Show"> is still not rendering. If I take out the condition everything renders just fine. I have also tried to set component.show to true in beforeEach func and even that did not worked.
<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>
<div style="text-align: right;">
<input #filterName placeholder="Search ..." type="text" pInputText id="searchbar" style="display: inline; margin-left: 5px;" (input)="dt.filterGlobal($event.target.value, 'contains')">
<button mat-stroked-button style="margin-left: 5px;" (click)="clear(dt)" id="clearAllFilterBtn"><i
class="fa fa-times-circle fa-lg"></i> Clear All Filter</button>
</div>
</ng-template>
</ng-container>
it('should not call assignGroup func if totalContactSelected is 0', fakeAsync(() => {
component.totalContactSelected = 0;
fixture.detectChanges();
component.refreshTable = true;
component.Show = true;
component.assignToGrpBtnStatus = true;
fixture.detectChanges();
console.log(component.Show, component.refreshTable); // Show shows as true here in console
// expect(component.refreshTable && component.Show).toBe(true);
console.log(fixture.nativeElement.querySelector('p-table'))
let button = fixture.debugElement.query(By.css('#assignGrpBtn')).nativeElement;
console.log(button);
button.click();
expect(component.assignGroup).toHaveBeenCalledTimes(0);
}));TS FILE
@Input() Show: boolean; // Show is an inputed decorated prop might have something to do with it, inheriting true from the parent