Tu primera prueba en Angular

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

Daniel Meza

student•

describe - define una suite de tests. Una colección de tests. Recibe dos parámetros, un string con el nombre de la suite y una function() donde se definen los tests.

it - define un test en particular. Recibe como parámetro el nombre del test y una función a ejecutar por el test.

expect - Lo que esperar recibir ese test. Con expect se hace la comprobación del test.

Tests Unitarios con Jasmine | Coding Potions

Alexei Alvarez

student•

Arrange:(Arreglar). Se establece el estado inicial, conocida como el sujeto a probar. Aquí se inicializan variables, importaciones. Se crea el ambiente a probar.

Act (Actuar): Se generan acciones o estímulos. Se llaman métodos, o se simulan clicks por ejemplo

Assert (Afirmar): observar el comportamiento. Los resultados son los esperados. Eje: Que algo cambie, se incremente, o no suceda nada.

Cesar Elías Armendariz Ruano

student•

Generalmente solemos hacer pruebas de debugging utilizando el console.log. Más sin embargo se debe utilizar las pruebas en Jasmine, para lo cual seguiremos los siguiente pasos en el ejemplo

Creamos un archivo en la carpeta app llamada calculator.ts, el cual contendra el siguiente código

calculator.ts

export class Calculator {
  multiply (a: number, b:number) {
    return a * b;
  }

  divide (a: number, b: number)  {
    if (b === 0) {

      return null;

    } else {

      return a / b;

    }
  }
}

Importamos calculator a nuestro app.component.ts para usarlo al lanzar la aplicación, observamos si los resultados son los esperados utilizando el console.log

app.component.ts

import { Calculator } from './calculator';

 ngOnInit(): void {
    const calculator = new Calculator();
    const rta = calculator.multiply(3,3);
    console.log(rta === 9);
    const rta2 = calculator.divide(3, 0);
    console.log(rta2 === null);
    console.log(rta2);
  }
}

Finalmente creamos el archivo de pruebas calculator.spec.ts para poder ejecutar las pruebas correctamente desde jasmine

calculator.spec.ts

import { Calculator } from './calculator';

describe('Test for Calculator', () => {
  it('#multiply should return a nine', () => {
    //Arrange
    const calculator = new Calculator();
    //Act
    const rta = calculator.multiply(3,3);
    //Assert
    expect(rta).toEqual(9);
  });
});

y ejecutamos el comando ng test en nuestra terminal para observar las pruebas realizadas

YOLANDA MORALES SUAREZ

student•

Hola a todos. Cuál es el orden de los cursos de unit testing? Gracias.

Yessica Alexandra Malaver Gómez

student•

En https://platzi.com/ruta/web-angular/ verás que la ruta de testing al finalizar: Servicios, componentes, formularios y rutas.

Miguel Angel Coy Triana

student•

import { Calculator } from './calculator';

describe('Unit testing for Calculator', () => {
  it('#Multiply, Should return the result of the numbers multiplied', () => {
    // Arrange
    const calculator = new Calculator();
    // Act
    const result = calculator.multiply(3, 3);
    // Assert
    expect(result).toBe(9);
  });

  it('#Divide, Should return the result of the numbers divided', () => {
    // Arrange
    const calculator = new Calculator();
    // Act
    const result = calculator.divide(3, 3);
    // Assert
    expect(result).toBe(1);
  });

  it('#Divide, Should return null if the number is divide by 0', () => {
    // Arrange
    const calculator = new Calculator();
    // Act
    const result = calculator.divide(3, 0);
    // Assert
    expect(result).toBeNull();
  });
});

Andrés Quintero Arias

student•

Es buena práctica usar un beforeEach para instanciar la clase de Calculadora? o es mejor instanciarla en cada prueba?

Andres Felipe Pinto Becerra

student•

Si señor el beforeEach es buena práctica usarlo. El como utilizarlos se debe considerar según sea a que le estamos haciendo pruebas unitarias, si a servicios o componentes.

En definitiva si se deben usar en la mayoría de los casos.

Anderson Josué Oroya Silva

student•

Muy bien explicado!

Tu primera prueba en Angular

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