Angular: Testing con Jasmine

Ejemplo de pruebas unitarias con librería Jasmine y test runner Karma.

Jasmine es un framework de javascript para test y viene configurado por defecto en las aplicaciones de Angular. Jasmine utiliza Karma para ejecutar las tareas de los test definidos.

Estructura de una prueba unitaria en Jasmine:

describe('TestFunction', () => {

    it('should do something', () => {
        expect(var).toBe(true);
    });

    it('should do something', () => {
        // test code ..
        expect(var).toBe('Hello');
    });

})

describe:

Es una función que recibe un título y un callback, su objetivo es definir una suite o espacio para agrupar pruebas.

it:

Es una función que recibe un título y un callback, su objetivo es englobar el código necesario para realizar una prueba.

expect:

Es la prueba misma, es una función que recibe un parámetro a evaluar y tiene un conjunto de métodos para hacer la comparación con el resultado expectativa.

Ciclo de vida:

describe('TestFunction', () => {

    beforeAll(() => {});
    
    afterAll(() => {});

    beforeEach(() => {});

    afterEach(() => {});
})

beforeAll:

función que se ejecuta antes del conjunto de pruebas.

afterAll:

función que se ejecuta despues del conjunto de pruebas.

beforeEach:

función que se ejecuta antes de cada prueba del conjunto.

afterEach:

función que se ejecuta después de cada prueba del conjunto.

Ejemplo: pruebas a 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;
    });

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

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

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

---

• ejecutar tests del proyecto:

ng test

• ver la cobertura de pruebas del proyecto:

ng test --code-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í.