Proyecto (Pruebas Unitarias y de integración (Unit testing) en Angular)
Angular 13
Repositorio: https://github.com/dennysjmarquez/angular-13-unit-test-and-integration
Proyecto (Pruebas Unitarias y de integración (Unit testing) en Angular)
Angular 13
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:
- Pruebas sobre Event Emitter
- Formularios
- Validaciones
- Saltar pruebas
- Espías
- Simular retornos de servicios
- 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:
- Aprender la configuración básica de una prueba de integración
- Comprobación básica de un componente
- TestingModule
- Archivos SPEC generados automáticamente por el AngularCLI
- Pruebas en el HTML
- Revisar inputs y elementos HTML
- 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:
- Revisar la existencia de una ruta
- Confirmar una directiva de Angular (router-outlet y routerLink)
- Errores por selectores desconocidos
- Reemplazar servicios de Angular por servicios falsos controlados por nosotros
- Comprobar parámetros de elementos que retornen observables
- Subject
- 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.
Top comments (0)