Cursos Empresas Blog Live Conf Eventos Precios

0:008:22

Generando Mocks

Curso de Angular: Unit Testing para Servicios

Clase 15 de 25

Clase 15 / 25

Cesar Elías Armendariz Ruano

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

Hace 4 años

Genial…

Comentarios (20)20 comentarios

Nicolas Molina

Profesor

Hace 5 años

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

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

Franco Amoroso

Hace 3 años

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

id: faker.string.uuid(),

segun la documentacion de Faker

Doc

!Faker string

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

faker.image.url()

faker.number.int()

Eduardo García Bautista

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

Ricardo Rincon

tengo el mismo problema

Denil José Parada Cabrera

¿alguien ya pudo arreglar eso?

Tengo el mismo problema @Nicolas Molina

Carlos Alejandro Hernández Mejía

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

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

gabriela cressa

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

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

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

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

Yessica Alexandra Malaver Gómez

Hace 2 años

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

A mi me funciono hacer esto:

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

Andres Delgado Rivera

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

David Mares

me funciono import faker from 'faker';

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

Adrian Guevara

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

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?

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.

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

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

Ivan Manrique

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

Generando Mocks

Progreso del curso

Introducción

Fundamentos de unit testing en Angular

Testing en servicios

Proyecto

Testing en consultas HTTP

Bonus

Próximos pasos