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

Clase 33 de 38Curso de Unit Testing para MEAN con Jasmine

Resumen

¿Cómo crear pruebas para el objeto global Windows?

En el desarrollo de aplicaciones, es imprescindible asegurarse de que los componentes interactúen correctamente con objetos globales como Windows. Una de las maneras más efectivas de lograrlo es mediante pruebas. Aquí te guiaré sobre cómo establecer un espía en el objeto global Windows y verificar que haya sido llamado correctamente, utilizando JavaScript.

¿Qué es un espía en las pruebas de software?

Un espía es una técnica de prueba que permite observar las interacciones de un objeto particular durante la ejecución de un test. Sirve para asegurarse de que un método específico ha sido llamado con los parámetros esperados.

Configuración del espía en el objeto Windows

Para probar el componente que interactúa con Windows, especialmente su método open, seguimos los siguientes pasos:

  1. Crear un conjunto de pruebas: Define claramente las pruebas unitarias para tus componentes.
  2. Espiar el objeto Windows: Dado que Windows está disponible globalmente en JavaScript, no necesitas importarlo. Espía el método open utilizando la función de prueba adecuada, como spyOn.
  3. Ejecutar la función: Llama a la función component.openUrl().
  4. Verificar el comportamiento esperado: Asegúrate de que la función open es llamada con los parámetros correctos. Por ejemplo, si deseas abrir https://plaxi.com, debes añadir también el parámetro '_blank' para asegurar que el sitio se abre en una nueva ventana.
// Ejemplo de espía y prueba en JavaScript
spyOn(window, 'open');
component.openUrl('https://plaxi.com');
expect(window.open).toHaveBeenCalledWith('https://plaxi.com', '_blank');

Al correr la prueba, los resultados exitosos y el coverage confirmarán que el método openUrl fue llamado correctamente.

¿Cómo gestionar el progreso de la aplicación en pruebas?

Además del objeto Windows, también es relevante probar componentes que tienen una relación de suscripción, como en aplicaciones con progresos activos. Aprendamos a testear estos casos.

Configuración del espía para manejar snacks

El objetivo es espiar interacciones con elementos tipo snackbar, que muestran notificaciones o avisos al usuario.

  1. Crear un espía en snackware: Usa el espía para controlar el componente de notificaciones.
  2. Definir pruebas adicionales: Implementa la suscripción al progreso del repositorio a través de callbacks.
  3. Simular datos iniciales: Asegúrate de tener un conjunto de datos o estado inicial sobre el cual probar.
  4. Espiar métodos pertinentes: Como updatePin, para verificar su correcto funcionamiento al ser llamado con los argumentos esperados.
// Ejemplo para espiar métodos
const mockData = { id: 1, pin: '1234' };
spyOn(service, 'updatePin').and.returnValue(of(true));
component.tagName = 'Test';

fixture.detectChanges();
component.getPins();
expect(service.updatePin).toHaveBeenCalledWith(mockData);

Al final, la correcta configuración y verificación en tu suite de pruebas asegurarán que componentes que interactúan con servicios y eventos sean validados completamente.

Conclusión y reto adicional

Con esta configuración, tus pruebas garantizarán que tanto el objeto Windows como las funciones asociadas a eventos y progresiones cumplan su cometido. Te animo a crear una prueba adicional para updatePin, usando la información y los principios aprendidos. Esta práctica mejorará significativamente la robustez de tus aplicaciones y el manejo de componentes globales en JavaScript. ¡Adelante!