Pruebas para PUT y DELETE

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

Andrés Quintero Arias

student•

Para vs-code cree un snippet sencillo para crear las pruebas:

Pulsar Ctrl+Shift+P, y escribir "Configure User Snippets"
Seleccionar "New Global Snippets file"
escribir "spec.ts"
En el nuevo archivo que se abre, pegar lo siguiente:

"it method":{
  "scope": "typescript",
  "prefix": "test-it",
  "body": [
	"it('${1:description-test}', () => {",
	  "// Arrange", 
	   "$2",
	  "// Act",
	  "// Assert",
	"});"
    ],
  "description": "it method"
}

Guardar y salir. Ahora en los archivos spec.ts al escribir "test-it" seguido de la tecla Tab, aparecerá la porción de códgo

Adrian Silva

student•

Excelente, muchas gracias, aprendí a hacer snippets👍

Armando Rivera

student•

En el código veo esto

this.http.delete<boolean>

Creo que lo correcto sería

 this.http.delete<{ rta: boolean }>

Ya que así es como responde el DELETE de la API https://api.escuelajs.co/docs/#/products/ProductsController_delete

Tanelo Mondaca Silva

student•

No es necesario, ya que el tipado <boolean> indica que la respuesta va a ser un booleano Con eso solo estás colocando código demás

Armando Rivera

student•

@taknello <boolean> indica que la respuesta va a ser un booleano, pero la respuesta no es un booleano, es un objeto

{
  "rta": true
}

Cesar Elías Armendariz Ruano

student•

describe('test for update', () => {
      it('should return an updated product', (doneFn) => {
        // Arrange
        const mockData = generateOneProduct();
        const id = '1';
        const dto: UpdateProductDTO = {
          title: 'update Product'
        };
        // Act
        productsService.update(id, {...dto}).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.body).toEqual(dto);
        expect(req.request.method).toEqual('PUT');
      });
  });

    describe('test for delete', () => {
      it('should delete a product', (doneFn) => {
        // Arrange
        const id = '1';
        // Act
        productsService.delete(id).subscribe((data) => {
          // Assert
          expect(data).toBe(true);
          doneFn();
        });
        //http config
        const url = `${environment.API_URL}/api/v1/products/${id}`;
        const req = httpController.expectOne(url);
        req.flush(true);
        expect(req.request.method).toEqual('DELETE');
      });
  });

Julian Alejandro

student•

¿Cómo sería una prueba para el siguiente método?

fetchReadAndUpdate(id: string, dto: UpdateProductDTO) {
    return zip(
      this.getOne(id),
      this.update(id, dto)
    );
  }

Tanelo Mondaca Silva

student•

Tienes que hacer mocks de los metodos que estás llamando para que respondan lo que idealmente los métodos reales responderían

Juan Luna

student•

¿No se debería crear un producto y luego actualizarlo?

no se algo como esto:

fdescribe('test for update', ()=>{
    it('should return a product updated, dto should be mutable and http.method is "PUT"', (doneFn)=>{
      // ARRANGE
      const mockData = generateOneProduct();
      const cdto: CreateProductDTO = {
        title: 'New Product',
        price: 100,
        images: ['image0', 'image1'],
        description: 'bal bla bla, bal bla, bla',
        categoryId: 12
      };
      const udto: UpdateProductDTO = {
        title: 'product Updated',
        price: 200
      };

      // ACT
      productsService.create({...cdto}).subscribe(data =>{
        // ARRANGE
        const updated: Product = {
          id: data.id,
          title: 'product Updated',
          price: 200,
          images: ['image0', 'image1'],
          description: 'bal bla bla, bal bla, bla',
          category: {
            id: 12,
            name: data.category.name
          }
        };
        // ASSERT
        expect(data).toEqual(mockData);
        productsService.update(data.id, {...udto}).subscribe(dataUpdated => {
          // ASSERT
          console.log(dataUpdated);
          expect(dataUpdated).toEqual(updated);
          doneFn();
        });
        // CONFIG
        const url = `${environment.API_URL}/api/v1/products/${data.id}`;
        const req = httpController.expectOne(url);
        req.flush(updated);
        expect(req.request.body).toEqual(udto);
        expect(req.request.method).toEqual('PUT');
        httpController.verify();
      });

      // CONFIG
      const url = `${environment.API_URL}/api/v1/products`;
      // console.log(url);
      const req = httpController.expectOne(url);
      req.flush(mockData);
      expect(req.request.body).toEqual(cdto);
      expect(req.request.method).toEqual('POST');
      // httpController.verify();
    });
  });

