Pruebas a QueryParams
Clase 8 de 20 • Curso de Angular: Unit Testing para Rutas
Contenido del curso
Cesar Elías Armendariz Ruano
student•
hace 4 años
Cesar Elías Armendariz Ruano
para poder realizar este tipo de pruebas es necesario cambiar nuestro activated-route-stub debido a que no reconoce aun los query params enviados por lo que es necesario ingresarlos para que las pruebas funcionen sin problemas
activated-route-stub.ts
import { convertToParamMap, ParamMap, Params } from '@angular/router'; import { ReplaySubject } from 'rxjs'; /** * An ActivateRoute test double with a `paramMap` observable. * Use the `setParamMap()` method to add the next `paramMap` value. */ export class ActivatedRouteStub { // Use a ReplaySubject to share previous values with subscribers // and pump new values into the `paramMap` observable private subject = new ReplaySubject<ParamMap>(); private subjectQuery = new ReplaySubject<ParamMap>(); constructor(initialParams?: Params) { this.setParamMap(initialParams); } /** The mock paramMap observable */ readonly paramMap = this.subject.asObservable(); readonly queryParamMap = this.subjectQuery.asObservable(); /** Set the paramMap observable's next value */ setParamMap(params: Params = {}) { this.subject.next(convertToParamMap(params)); } /** Set the queryParamMap observable's next value */ setQueryParamMap(params: Params = {}) { this.subjectQuery.next(convertToParamMap(params)); } }
cambiamos nuestro product-detail.component.ts ingresando nuevos parametros por medio de queryParams
product-detail.component.ts
typeCustomer: string | null = null; ngOnInit(): void { this.route.paramMap .subscribe((params) => { const productId = params.get('id'); if (productId) { this.getProductDetail(productId); } else { this.goToBack(); } }); this.route.queryParamMap.subscribe(params => { this.typeCustomer = params.get('type'); }) }
Ahora podemos hacer las pruebas normalmente
product-detial.component.spec.ts
it('should typeCustomer be "customer"', () => { // Arrange const productId = '2'; route.setParamMap({id: productId}); route.setQueryParamMap({type: 'customer'}); const productMock = { ...generateOneProduct(), id: productId, } productsService.getOne.and.returnValue(mockObservable(productMock)); // Act fixture.detectChanges(); // ngOnInit // Assert fixture.detectChanges(); expect(component.typeCustomer).toEqual('customer'); });