Angular: Testing

Ejemplo Test unitarios implementando libreria Jest

Actualmente se recomienda utilizar Jest para temas de pruebas unitarias y pruebas de integración. Dentro de la razones se cuenta el mejor rendimiento, mayor velocidad y soporte de la comunidad de JavaScript.

Para instalar Jest en Angular, se deben instalar y configurar las dependencias y desinstalar los frameworks de testing predeterminados (Jasmine y Karma). Para esto utilizaremos un esquema generador de codigo (@briebug/jest-schematic) que automatiza esta tarea.

ng add @briebug/jest-schematic

La plantilla realiza las siguientes tareas:

• desinstalar dependencias de Karma y Jasmine del proyecto
• instalar Jest en dependencias de desarrollo del proyecto
• eliminar sección "test" en archivo de configuracion angular.json
• eliminar archivos src/test.ts y karma.config.ts
• configurar package.json

En rigor, los test unitarios deben probar unidades y piezas de software individuales y específicas de los componentes, servicios, filtros, etc. del proyecto. El alcance es muy reducido y está perfectamente acotado. Cualquier dependencia del módulo bajo prueba debe ser sustituida por un mock, o un stub.

Los test de integración prueban la interacción entre dos o mas elementos, estos pueden ser módulos, clases, interfaces, servicios, componentes, paquetes, etc. En Angular se utiliza el paqueta TestBed para gestionar e importar los modulos e inyectar las dependencias necesarias.

Ejemplo: prueba unitaria de un componente básico:

counter.component.html

<div class="m-5">
    <h1>Counter {{ counter }}</h1>
    <hr>
    <button class="btn btn-primary mx-1" (click)="increaseBy(+1)">+1</button>
    <button class="btn btn-primary mx-1" (click)="increaseBy(-1)">-1</button>
</div>

counter.component.ts

export class CounterComponent {

  counter: number = 10;
  
  constructor() { }

  increaseBy( value: number ) {
    this.counter += value;
  }
}

counter.component.spec.ts

describe('CounterComponent', () => {

    let component: CounterComponent;
    let fixture: ComponentFixture<CounterComponent>;
    let compiled: HTMLElement;

    beforeEach(() => {
        fixture = TestBed.createComponent(CounterComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
        compiled = fixture.nativeElement;
    });

    test('should create', () => {
        expect(component).toBeTruthy();
    });

    test('should increment based on argument', () => {
        component.increaseBy(2);
        expect(component.counter).toBe(12);
    });

    test('should update tag h1', () => {
        component.increaseBy(10);
        fixture.detectChanges();
        const h1 = compiled.querySelector('h1');
        expect( h1?.textContent ).toContain('20');
    });
}

---

• ejecutar tests del proyecto:

npm run test

• ver la cobertura de pruebas del proyecto;

npm run test:coverage

---

Puedes descargar el código fuente completo de este ejemplo desde el siguiente enlace

¿Tienes alguna consulta?
Puedes contactarme enviándome un mensaje desde aquí.