Development

Test en Visual Studio Code con plugin “Thunder Client”

Publicado por
Daniel Bobeda
Test en Visual Studio Code con plugin “Thunder Client”

Introducción:

En este artículo aprenderemos cómo utilizar una librería de API Rest en Visual Studio Code y qué pruebas se pueden realizar.

¿Qué es Api Rest?

Una API es un conjunto de definiciones y protocolos que se utiliza para desarrollar e integrar el software de las aplicaciones. Es decir, comunicarse entre diferentes sistemas.

Fuente: Red Hat.

Objetivo:

-  Evitar descargar el Postman u otras tecnologías que ocupen espacio en el disco o tener otras cuentas.

-  Separación servidor y Cliente.

-  Escalabilidad, fiabilidad y flexibilidad.

Condición:

- Tener instalado Visual Studio Code.

Instalación:

- Ir al menú del lado izquierdo y seleccionar

instalacion

-  Ingresar en la caja “Thunder Client”

Thunder Client

-  Seleccionar el botón “Instalar”

instalar boton

-  Luego se procederá a instalar

Instalar

Seleccionar el logo de “Thunder Client”

Seleccionar el logo de “Thunder Client”

Creación de Request:

Seleccionamos en el margen izquierdo “New Request” para crear un nuevo endpoint

Seleccionamos en el margen izquierdo “New Request” para crear un nuevo endpoint

Ahora vamos a generar las Request de la siguiente url a modo de ejemplo: https://petstore.swagger.io/#/

Ahora vamos a Crear las Request más utilizadas, POST, PUT y GET

-  En este caso vamos a seleccionar el combo box “POST”

seleccionar el combo box “POST”

-  Luego ingresamos la URL: https://petstore.swagger.io/v2/pet/

ingresar url

-  En el body ingresamos el cuerpo con la opción Json:

JSON

-  Le damos “Send” y nos devuelve un 200 ok

Le damos “Send” y nos devuelve un 200 ok

Guardar Collection:

-  También la opción de Salvar o eliminar la request creada

la opción de Salvar o eliminar la request creada

-  En este caso, lo guardaremos como Colletion y le damos Submit

lo guardaremos como Colletion y le damos Submit

-  Aquí se puede visualizar que se ha guardado con éxito.

-  Aquí se puede visualizar que se ha guardado con éxito.

Nota: No es necesario guardar los request generados, ya que se guardan automáticamente, pero si se desea generar una collections para guardarlos también es viable.

Tests:

También podemos realizar pruebas del código obtenido. Veamos algunos ejemplos:

1-  Seleccionamos la solapa “Test”

2-  Seleccionamos en el campo “Select” el combo box y seleccionamos “ResponseCode”

Seleccionamos en el campo “Select” el combo box y seleccionamos “ResponseCode”

3-  Seleccionamos en el campo “Action” el combo box “Equal”

4 – Seleccionar en el campo “Value” ingresamos tipeando el nro “200” como resultado esperado.

Seleccionar en el campo “Value” ingresamos tipeando el nro “200” como resultado esperado.

-  Seleccionamos “Send”

-  Luego revisamos en la solapa “Test Result”

Luego revisamos en la solapa “Test Result”

Luego revisamos en la solapa “Test Result” 2

-  En el caso de que dese obtener un resultado negativo, en el campo “Value” puedo colocar un 401

campo “Value”  401

-  También se puede validar el contenido del Request

validar el contenido del Request

-  Así obteniendo el “Test Results” al seleccionar el “Send” todos como “pass”

obteniendo el “Test Results” al seleccionar el “Send” todos como “pass”

Correr todas las collections:

-  También si se desea se puede correr todas las Collections

se puede correr todas las Collections

-  Le damos seleccionar al botón “Run”

Le damos seleccionar al botón “Run”

-  Allí obtendremos los resultados de las mismas

obtendremos los resultados de las mismas

Ejecutar por terminal u otros medios:

Se puede obtener también los Snipets del código para diferentes plataformas y diferentes tecnologías, por ejemplo: JavaScript, Python, C#

 Snipets del código

Con esto se puede ejecutar desde la Terminal o desde el Git bash

Ejemplo Terminal en Visual Studio Code:

1 – Seleccionar “Copy”

Seleccionar “Copy”

2 – Ir a la solapa “Terminal”>New terminal

Ir a la solapa “Terminal”>New terminal

3 – Copiamos el cURL

 Copiamos el cURL

4 - Obtenemos lo siguiente:

Obtenemos lo siguiente:

Es posible también en el Git Bush

Es posible también en el Git Bush

Opción de importar:

importar:

Allí arriba podemos importar el “curl” ingresando como el siguiente ejemplo:

importar el “curl”

Opción de Exportar:

Se puede exportar la Collections y guardar en la pc.

exportar

Conclusión:

Esta librería nos permitirá tener unificada la herramienta para realizar pruebas de APIs, ahorrando espacio innecesario en el disco, además teniendo disponibles las funcionales básicas para nuestras pruebas.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Descarga nuestro Clever UI KIT 👇

Acá en Clever Experience trabajamos en un pequeño UI KIT que puede ayudarte en la próxima propuesta rápida, idea o proyecto que debas o quieras desarrollar.
Ingresa tu nombre y correo para descargar.

Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.