Angular 单元测试：按钮点击--SPEC没有期望。

Question

我正在用Karma Jasmine运行一个Angular单元测试。其测试的是一个按钮输入。我们收到下面的说明，有两个测试，一个是常规的，一个是异步的。

有人知道如何修复这个单元测试吗？组件中的其他测试都在成功运行。

HTML。

<div *ngIf="enableButtonFlag">
    <button class="email-edit-button" mat-icon-button (click)="editSharedFormControl('emailAddress')">
        <mat-icon>edit</mat-icon>
    </button>
</div>

测试尝试1:

it('click emailAddress Edit button should allow form control enabled', ()=> {

fixture.whenStable().then(() => {
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  tick();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
  });
});

结果： 测试没有失败或成功。

SPEC没有期望点击emailAddress编辑按钮，应该允许启用表单控制。

测试尝试2：使用异步

it('click emailAddress Edit button should allow form control enabled', async (()  => {

fixture.whenStable().then(() => {
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  tick();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
  }); 
}));

错误： 失败。未捕获（在承诺中）。TypeError.无法读取null的'nativeElement'属性 不能读取null的'nativeElement'属性 TypeError: 不能读取null的'nativeElement'属性。

资源。

Spec has no expectations - Jasmine testing the callback function.

虽然存在期望值，但规格没有期望值控制台错误。

Answer 1

对于测试＃1和测试＃2。

• 确保删除ngIf在你的html，或设置适当的值。
• fixture.whenStable 当所有待定的承诺完成后返回一个承诺。这两种情况都不需要。
• 的概念。tick 只有当测试在 fakeAsync 方式。它不在这里，所以它什么都不做。

试试吧

it('should display emailEdit button', () => {
  // make the requirements to make sure .email-edit-button will be present in the view
  // in essence, it is not blocked by an *ngIf
  fixture.detectChanges();
  const button = fixture.debugElement.query(By.css('.email-edit-button'));
  console.log(button); // see what this logs, make sure it is truthy and a button
  expect(button).not.toBeNull();
});

it('click emailAddress Edit button should allow form control enabled', ()  => {
  // make the requirements to make sure .email-edit-button will be present in the view
  // in essence, it is not blocked by an *ngIf 
  fixture.detectChanges();
  let button = fixture.debugElement.query(By.css('.email-edit-button')).nativeElement;
  button.click();
  fixture.detectChanges();
  expect(component.editSharedForm.get('emailAddress').enabled).toBe(true);
});

如果你让第一次测试通过it should display emailEdit button)，第二项测试应从以下方面解禁 Cannot read property 'nativeElement' of null