使用 Jasmine 編寫單元測試時無法訪問 ng-template 中的元素

Question

所以我試圖訪問 ng-container 內的按鈕，但即使在手動將 ngIf 條件的值設置為 true 之后，元素內的元素也不會在我的測試環境中呈現。 到目前為止我已經嘗試過

• 添加異步
• 在每個之前更新 ngIf cond in 的值
• 在 it func 本身中更新 ngIf cond 的值

似乎沒有任何效果，我不斷收到“TypeError：無法讀取 null 的屬性（讀取'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>

Answer 1

我認為您的TestBed不知道如何呈現pTemplate指令。

你必須做這樣的事情（我假設你正在使用 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();
  }));

一旦TableModule被導入並添加到imports數組中，測試應該知道如何繪制它。