angular - Kann während des Schreibens eines Unit-Tests mit Jasmine nicht auf ein Element innerhalb von ng-template zugreifen

Also versuche ich, auf einen Button innerhalb des ng-container zuzugreifen, aber selbst nachdem ich den Wert der ngIf-Bedingung manuell auf true gesetzt habe, werden die Elemente innerhalb des Elements in meiner Testumgebung nicht gerendert. Bisher habe ich Folgendes versucht

• asynchron hinzufügen
• Aktualisierung des Werts der ngIf-Bedingung in before each
• Aktualisierung des Werts von ngIf cond innerhalb der it-Funktion selbst

nichts scheint zu funktionieren und ich bekomme immer wieder "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>

Antwort #1

Ich denke, Ihr TestBed weiß nicht, wie es die pTemplate-Direktive rendern soll.

Du musst so etwas wie dies tun (ich nehme an, du benutzt 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();
  }));

Sobald TableModule importiert und dem imports-Array hinzugefügt wurde, sollte der Test wissen, wie man es darstellt.

Antwort #2

Ab 2024 funktioniert das, was @AliF50 erwähnt hat, immer noch. Fügen Sie einfach den TableModule-Import zu den Importen Ihres TestBed hinzu und es sollte funktionieren.