yo lo he probado y funciona, mi pregunta es ¿Es necesario hacerlo así o basta como lo hizo el profe Nicolás?

Jorge Luis Silva Medina

student•

Exacto la misma estructura pero maneje diferente el método de comparación toBeTrue. Excelente consejo para el spred operator. Ya quiero ver el curso de testing para NestJS

"it method":{
  "scope": "typescript",
  "prefix": "test-it",
  "body": [
	"it('${1:description-test}', () => {",
	  "// Arrange", 
	   "$2",
	  "// Act",
	  "// Assert",
	"});"
    ],
  "description": "it method"
}

describe('test for update', () => {
      it('should return an updated product', (doneFn) => {
        // Arrange
        const mockData = generateOneProduct();
        const id = '1';
        const dto: UpdateProductDTO = {
          title: 'update Product'
        };
        // Act
        productsService.update(id, {...dto}).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.body).toEqual(dto);
        expect(req.request.method).toEqual('PUT');
      });
  });

    describe('test for delete', () => {
      it('should delete a product', (doneFn) => {
        // Arrange
        const id = '1';
        // Act
        productsService.delete(id).subscribe((data) => {
          // Assert
          expect(data).toBe(true);
          doneFn();
        });
        //http config
        const url = `${environment.API_URL}/api/v1/products/${id}`;
        const req = httpController.expectOne(url);
        req.flush(true);
        expect(req.request.method).toEqual('DELETE');
      });
  });

fdescribe('test for update', ()=>{
    it('should return a product updated, dto should be mutable and http.method is "PUT"', (doneFn)=>{
      // ARRANGE
      const mockData = generateOneProduct();
      const cdto: CreateProductDTO = {
        title: 'New Product',
        price: 100,
        images: ['image0', 'image1'],
        description: 'bal bla bla, bal bla, bla',
        categoryId: 12
      };
      const udto: UpdateProductDTO = {
        title: 'product Updated',
        price: 200
      };

      // ACT
      productsService.create({...cdto}).subscribe(data =>{
        // ARRANGE
        const updated: Product = {
          id: data.id,
          title: 'product Updated',
          price: 200,
          images: ['image0', 'image1'],
          description: 'bal bla bla, bal bla, bla',
          category: {
            id: 12,
            name: data.category.name
          }
        };
        // ASSERT
        expect(data).toEqual(mockData);
        productsService.update(data.id, {...udto}).subscribe(dataUpdated => {
          // ASSERT
          console.log(dataUpdated);
          expect(dataUpdated).toEqual(updated);
          doneFn();
        });
        // CONFIG
        const url = `${environment.API_URL}/api/v1/products/${data.id}`;
        const req = httpController.expectOne(url);
        req.flush(updated);
        expect(req.request.body).toEqual(udto);
        expect(req.request.method).toEqual('PUT');
        httpController.verify();
      });

      // CONFIG
      const url = `${environment.API_URL}/api/v1/products`;
      // console.log(url);
      const req = httpController.expectOne(url);
      req.flush(mockData);
      expect(req.request.body).toEqual(cdto);
      expect(req.request.method).toEqual('POST');
      // httpController.verify();
    });
  });

Pruebas para PUT y DELETE

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