Mocha Report

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

Juan Manuel Galindo Casillas

student•

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'],

Jorge Luis Silva Medina

student•

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

Carlos Alexis Nicolas Sanchez

student•

en que vercion??

Damián Valenzuela Negrete

student•

Mejor crearlo con el CLI con el comando en vez de hacerlo manualmente con:

ng generate config karma

ng g config karma

Cesar Eduardo Valle Pino

student•

para quienes utilizan yarn: yarn add karma-mocha-reporter --save-dev

Cesar Elías Armendariz Ruano

student•

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');
  });
});

YOLANDA MORALES SUAREZ

student•

Generar varios describe dentro de un describe es buena práctica?

Víctor Rolack

student•

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.

Carlos Andrés Norato Gómez

student•

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💚

Carlos Alejandro Hernández Mejía

student•

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.

Carlos Alexis Nicolas Sanchez

student•

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);
    });
    });
});

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');
  });
});

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);
    });
    });
});

Mocha Report

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