Mocha Report
Clase 6 de 25 • Curso de Angular: Unit Testing para Servicios
Contenido del curso
Juan Manuel Galindo Casillas
student•
hace 4 años
Clase 6 de 25 • Curso de Angular: Unit Testing para Servicios
Contenido del curso
Juan Manuel Galindo Casillas
Jorge Luis Silva Medina
Carlos Alexis Nicolas Sanchez
Damián Valenzuela Negrete
Cesar Eduardo Valle Pino
Cesar Elías Armendariz Ruano
YOLANDA MORALES SUAREZ
Víctor Rolack
Carlos Andrés Norato Gómez
Carlos Alejandro Hernández Mejía
Carlos Alexis Nicolas Sanchez
Instalar Mocha Report
npm i karma-mocha-reporter --save-dev
Agregar en karma.conf.js en plugins
require('karma-mocha-reporter')
Cambiar reporters a
reporters: ['mocha'],
Si estan en versiones mas de angular y no les aparece el karma.conf.js tienen que crearlo o copiarlo del repo.
Recuerden agregar esa configuración al angular.json
en que vercion??
Mejor crearlo con el CLI con el comando en vez de hacerlo manualmente con:
ng generate config karma
o
ng g config karma
para quienes utilizan yarn: yarn add karma-mocha-reporter --save-dev
en el momento que lancemos un coverage report nos devolvera las pruebas que han pasado y las que no. Seran nombradas por sus identificadores y las veces que han sido lanzadas.
Una recomendación es separar con un subscribe por conjunto de pruebas de la siguiente manera
describe('Test for Calculator', () => { describe('Tests for multiply', () => { it('#should return a nine', () => { //Arrange const calculator = new Calculator(); //Act const rta = calculator.multiply(3,3); //Assert expect(rta).toEqual(9); }); it('#should return a four', () => { //Arrange const calculator = new Calculator(); //Act const rta = calculator.multiply(1,4); //Assert expect(rta).toEqual(4); }); }); describe('test for divide', () => { it('#should return a some numbers', () => { //Arrange const calculator = new Calculator(); //Act expect(calculator.divide(6,3)).toEqual(2); expect(calculator.divide(5,2)).toEqual(2.5); }); it('#for a zero', () => { //Arrange const calculator = new Calculator(); //Act expect(calculator.divide(6,0)).toBeNull(); expect(calculator.divide(5,0)).toBeNull(); expect(calculator.divide(1232343245345342342,0)).toBeNull(); }); }); it('#test matchers', () => { const name = 'cesar'; let name2; expect(name).toBeDefined(); expect(name2).toBeUndefined(); expect(1 + 3 === 4).toBeTruthy(); // 4 expect(1 + 1 === 3).toBeFalsy(); // 2 expect(5).toBeLessThan(10); expect(20).toBeGreaterThan(10); expect('123456').toMatch(/123/); expect(['apples', 'oranges', 'pears']).toContain('oranges'); }); });
Generar varios describe dentro de un describe es buena práctica?
No hay un límite como tal, pero hay que tener cuidado con la cantidad de anidamiento que podamos estar generando dentro del código, ya que cada vez que creamos un nuevo nivel de anidación, la legibilidad disminuye.
Wooooo que pasada de curso no tenia idea de ese plugin se muy bien la forma en que nos muestra los test tanto exitosos como los fallidos Ahora siempre voy a instalar ese plugin me gusto mucho💚
Generando el reporte de cobertura con Mocha-Reporter
Para empezar a usar Mocha para generar el reporte, primero tenemos que instalarlo cómo dependencia de desarrollo, con el comando npm i -D karma-mocha-reporter.
Luego, tendrás que abrir el archivo karma.conf.js y agregar la línea require('karma-mocha-reporter') al arreglo de plugins de la configuración de Karma.
Para finalizar, eliminas el contenido del arreglo reporters y agregas 'mocha' en su lugar.
Con este cambio, podremos ver que la salida en la terminal de la ejecución de las pruebas es más detalla que la anterior.
|💡 Recuerda que puedes organizar mejor tus pruebas agrupándolas con funciones describe anidadas.
refact de las pruebas se pueden agrupar las pruebas para poder agrupar por los metodos de la clase.
import { Calculator } from './calculator'; describe('Test for Calculator', () => { describe('Tests for multiply', () => { //grupo de pruebas para el metodo multi it('should return a four', () => { const calculator = new Calculator(); const rta = calculator.multiply(1,4); expect(rta).toEqual(4); }); }); describe('Tests for divide', () => { //agrupacion de pruebas de div. it('should return a some numbers', () => { const calculator = new Calculator(); expect(calculator.divide(6,3)).toEqual(2); expect(calculator.divide(5,2)).toEqual(2.5); }); }); });