Angular 50: Pruebas de componentes
easy⏱ 5 mincourseangular
TestBed configura un módulo de pruebas aislado
TestBed.configureTestingModule({ imports: [LikeButtonComponent] }) funciona porque los componentes standalone son simplemente clases importables, sin necesidad de un arreglo declarations como en la vieja configuración de pruebas basada en NgModules. TestBed.createComponent(...) lo instancia dentro de un ComponentFixture, y fixture.detectChanges() ejecuta una primera pasada de detección de cambios.
TestBed.configureTestingModule({ imports: [LikeButtonComponent] });
const fixture = TestBed.createComponent(LikeButtonComponent);
fixture.detectChanges();
Consultar el DOM con By.css
fixture.debugElement.query(By.css('button')) encuentra un elemento igual que lo haría un querySelector del navegador, pero devuelve un DebugElement con ayudantes extra para pruebas como triggerEventHandler(...), que simula un evento vinculado — aquí, el manejador (click) — sin un usuario real.
const button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('click', null);
fixture.detectChanges();
Los signals hacen que las aserciones sean triviales
Como liked es un signal, no se necesita el manejo de async/whenStable() para este tipo de cambio de estado: actualizar un signal y llamar a fixture.detectChanges() vuelve a renderizar el template de forma síncrona, así que la siguiente aserción ya ve el DOM nuevo.