使用 Jasmine 编写单元测试时无法访问 ng-template 中的元素

Question

所以我试图访问 ng-container 内的一个按钮，但即使在手动将 ngIf 条件的值设置为 true 之后，元素内的元素也不会在我的测试环境中呈现。到目前为止我已经试过了

添加 aync
在每个之前更新 ngIf cond 的值
更新 it 函数本身内部的 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 数组，测试应该知道如何绘制它。

使用 Jasmine 编写单元测试时无法访问 ng-template 中的元素

Unable to access an element inside ng-template while writing unit test using Jasmine

angular

typescript

unit-testing

jasmine

karma-jasmine