Callbacks

Clase 15 de 25 • Curso de JavaScript Testing con Jest 2019

Resumen

En esta clase, Veremos cómo probar callbacks. Jest nos provee una función que nos permite probar funciones asíncronas como callbacks, promesas, async await, esta es llamada done.

Javier Cestau

student•

Creo que quedaría mejor explicado si se usara el setTimeout, ya que la funcion creada en esta clase es lineal por lo que no se hace ningun callback asincrono

Juan Esteban Galvis

student•

Intenté y es igual:

Callback.js

export function AsincFunc (callback) {
    setTimeout(callback('Hola desarrolladores!'), 1000)
}

Callback.test.js

test('Callback 2', (done) => {
        
        function otherCallback(data) {
            expect(data).toBe('Hola desarrolladores!');
            done();
        }

        AsincFunc(otherCallback)

    });

Mariano Villarreal

student•

Recomiendo hacer tests con los algoritmos asíncronos del curso de introducción a javascript

Antonio Madrid

student•

Esta parte es bastante confusa.

Juan Burns

student•

Vamos paso por paso para que puedan entenderlo todos, porque puede ser confuso si no se consolea y se observa el orden:

1-Importamos la funcion callbackHell 2-dentro de test declaramos la funcion "otherCallback" 3-invocamos a callbackHell y le damos "otherCallback" para que el la invoque 4-callbackHell le envía a otherCallback un texto 5-otherCallback cuando se ejcuta compara ese texto recibido con "Hola Javascripters" 6-done() Avisamos a Jest que el test terminó.

// Leanlo tranquilos, pero ese es el orden de ejecución, y está perfecto, saludos!.

Johnny J. Huirilef Millán

student•

No pude entender para que se utiliza “done”

Jesus Africano

student•

El done es la forma de informarle a jest que se resolvió la función asíncrona, intenta comentado la linea del done y comprobaras que falla el test porque se queda esperando que la función resuelva.

Edward Fernandez

student•

Lo que pasa es que Jest indica que una prueba terminó cuando llega al final de la ejecución. Cuando estamos trabajando con funciones asíncronas uno no sabe realmente cuándo termina la llamada, por lo que el método done() que utilizamos le va a indicar a Jest que debe esperar hasta que el callback done se halla llamado antes de terminar la prueba.

Edgar Lopez Arroyo

student•

import { callbackHell } from '../callback.js';

describe("Probando un callback", () => {
    test("Callback", (done)=> {
        function otherCallback(data) {
            expect(data).toBe("Hola JavaScript");
            done();
        }
        callbackHell(otherCallback);
    });
});```

JUAN FELIPE CONTRERAS DELGADO

student•

fabian miliani

student•

Buenos dias Oscar , queria saber como probamos una fucnion como esta:

let array = [ 2,3,4,5,6,7,8,44] export const arrayMultiplicado = array.map( function(element){ return element*2; })

Carlos Delgado

student•

Hola podrías probar de la siguiente manera:

test('Debe multiplicar por 2 cada elemento', () => {
    const array = [2,3,4,5,6,7,8,44];
    expect(arrayMultiplicado).toEqual(array.map(e => e * 2));
  });

Jorge Eliecer Rangel Jimenez

student•

callback.js

export const callbackHell = (callback) => {
  callback("Hola JavaScript");
};

callback.test.js

import { callbackHell } from "../callback";

describe("Probando un Callback", () => {
  test("Callback", (done) => {
    const otherCallback = (data) => {
      expect(data).toBe("Hola JavaScript");
      done();
    };

    callbackHell(otherCallback);
  });
});

Alejandro González Reyes

student•

Después de un cierto tiempo de práctica, comprendí el porque de done() y la declaración de la afirmación dentro del cuerpo del callback pasado como parametro a la función a testear

Javier Fuentes Mora

teacher•

No entiendo en que seria funcional esto?

Markoz Peña Mendez

student•

Cuando estas construyendo tu API en este caso en express, todo tu código es asincrono.

Jonathan Andres Vasquez Valle

student•

La captura de datos a una API es asincrona, así que para entender mejor la aplicación de estos test, hice una prueba llamando a la api de pokemon, les comparto el ejemplo:

//callback.js
import axios from 'axios'

export const capturarPokemon = async (callback) => {
  let data = await axios.get("https://pokeapi.co/api/v2/pokemon/1")
  let nombrePokemon= data.data.forms[0].name
  return callback(nombrePokemon);
};

Ahora el archivo de testing

//callback.test.js

describe("Probando llamado a api", () => {
  test("Debe retornar nombre de pokemon", (done) => {
    const getPokemonName = (nombrePokemon) => {
      expect(nombrePokemon).toBe("bulbasaur");
      done();
    };
    capturarPokemon(getPokemonName);
  });
});

Si van a usar axios para hacer la prueba deben correr antes el comando:

npm i --save axios

Naldo Duran

student•

Paolo Joaquin Pinto Perez

student•

Ya que debemos agregar el done() para avisarle que nuestra funcion callback termino, entonces cuando comenté el done() del la funcion, este fue el output:

Lo que se traduce como: La devolución de llamada asíncrona no se invocó dentro del tiempo de espera de 5000 ms especificado por jest.setTimeout.Timeout: la devolución de llamada asíncrona no se invocó dentro del tiempo de espera de 5000 ms especificado por jest.setTimeout.Error:

test('Callback 2', (done) => {
        
        function otherCallback(data) {
            expect(data).toBe('Hola desarrolladores!');
            done();
        }

        AsincFunc(otherCallback)

    });

import { callbackHell } from '../callback.js';

describe("Probando un callback", () => {
    test("Callback", (done)=> {
        function otherCallback(data) {
            expect(data).toBe("Hola JavaScript");
            done();
        }
        callbackHell(otherCallback);
    });
});```

import { callbackHell } from "../callback";

describe("Probando un Callback", () => {
  test("Callback", (done) => {
    const otherCallback = (data) => {
      expect(data).toBe("Hola JavaScript");
      done();
    };

    callbackHell(otherCallback);
  });
});

//callback.js
import axios from 'axios'

export const capturarPokemon = async (callback) => {
  let data = await axios.get("https://pokeapi.co/api/v2/pokemon/1")
  let nombrePokemon= data.data.forms[0].name
  return callback(nombrePokemon);
};

//callback.test.js

describe("Probando llamado a api", () => {
  test("Debe retornar nombre de pokemon", (done) => {
    const getPokemonName = (nombrePokemon) => {
      expect(nombrePokemon).toBe("bulbasaur");
      done();
    };
    capturarPokemon(getPokemonName);
  });
});

Callbacks

Introducción al curso

¿Dónde aprender testing con JavaScript?

Qué son pruebas Unitarias

Herramientas para pruebas en Javascript

Configuración

¿Qué es Jest?

Instalación y configuración

Creando nuestra primera prueba unitaria

Matchers

Common Matchers / Comparadores Comunes

Numbers

Truthness / Verdadero

Arrays

Coverage

Strings

Monitoreo

Setup de pruebas

Testing Asynchronous Code

Callbacks

Promesas

Reject y resolve

Async/Await

Aplicaciones de testing para Async/Await

Snapshot Testing

Snapshot Testing

Excepciones Snapshot

Implementando Jest en diferentes Frameworks

Preparar proyecto para trabajar con React JS

Preparar proyecto para trabajar con Vue JS

Preparar proyecto para trabajar con Express JS

Beneficios de las Pruebas Unitarias