/angular-13-unit-test-and-integration

Ejemplos de pruebas Unitarias y de integración en Angular

Primary LanguageTypeScript

Proyecto (Pruebas Unitarias y de integración (Unit testing) en Angular)

Angular 13

Puede ver una demo aquí: https://codesandbox.io/p/github/dennysjmarquez/angular-13-unit-test-and-integration

Las pruebas están separadas en 4 categorías:

  • Básicas

    En estas pruebas verán la comprobación de Arrays, La comprobación de los booleans y las diferentes formas de hacer esto

    Ej. expect(resp).toBe(true) expect(resp).toBeTrue() expect(resp).toBeTruthy()

    // la Negación puede ser asi o usar uno que evalué un false

    expect(resp).not.toBeTruthy()

    También muestro el cómo hacer un test de funciones que están dentro de una class, probando el return de la misma, Pruebas con números usando toBe, string uso de toContain expect(typeof resp).toBe('string') familiarización con la evaluación de expect, siclos de vida del describe de Jasmine, tales como beforeAll, beforeEach, afterAll, afterEach y en que caso usar cada uno de ellos.

  • Intermedias

    Esta sección trabaja con pruebas un poco más complejas y reales:

  1. Pruebas sobre Event Emitter
  2. Formularios
  3. Validaciones
  4. Saltar pruebas
  5. Espías
  6. Simular retornos de servicios
  7. Simular llamado de funciones

Esta sección da fundamentos muy valiosos para realizar pruebas unitarias y de integración Se hacen comprobaciones simples de un componente haciendo usos de cosas simples como estas component = new Form(new FormBuilder()), aquí ya se empieza a ver los spyOn() para espiar algunos métodos de algunos servicios y hacer a las pruebas en relación con los resultados de estos métodos.

  • Intermedias 2

    Esta sección se enfoca en las pruebas de integración:
  1. Aprender la configuración básica de una prueba de integración
  2. Comprobación básica de un componente
  3. TestingModule
  4. Archivos SPEC generados automáticamente por el AngularCLI
  5. Pruebas en el HTML
  6. Revisar inputs y elementos HTML
  7. Separación entre pruebas unitarias y pruebas de integración

Ya aquí empiezo a usar a TestBed, ComponentFixture, configureTestingModule que es una copia limitada de lo que sería el @NgModule, pero para las pruebas y donde se va a poder insertar módulos componentes y servicios, también controlo ya aquí lo que es el siclo de control de cambios de Angular mediante el uso de detectChanges para que se puedan hacer pruebas de integración, ya que con esto se actualiza el HTML.

En esta sesión ya empiezo a usar a debugElement.query() y By.css para acceder al HTML y hacer las comprobaciones necesarias en una prueba de integración.

  • Avanzadas

    Esta sección es un verdadero reto, especialmente entre más te vas acercando al final de la misma. Aquí veremos temas como:
  1. Revisar la existencia de una ruta
  2. Confirmar una directiva de Angular (router-outlet y routerLink)
  3. Errores por selectores desconocidos
  4. Reemplazar servicios de Angular por servicios falsos controlados por nosotros
  5. Comprobar parámetros de elementos que retornen observables
  6. Subject
  7. Gets

En estas pruebas haremos comprobaciones de los params del ActivatedRoute, y comprobaremos la navegación del Router, con toHaveBeenCalledWith Verificando que se llame con los parámetros indicados para la ruta ruta en cuestion

Ej. medico/123 navigate(['medico', '123'])

Uso de debugElement.queryAll(By.directive(RouterLinkWithHref)) para encontrar todos los links y comprobar la ruta de uno de ellos, todo esto son proveas ya de integración.

Running unit tests

Run ng test to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.