我应该如何测试这个角度分量？

Question

Say if I have a component which emits an event when clicked, ie

    @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);
      }
    }

Would I then test the event and the component method separately like below?

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();
})

Or would I test that when the button has been clicked, that in turn it emits an event?

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)
})

I'm assuming the latter as it covers both the top two tests into one. However I would like clarification.

I would also like to know whether these kind of tests are unit tests, integration tests or e2e tests.

Answer 1

The two approaches are valid, it's really up to your preference.

And those are unit tests. They prevent side effects in your application : if the test fails, it means your function has been modified.

It's not an intgration testing because you test a single component, and it's not end-to-end testing because you don't go all the way through the back-end.