javascript - 我应该如何测试这个 Angular 分量？

Question

假设我有一个组件在被点击时发出一个事件，即

    @Component({
      selector: 'component-checkout-payment',
      template: `<button (click)="click()>Click me</button>`
    })
    export class TestComponent{

      @Output() clicked = new EventEmitter<boolean>();

      click() {
        this.clicked.emit(true);
      }
    }

然后我会像下面那样分别测试事件和组件方法吗？

it('should emit an event when `click` is called`, () => {
  jest.spyOn(component.clicked, 'emit');
  component.click();
  expect(component.clicked.emit).toHaveBeenCalledWith(true);
});

it('should call `click` when button has been clicked`, () => {
  jest.spyOn(component, 'click');
  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  expect(component.click).toHaveBeenCalled();
})

或者我会测试当按钮被点击时，它又会发出一个事件吗？

it('should emit event when button has been clicked`, () => {
  jest.spyOn(component.clicked, 'emit');
  let button = fixture.debugElement.nativeElement.querySelector('button');
  button.click();
  expect(component.clicked.emit).toHaveBeenCalledWith(true)
})

我假设是后者，因为它将前两个测试合二为一。不过我想澄清一下。

我也想知道这种测试是单元测试、集成测试还是e2e测试。

Answer 1

这两种方法都是有效的，这完全取决于您的喜好。

那些是单元测试。它们可以防止在您的应用程序中产生副作用:如果测试失败，则意味着您的功能已被修改。

这不是集成测试，因为您测试的是单个组件，也不是端到端测试，因为您没有一路走完后端。