angular - Nie je možné pristupovať k prvku vo vnútri ng-template pri písaní jednotkového testu pomocou Jasmine

Takže sa snažím pristúpiť k tlačidlu vo vnútri ng-container, ale aj po manuálnom nastavení hodnoty podmienky ngIf na true sa prvky vo vnútri elementu v mojom testovacom prostredí nevykresľujú. Zatiaľ som vyskúšal

• pridávanie aync
• aktualizácia hodnoty ngIf cond v before each
• aktualizácia hodnoty podmienky ngIf priamo vo funkcii it

zdá sa, že nič nefunguje a stále dostávam „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>

Odpoveď č. 1

Myslím, že váš TestBed nevie, ako vykresliť direktívu pTemplate.

Musíte urobiť niečo takéto (predpokladám, že používate prime-ng):

import {TableModule} from 'primeng/table';

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        YourComponent,
        // If including TableModule in imports does not work, try including
        // the directive for pTemplate.
        // PTemplateDirective
      ],
      imports:[TableModule]
    }).compileComponents();
  }));

Akonáhle je TableModule importovaný a pridaný do poľa imports, test by mal vedieť, ako ho zobraziť.

Odpoveď č. 2

K roku 2024 stále funguje to, čo spomenul @AliF50. Stačí pridať import TableModule do importov vášho TestBed a malo by to fungovať.