Pruebas maliciosas para GET

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

Cesar Elías Armendariz Ruano

student•

En las pruebas no es simplemente seguir el camino feliz o (happy path) sino tambien hacer las pruebas poniendo distintos parámetros.

Por ejemplo en el caso de pruebas en el product service se puede intentar mandar precios de la lista de productos en 0 o en negativa y verificar lo que debería devolver, e incluso hay que enviar parametros de limit y offset para verificar su funcionalidad.

product.service.spec.ts

it('should return product list width taxes', (doneFn) => {
      // Arrange
      const mockData: Product[] = [
        {
          ...generateOneProduct(),
          price: 100, //100 * .19 = 19
        },
        {
          ...generateOneProduct(),
          price: 200, //200 * .19 = 38
        },
        {
          ...generateOneProduct(),
          price: 0, //0 * .19 = 0
        },
        {
          ...generateOneProduct(),
          price: -100, // = 0
        },
      ];
      //Act
      productsService.getAll()
      .subscribe((data) => {
        //Assert
        expect(data.length).toEqual(mockData.length);
        expect(data[0].taxes).toEqual(19);
        expect(data[1].taxes).toEqual(38);
        expect(data[2].taxes).toEqual(0);
        expect(data[3].taxes).toEqual(0);
        doneFn();
      });
       //http config
       const url = `${environment.API_URL}/api/v1/products`;
       const req = httpController.expectOne(url);
       req.flush(mockData);
       httpController.verify();
    });

    it('should send query params width limit 10 offset 3', (doneFn) => {
      //Arrange
      const mockData: Product[] = generateManyProducts(3);
      const limit = 10;
      const offset = 3;
      //Act
      productsService.getAll(limit, offset)
      .subscribe((data) => {
        //Assert
        expect(data.length).toEqual(mockData.length);
        doneFn();
      });
      //http config
      const url = `${environment.API_URL}/api/v1/products?limit=${limit}&offset=${offset}`;
      const req = httpController.expectOne(url);
      req.flush(mockData);
      const params = req.request.params;
      expect(params.get('limit')).toEqual(`${limit}`);
      expect(params.get('offset')).toEqual(`${offset}`);
      httpController.verify();
    });
  });

si hay que cambiar algo en el código del servicio se lo puede hacer

product.service.ts

	getAll(limit?: number, offset?: number): Observable<Product[]> {
    let params = new HttpParams();
    if (limit && offset != null) {
      params = params.set('limit', limit);
      params = params.set('offset', offset);
    }
    return this.http.get<Product[]>(`${this.apiUrl}/products`, { params })
    .pipe(
      retry(3),
      map(products => products.map(item => {
        return {
          ...item,
          taxes: item.price > 0 ? .19 * item.price : 0
        }
      }))
    );
  }

Juan Luna

student•

Pregunta tonta quizás, hemos generado 3 productos en la ultima prueba, generateManyProducts(3), pero mandamos un offset de 3 y un limit de 10 (productos), sin embargo la prueba no falla, cuando hacemos el expect(data.legnth).toEqual(mockData.length) ¡Que me maten si lo entiendo! ¿Alguien podría explicar esto? ¿No debería haberse hecho de esta otra forma para ser más coherente con lo que se está haciendo?, aunque de todas formas no falla, pongas lo que pongas...

      const limit = 10;
      const offset = 3;
      const mockData: Product[] = generateManyProducts(limit);

Por eso es por lo que yo digo, ¿Quién testea las pruebas?..

gracias de antemano

Jorge Luis Silva Medina

student•

Esta prueba que comentas puede aplicar cuando el total de productos es mayor al limite y ahí puedes probar si el limite se respeta.

Pero yo recomiendo que ese testing de esa lógica no debe estar en el FRONT debido a que el service no se encarga de limitar los registros, sino el BACK. Ese unit test debe estar en el BACK.

Danny Pacheco

student•

Lo que sucede en este caso es lo siguiente, recuerda que tu mockData es la simulación de la respuesta de tu backend después de aplicarle un query params, es decir, aquí no estamos validando la cantidad de registros que nos devuelve el backend después del query params y no se debería hacer porque es responsabilidad del backend validar que te retorne de forma correcta lo que envias en el query params, lo que hace esta prueba es verificar si el limit y el offset enviados son aceptables para realizar esta petición.

Leandro Ariel Bustamante

student•

Me rindo intente de todo para que en mi projecto con angular 17 funcione el mocha reporter y nada :(

José Israel Díaz Zapata

student•

usa la versión 16. Si la 17 aún tiene cosas inestables

ISRAEL ARIAS

student•

1. ng generate config karma 2. npm i karma-mocha-reporter --save-dev 3. karma.conf.js 4. plugins: [ require('karma-mocha-reporter') ], 5. change reporters: ['progress', 'kjhtml'] to this reporters: ['mocha', 'kjhtml'],

Jorge Luis Silva Medina

student•

Agregue estas 2 pruebas

    it('should send query params with limit 0 and offset 0', (doneFn) => {
      // Arange
      const mockData: Product[] = generateManyProducts(3);
      const limit = 0;
      const offset = 0;
      //Act
      service.getAll(limit, offset).subscribe((data) => {
        // Assert
        expect(data.length).toEqual(mockData.length);
        doneFn();
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products`;
      const req = httpController.expectOne(url);
      req.flush(mockData);
      const param = req.request.params;
      expect(param.get('limit')).toBeNull();
      expect(param.get('offset')).toBeNull();
      httpController.verify();
    });

    it('should send query params with limit 1 and offset 0', (doneFn) => {
      // Arange
      const mockData: Product[] = generateManyProducts(3);
      const limit = 1;
      const offset = 0;
      //Act
      service.getAll(limit, offset).subscribe((data) => {
        // Assert
        expect(data.length).toEqual(mockData.length);
        doneFn();
      });

      // http config
      const url = `${environment.API_URL}/api/v1/products?limit=${limit}&offset=${offset}`;
      const req = httpController.expectOne(url);
      req.flush(mockData);
      const param = req.request.params;
      expect(param.get('limit')).toEqual(limit.toString());
      expect(param.get('offset')).toEqual(offset.toString());
      httpController.verify();
    });

Pruebas maliciosas para GET

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