Cursos Empresas Blog Live Conf Eventos Precios

0:009:54

Pruebas maliciosas para GET

Curso de Angular: Unit Testing para Servicios

Clase 17 de 25

Clase 17 / 25

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

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

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

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

	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

Hace 4 años

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

Hace 4 años

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

Hace 4 años

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.

Comentarios (4)4 comentarios

Cesar Elías Armendariz Ruano

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

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

product.service.ts

Leandro Ariel Bustamante

Hace 3 años

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

José Israel Díaz Zapata

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

ISRAEL ARIAS

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'],

Agregue estas 2 pruebas

Pruebas maliciosas para GET

Progreso del curso

Introducción

Fundamentos de unit testing en Angular

Testing en servicios

Proyecto

Testing en consultas HTTP

Bonus

Próximos pasos