Angular 单元测试:按钮点击–SPEC没有期望。

我正在用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.

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

解决方案:

对于测试#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

给TA打赏
共{{data.count}}人
人已打赏
未分类

awk '{print $2}'

2022-9-9 18:32:31

未分类

StringBuffer会改变JSON的顺序吗?

2022-9-9 18:57:32

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索