Generando Mocks
Contenido del curso
Fundamentos de unit testing en Angular
Testing en servicios
Proyecto
Testing en consultas HTTP
Bonus
Próximos pasos
Generando Mocks
Contenido del curso
Generando Mocks
Nicolas Molina
Profesor
Cesar Elías Armendariz Ruano
Estudiante
KEVIN SUÁREZ GUZMAN
Estudiante
Franco Amoroso
EstudianteFranco Amoroso
Estudiante
Eduardo García Bautista
Estudiante
Kevin Candia
Estudiante
Ricardo Rincon
Estudiante
Denil José Parada Cabrera
Estudiante
Carlos Alejandro Hernández Mejía
Estudiante
Cesar Eduardo Valle Pino
Estudiante
gabriela cressa
Estudiante
Platzi
EstudianteMarcos Galaviz
Estudiante
Mauricio Garibello Rodriguez
Estudiante
Yessica Alexandra Malaver Gómez
Estudiante
Jessica Silvia Payano Castro
Estudiante
Andres Delgado Rivera
Estudiante
David Mares
Estudiante
Adrian Guevara
Estudiante
Juan Luna
EstudianteCarlos Alejandro Hernández Mejía
EstudianteKevin Candia
EstudianteJoel Osvaldo Santos Soto
Estudiante
Ivan Manrique
EstudianteHola, debes tener en cuenta que las últimas versiones de FakerJS la importación debe ser así:
import { faker } from '@faker-js/faker';
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(); }); });
Genial…
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()
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() };
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 ?
tengo el mismo problema
¿alguien ya pudo arreglar eso?
Tengo el mismo problema @Nicolas Molina
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 propiedadfaker.localepara cambiar el idioma de la salida y la propiedadfaker.seedpara establecer una semilla aleatoria para reproducir resultados específicos.
Para quienes utilizan yarn, lo pueden instalar con: yarn add @faker-js/faker --save-dev
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??
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.
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
Que son cosas de mutación ? Problemas de mutación?
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.
A mi me funciono hacer esto:
npm uninstall @faker-js/faker
npm install @faker-js/faker@latest --save-dev
Cuando sé que es necesario cuidarme de problemas de mutación ? que problemas estos pueden generar
me funciono
import faker from 'faker';
en vez de
import faker from '@faker-js/faker';
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
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?
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 propiedadfaker.localepara cambiar el idioma de la salida y la propiedadfaker.seedpara establecer una semilla aleatoria para reproducir resultados específicos.
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() } ) ); }
Curso sobresaliente , gracias Nicolás por el empeño que pones en tus videos !
Me fue de mucha utilidad este capitulo de mock, gracias crack.