Pruebas unitarias para servicios
Contenido del curso
Fundamentos de unit testing en Angular
Testing en servicios
Proyecto
Testing en consultas HTTP
Bonus
Próximos pasos
Pruebas unitarias para servicios
Pruebas unitarias para servicios
Contenido del curso
Juan Manuel Galindo Casillas
Leoneider Trigos Guerrero
Danny Alejandro fernandez gallego
Reinaldo Mendoza
Cesar Elías Armendariz Ruano
Kevin Bueno
Jose Nuñez
Ricardo Javier Mijares Rivas
Reinaldo Mendoza
Kevin Costa
Danny Pacheco
Jovanny Ruiz
Kevin Bueno
Teofilo David Fernandez Ochoa
Kevin Costa
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'); }) })
async() quedo deprecado en angular 13, ahora debemos usar waitForAsync() que hace lo mismo.
Es extraño por que la versión actual de angular usa async en sus pruebas de AppComponent
Aun se usa
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
Cada escenario de prueba debería manejarse de manera isolated (aislada) de los otros escenarios de prueba
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.
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); }); } }
Donde esta la prueba 😑
en pruebas E2E, donde la sintáxis es muy similar... Debe testearse de manera aislada??
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.
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.
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') } ) })) });
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'); }); });
Algo interesante, que confirmo con este curso es que no hay forma de testear clases u objetos privados