Algo que no se menciona mucho en los tutoriales de pruebas de Angular y Jest es que cuando queremos probar componentes que reciben parámetros y comprobar que se están imprimiendo correctamente, que se están construyendo bien y que no hacen cosas raras conforme al control de funciones y demás, los tutoriales no nos dicen mucho, pero aquí está el cómo puedes hacerlo de forma súper fácil y entendible.
Antes de empezar, en el blog podrás encontrar algunos otros tutoriales de como hacer cosas específicas en Jest (orientado a Angular normalmente) como por ejemplo pasar parámetros en el constructor del componente y no en el componente en sí mismo, cómo usar «Rutas» y demás…
Lo primero es que para este vamos a considerar un componente SUPER simple:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-mi-componente',
templateUrl: './mi-componente.component.html',
styleUrls: ['./mi-componente.component.scss']
})
export class MiComponenteComponent {
@Input() parametro;
}
En este caso como veremos recibimos un parámetro llamado parametro
(lol), entonces al usarlo veríamos algo como lo siguiente:
<app-mi-componente [parametro]="'hola mundo'"></app-mi-componente>
De aquí, veremos qué se vería en pantalla (es decir, la vista de mi-componente
):
<p>{{ parametro }}</p>
¿Fácil hasta aquí no?…
Bueno, ahora vamos a la prueba en Jest, para ello creamos nuestra base (nota los comentarios que están en el código):
import { ComponentFixture, TestBed } from '@angular/core/testing';
// Importamos el componente
import { MiComponenteComponent} from './tag-listing.component';
describe('MiComponenteComponent', () => {
// Esta variable tendrá la lógica de las funciones del código
let component: MiComponenteComponent;
// Esta variable tendrá la vista del HTML "rendereado"
let fixture: ComponentFixture<MiComponenteComponent>;
// Generamos nuestro módulo
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MiComponenteComponent],
})
.compileComponents();
});
// Y ahora sí, inicializamos nuestro componente
beforeEach(() => {
fixture = TestBed.createComponent(MiComponenteComponent);
component = fixture.componentInstance;
// Aquí está el truco, antes de que empecemos las pruebas debemos pasar
// nuestros parámetros, y entonces, nuestro componente tendrá la
// disponibilidad una vez que ya querramos hacer las pruebas en nuestros
// "it"
component.parametro = 'Hola mundo';
fixture.detectChanges();
});
// Esta es una prueba "de cajón" que corrobora que sí se está generando
// el componente bien...
it('Debería crearse', () => {
expect(component).toBeTruthy();
});
// Y ahora sí vamos a checar el parámetro
it('Debería mostrar "Hola mundo"', () => {
// Aquí ya pondrás tus selectores a tu manera así que no me juzgues :( ...
expect(fixture.nativeElement.querySelector('p').innerHTML.trim()).toEqual('Hola mundo');
});
});
Y listo, ¿fácil no lo creen?, ya solo hagan la prueba y chequen que en realidad el componente se está probando bien…
En el próximo tutorial veremos posiblemente cómo cambiarle el valor al parámetro y entonces probar nuevamente que el cambio se haya dado, ¡hasta la próxima!