Fake ParamsMap en Guardianes

Creación de pruebas a parámetros

import { ActivatedRouteSnapshot, convertToParamMap, Params, RouterStateSnapshot } from '@angular/router';

export function fakeRouterStateSnapshot(options: Partial<RouterStateSnapshot>) {
  return options as RouterStateSnapshot;
}

export function fakeActivatedRouteSnapshot(options: Partial<ActivatedRouteSnapshot>) {
  return options as ActivatedRouteSnapshot;
}

export function fakeParamMap(params: Params = {}) {
  return convertToParamMap(params);
}

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
    // const token = this.tokenService.getToken();
    // if (!token) {
    //   this.router.navigate(['/home']);
    //   return false;
    // }
    // return true;
    route.paramMap.get('idProduct')
    route.paramMap.has('idProduct')
    return this.authService.getUser()
    .pipe(
      map(user => {
        if(!user) {
          this.router.navigate(['/home']);
          return false;
        }
        return true;
      })
    )
  }

import { fakeActivatedRouteSnapshot, fakeRouterStateSnapshot, fakeParamMap ,mockObservable } from './../../testing';
it('should return true with session', (doneFn) => {
    const activatedRoute = fakeActivatedRouteSnapshot({
      // params: {
      //   idProduct: '1212'
      // },
      paramMap: fakeParamMap({
        idProduct: '1212'
      })
    });
    const routerState = fakeRouterStateSnapshot({});
    const userMock = generateOneUser();

    authService.getUser.and.returnValue(mockObservable(userMock));
    guard.canActivate(activatedRoute, routerState)
    .subscribe(rta => {
      expect (rta).toBeTruthy();
      doneFn();
    });
  });

  it('should return false without session', (doneFn) => {
    const activatedRoute = fakeActivatedRouteSnapshot({
      paramMap: fakeParamMap({
        idProduct: '1212'
      })
    });
    const routerState = fakeRouterStateSnapshot({});
    authService.getUser.and.returnValue(mockObservable(null));
    guard.canActivate(activatedRoute, routerState)
    .subscribe(rta => {
      expect (rta).toBeFalse();
      expect (router.navigate).toHaveBeenCalledWith(['/home']);
      doneFn();
    });
  });

  it('should return false with idProduct Params', (doneFn) => {
    const activatedRoute = fakeActivatedRouteSnapshot({
      paramMap: fakeParamMap({
        idProduct: '1212'
      })
    });
    const routerState = fakeRouterStateSnapshot({});

    authService.getUser.and.returnValue(mockObservable(null));
    guard.canActivate(activatedRoute, routerState)
    .subscribe(rta => {
      expect (rta).toBeFalse();
      expect (router.navigate).toHaveBeenCalledWith(['/home']);
      doneFn();
    });
  });

import { ActivatedRouteSnapshot, convertToParamMap, Params, RouterStateSnapshot } from '@angular/router';

export function fakeRouterStateSnapshot(options: Partial<RouterStateSnapshot>) {
  return options as RouterStateSnapshot;
}

export function fakeActivatedRouteSnapshot(options: Partial<ActivatedRouteSnapshot>) {
  return options as ActivatedRouteSnapshot;
}

export function fakeParamMap(params: Params = {}) {
  return convertToParamMap(params);
}

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {
    // const token = this.tokenService.getToken();
    // if (!token) {
    //   this.router.navigate(['/home']);
    //   return false;
    // }
    // return true;
    route.paramMap.get('idProduct')
    route.paramMap.has('idProduct')
    return this.authService.getUser()
    .pipe(
      map(user => {
        if(!user) {
          this.router.navigate(['/home']);
          return false;
        }
        return true;
      })
    )
  }

import { fakeActivatedRouteSnapshot, fakeRouterStateSnapshot, fakeParamMap ,mockObservable } from './../../testing';
it('should return true with session', (doneFn) => {
    const activatedRoute = fakeActivatedRouteSnapshot({
      // params: {
      //   idProduct: '1212'
      // },
      paramMap: fakeParamMap({
        idProduct: '1212'
      })
    });
    const routerState = fakeRouterStateSnapshot({});
    const userMock = generateOneUser();

    authService.getUser.and.returnValue(mockObservable(userMock));
    guard.canActivate(activatedRoute, routerState)
    .subscribe(rta => {
      expect (rta).toBeTruthy();
      doneFn();
    });
  });

  it('should return false without session', (doneFn) => {
    const activatedRoute = fakeActivatedRouteSnapshot({
      paramMap: fakeParamMap({
        idProduct: '1212'
      })
    });
    const routerState = fakeRouterStateSnapshot({});
    authService.getUser.and.returnValue(mockObservable(null));
    guard.canActivate(activatedRoute, routerState)
    .subscribe(rta => {
      expect (rta).toBeFalse();
      expect (router.navigate).toHaveBeenCalledWith(['/home']);
      doneFn();
    });
  });

  it('should return false with idProduct Params', (doneFn) => {
    const activatedRoute = fakeActivatedRouteSnapshot({
      paramMap: fakeParamMap({
        idProduct: '1212'
      })
    });
    const routerState = fakeRouterStateSnapshot({});

    authService.getUser.and.returnValue(mockObservable(null));
    guard.canActivate(activatedRoute, routerState)
    .subscribe(rta => {
      expect (rta).toBeFalse();
      expect (router.navigate).toHaveBeenCalledWith(['/home']);
      doneFn();
    });
  });

Fake ParamsMap en Guardianes

Creación de pruebas a parámetros

Configurando el proyecto

Probando el Router

Parámetros

Product Detail

Pruebas a los parámetros

Pruebas al render

Pruebas inválidas del parámetro

Solución del reto: fakeAsync & tick

Pruebas a QueryParams

Routing components

Componentes con RouterLink

Pruebas con componentes anidados

Pruebas a Guardianes

Pruebas a canActivate

Fake ParamsMap en Guardianes

Integration tests

Introducción a RouterTestingModule

Navegando entre rutas

Montando componentes reales

Componentes con dependencias

Pruebas de integración con Guardianes

Integración continua con GitHub Actions

Cierre

Angular Unit Testing Hero