Generando Mocks

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

Nicolas Molina

teacher•

Hola, debes tener en cuenta que las últimas versiones de FakerJS la importación debe ser así:

import { faker } from '@faker-js/faker';

Cesar Elías Armendariz Ruano

student•

No es necesario crear data manualmente para hacer las pruebas de conexión a las API, se puede generar de manera automatizada utilizando una lebrería que genera datos de forma aleatoria.

Faker js

desde la terminal vamos a instalarla

npm i faker-js/faker --save-dev

ahora vamos a crear un archivo llamado product.mock.ts en la carpeta de models, donde crearemos data de prueba con faker

product.mock.ts

import { faker } from '@faker-js/faker';
import { Product } from './product.model';

export const generateOneProduct = (): Product => {
  return {
    id: faker.datatype.uuid(),
    title: faker.commerce.productName(),
    price: parseInt(faker.commerce.price(), 10),
    description: faker.commerce.productDescription(),
    category: {
    id: faker.datatype.number(),
    name: faker.commerce.department()
    },
    images: [faker.image.imageUrl(), faker.image.imageUrl()]
  };
}

export const generateManyProducts = (size = 10): Product[] => {
  const products: Product[] = [];
  for (let index = 0; index < size ; index++) {
    products.push(generateOneProduct());
  }
  return [...products];
}

finalmente haremos los siguientes cambios en product.service.spec.ts haciendo una importación de product.mock.ts

product.service.spec.ts

import { generateManyProducts } from '../models/product.mock';

describe('tests for getAllSimple', () => {
    it('should return a product list', () => {
      //Arrange
      const mockData: Product[] = generateManyProducts(2);
      //Act
      productsService.getAllSimple()
      .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);
      httpController.verify();
    });
  });

KEVIN SUÁREZ GUZMAN

student•

Genial…

Franco Amoroso

student•

faker.datatype.uuid() esta deprecado, utilicen este otro

id: faker.string.uuid(),

segun la documentacion de Faker

Doc

!Faker string

Franco Amoroso

student•

Lo mismo con: faker.image.imageUrl() y faker.datatype.number() reemplazar con:

faker.image.url()

faker.number.int()

Eduardo García Bautista

student•

Quizá muchos ya sepan esto, peero, si no, puedes utilizar la desestructuración para que sea un poco más cómodo utilizar faker al generar los objectos, algo así:

 const {commerce, datatype, image} = faker;
  return {
    id: datatype.uuid(),
    taxes: 2,
    category: {
      id: datatype.number(),
      name: commerce.department()
    },
    description: commerce.productDescription(),
    images: [image.imageUrl(), image.imageUrl()],
    price: parseInt(commerce.price()),
    title: commerce.productName()
  };

Kevin Candia

student•

Tengo un problema al importar faker:

Cannot find module '@faker-js/faker' or its corresponding type declarations.

import { faker }    from '@faker-js/faker';

package.json:

  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.4",
    "@angular/cli": "~13.3.4",
    "@angular/compiler-cli": "~13.3.0",
    "@faker-js/faker": "github:faker-js/faker",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-mocha-reporter": "^2.2.5",
    "typescript": "~4.6.2",
    "webpack-bundle-analyzer": "^4.6.1"
  }

Y existe el directorio @faker-js/faker en mi node_modules A alguien le ha ocurrido lo mismo ?

Ricardo Rincon

student•

tengo el mismo problema

Denil José Parada Cabrera

student•

¿alguien ya pudo arreglar eso?

Tengo el mismo problema @Nicolas Molina

Carlos Alejandro Hernández Mejía

student•

Generando Mocks

Para probar nuestros servicios que hacen peticiones, fácilmente podríamos poner datos falso de manera manual y jugar con ellos, pero a la larga, agregar esos datos falsos puede ser algo repetitivo y tedioso, que puede hacer crecer nuestro código.
En estos casos, sería útil encontrar una forma de poblar esos datos de manera aleatoria. La solución, es hacer uso de la librería ****.
💡 es una librería JavaScript que se utiliza para generar datos aleatorios, como nombres, direcciones, números de teléfono y otros tipos de información. La librería proporciona una amplia variedad de métodos para generar diferentes tipos de datos y permite personalizar la salida para adaptarse a tus necesidades.
Esta librería la puedes utilizar para rellenar tu base de datos de prueba con datos aleatorios o para generar datos de prueba para tus pruebas unitarias o de integración.
⚠️ Es importante tener en cuenta que los datos generados por Faker.js no son reales y no deben utilizarse para fines serios o de producción.
Para utilizar , debes instalar la librería a través de npm con el comando npm i -D @faker-js/faker y luego importarla en tu proyecto. Una vez importada, puedes utilizar sus métodos para generar datos aleatorios.

Por ejemplo, para generar un nombre aleatorio puedes utilizar el método faker.name.findName(). También puedes utilizar la propiedad faker.locale para cambiar el idioma de la salida y la propiedad faker.seed para establecer una semilla aleatoria para reproducir resultados específicos.

Cesar Eduardo Valle Pino

student•

Para quienes utilizan yarn, lo pueden instalar con: yarn add @faker-js/faker --save-dev

gabriela cressa

student•

Tengo un problema al importar faker:

Cannot find module '@faker-js/faker' or its corresponding type declarations.

import { faker } from '@faker-js/faker'; hola tengo este mismo problema alguien podra ayudarme??

Platzi

student•

El problema que estás experimentando se debe a que estás importando incorrectamente el módulo de faker. La forma correcta de importarlo es: import faker from 'faker'. Asegúrate de tener instalada la última versión de faker y de utilizar la importación correcta.

Marcos Galaviz

student•

Buen dia excelente curso pero creo que no me queda tan claro como hacerlo por ejemplo con servicios como firebase, tengo un servicio con algo como esto:

