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

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

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

Product evangelist @modyo, author & fullstack developer

Product evangelist @modyo, author & fullstack developer