Pruebas unitarias para servicios

Clase 7 de 25 • Curso de Angular: Unit Testing para Servicios

Juan Manuel Galindo Casillas

student•

Observable

describe('Test for getObservableValue', () => {
    it('should return "my value"', (doneFn) => {
      service.getObservableValue().subscribe((value) => {
        expect(value).toBe('my value');
        doneFn();
      });
    })
  })

  describe('Test for getObservableValue Sync', () => {
    it('should return "my value"', async () => {
      const value = await firstValueFrom(service.getObservableValue());
      expect(value).toBe('my value');
    })
  })

Leoneider Trigos Guerrero

student•

async() quedo deprecado en angular 13, ahora debemos usar waitForAsync() que hace lo mismo.

Danny Alejandro fernandez gallego

student•

Es extraño por que la versión actual de angular usa async en sus pruebas de AppComponent

Reinaldo Mendoza

student•

Aun se usa

Cesar Elías Armendariz Ruano

student•

primero creamos nuestro servicio

ng g s services/value

posteriormente ingresamos parametros y funcionalidades al servicio

value.service.ts

import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ValueService {

	private value = 'my value';

  constructor() { }

  getValue() {
    return this.value;
  }

  setValue (value: string) {
    this.value = value;
  }

  getPromiseValue() {
    return Promise.resolve('value');
  }

  getObservableValue() {
    return of('observable value');
  }
}

configuramos nuestro set de pruebas para verificar funcionalidad el servicio con FOCUS en el.

value.service.spec.ts

import { ValueService } from './value.service';

fdescribe('ValueService', () => {
  let service: ValueService;
  
  beforeEach(() => {
    service = new ValueService();
  });

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

  describe('Test for getValue', () => {
    // AAA
    it('Should return "my value"', () => {
      expect(service.getValue()).toBe('my value');
    });
  });

  describe('Test for setValue', () => {
    // AAA
    it('Should change the value', () => {
      expect(service.getValue()).toBe('my value');
      service.setValue('change');
      expect(service.getValue()).toBe('change');
    });
  });

  describe('Test for getPromiseValue', () => {
    // AAA
    it('Should return "promise value" from promise', (doneFn) => {
      service.getPromiseValue()
      .then((value) => {
        // assert
        expect(value).toBe('promise value');
        doneFn();
      });
    });

    it('Should return "promise value" from promise using async', async() => {
     const rta = await service.getPromiseValue();
     expect(rta).toBe('promise value');
    });
  });
});

finalmente corremos el comando

ng test

para verificar fallas dentro del servicio

Kevin Bueno

student•

Cada escenario de prueba debería manejarse de manera isolated (aislada) de los otros escenarios de prueba

Jose Nuñez

student•

Cada que colocamos un it estamos indicando un escenario de prueba, cada escenario de prueba debería manejarse de manera insolada. Esto significa que una prueba no debería afectar a la siguiente o a otra prueba.

Lo que hacemos es crear las instancias que ocupamos para cada prueba, por ejemplo la creación del servicio. Para optimizar el codigo se usa la funcion beforeEach que va a ejecutarse antes de cada prueba.

Ricardo Javier Mijares Rivas

student•

Hola muy buenas noches, ¿Me ayudan por favor a solucionar? Agradecido de antemano Tengo el siguente problema, lo siguiente esta en el componente


    constructor(
        private bdcWalkService: BdcWalkService,
        private api: APIService
    ) { }

en APIservice esta el siguiente servicio:

    async helloWorld(name: string): Promise<string> {
        return new Promise(
            (resolve, reject) => {
                if (name === 'hello') {
                    resolve('data');
                } else {
                    reject ('fail');
                }
            }
        );
    }

En el ngOnInit de componete header lo siguiente

    ngOnInit(): void {
        this.api.helloWorld('Ricardo').then(response => {
            console.log(response);
        }).catch(error => {
            console.log(error);
        });
    }

El problema es que no logro hacerle prueba a helloWorld, en la cobertura,

Asi tengo el componente y no logro hacer que haga la prueba de this.api.helloWordl. En la cobertura el response lo marca en rojo

import {APIService} from '../../shared/services/API.service';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

    constructor(
        private api: APIService
    ) { }


    ngOnInit(): void {
        this.api.helloWorld('Ricardo').then(response => {
            console.log(response);
        }).catch(error => {
            console.log(error);
        });
    }
}

Reinaldo Mendoza

student•

Donde esta la prueba 😑

Kevin Costa

student•

en pruebas E2E, donde la sintáxis es muy similar... Debe testearse de manera aislada??

Danny Pacheco

student•

En realidad las pruebas E2E son pruebas donde vas a probar todo el flujo de la aplicación como si fueras un usuario, por dejarlo en palabras un poco mas simples y con un ejemplo claro. Cuando pruebas el flujo de compra de un item en un ecommerce con selenium. esas son pruebas E2E. En este tipo de pruebas haces integración de todo. En unit testing pruebas cada cosa de manera aislada.

