No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Pruebas a QueryParams

8/20
Recursos

Aportes 1

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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');
  });