Promesas

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

Contenido del curso

Introducción al curso

Configuración

Matchers

Testing Asynchronous Code

Snapshot Testing

Implementando Jest en diferentes Frameworks

Tomar examen

Resumen

En esta clase, Vamos a probar las promesas.

Usaremos Axios para hacer una peticion http. La cual nos devuelve una promesa. npm install --save axios

Comentarios

Carlos Andrés Charris S

student•

Usando async y await

promise.js

import axios from 'axios';
export const getDataFromApi = url => axios( url );

promise.test.js

import {
  getDataFromApi
} from '../promise';

describe( 'Probando promesas', () => {

  const url = 'https://rickandmortyapi.com/api/character';
  test( 'Realizando una peticion a un API', async ( done ) => {
    const respuesta = await getDataFromApi( url );
    const arreglo = respuesta.data.results;
    // expect( arreglo ).toHaveLength( 20 );
    expect( arreglo.length ).toBeGreaterThan( 21 );
    done()
  } );
} );

Fredy Bustos

student•

¿Y si lo que quiero es testear es la respuesta, es decir que las keys tengan el valor que espero?

Jorge Méndez Ortega

student•

para ese caso podrias utilizar

//expect(JSON a validar).toHaveProperty("nombre del campo");
expect(data).toHaveProperty("results");

Oney Ortiz Roman

student•

Seria correcto hacer lo siguiente

expect(data).not.toBe(null)

o hay posibilidad de un falso positivo?

Oscar Barajas Tavares

Team Platzi•

Puede ser utilizado, pero podria tener ese falso positivo si data fuera null, Hay forma de validar con “toBeNull”

Ruben Eduardo Acosta Vela

student•

Si uso fetch para realizar la petición me sale este error:

Mi pregunta es, ¿Cómo corrijo este error, si fetch es una función implícita de js? , no la puedo definir o importar para usarla.

Omar Gutiérrez Condori

student•

quizás llamarla con:

window.fetch

También si tu navegador es algo antiguo no tenga soporte de ella.

Ruben Eduardo Acosta Vela

student•

El error sale en la termina, al ejecutar npm run test, no en el navegador.

Jesús David Bossa

student•

Y si tenemos funciones que hagan request tipo post, put y delete, y no queremos que se modifiquen datos en la DB?

Carlos Sampol

Team Platzi•

Puedes crear un mock api y no hay necesidad de cambiar datos de la DB

Luis Felipe Carrasco Galindo

student•

esto sirve como base para API testing??

Diego Forero

Team Platzi•

Si, el principio es el mismo.

Markoz Peña Mendez

student•

Esta es mi clase favorita hasta ahora. Esto muy poderoso porque es el inicio de hacer pruebas a API <3

Michael Merchan

student•

Usando aync await. en mi caso me toco modificar el archivo .babelrc

{
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "node": "current"
          }
        }
      ]
    ]
  }

promise.js

import axios from 'axios'

export const getDataFromApi = async (url)=>{
    return await axios.get(url)
}

promise.test.js

import {getDataFromApi} from './promise'

describe('Probando promesas', () => {
    it('Realizando una peticion a una api',  async () => {
        const api = 'https://rickandmortyapi.com/api/character/'
        const {data} = await getDataFromApi(api)
        expect(data.results.length).toBeGreaterThan(0)
    })
})

German Gerardo Guerci

student•

https://jestjs.io/docs/asynchronous

If your code uses promises, there is a more straightforward way to handle asynchronous tests. Return a promise from your test, and Jest will wait for that promise to resolve. If the promise is rejected, the test will automatically fail.

import { getDataFromApi } from "../promise";

