Bienvenida e Introducción

1

¿Qué son las pruebas unitarias?

2

¿Por qué hacer pruebas unitarias?

Creando un framework de pruebas básico

3

Mi primera prueba unitaria en JavaScript

4

Las funciones expect() y it()

5

Organizando el código para correr en la web

6

Organizando el código para correr utilizando nodejs

Análisis estático de código

7

Herramientas de análisis estático de código

8

ESLint: Agregando alertas a nuestro código con ECMA Script

9

Herramientas de corrección de estilo

10

Herramientas de tipado

Trabajando con Jasmine en el frontend

11

Profundización en SpyOn: Comandos más utilizados y cómo ponerlos a prueba

12

Configurar un ambiente de trabajo para trabajar con el framework jasmine

13

Configurar Jasmine utilizando Node.js

14

Primer set de pruebas con Jasmine

15

Diccionario Jasmine

Probando Nodejs apps con Jasmine

16

Introducción al módulo de testing del lado del servidor

17

Configurando el proyecto Jasmine utilizando npm

18

Agregando Plugins a Jasmine

19

Configurando nuestro reporter

20

Pruebas en el servidor: Verificando un status 200 en GET

21

Pruebas en el servidor: Probando el método GET y Reto con FindByID

22

Pruebas en el servidor: Probando el método POST (request to server)

23

Pruebas en el servidor: Probando el método POST (request to PDF)

Probando Angular apps con Jasmine

24

Tipos de pruebas

25

Pruebas en el frontend: Probando el componente principal (App)

26

Configurando los ciclos de vida

27

Creando las pruebas del formulario: Configuración

28

Creando las pruebas necesarias para un formulario. (Primeras pruebas)

29

Probando el caso de exito al guardar un elemento en el servidor.

30

Trabajando con event emitters

31

Testeando ngZone y navegación.

32

Configurando el TestBed de el componente PINs

33

Creando un espia sobre el objecto window

Pruebas de integración de Angular apps con Jasmine

34

Ejecutando funciones a través de eventos en el template

35

Probando la navegación

36

Probando servicios con HTTP

37

Completando las pruebas del servicio HTTP

38

Cierre del curso

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

Configurando el TestBed de el componente PINs

32/38
Recursos

¿Cómo crear espías con Jasmine sobre objetos de configuración en JavaScript?

Cuando trabajamos con Jasmine, una popular biblioteca de pruebas en JavaScript, es posible crear espías no solo sobre nuestras propias clases o las que utilizamos a través de bibliotecas, sino también sobre los objetos de configuración que JavaScript nos ofrece. Un ejemplo clave es el objeto global window, el cual permite, entre otras cosas, abrir una nueva URL en una pestaña diferente. Exploraremos cómo implementar esto mediante espías en Jasmine para mejorar nuestras pruebas unitarias.

¿Qué implicaciones tiene espiar métodos del objeto window?

Espiar métodos del objeto window es una práctica que nos permite verificar que dichos métodos sean llamados con los parámetros correctos. Imagina que tienes un componente que abre URLs al llamarse. Podrías querer asegurarte de que el método open de window se invoca apropiadamente. Esto asegura que los comportamientos esperados ocurren cuando interactúas con tu aplicación.

describe('Espionando métodos del objeto window', () => {
    it('debería llamar al método open de window con la URL correcta', () => {
        spyOn(window, 'open');
        const url = 'https://example.com';
        // La lógica que llama a window.open va aquí
        expect(window.open).toHaveBeenCalledWith(url);
    });
});

¿Cómo se gestionan los servicios simulados o "Stubs"?

Crear stubs, o servicios simulados, es crucial para evitar dependencias externas al probar nuestras clases. En Angular, por ejemplo, podrías tener componentes que dependen de diversos servicios, como un snackbar, el pinservice, o la librería de formularios reactivos. Para probarlos, necesitamos "apartar" estas dependencias, lo que se hace comúnmente con stubs.

  1. Repositorio Stub: Se crea un método que retorne observables, como getPins.
  2. Snackbar Stub: Solo necesitamos definir el método open.
  3. PinService Stub: Creamos un Observer y lo conectamos al componente que estamos probando.
  4. ReactiveFormsModule Import: En lugar de crear un espía, importamos el módulo.

¿Cómo resolver objetos JS evitando mutaciones no deseadas?

Un desafío frecuente en JavaScript es asegurar que un objeto no modifique el original al pasarse por referencia. Usamos un truco para tener una nueva copia:

const nuevaCopia = JSON.parse(JSON.stringify(objetoOriginal));

Esto garantiza que cualquier nivel de anidación en tus objetos JS no afecta al original.

¿Qué pasos seguir para configurar las pruebas unitarias de un componente?

Una vez que nuestros stubs están creados, es importante asegurar que nuestras pruebas unitarias están configuradas correctamente:

  • Importación correcta de dependencias: Asegúrate de importar módulos y servicios desde las bibliotecas correctas.
  • Evitar errores de esquema: Configura correctamente el esquema de errores en tus archivos de prueba para evitar alertas innecesarias.
  • Verificar cobertura de pruebas: Revisa el informe de cobertura para asegurar que las pruebas han cubierto el componente adecuadamente.

Este enfoque estructurado no solo mejora la robustez de tus pruebas, sino que aumenta la confiabilidad de tu aplicación en entorno de producción. Las pruebas unitarias, cuando están bien estructuradas, no solo detectan errores más rápidamente, sino que facilitan el mantenimiento del código a largo plazo. ¡Sigue explorando y afina tus habilidades en pruebas unitarias!

Aportes 2

Preguntas 1

Ordenar por:

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

Tengo que compilar varias veces para que me tome las ultimas pruebas agregadas. Esto es normal? A quien más le pesa?

Hay un error en el .html de esta clase y es que intenta coger un formulario donde no lo hay.

<form [formGroup]="pin.formGroup">
        <mat-list-item *ngFor="let asset of pin.assets">
          <button (click)="openUrl(asset.url)" mat-mini-fab color="accent">Go</button>
          <mat-form-field>
            <mat-checkbox [formControlName]="asset._id" labelPosition="before">{{ asset.title }}</mat-checkbox>
          </mat-form-field>
        </mat-list-item>
      </form>

Si te fijas en pin que le devolvemos mokeado no hay propiedad formGroup y por lo tanto dentro no va a haber ningun formControl que se llame como el id del asset . para solucionar esto hice es quitar el formControlName del mat-checkbox ya que sino me fallaba al compilar el test.