import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';

constructor( private afs: AngularFirestore, )

y aqui lo utilizo:

getRestauranteConfig(restauranteId: string){ this.afs.doc<Restaurante>(restaurantes/${restauranteId}) .valueChanges().subscribe(

Pero no puedo hacer el test correctamente porque me marca error ahi en el this.afs.doc ... ¿como deberia probar estos casos o cual seria el mejor camino? Muchas gracias a quien se tome el tiempo de responder

Mauricio Garibello Rodriguez

student•

Que son cosas de mutación ? Problemas de mutación?

Yessica Alexandra Malaver Gómez

student•

Los problemas de mutación ocurren cuando se modifica un objeto o array original, lo que puede causar efectos secundarios no deseados en otras partes del código. Al usar la sintaxis [...array], se crea una copia del array original, evitando cambios en su contenido. Esto es importante en Angular y en otras tecnologías para mantener la inmutabilidad y facilitar la gestión de estado, especialmente en aplicaciones reactivas. Retornar un nuevo array ayuda a mantener la predictibilidad y la integridad de los datos en el flujo de trabajo.

Jessica Silvia Payano Castro

student•

A mi me funciono hacer esto:

npm uninstall @faker-js/faker npm install @faker-js/faker@latest --save-dev

Andres Delgado Rivera

student•

Cuando sé que es necesario cuidarme de problemas de mutación ? que problemas estos pueden generar

David Mares

student•

me funciono import faker from 'faker';

en vez de import faker from '@faker-js/faker';

Adrian Guevara

student•

Hola, para los que les da error al instalar la última versión de faker, acá una solución para instalar una versión anterior que si funciona.

npm i @types/faker@5.5.3 --save-dev
npm i faker@5.5.3 --save-dev

Juan Luna

student•

Yo me pregunto, esto de las pruebas cada vez se complica más y puede llegar un momento que tengamos mucho código implementado en test unitarios etc ¿Qué pasa si las pruebas están mal y dan falsos positivos? ¿Quién hace el test de los tests?, ¿Quién vigila al vigilante?

Carlos Alejandro Hernández Mejía

student•

Generando Mocks

Para probar nuestros servicios que hacen peticiones, fácilmente podríamos poner datos falso de manera manual y jugar con ellos, pero a la larga, agregar esos datos falsos puede ser algo repetitivo y tedioso, que puede hacer crecer nuestro código.
En estos casos, sería útil encontrar una forma de poblar esos datos de manera aleatoria. Para lo cual, podemos hacer uso de la librería ****.
💡 es una librería JavaScript que se utiliza para generar datos aleatorios, como nombres, direcciones, números de teléfono y otros tipos de información. La librería proporciona una amplia variedad de métodos para generar diferentes tipos de datos y permite personalizar la salida para adaptarse a tus necesidades.
Esta librería la puedes utilizar para rellenar tu base de datos de prueba con datos aleatorios o para generar datos de prueba para tus pruebas unitarias o de integración.
⚠️ Es importante tener en cuenta que los datos generados por Faker.js no son reales y no deben utilizarse para fines serios o de producción.
Para utilizar , debes instalar la librería a través de npm con el comando npm i -D @faker-js/faker y luego importarla en tu proyecto. Una vez importada, puedes utilizar sus métodos para generar datos aleatorios.

Por ejemplo, para generar un nombre aleatorio puedes utilizar el método faker.name.findName(). También puedes utilizar la propiedad faker.locale para cambiar el idioma de la salida y la propiedad faker.seed para establecer una semilla aleatoria para reproducir resultados específicos.

Kevin Candia

student•

Si no quieren generar un for en generateManyProducts, pueden hacer lo siguiente:

export const generateManyProducts = ( size = 10 ) => {
    return new Array( size )
    .fill( null )
    .map( () => ( { ...generateOneTicket() } ) );
}

Joel Osvaldo Santos Soto

student•

Curso sobresaliente , gracias Nicolás por el empeño que pones en tus videos !

Ivan Manrique

student•

Me fue de mucha utilidad este capitulo de mock, gracias crack.

import { faker } from '@faker-js/faker';
import { Product } from './product.model';

export const generateOneProduct = (): Product => {
  return {
    id: faker.datatype.uuid(),
    title: faker.commerce.productName(),
    price: parseInt(faker.commerce.price(), 10),
    description: faker.commerce.productDescription(),
    category: {
    id: faker.datatype.number(),
    name: faker.commerce.department()
    },
    images: [faker.image.imageUrl(), faker.image.imageUrl()]
  };
}

export const generateManyProducts = (size = 10): Product[] => {
  const products: Product[] = [];
  for (let index = 0; index < size ; index++) {
    products.push(generateOneProduct());
  }
  return [...products];
}

import { generateManyProducts } from '../models/product.mock';

describe('tests for getAllSimple', () => {
    it('should return a product list', () => {
      //Arrange
      const mockData: Product[] = generateManyProducts(2);
      //Act
      productsService.getAllSimple()
      .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);
      httpController.verify();
    });
  });

 const {commerce, datatype, image} = faker;
  return {
    id: datatype.uuid(),
    taxes: 2,
    category: {
      id: datatype.number(),
      name: commerce.department()
    },
    description: commerce.productDescription(),
    images: [image.imageUrl(), image.imageUrl()],
    price: parseInt(commerce.price()),
    title: commerce.productName()
  }; 

  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.4",
    "@angular/cli": "~13.3.4",
    "@angular/compiler-cli": "~13.3.0",
    "@faker-js/faker": "github:faker-js/faker",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "karma-mocha-reporter": "^2.2.5",
    "typescript": "~4.6.2",
    "webpack-bundle-analyzer": "^4.6.1"
  }

Generando Mocks

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