Angular 19.2 - Testing PrimeNG Select Component with Angular Signals

locales.component.spec.ts

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LocalesComponent } from './locales.component';
import { provideHttpClient } from '@angular/common/http';
import { provideHttpClientTesting } from '@angular/common/http/testing';
import { LocalesService } from '../../services/locales.service';
import { By } from '@angular/platform-browser';
import { Select } from 'primeng/select';

describe('LocalesComponent', () => {
  let component: LocalesComponent;
  let fixture: ComponentFixture<LocalesComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [LocalesComponent],
      providers: [provideHttpClient(), provideHttpClientTesting()]
    }).compileComponents();

    fixture = TestBed.createComponent(LocalesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should have initially no locales', () => {
    const element = fixture.debugElement.query(By.directive(Select));
    const selectComponent = element.componentInstance as Select;
    expect(selectComponent.options).toEqual([]);
  });

  it('should display locales when emitted', () => {
    // Given
    const localesService = TestBed.inject(LocalesService);
    const spy = spyOn(localesService, 'selectedLocale');

    // When
    localesService.locales.set(['de-DE', 'en-GB']);
    fixture.detectChanges();

    // Then
    const element = fixture.debugElement.query(By.directive(Select));
    const selectComponent = element.componentInstance as Select;
    expect(selectComponent.options).toEqual(['de-DE', 'en-GB']);
    expect(spy).toHaveBeenCalled();
  });

  it('should set selected locale', () => {
    // Given
    const localesService = TestBed.inject(LocalesService);
    localesService.locales.set(['de-DE', 'en-GB']);
    fixture.detectChanges();

    // When
    const element = fixture.debugElement.query(By.directive(Select));
    const selectComponent = element.componentInstance as Select;
    const event = {
      originalEvent: undefined,
      value: 'en-GB'
    };
    selectComponent.onChange.emit(event as any);

    // Then
    expect(localesService.selectedLocale()).toBe('en-GB');
  });
});