Как я должен проверить этот угловой компонент?

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

Два подхода верны, это действительно зависит от ваших предпочтений.

А это юнит-тесты. Они предотвращают побочные эффекты в вашем приложении: если тест не пройден, это означает, что ваша функция была изменена.

Это не интеграционное тестирование, потому что вы тестируете один компонент, и это не сквозное тестирование, потому что вы не проходите весь путь через бэкэнд.