Question

我正在尝试对按钮是否专注于单元测试，但似乎无法让间谍正常工作？

我看到了[这篇文章] [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

在您的规格中创建ngOnInit()后，请回忆起spy，正如@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();
  });

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

2 个答案: