Prueba de sobrecarga de aplicaciones React con Wallaby.js

 

 

 


Índice
  1. ¿Qué es Wallaby.js?
  2. ¿Por qué Wallaby.js?
  3. Comenzando con Wallaby.js en VS Code
    1. Instale la extensión de código VS Wallaby.js
    2. Licencia de ualabí
    3. Agregar clave de licencia al código VS
  4. Wallaby.js y reaccionar
    1. Creando la aplicación React
  5. Implementando nuestra característica
    1. Probando el código de nuestra aplicación
  6. Conclusión
    1. Recursos adicionales

¿Alguna vez tuviste que cambiar tu enfoque de tu editor a tu terminal para ver los resultados de tus pruebas? Este artículo le presentará Wallaby.js, una herramienta de productividad de JavaScript que potencia su IDE al permitirle obtener comentarios en tiempo real sobre sus pruebas de JavaScript en su editor de código incluso antes de guardar el archivo. También aprenderá a utilizar Wallaby.js para probar aplicaciones React.

 

Nota : Para poder seguir adelante, deberá estar familiarizado con las pruebas de JavaScript y tener conocimientos prácticos sobre la creación de aplicaciones React.

Este artículo ha contado con el amable apoyo de nuestros queridos amigos de Wallaby , quienes crean increíbles herramientas para desarrolladores que superan los límites de lo técnicamente posible y, al hacerlo, hacen que los desarrolladores de software sean más eficientes, más efectivos y más felices. ¡Gracias!

Una cosa que descubrirá muy rápidamente cuando comience a escribir pruebas para una aplicación es que desea ejecutar las pruebas constantemente cuando esté codificando. Tener que cambiar entre su editor de código y la ventana de terminal (o en el caso de VS Code, el terminal integrado) agrega una sobrecarga y reduce su productividad a medida que construye su aplicación. En un mundo ideal, tendría comentarios instantáneos sobre sus pruebas directamente en su editor mientras escribe su código. Introduzca Wallaby.js.

 

¿Qué es Wallaby.js?

Wallaby.js es un ejecutor de pruebas inteligente para JavaScript que ejecuta continuamente sus pruebas. Informa la cobertura del código y otros resultados directamente a su editor de código inmediatamente cuando cambia su código (incluso sin guardar el archivo). La herramienta está disponible como una extensión de editor para VS Code, IntelliJ Editors (como WebStorm e IntelliJ IDEA), Atom, Sublime Text y Visual Studio.

( Vista previa grande )

¿Por qué Wallaby.js?

Como se indicó anteriormente, Wallaby.js tiene como objetivo mejorar su productividad en el desarrollo diario de JavaScript. Dependiendo de su flujo de trabajo de desarrollo, Wallaby puede ahorrarle horas de tiempo cada semana al reducir el cambio de contexto. Wallaby también proporciona informes de cobertura de código, informes de errores y otras funciones que ahorran tiempo, como depuración de viajes en el tiempo e historias de prueba.

Comenzando con Wallaby.js en VS Code

Veamos cómo podemos obtener los beneficios de Wallaby.js usando VS Code.

Nota: Si no está utilizando VS Code, puede consultar aquí para obtener instrucciones sobre cómo configurar otros editores.

Instale la extensión de código VS Wallaby.js

Para comenzar, instalaremos la extensión Wallaby.js VS Code .

Una vez instalada la extensión, el tiempo de ejecución principal de Wallaby.js se descargará e instalará automáticamente.

Licencia de ualabí

Wallaby proporciona una licencia de código abierto para proyectos de código abierto que deseen utilizar Wallaby.js. Visite aquí para obtener una licencia de código abierto. Puede utilizar la licencia de código abierto con el repositorio de demostración de este artículo .

También puede obtener una licencia de prueba de 15 días completamente funcional visitando aquí .

Si desea utilizar Wallaby.js en un proyecto que no sea de código abierto más allá del período de licencia de prueba de 15 días, puede obtener una clave de licencia en el sitio web de Wallaby .

Agregar clave de licencia al código VS

Después de obtener una clave de licencia, diríjase a VS Code y en la paleta de comandos busque "Wallaby.js: Administrar clave de licencia", haga clic en el comando y se le presentará un cuadro de entrada para ingresar su clave de licencia, luego presione Enter y recibirás una notificación de que Wallaby.js se ha activado correctamente.

Wallaby.js y reaccionar

Ahora que tenemos Wallaby.js configurado en nuestro editor de VS Code, potenciaremos las pruebas de una aplicación React con Wallaby.js.

Para nuestra aplicación React, agregaremos una función simple de voto a favor/en contra y escribiremos algunas pruebas para nuestra nueva función para ver cómo funciona Wallaby.js en la mezcla.

Creando la aplicación React

Nota : Puede clonar el repositorio de demostración si lo desea, o puede seguirlo a continuación.

Crearemos nuestra aplicación React usando la herramienta CLI create-react-app.

npx create-react-app wallaby-js-demo

Luego abra el proyecto React recién estructurado en VS Code.

 

Abra src/App.jse inicie Wallaby.js ejecutando: “Wallaby.js: Iniciar” en la paleta de comandos de VS Code (alternativamente, puede usar la combinación de accesos directos — Ctrl+ Shift+ R Rsi está en una máquina Windows o Linux, o Cmd+ Shift+ R Rsi está en una Mac).

( Vista previa grande )

Cuando se inicia Wallaby.js, deberías ver sus indicadores de cobertura de prueba a la izquierda de tu editor, similar a la captura de pantalla a continuación:

( Vista previa grande )

Wallaby.js proporciona 5 indicadores de colores diferentes en el margen izquierdo de su editor de código:

  1. Gris: significa que la línea de código no es ejecutada por ninguna de tus pruebas.
  2. Amarillo: significa que parte del código de una línea determinada se ejecutó pero otras partes no.
  3. Verde: significa que sus pruebas ejecutaron todo el código de una línea.
  4. Rosa: significa que la línea de código está en la ruta de ejecución de una prueba fallida.
  5. Rojo: significa que la línea de código es la fuente de un error o expectativa fallida, o en la pila de un error.

Si observa la barra de estado, verá las métricas de Wallaby.js para este archivo y muestra que tenemos una cobertura de prueba del 100% src/App.jsy una sola prueba aprobada sin ninguna prueba fallida. ¿Cómo sabe Wallaby.js esto? Cuando iniciamos Wallaby.js, detectó que src/App.jstiene un archivo de prueba src/App.test.js, luego ejecuta esas pruebas en segundo plano por nosotros y nos brinda comentarios convenientemente utilizando sus indicadores de color y también nos brinda una métrica resumida de nuestras pruebas en la barra de estado.

Cuando también abra, src/App.test.jsverá comentarios similares de Wallaby.js

( Vista previa grande )

Actualmente, todas las pruebas están pasando, por lo que tenemos todos los indicadores verdes. Veamos cómo Wallaby.js maneja las pruebas fallidas. Hagamos src/App.test.jsque la prueba falle cambiando la expectativa de la prueba de esta manera:

// src/App.test.jsexpect(linkElement).not.toBeInTheDocument();

La siguiente captura de pantalla muestra cómo se vería ahora su editor con src/App.test.jsopen:

( Vista previa grande )

Verá que los indicadores cambian a rojo y rosa para las pruebas fallidas. También observe que no tuvimos que guardar el archivo para que Wallaby.js detecte que hicimos un cambio.

También notará la línea en su editor que src/App.test.jsgenera el error de la prueba. Esto se hace gracias al registro avanzado de Wallaby.js . Al utilizar el registro avanzado de Wallaby.js, también puede informar y explorar valores de tiempo de ejecución junto a su código usando console.logun formato de comentario especial //?y el comando VS Code Wallaby.js: Show Value.

Ahora veamos el flujo de trabajo de Wallaby.js para corregir pruebas fallidas. Haga clic en el indicador de prueba de Wallaby.js en la barra de estado para abrir la ventana de salida de Wallaby.js. (“✗ 1 ✓ 0”) Innovacion y creatividad

 

( Vista previa grande )

En la ventana de salida de Wallaby.js, justo al lado de la prueba fallida, debería ver un enlace "Prueba de depuración". Al presionar Ctrly hacer clic en ese enlace se activará el depurador de viajes en el tiempo de Wallaby.js . Cuando hagamos eso, la ventana de Herramientas de Wallaby.js se abrirá al costado de su editor, y debería ver la sección del depurador de Wallaby.js, así como las secciones Explorador de valores y Cobertura de archivos de prueba.

Si desea ver el valor de tiempo de ejecución de una variable o expresión, seleccione el valor en su editor y Wallaby.js lo mostrará por usted.

( Vista previa grande )

Además, observe el enlace "Abrir historia de prueba" en la ventana de salida. La historia de prueba de Wallby.js le permite ver todas sus pruebas y el código que están probando en una sola vista en su editor.

Veamos esto en acción. Presione Ctrly haga clic en el enlace; debería poder ver la historia de prueba de Wallaby.js abierta en su editor. Test Story Viewer de Wallaby proporciona una forma única y eficiente de inspeccionar qué código está ejecutando su prueba en una única vista lógica.

( Vista previa grande )

Otra cosa que exploraremos antes de corregir nuestra prueba fallida es la aplicación Wallaby.js. Observe el enlace en la ventana de salida de Wallaby.js: "Iniciar cobertura y probar Explorer". Al hacer clic en el enlace, se iniciará la aplicación Wallaby.js, que le brindará una vista panorámica compacta de todas las pruebas de su proyecto.

A continuación, haga clic en el enlace e inicie la aplicación Wallaby.js en su navegador predeterminado a través de https://localhost:51245/. Wallaby.js detectará rápidamente que tenemos nuestro proyecto de demostración abierto en nuestro editor y luego lo cargará automáticamente en la aplicación.

Así es como debería verse ahora la aplicación:

( Vista previa grande )

Debería poder ver las métricas de la prueba en la parte superior de la aplicación Wallaby.js. De forma predeterminada, la pestaña Pruebas de la aplicación está abierta. Al hacer clic en la pestaña Archivos , debería poder ver los archivos de su proyecto, así como sus informes de cobertura de prueba.

( Vista previa grande )

De regreso a la pestaña Pruebas , haga clic en la prueba y debería ver la función de informe de errores de Wallaby.js a la derecha:

( Vista previa grande )

Ahora que hemos cubierto todo eso, regrese al editor y corrija la prueba fallida para hacer feliz a Wallaby.js revirtiendo la línea que cambiamos anteriormente a esta:

expect(linkElement).toBeInTheDocument();

La ventana de salida de Wallaby.js ahora debería verse como la captura de pantalla a continuación y todos los indicadores de cobertura de prueba deberían estar pasando.

( Vista previa grande )

Implementando nuestra característica

Hemos explorado Wallaby.js en la aplicación predeterminada creada para nosotros por create-react-app. Implementemos nuestra función de voto a favor/en contra y escribamos pruebas para eso.

 

La interfaz de usuario de nuestra aplicación debe contener dos botones, uno para votar a favor y otro para votar en contra, y un único contador que aumentará o disminuirá según el botón en el que haga clic el usuario. Modifiquémoslo src/App.jspara que se vea así.

// src/App.jsimport React, { useState } from 'react';import logo from './logo.svg';import './App.css';function App() { const [vote, setVote] = useState(0); function upVote() { setVote(vote + 1); } function downVote() { // Note the error, we will fix this later... setVote(vote - 2); } return ( div className='App' header className='App-header' img src={logo} className='App-logo' alt='logo' / p className='vote' title='vote count' {vote} /p section className='votes' button title='upVote' onClick={upVote} span role='img' aria-label='Up vote' /span /button button title='downVote' onClick={downVote} span role='img' aria-label='Down vote' /span /button /section /header /div );}export default App;

También diseñaremos un poco la interfaz de usuario. Agregue las siguientes reglas asrc/index.css

