Cómo pasar parámetros a un componente en Jest y Angular

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!