Asserting Custom Component Output Event Emitters in Angular Component Tests

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 emit the updated count value when the increment button is clicked', () => {
    const emittedValues: number[] = [];
    component.countChange.subscribe((val: number) => emittedValues.push(val));
 
    const incrementButton = fixture.debugElement.query(By.css('[data-testid="btn-inc"]'));
    incrementButton.triggerEventHandler('click', null);
 
    expect(emittedValues).toEqual([1]);
  });
});