How should I test this angular component?

Say if I have a component which emits an event when clicked, i.e

    @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.