Angular - 专注于按钮的单元测试

Question

我正在尝试对我的按钮是否被聚焦，但我似乎无法让间谍正常工作？

我看到了 [this post][1]，但没有完全帮助。

我是否遗漏了一些明显的东西？

component.ts

ngOnInit() {
    // autofocus on the cancel button to guard against mistakes
    document.getElementById('cancel').focus();
  }

Answer 1

焦点一开始就有缺陷。

使用 Angular 时，您不应该使用 document 来获取您的元素。

改用 viewChild。

@ViewChild('cancel') cancelButton: ElementRef<HtmlButtonElement>;
ngAfterViewInit() {
  this.cancelButton.nativeElement.focus();
}

现在你的测试看起来像这样

it('should focus cancel button', () => {
  spyOn(component.cancelButton.nativeElement, 'focus');
  component.ngAfterViewInit();
  expect(component.cancelButton.nativeElement.focus).toHaveBeenCalledWith();
});

编辑如果你仍然想使用你的方式，考虑使用By.css()：

it('should autofocus on cancel button on init', () => {
  const cancelButton = fixture.debugElement.query(By.css('#cancel'));
  spyOn(cancelButton, 'focus');
  component.ngOnInit();
  expect(cancelButton.focus).toHaveBeenCalled();
});

Answer 2

在您的规范中创建 spy 后调用 ngOnInit()，正如 @trichietrichie 所指出的那样

另外，利用 fixture 而不是依赖 document 来获取 html 元素。

beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ ConfirmationComponent ],
      providers: [ MessageService]
    });

    fixture = TestBed.createComponent(ConfirmationComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();    
    component.ngOnInit();
  });

  it('should autofocus on cancel button on init', () => {
    const cancelButton = fixture.debugElement.query(By.css('#cancel'));
    spyOn(cancelButton.nativeElement, 'focus'); // create spy here   
    component.ngOnInit();
    expect(cancelButton.focus).toHaveBeenCalled();
  });