Bienvenida e Introducción

1

Pruebas unitarias con Jasmine para JavaScript

2

Pruebas Unitarias: Mejora y Seguridad en Desarrollo de Software

Creando un framework de pruebas básico

3

Pruebas Unitarias Básicas en JavaScript: Creación y Ejecución

4

Refactorización de Pruebas en JavaScript con Funciones expect e it

5

Refactorización de Pruebas JavaScript con Framework Personalizado

6

Adaptación de Frameworks JavaScript para Node.js y Browser

Análisis estático de código

7

Herramientas para Mejorar la Calidad del Código en JavaScript

8

Configuración de ESLint en VS Code paso a paso

9

Configuración de Prettier en Proyectos JavaScript

10

Tipado Estricto en TypeScript para Aplicaciones Angular

Trabajando con Jasmine en el frontend

11

Pruebas Unitarias con Jasmine: Uso de spyOn para Simular Funciones

12

Configuración de Jasmine para Pruebas de Frontend

13

Configuración de Jasmine en Node.js para Pruebas Unitarias

14

Pruebas Unitarias en JavaScript con Jasmine: Uso de Funciones Básicas

15

Pruebas Unitarias con Jasmine: Matchers, Espías y Ciclos de Vida

Probando Nodejs apps con Jasmine

16

Pruebas Unitarias con Jasmine en Node.js y Angular

17

Configuración de Pruebas Unitarias en Node.js con Jasmine

18

Configuración avanzada de Jasmine y reportes en Node.js

19

Implementación de Cobertura de Código con InstaBoot.js y NGC

20

Pruebas Unitarias de Servidor Express con Método GET en Node.js

21

Pruebas Unitarias de Código 500 en Métodos GET

22

Pruebas del Método PAUSE en Desarrollo Web

23

Pruebas de Métodos POST, PUT y DELETE en JavaScript Asíncrono

Probando Angular apps con Jasmine

24

Pruebas Unitarias e Integración en Angular con Jasmine

25

Pruebas Unitarias de Componentes en Angular con Jasmine

26

Pruebas Unitarias en Angular: Rutas y Ciclos de Vida con Jasmine

27

Pruebas Unitarias en Angular: Simulación de Servicios y Componentes

28

Pruebas Unitarias en Formularios Reactivos con Angular

29

Pruebas Unitarias Avanzadas en Formularios Reactivos de Angular

30

Pruebas Unitarias en Angular: Navegación y Outputs HTML

31

Pruebas Unitarias en Angular: Testeo de Componentes y Servicios

32

Pruebas Unitarias en Jasmine: Espías y Stubs en Angular

33

Pruebas de Espionaje en Objetos Globales y Métodos en JavaScript

Pruebas de integración de Angular apps con Jasmine

34

Pruebas de integración con Jasmine y Angular

35

Pruebas de Navegación con Angular y RouterTestingModule

36

Pruebas HTTP en Angular con HTTP Client Testing Module

37

Pruebas Unitarias: Cobertura Completa de Métodos HTTP en API

38

Buenas prácticas de Unit Testing con Jasmine

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Unit Testing para MEAN con Jasmine

Curso de Unit Testing para MEAN con Jasmine

Cristian Daniel Marquez Barrios

Cristian Daniel Marquez Barrios

Pruebas Unitarias en Formularios Reactivos con Angular

28/38
Recursos

¿Cómo iniciar pruebas unitarias en un formulario reactivo con Angular?

Antes de lanzarnos a las pruebas unitarias, es vital asegurar que tu código está en orden. Hemos configurado los imports necesarios, incluyendo Stub classes y los formularios reactivos. Ahora, el objetivo principal es verificar que la inicialización y estructuración del componente se desarrollen de forma correcta.

¿Qué debe revisarse primero?

Al inicializar el componente, es crucial examinar dos formularios:

  1. Primer grupo de formularios:
    • Tres propiedades (inputs) agrupadas en el formulario.
  2. Segundo grupo de formularios:
    • Dos inputs, un input ordinario y un array que podría tener más elementos.

El objetivo inicial es asegurarse de que toda la declaración de estos formularios sea precisa y que los controles esperados estén correctamente configurados.

// Código de ejemplo para la inicialización de pruebas
describe('cuando el componente es inicializado', () => {
    it('debería crear los formularios correctamente', () => {
        const keys = Object.keys(component.firstGroup.controls);
        expect(keys).toEqual(['title', 'author', 'description']);
    });
});

¿Cómo prevenir errores al añadir nuevos controles?

Agregar nuevas pruebas es un buen mecanismo para asegurarse de que cualquier alteración, como añadir o eliminar controles, se detecten de manera oportuna:

  • Al crear una nueva función de prueba se espera que esta alerte si se agregan o quitan elementos sin las expectativas debidas.
// Código de ejemplo para agregar pruebas de seguridad
it('debería verificar que los grupos del formulario son creados', () => {
    const assetsKeys = Object.keys(component.secondFormGroup.controls);
    expect(assetsKeys).toEqual(['firstAsset', 'assets']);
});

¿Cómo probar la funcionalidad de agregar elementos en un array de formularios?

El desafío aquí es evaluar una función llamada addAsset, diseñada para añadir elementos al array en el segundo formulario:

  • Los elementos nuevos deben ser controlados por un índice apropiado, donde el primer elemento tiene la clave 0 y el segundo 1.
// Ejemplo de código para prueba de adición de assets
it('should add new group into the array', () => {
    const controlArray = component.secondFormGroup.controls['assets'] as FormArray;
    component.addAsset();
    component.addAsset();
    expect(controlArray.length).toBe(2);
});

¿Cuáles son los errores comunes a evitar al realizar pruebas?

Uno de los errores más comunes es intentar realizar un spec en bloques incorrectos como describe, donde el componente y sus instancias aún no se han creado en beforeEach. De este modo, ten en cuenta:

  • Siempre utiliza beforeEach para inicializar las instancias y componentes necesarios antes de ejecutar cualquier it.
  • Mueve cualquier lógica o pruebas dentro de un bloque it para asegurar que se ejecute en el contexto correcto.

Al seguir estas directrices y consejos, no solo desarrollas pruebas unitarias robustas, sino que también garantizas la consistencia y previsibilidad en el ciclo de vida de tus aplicaciones Angular. Con la práctica, te volverás más eficiente al escribir pruebas unitarias, asegurando que tu código se mantenga impecable y libre de bugs. ¡Adelante, sigue aprendiendo y mejorando tus habilidades!

Aportes 3

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Interesante usar las keys del objeto y index del array para validar presencia explicita de objetos. Había visto que en los arrays se contaba la longitud para validar la presencia de nuevos datos.

Muy buen clase!! hasta aquí he podido entender mejor todo esto de las pruebas!!

Como haría para ejecutar un método private en el componente?