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

Clase 33 de 38 • Curso 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:

Crear un conjunto de pruebas: Define claramente las pruebas unitarias para tus componentes.
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.
Ejecutar la función: Llama a la función component.openUrl().
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.

Crear un espía en snackware: Usa el espía para controlar el componente de notificaciones.
Definir pruebas adicionales: Implementa la suscripción al progreso del repositorio a través de callbacks.
Simular datos iniciales: Asegúrate de tener un conjunto de datos o estado inicial sobre el cual probar.
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!

Antonio Madrid

student•

Código del reto, completamente funcional

  it('When update progress', () => {
    component.pins = PINS;
    const pin = PINS[0];
    const updatePin = spyOn((<any>component).repository, 'updatePin').and.returnValue(of(true));
    const open = spyOn((<any>component).snackBar, 'open');
    // se obtiene la instancia del servicio guardada en el Componente que se esta probando
    const pinService = TestBed.get(PinsService);
    const repository = TestBed.get(RepositoryService);

    // se ejecuta el metodo del servicio para que tenga listo el Observable que devuelve
    repository.updatePin(pin._id, pin);
    pinService.resolve('save');

    expect(updatePin).toHaveBeenCalledWith(pin._id, pin);
    expect(open).toHaveBeenCalledWith('Progress updated!', 'OK', {
      duration: 2000
    });
  });

Rosario Prados

student•

Creo q tu prueba no está bien porque estás llamando directamente al repository.updatePin(pin._id, pin) .

Lo que se espera es que haya sido llamado desde el updateProgress y comprobar que los parametros que se le han pasado son los esperados.

De hecho hay que hacer una conversion de pin para que en el segundo parametro de updatePin no lleve el atributo _id, una vez hecho eso ya solo habria que llamar al expect con haveBeenCalledWith

it('When update progress', () => {
    component.pins = {...PINS};
    const pin = component.pins[0];
    
    const updatePin = spyOn((<any>component).repository, 'updatePin').and.returnValue(of(true));
    const open = spyOn((<any>component).snackBar, 'open');
    const pinService = TestBed.get(PinsService);
    
    pinService.resolve('save');

    const model = {
        title: pin.title,
        author: pin.author,
        description: pin.description,
        percentage: pin.percentage,
        tags: pin.tags,
        assets: pin.assets
    }

    expect(open).toHaveBeenCalledWith('Progress updated!', 'OK', {
      duration: 2000
    });
  
    expect(updatePin).toHaveBeenCalledWith(pin._id, model);
  });

Jose Luis Campos Bautista

student•

Alguien podría por favor ayudarme a entender que es lo que se esta realizando en esta linea de código.

const pinService = TestBed.get(PinsService);

Marco Serradas

student•

se esta creando una constante donde se le asigna el servicio 'PinService' y así poder llamar al método 'resolve' para ejecutar el observable.

Platzi Gomez

student•

increíblemente lo resolví, al memos eso creo.

it("when update progress", () => {
    component.pins = PINS;
    const pin = PINS[0];
    const updatePin = spyOn(
      (<any>component).repository,
      "updatePin"
    ).and.returnValue(of(true));
    const open = spyOn((<any>component).snackBar, "open");
    const pinService = TestBed.get(PinsService);

    pinService.resolve("save");

    expect(open).toHaveBeenCalled();

    // desafio de la blancura

    const { _id, ...objetoSinId } = pin;
    const service = TestBed.get(RepositoryService);
    service.updatePin(_id, objetoSinId);

    expect(service.updatePin).toHaveBeenCalledWith(_id, objetoSinId);
    expect(open).toHaveBeenCalledWith("Progress updated!", "OK", {
      duration: 2000,
    });
  });

Eden Ariel Guzman Andia

student•

hola Cristian, tengo una consulta, he intentado hacer los unit test de un metodo que tengo siguiendo una logica similar a la tuya, pero me sale errores, mi metodo es el siguiente: public ngOnInit(): void { try { window[angularEventHandler].registerCallback((msg) => { const result = JSON.parse(msg); this.phrase = result.Data.Phrase; this.playSequence = result.Data.Sequence === undefined ? [] : result.Data.Sequence; localStorage.setItem("token", result.Meta.token); }); } catch (err) {} }

-------------------------- spec----------------- const mycallback = spyOn(window, "registerCallback"); e incluso asi const mycallback = spyOn(window[angularEventHandler], "registerCallback"); pero me arroja el error: Error: <spyOn> : could not find an object to spy upon for registerCallback() Usage: spyOn(<object>, <methodName>)

como podria hacer una prueba unitaria del objeto window en este caso?, gracias de antemano

Eden Ariel Guzman Andia

student•

hola Cristian, tengo una consulta, he intentado hacer los unit test de un metodo que tengo siguiendo una logica similar a la tuya, pero me sale errores, mi metodo es el siguiente: public ngOnInit(): void { try { window[angularEventHandler].registerCallback((msg) => { const result = JSON.parse(msg); this.phrase = result.Data.Phrase; this.playSequence = result.Data.Sequence === undefined ? [] : result.Data.Sequence; localStorage.setItem(“token”, result.Meta.token); }); } catch (err) {} }

-------------------------- spec----------------- const mycallback = spyOn(window, “registerCallback”); e incluso asi const mycallback = spyOn(window[angularEventHandler], “registerCallback”); pero me arroja el error: Error: <spyOn> : could not find an object to spy upon for registerCallback() Usage: spyOn(<object>, <methodName>)

como podria hacer una prueba unitaria del objeto window en este caso?, gracias de antemano