.votes { display: flex; justify-content: space-between;}p.vote { font-size: 4rem;}button { padding: 2rem 2rem; font-size: 2rem; border: 1px solid #fff; margin-left: 1rem; border-radius: 100%; transition: all 300ms; cursor: pointer;}button:focus,button:hover { outline: none; filter: brightness(40%);}

Si observa src/App.js, notará algunos indicadores grises de Wallaby.js que nos insinúan que alguna parte de nuestro código aún no se ha probado. Además, notará que nuestra prueba inicial src/App.test.jsestá fallando y el indicador de la barra de estado de Wallaby.js muestra que la cobertura de nuestra prueba ha disminuido.

( Vista previa grande )

Estas pistas visuales de Wallaby.js son convenientes para el desarrollo basado en pruebas (TDD), ya que obtenemos información instantánea sobre el estado de nuestra aplicación con respecto a las pruebas.

Probando el código de nuestra aplicación

Modifiquemos src/App.test.jspara comprobar que la aplicación se procesa correctamente.

Nota : Usaremos la biblioteca de pruebas React para nuestra prueba, que viene lista para usar cuando se ejecuta create-react-app. Consulte los documentos para obtener la guía de uso.

Necesitaremos un par de funciones adicionales @testing-library/react, actualice su @testing-library/reactimportación a:

import { render, fireEvent, cleanup } from '@testing-library/react';

Luego reemplacemos la prueba única con src/App.js:

test('App renders correctly', () = { render(App /); });

Inmediatamente verá que el indicador se vuelve verde tanto en la src/App.test.jslínea donde probamos el renderizado de la aplicación como en la línea donde llamamos render en nuestro archivo src/App.js.

( Vista previa grande )

A continuación, probaremos que el valor inicial del voteestado es cero (0).

it('Vote count starts at 0', () = { const { getByTitle } = render(App /); const voteElement = getByTitle('vote count'); expect(voteElement).toHaveTextContent(/^0$/);});

A continuación, probaremos si al hacer clic en el botón votar a favor se incrementa el voto:

it('Vote increments by 1 when upVote button is pressed', () = { const { getByTitle } = render(App /); const upVoteButtonElement = getByTitle('upVote'); const voteElement = getByTitle('vote count'); fireEvent.click(upVoteButtonElement); expect(voteElement).toHaveTextContent(/^1$/);});

También probaremos la interacción del voto negativo de esta manera:

it('Vote decrements by 1 when downVote button is pressed', () = { const { getByTitle } = render(App /); const downVoteButtonElement = getByTitle('downVote'); const voteElement = getByTitle('vote count'); fireEvent.click(downVoteButtonElement); expect(voteElement).toHaveTextContent(/^-1$/);});

Vaya, esta prueba está fallando. Averigüemos por qué. Encima de la prueba, haga clic en el View storyenlace de la lente del código o en el Debug Testenlace de la ventana de salida de Wallaby.js y utilice el depurador para pasar a la downVotefunción. Tenemos un error... deberíamos haber disminuido el recuento de votos en 1, pero en lugar de eso, lo estamos reduciendo en 2. Arreglemos nuestro error y disminuyamos en 1.

src/App.jsfunction downVote() { setVote(vote - 1);}

Mira ahora cómo los indicadores de Wallaby se vuelven verdes y sabemos que todas nuestras pruebas están pasando:

( Vista previa grande )

Conclusión

En este artículo, ha visto cómo Wallaby.js mejora su experiencia de desarrollador al probar aplicaciones JavaScript. Investigamos algunas características clave de Wallaby.js, lo configuramos en VS Code y luego probamos una aplicación React con Wallaby.js.

Recursos adicionales

  • Tutorial de código VS , Wallaby.js
  • La aplicación de demostración para este proyecto se puede encontrar en GitHub .

(ra, il)Explora más en

  • Herramientas
  • javascript
  • Reaccionar
  • Pruebas





Tal vez te puede interesar:

  1. ¿Deberían abrirse los enlaces en ventanas nuevas?
  2. 24 excelentes tutoriales de AJAX
  3. 70 técnicas nuevas y útiles de AJAX y JavaScript
  4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Prueba de sobrecarga de aplicaciones React con Wallaby.js

Prueba de sobrecarga de aplicaciones React con Wallaby.js

Índice ¿Qué es Wallaby.js? ¿Por qué Wallab

programar

es

https://pseint.es/static/images/programar-prueba-de-sobrecarga-de-aplicaciones-react-con-wallaby-1067-0.jpg

2024-04-04

 

Prueba de sobrecarga de aplicaciones React con Wallaby.js
Prueba de sobrecarga de aplicaciones React con Wallaby.js

 

 

Top 20