describe('Probando promesas', () => {
    test('Realizando una petición a una api', () => {
        const api = 'https://rickandmortyapi.com/api/character/'
        return getDataFromApi(api).then(data => {
            expect(data.results.length).toBeGreaterThan(0);
        })
    })
})```

Edgar Ubaldo

student•

Yeah, It's a good improvement

Miguel Angel Reyes Moreno

student•

Axios nos permite hacer peticiones HTTP y nos regresa una promesa. Además tenemos la garantía de que va a funcionar según sea el navegador.

npm i --save axios No la guardaremos como depedencia de desarrollo porque es algo que sí necesita el proyecto para funcionar correctamente.

Obtendremos los datos de La API de Rick y Morty

Ojo: los console.log son solamente para pruebas, no debemos dejar ninguno en nuestros proyectos.

async hace que una función automáticamente retorne una promesa.

import axios from 'axios';

export const getDataFromApi = url => axios (url)

import {getDataFromApi} from './../promise';

describe('Probando promesas', () => {
  const api = 'https://rickandmortyapi.com/api/character';

  test('Realizando petición a una API', () => {
      async done => {
        const respuesta = await getDataFromApi(api);
        const array = respuesta.data.results;
        expect(array.length).toBeGreaterThan(0);
        done();
      }
    });
});

Edgar Ubaldo

student•

done ( ) is not neccesary call it because using async/await you are returning a promise and is the same thing that you pass ''done" as parameter of test callback and call it

Usuario anónimo

user•

/** promise.js */

import axios from 'axios'


export const DataFromApi = (url) => {
    return axios.get(url)
    .then(({ data }) => {
        return data;
    });
}


/** promise.test.js */

import { DataFromApi } from '../js/promise'

describe("Probando promesas", () => {
    test("Realizando una petición a una api", done => {
        const api = "https://rickandmortyapi.com/api/character";
        DataFromApi(api).then(data => {
            expect(data.results.length).toBeGreaterThan(0);
            done();
        });
    });
});

Santiago Lopera Naranjo

student•

También podemos probar usando la información que da la respuesta:

describe('Probando promesas', () => {
    test('probando api', (done) => {
        const api = 'https://rickandmortyapi.com/api/character';
        getDataFromApi(api).then(data => {
            console.log(data.info.count)
            expect(data.info.count).toBeGreaterThan(0)
            done()
        })
    })
})

☝ Esto dado el caso siempre fueramos a usar la misma API

Sebastian Diaz

student•

Esto seria mas un prueba de integración ?

Carlos Delgado

student•

alguién sabe como podría probar el status code http de la respuesta ?? quiero verificar que la llamada a la API me devuelva un status 200 o si falla entonces un código diferente

Juan Castro

teacher•

Lo estudiamos en esta clase: https://platzi.com/clases/1357-js-jest/13835-preparar-proyecto-para-trabajar-con-express-js/. :wink:

JUAN FELIPE CONTRERAS DELGADO

student•

David Zabaleta Franco

student•

👍

Samuel Miranda Martínez

student•

Por cosas de la vida me toco volver a lanzar el comando

npm init

Porque estafa fallando la instalación de axios.

Platzi Team

student•

A Practicar 🔥

Edgar Lopez Arroyo

student•

import axios from 'axios';

export function getData(url) {
    return axios.get(url)
        .then(({data}) => {
            return data;
        });
}

import { getData } from '../promises';
describe("Probando promesas", ()=>{
    test("Haciendo una peticion a una API", done => {
        const url = 'https://rickandmortyapi.com/api/character/';
        getData(url).then(data => {
            console.log(data.results)
            expect(data.results.length).toBeGreaterThan(0);
            done();
        });
    });
});```

import {
  getDataFromApi
} from '../promise';

describe( 'Probando promesas', () => {

  const url = 'https://rickandmortyapi.com/api/character';
  test( 'Realizando una peticion a un API', async ( done ) => {
    const respuesta = await getDataFromApi( url );
    const arreglo = respuesta.data.results;
    // expect( arreglo ).toHaveLength( 20 );
    expect( arreglo.length ).toBeGreaterThan( 21 );
    done()
  } );
} );

import {getDataFromApi} from './promise'

describe('Probando promesas', () => {
    it('Realizando una peticion a una api',  async () => {
        const api = 'https://rickandmortyapi.com/api/character/'
        const {data} = await getDataFromApi(api)
        expect(data.results.length).toBeGreaterThan(0)
    })
})

import { getDataFromApi } from "../promise";

describe('Probando promesas', () => {
    test('Realizando una petición a una api', () => {
        const api = 'https://rickandmortyapi.com/api/character/'
        return getDataFromApi(api).then(data => {
            expect(data.results.length).toBeGreaterThan(0);
        })
    })
})```

import {getDataFromApi} from './../promise';

describe('Probando promesas', () => {
  const api = 'https://rickandmortyapi.com/api/character';

  test('Realizando petición a una API', () => {
      async done => {
        const respuesta = await getDataFromApi(api);
        const array = respuesta.data.results;
        expect(array.length).toBeGreaterThan(0);
        done();
      }
    });
});

/** promise.js */

import axios from 'axios'


export const DataFromApi = (url) => {
    return axios.get(url)
    .then(({ data }) => {
        return data;
    });
}


/** promise.test.js */

import { DataFromApi } from '../js/promise'

describe("Probando promesas", () => {
    test("Realizando una petición a una api", done => {
        const api = "https://rickandmortyapi.com/api/character";
        DataFromApi(api).then(data => {
            expect(data.results.length).toBeGreaterThan(0);
            done();
        });
    });
});

describe('Probando promesas', () => {
    test('probando api', (done) => {
        const api = 'https://rickandmortyapi.com/api/character';
        getDataFromApi(api).then(data => {
            console.log(data.info.count)
            expect(data.info.count).toBeGreaterThan(0)
            done()
        })
    })
})

import { getData } from '../promises';
describe("Probando promesas", ()=>{
    test("Haciendo una peticion a una API", done => {
        const url = 'https://rickandmortyapi.com/api/character/';
        getData(url).then(data => {
            console.log(data.results)
            expect(data.results.length).toBeGreaterThan(0);
            done();
        });
    });
});```

Promesas

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