Pruebas a errores

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

Cesar Elías Armendariz Ruano

student•

En estas pruebas veremos como se debe verificar cuando por ejemplo el servidor no esta funcionando bien y como reaccionar de manera correcta

it('should return a product', (doneFn) => {
      // Arrange
      const mockData: Product = generateOneProduct();
      const id = '1';
      // Act
      productsService.getOne(id).subscribe((data) => {
        // Assert
        expect(data).toEqual(mockData);
        doneFn();
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(mockData);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when the status code is 404', (doneFn) => {
      // Arrange
      const id = '1';
      const msgError = '404 message';
      const mockError = {
        status: HttpStatusCode.NotFound,
        statusText: msgError,
      };
      // Act
      productsService.getOne(id).subscribe({
        error: (error) => {
          // assert
          expect(error).toEqual('El producto no existe');
          doneFn();
        },
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when the status code is 409', (doneFn) => {
      // Arrange
      const id = '1';
      const msgError = '409 message';
      const mockError = {
        status: HttpStatusCode.Conflict,
        statusText: msgError,
      };
      // Act
      productsService.getOne(id).subscribe({
        error: (error) => {
          // assert
          expect(error).toEqual('Algo esta fallando en el server');
          doneFn();
        },
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when the status code is 401', (doneFn) => {
      // Arrange
      const id = '1';
      const msgError = '409 message';
      const mockError = {
        status: HttpStatusCode.Unauthorized,
        statusText: msgError,
      };
      // Act
      productsService.getOne(id).subscribe({
        error: (error) => {
          // assert
          expect(error).toEqual('No estas permitido');
          doneFn();
        },
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });
  });

Carlos Andrés Norato Gómez

student•

Hola para el caso ultimo que no le estamos pasando un status code en el servicio yo cree la siguiente prueba no se si sea la forma correcta pero me funciono

it('should return right msg when code is undefined', (doneFn) => {
      //Arrage
      const productId = '4';
      const msgError = 'Error message';
      const mockError = {
        status: HttpStatusCode?.BadRequest,
        statusText: msgError
      }
      //Act
      productService.getOne(productId)
        .subscribe({
          error: (error) => {
            expect(error).toEqual('Ups algo salio mal');
            doneFn()
          }
        });
      //Assert
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      expect(req.request.method).toEqual('GET');
      req.flush(msgError, mockError);
    });
  });

Marcos Galaviz

student•

Debo probar un servicio de Angular pero no comprendo como puedo asignar el valor de la variable en el servicio para poder entrar a las condiciones de los if, por ejemplo desde el test quiero asignarle valores a environment.sessionRewardStore y a environment.sessionStoreElegibilityKeys pero no logro hacerlo, mi servicio:

public async getPurchasableRewards() {
        let userStores: RewardStore[] = [];
        await this.sessionmApi.getUserRewardStores().then((r) => {      
          if (Array.isArray(r)) {
// Quiero aqui enviar mis valores: environment.sessionmRewardStore
            if (environment.sessionmRewardStore) {
              userStores = r.filter((s) => {
                return s.id === environment.sessionmRewardStore;
              });
            } else {    
              userStores = r.filter((s) => {
// Quiero aqui enviar mis valores:environment.sessionmStoreEligibilityKeys 
                return s.eligibility_models.find((e) => environment.sessionmStoreEligibilityKeys.includes(e));
              });
            }
          }
        });
      }

Mi test:

fit('should getPurchasableRewards return .....', (doneFn) => {
    const mock = {
      type: AppStateActions.PURCHASABLE_REWARDS,
      payload: MockIPurchasableReward
    };
 
    const spysgetValue = spyOn(service['sessionmApi'], 'getUserRewardStores').and.returnValue(Promise.resolve(MockRewardStoreArray));

    //Aqui intento asignar el valor:
    environment.sessionmRewardStore='STORE-1'

    service.getPurchasableRewards().then((data) => {
      console.log('DATA PP:', data)
      doneFn();
    })
    .catch((err) =>{
      console.log('error', err)
    })
  });

Allan Alexis Orellana Orellana

student•

En este caso para que sirve crear la variable msgError? solo para poder realizar futuras validaciones?

Victor Alfredo Matzar Say

student•

La valor de la variable se necesita en el código más de una vez, posiblemente se vuelva a necesitar en un futuro. Si en caso el mensaje llegase a cambiar, es más fácil cambiarlo en la parte de la asignación, que cambiarlo manualmente uno por uno.

Jorge Luis Silva Medina

student•

Los otros casos de getOne

it('should return the right msg when status code is 409', (doneFn) => {
      // Arange
      const productId = '1';
      const msgError = '404 message';
      const mockError = {
        status: HttpStatusCode.Conflict,
        statusText: msgError,
      };
      // Act
      service.getOne(productId).subscribe({
        error: (err) => {
          // Assert
          expect(err).toEqual('Algo esta fallando en el server');
          doneFn();
        },
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when status code is 401', (doneFn) => {
      // Arange
      const productId = '1';
      const msgError = '404 message';
      const mockError = {
        status: HttpStatusCode.Unauthorized,
        statusText: msgError,
      };
      // Act
      service.getOne(productId).subscribe({
        error: (err) => {
          // Assert
          expect(err).toEqual('No estas permitido');
          doneFn();
        },
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when status code is 500', (doneFn) => {
      // Arange
      const productId = '1';
      const msgError = 'error message';
      const mockError = {
        status: HttpStatusCode.InternalServerError,
        statusText: msgError,
      };
      // Act
      service.getOne(productId).subscribe({
        error: (err) => {
          // Assert
          expect(err).toEqual('Ups algo salio mal');
          doneFn();
        },
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

Danny Alejandro fernandez gallego

student•

Igual podrias probar en cada test el flujo el error sin probarlo aparte, pues claro que ya a ests alturas yoestoy usando la ulima versión de rxjs,

observable.subscribe({
    next:()=>{
         // Test Code Succes
     },
     error:()=>{
         //Test Code Error
      }
})

Seria una buena practica?

Victor Alfredo Matzar Say

student•

Nose si escucho mal, pero creo que Nico se equivoca al mencionar RXJS, ya que pronuncia NGRX

it('should return a product', (doneFn) => {
      // Arrange
      const mockData: Product = generateOneProduct();
      const id = '1';
      // Act
      productsService.getOne(id).subscribe((data) => {
        // Assert
        expect(data).toEqual(mockData);
        doneFn();
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(mockData);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when the status code is 404', (doneFn) => {
      // Arrange
      const id = '1';
      const msgError = '404 message';
      const mockError = {
        status: HttpStatusCode.NotFound,
        statusText: msgError,
      };
      // Act
      productsService.getOne(id).subscribe({
        error: (error) => {
          // assert
          expect(error).toEqual('El producto no existe');
          doneFn();
        },
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when the status code is 409', (doneFn) => {
      // Arrange
      const id = '1';
      const msgError = '409 message';
      const mockError = {
        status: HttpStatusCode.Conflict,
        statusText: msgError,
      };
      // Act
      productsService.getOne(id).subscribe({
        error: (error) => {
          // assert
          expect(error).toEqual('Algo esta fallando en el server');
          doneFn();
        },
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when the status code is 401', (doneFn) => {
      // Arrange
      const id = '1';
      const msgError = '409 message';
      const mockError = {
        status: HttpStatusCode.Unauthorized,
        statusText: msgError,
      };
      // Act
      productsService.getOne(id).subscribe({
        error: (error) => {
          // assert
          expect(error).toEqual('No estas permitido');
          doneFn();
        },
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products/${id}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });
  });

it('should return right msg when code is undefined', (doneFn) => {
      //Arrage
      const productId = '4';
      const msgError = 'Error message';
      const mockError = {
        status: HttpStatusCode?.BadRequest,
        statusText: msgError
      }
      //Act
      productService.getOne(productId)
        .subscribe({
          error: (error) => {
            expect(error).toEqual('Ups algo salio mal');
            doneFn()
          }
        });
      //Assert
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      expect(req.request.method).toEqual('GET');
      req.flush(msgError, mockError);
    });
  });

public async getPurchasableRewards() {
        let userStores: RewardStore[] = [];
        await this.sessionmApi.getUserRewardStores().then((r) => {      
          if (Array.isArray(r)) {
// Quiero aqui enviar mis valores: environment.sessionmRewardStore
            if (environment.sessionmRewardStore) {
              userStores = r.filter((s) => {
                return s.id === environment.sessionmRewardStore;
              });
            } else {    
              userStores = r.filter((s) => {
// Quiero aqui enviar mis valores:environment.sessionmStoreEligibilityKeys 
                return s.eligibility_models.find((e) => environment.sessionmStoreEligibilityKeys.includes(e));
              });
            }
          }
        });
      }

fit('should getPurchasableRewards return .....', (doneFn) => {
    const mock = {
      type: AppStateActions.PURCHASABLE_REWARDS,
      payload: MockIPurchasableReward
    };
 
    const spysgetValue = spyOn(service['sessionmApi'], 'getUserRewardStores').and.returnValue(Promise.resolve(MockRewardStoreArray));

    //Aqui intento asignar el valor:
    environment.sessionmRewardStore='STORE-1'

    service.getPurchasableRewards().then((data) => {
      console.log('DATA PP:', data)
      doneFn();
    })
    .catch((err) =>{
      console.log('error', err)
    })
  });

it('should return the right msg when status code is 409', (doneFn) => {
      // Arange
      const productId = '1';
      const msgError = '404 message';
      const mockError = {
        status: HttpStatusCode.Conflict,
        statusText: msgError,
      };
      // Act
      service.getOne(productId).subscribe({
        error: (err) => {
          // Assert
          expect(err).toEqual('Algo esta fallando en el server');
          doneFn();
        },
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when status code is 401', (doneFn) => {
      // Arange
      const productId = '1';
      const msgError = '404 message';
      const mockError = {
        status: HttpStatusCode.Unauthorized,
        statusText: msgError,
      };
      // Act
      service.getOne(productId).subscribe({
        error: (err) => {
          // Assert
          expect(err).toEqual('No estas permitido');
          doneFn();
        },
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

    it('should return the right msg when status code is 500', (doneFn) => {
      // Arange
      const productId = '1';
      const msgError = 'error message';
      const mockError = {
        status: HttpStatusCode.InternalServerError,
        statusText: msgError,
      };
      // Act
      service.getOne(productId).subscribe({
        error: (err) => {
          // Assert
          expect(err).toEqual('Ups algo salio mal');
          doneFn();
        },
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products/${productId}`;
      const req = httpController.expectOne(url);
      req.flush(msgError, mockError);
      expect(req.request.method).toEqual('GET');
    });

Pruebas a errores

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