Inicio ::: Blog ::: Julio 2020

API testing con REST Client para VS Code

#softwaredevelopment #agil #buenaspracticas #javascript #api #testing

Publicado el 01/07/2020 por Irene Arenas

En los proyectos ágiles, a la vez que se acortan los ciclos de desarrollo se vuelven todavía más importantes las pruebas de nuestro API (Application Programming Interface) y se convierte en obligatoria la ejecución de pruebas automáticas.

En API testing utilizamos herramientas de software para enviar llamadas a la API, obtener resultados y registrar la respuesta del sistema. Existen muchos artículos para conocer las principales recomendaciones para este tipo de testing así como diferentes herramientas, tanto libres como de pago: Postman, Insomnia, Ping ApI, HP QTP, vREST, JMeter…

Este tipo de herramientas son de gran utilidad para poder interactuar con APIs y, como desarrolladora front-end que soy, poder hacer pruebas de los servicios que se tienen que implementar.

Probablemente las más usada o conocida sea Postman, pero en este artículo me gustaría hablaros un poco de REST Client que nos permite realizar llamadas HTTP desde el propio editor Visual Studio Code (VS Code) de una forma muy sencilla.

Algunas de las características y ventajas que se pueden destacar de REST Client son:

  • Ejecutar solicitudes HTTP y ver la respuesta directamente en el panel
  • Tener todas las solicitudes en un mismo fichero
  • Soporta los tipos de autenticación más comunes
  • Definición de variables de entorno
  • Generar code snippets

Voy a ir explicando paso a paso como empezar a utilizar esta herramienta.


Instalación

La instalación es muy sencilla puesto podemos acceder a la extensión desde el mismo VS Code:


Fichero

Una vez instalado REST Client, crearemos un fichero cuya extensión debe ser .http o .rest para que nuestro código sea compatible con las solicitudes HTTP que vayamos a realizar.


Entornos y variables

Hay diferentes formas de definir variables. Aquí vamos a explicar dos de ellas:

1. Variables de entornos
Se pueden definir variables de entorno en el propio settings de VS Code. En la siguiente imagen se muestra un ejemplo de cómo se configuraría un entorno para local y otro para producción.

Una vez configurado el fichero de settings, tenemos que seleccionar el entorno con el que queremos trabajar. Para ello abrimos nuestro fichero .rest, pulsamos F1, elegimos la opción: Rest Client: Switch Environment y seleccionamos el entorno.

2. Variables en el mismo fichero
Se pueden definir variables en el mismo fichero con la siguiente sintaxis:

@nombreVariable = valor

En la siguiente imagen se muestra un ejemplo con algunas variables y una llamada a un servicio GET haciendo uso de ellas.


Peticiones

REST Client nos permite realizar peticiones GET, POST, PUT y DELETE de una forma muy sencilla.

En la siguiente imagen vemos algunos ejemplos de peticiones, variables y de como se muestra el resultado de una petición.

Empezamos definiendo algunas variables como el host o el puerto la base de nuestro proyecto para poder reutilizarlas en todo nuestro código.

Seguimos escribiendo nuestras peticiones separadas entre ellas con un comentario que debe empezar por tres o más almohadillas (###) . Esto es importante ya que, sin ello, no podremos realizar las siguientes peticiones.

Después de cada una de estas líneas, tendremos el encabezado de nuestra solicitud, el cual podremos llamar situándonos encima de la petición y pulsando sobre Send Request

El resultado se mostrará en un panel que se abrirá a la derecha automáticamente.


Autorización

Además, como ya apuntaba al principio, Rest Client soporta los tipos de autenticación más comunes como: Basic Auth, Digest Auth, SSL Client Certificates. etc.

Aquí te muestro un ejemplo de cómo se añadiría una cabecera de "Authorization":


Code Snippet

Una vez tengamos nuestras peticiones, podemos generar estas peticiones en el lenguaje que queramos.

Para poder generar este código nos situamos sobre la petición y con el botón derecho del ratón nos aparecerá un menú. Seleccionamos: "Generate Code Snippet"

Una vez seleccionado nos muestra un listado con los diferentes lenguajes y seleccionamos uno de ellos:

En mi caso selecciono JavaScript y automáticamente se abre un panel a la derecha con el código generado.

Esto nos puede ahorrar tiempo y ayudar bastante a la hora de realizar las llamadas a estas peticiones desde nuestra aplicación.

Como podemos ver, REST Cient nos permite realizar peticiones de una forma muy sencilla. Una de las cosas que más me gusta es que podemos tener todas nuestras peticiones de nuestro proyecto en el mismo directorio y hacer pruebas sin necesidad de abrir otros programas.

Si te interesa profundizar más, te recomiendo que sigas leyendo en la página de REST Client en GitHub.