Jovanny Ruiz

student•

Esta bien por el profesor, sin embargo a veces siento que no esta considerando que eliminar,poner, o cambiar algunas cosas para quienes estamos aprendiendo es un poco frustrante.

Kevin Bueno

student•

Reto:

import { waitForAsync } from '@angular/core/testing';

  describe('Tests for getObservableValue', () => {
    //AAA
    it('should return "observable value" from a promise', waitForAsync(() => {
      service.getObservable().subscribe(
        {
          next: (v) => expect(v).toBe('obsevable value')
        }
      )
    }))
  });

Teofilo David Fernandez Ochoa

student•

para menjar la actividad del observable yo utilice "lastValueFrom" de rxjs, lo cual no se si es valido pero aqui lo dejo

describe('Test for Observable', () => {
		it('should return "observable test" from observable', async () => {
			const response = await lastValueFrom(service.getObservableValue());
			expect(response).toBe('observable test');
		});
	});

Kevin Costa

student•

Algo interesante, que confirmo con este curso es que no hay forma de testear clases u objetos privados

describe('Test for getObservableValue', () => {
    it('should return "my value"', (doneFn) => {
      service.getObservableValue().subscribe((value) => {
        expect(value).toBe('my value');
        doneFn();
      });
    })
  })

  describe('Test for getObservableValue Sync', () => {
    it('should return "my value"', async () => {
      const value = await firstValueFrom(service.getObservableValue());
      expect(value).toBe('my value');
    })
  })

import { Injectable } from '@angular/core';
import { of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class ValueService {

	private value = 'my value';

  constructor() { }

  getValue() {
    return this.value;
  }

  setValue (value: string) {
    this.value = value;
  }

  getPromiseValue() {
    return Promise.resolve('value');
  }

  getObservableValue() {
    return of('observable value');
  }
}

import { ValueService } from './value.service';

fdescribe('ValueService', () => {
  let service: ValueService;
  
  beforeEach(() => {
    service = new ValueService();
  });

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

  describe('Test for getValue', () => {
    // AAA
    it('Should return "my value"', () => {
      expect(service.getValue()).toBe('my value');
    });
  });

  describe('Test for setValue', () => {
    // AAA
    it('Should change the value', () => {
      expect(service.getValue()).toBe('my value');
      service.setValue('change');
      expect(service.getValue()).toBe('change');
    });
  });

  describe('Test for getPromiseValue', () => {
    // AAA
    it('Should return "promise value" from promise', (doneFn) => {
      service.getPromiseValue()
      .then((value) => {
        // assert
        expect(value).toBe('promise value');
        doneFn();
      });
    });

    it('Should return "promise value" from promise using async', async() => {
     const rta = await service.getPromiseValue();
     expect(rta).toBe('promise value');
    });
  });
});

    async helloWorld(name: string): Promise<string> {
        return new Promise(
            (resolve, reject) => {
                if (name === 'hello') {
                    resolve('data');
                } else {
                    reject ('fail');
                }
            }
        );
    }

import {APIService} from '../../shared/services/API.service';

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

    constructor(
        private api: APIService
    ) { }


    ngOnInit(): void {
        this.api.helloWorld('Ricardo').then(response => {
            console.log(response);
        }).catch(error => {
            console.log(error);
        });
    }
}

import { waitForAsync } from '@angular/core/testing';

  describe('Tests for getObservableValue', () => {
    //AAA
    it('should return "observable value" from a promise', waitForAsync(() => {
      service.getObservable().subscribe(
        {
          next: (v) => expect(v).toBe('obsevable value')
        }
      )
    }))
  });

describe('Test for Observable', () => {
		it('should return "observable test" from observable', async () => {
			const response = await lastValueFrom(service.getObservableValue());
			expect(response).toBe('observable test');
		});
	});

Pruebas unitarias para servicios

Introducción

Unit testing para servicios en Angular

Jest vs. Jasmine: entornos de testing para Angular

Fundamentos de unit testing en Angular

Tu primera prueba en Angular

Explorando matchers

Reporte de coverage

Mocha Report

Testing en servicios

Pruebas unitarias para servicios

Servicios con dependencias

Spies

Angular TestBed

TestBed + Spies

Proyecto

Setup y maquetación del proyecto

Product Service Http

Testing en consultas HTTP

HttpClientTestingModule

Generando Mocks

Pruebas para GET

Pruebas maliciosas para GET

Pruebas para POST

Pruebas para PUT y DELETE

Bonus

Pruebas a errores

Pruebas con interceptores

Pruebas al login

Pruebas a la API del navegador

GitHub Actions

Próximos pasos

Toma el Curso de Angular: Unit Testing para Componentes