Spying on Component Method Invocations and DOM Events in Jasmine

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { CounterComponent } from './counter.component';
 
describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;
 
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CounterComponent]
    }).compileComponents();
 
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
 
  it('should trigger increment method upon button click', () => {
    spyOn(component, 'increment');
    const buttonElement = fixture.debugElement.query(By.css('button.increment-btn'));
    
    buttonElement.triggerEventHandler('click', null);
 
    expect(component.increment).toHaveBeenCalledTimes(1);
  });
});