Photo by Louis Reed on Unsplash

Pruebas Unitarias en Angular: mi caso contra TestBed

Como abandonarlo con 0 esfuerzo, mejorando tu rendimiento.

Error 1: El Angular CLI te miente

Si, el CLI ahorra miles de horas en configuración y le permitió a la comunidad de desarrolladores de Angular crear proyectos con un standard unificado que todos podemos comprender, pero tiene una mentira oculta, mira esta prueba unitaria creada automáticamente por el CLI

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('AppComponent', () => {
/// ❌ Esto drena tu alma
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));

/// ❌ Este test no evalua nada realmente
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});

/// ✅ Este si es un test unitario de un elemento de la app
it(`should have as title 'mi-variable'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('mi-variable');
});

/// ❌ Esto debería ser un test de integración
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement;
expect(compiled.querySelector('.content span').textContent).toContain('mi-variable app is running!');
});
});
import { AppComponent } from './app.component';

describe('AppComponent', () => {

let component:AppComponent;

/// Crea una nueva instancia del componente para cada prueba
beforeEach(()=>{
component = new AppComponent();
})

/// El mismo unit test generado por el CLI, con menos código
it(`should have as title 'mi-variable'`, () => {
expect(component.title).toEqual('mi-variable');
});

});

Error 2: Pruebas unitarias != pruebas de integración

Los unit test o pruebas unitarias existen para evaluar que cada parte del código realice lo que se desea, en el caso de angular, que los métodos de un componente hagan su trabajo correctamente, las pruebas unitarias evalúan LÓGICA.

Ok, Ok, y ¿cuál es la solución?

En síntesis: deja de usar testbed, prueba exclusivamente la lógica en tus unit tests y usa pruebas de integración para todo lo que ocurra en el DOM

--

--

Product evangelist @modyo, author & fullstack developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Carlos Solis

Carlos Solis

509 Followers

Product evangelist @modyo, author & fullstack developer