¿Para qué usar pruebas?!

Rate this content
Bookmark

En la charla explicaré los dolores y problemas de la validación de formularios. Luego explicaré el modelo mental de las pruebas unitarias y lo compararé con cómo pensamos en la validación de formularios.

Presentaré VEST con un poco de codificación en vivo mostrando su sintaxis de pruebas unitarias.

11 min
03 Nov, 2022

Video Summary and Transcription

La charla de hoy presenta VEST, un marco de validación de formularios que combina la sintaxis y el estilo de Unitest con la validación de formularios. La falta de estructura en la validación de formularios es un problema importante que conduce a un código desordenado y difícil de mantener. La prueba de formularios y la validación de formularios pueden ser desafiantes, especialmente con lógica compleja. VEST ofrece una solución al permitir la creación de un conjunto de validación de formularios utilizando pruebas unitarias. Proporciona características como múltiples validaciones por campo, validaciones asíncronas y memorización, con soporte para cualquier entorno JavaScript y soporte completo de TypeScript.

Available in English

1. Introducción al Framework de Validación de Formularios

Short description:

Hoy vamos a hablar sobre un framework de validación de formularios que combina mi pasión por las herramientas y bibliotecas de código abierto con mi amor por Unitest. Toma la sintaxis y el estilo de Unitest y los introduce en el mundo de la validación de formularios.

Hola a todos, soy Evitar, soy un Ingeniero de Frontend en Meta, y una de mis pasiones es trabajar en herramientas y bibliotecas de código abierto y frameworks para que otros desarrolladores los utilicen, y hoy vamos a hablar sobre uno de ellos. Ahora este en particular es una combinación entre esa pasión y mi otra pasión, que es Unitest. Me gusta tanto Unitest que en realidad construí un framework de pruebas unitarias. Quiero decir, no realmente un framework, ya tenemos suficientes de esos, pero construí un framework de validación de formularios que toma la sintaxis y el estilo de Unitest y bibliotecas como Mocha o Jest y los introduce en el mundo de la validación de formularios.

2. Comprendiendo el Problema con la Validación de Formularios

Short description:

En el mundo de la validación de formularios, la falta de estructura es un problema importante. Al agregar formularios a nuestras características, a menudo no está claro dónde y cómo implementar la validación. Esto hace que el código de validación se entrelace con el código de la característica, lo que resulta en una base de código desordenada y difícil de mantener. Cuando realizamos cambios en la característica más adelante, tenemos que desmontar y volver a montar el código para adaptarlo a nuestras necesidades actuales.

Pero antes de hablar sobre VEST en sí, intentemos primero comprender cuál es el problema con la validación de formularios. Quiero decir, hemos estado haciendo formularios durante 20 años, ¿cuál es el problema? Y creo que hay tres problemas principales en el mundo de la validación de formularios, y todo comienza con la estructura, o más bien, la falta de ella. Cuando escribimos nuestra característica y agregamos los formularios, realmente no sabemos dónde y cómo colocar la validación del formulario. Quiero decir, sí, tenemos un controlador de cambios y debería salir de allí. Pero dentro de los formularios, generalmente no solo nos preocupamos por los datos, nos preocupamos por la característica y la experiencia del usuario. Y luego, gran parte del código de validación se entrelaza con el código de la característica. Y luego obtenemos un montón de código espagueti, realmente, que se trata tanto de la validación del formulario como de la experiencia del usuario. Y luego, cuando volvemos a mantener la característica, como meses después, y tratamos de agregar cosas o eliminar cosas o hacer cambios, como hacer que los campos dependan entre sí, tenemos que desmontar todo el código específico de la característica que escribimos y volver a montarlo de una manera adecuada a nuestras necesidades actuales.

3. Desafíos con la Prueba de Validación de Formularios

Short description:

Los formularios y la validación de formularios son difíciles de probar, especialmente cuando se trata de lógica de validación compleja. Esto lleva a que las áreas más propensas a errores de nuestras aplicaciones no sean probadas, lo cual es un problema.

Y otro problema es que los formularios y la validación de formularios son realmente difíciles de probar. Desafortunadamente, los formularios son las partes de nuestras aplicaciones con mayor interacción. Es donde las personas tocan, desplazan, escriben, básicamente hacen clic. Y también es de donde proviene el dinero. Y debido a que esta es la parte de nuestra aplicación con mayor interacción, también es la más propensa a errores. Desafortunadamente, es realmente, realmente difícil de probar. Quiero decir, todo lo que deseas hacer en términos de prueba de validación de formularios debe pasar por todos los flujos. Ya sea simulación de eventos de usuario o debes pasar por todos los datos. Y es realmente difícil de probar, especialmente si tienes alguna lógica de validación compleja por la cual no deseas pasar completamente. Y terminamos sin probar esas cosas, y eso es una pena.

4. Tipos de Validaciones de Formularios y Uso de Pruebas Unitarias

Short description:

Tipos de validaciones de formularios: comparadores funcionales, bibliotecas de validación de esquemas y bibliotecas de validación de estado de formulario o gestión de estado específicas del framework. Las pruebas unitarias se pueden utilizar en la validación de formularios mediante la creación de una suite de validación de formularios.

Pero, ¿qué tipos de validaciones de formularios existen? Quiero decir, esa no puede ser la primera biblioteca de validación de formularios. Quiero decir, todos hemos utilizado bibliotecas de validación de formularios, tanto en el cliente como en el servidor. Así que intentaré dar una breve descripción de lo que hay, y luego entenderemos cómo VEST es diferente.

Y primero tenemos los comparadores funcionales, como funciones básicas como isEmail, isNumber, más largo que, que básicamente nos dan una respuesta booleana si algún valor cumple con ciertos criterios. Y esto es realmente simple y también es muy útil. Pero no se preocupa mucho por la estructura, no nos ayuda con el mantenimiento, y tampoco con las pruebas. Y esto es muy útil, pero no es una solución completa para la validación de formularios.

En segundo lugar, tenemos las bibliotecas de validación de esquemas que dan un paso más allá de lo que acabamos de describir. Toman la forma de los datos, la estructura de los datos y la forma de los datos en su totalidad debe cumplir con ciertos criterios. Y esto es bueno principalmente para el nivel de la API. Pero cuando se trata del cliente, no tanto. Quiero decir, ¿qué haces cuando el usuario interactúa con un formulario, como escribir en el campo de nombre de usuario? ¿Validas todo el conjunto, todo el esquema? Y también es muy difícil describir ideas complejas, como campos que dependen entre sí, dentro de un esquema. Así que es muy útil, pero no necesariamente de la forma en que queremos que sea.

Y en tercer lugar, tenemos en el cliente bibliotecas de validación de estado de formulario o gestión de estado específicas del framework que son específicas del framework y te proporcionan componentes o controladores de eventos o directivas para usar en tu aplicación. Y lo que hace básicamente es quitarte un poco de control, pero te brinda toda la gestión de estado del formulario y toda la validación de formularios para el formulario, y luego estás listo y es bueno. Pero el problema es que es específico del framework, específico del framework de interfaz de usuario, por lo que no podemos compartir fácilmente entre el cliente y el servidor, o entre Angular o React o Vue, y la mayoría de nosotros tenemos al menos algunas aplicaciones o algunos tipos diferentes de nuestras aplicaciones. Y también, porque te quitan el control, ponen sus cosas dentro de tu aplicación, es muy difícil recuperar ese control cuando necesitas evitar algún comportamiento. Es bueno, pero no necesariamente, nuevamente, de la forma en que queremos que sea.

¿Y cómo encajan las pruebas unitarias? Esto es Test.js. Hace un par de años, como hace seis años, comencé a escribir pruebas unitarias como parte de mi trabajo, y me di cuenta de esto. Cuando escribimos una prueba unitaria, tenemos nuestra suite de pruebas unitarias. Que generalmente comienza con un describe, no tiene que ser así, pero comienza con alguna suite de nivel superior que describe la idea de lo que estamos probando nuestra función o aplicación o lo que sea. Dentro de ella, tenemos una serie de pruebas que básicamente describen qué afirmación estamos haciendo ahora y cuál es el error que mostraremos en caso de fallo. Luego tenemos nuestra afirmación, por ejemplo, expect y lo que esperamos que sea. ¿Y si pudiéramos usar esa misma idea dentro del mundo de la validación de formularios? Quiero decir, es prácticamente lo mismo. Cuando escribimos un formulario, tenemos nuestro concepto más alto de un formulario que queremos describir. Dentro de él, tenemos los diferentes campos, un conjunto de campos que queremos probar, y luego solo queremos hacer una afirmación. Ahora, en lugar de afirmar el comportamiento, queremos afirmar los datos. Jugué con esta idea específica, y esto es lo que se me ocurrió. Primero, creamos nuestra suite de validación de formularios.

5. Descripción general de la validación de formularios VEST

Short description:

En VEST, describes el formulario que estás validando y agregas una serie de pruebas. Cada prueba incluye el nombre del campo, un mensaje de error de validación y una afirmación utilizando la biblioteca Enforce. VEST admite múltiples validaciones por campo, incluidas validaciones asíncronas complejas. Puedes omitir las solicitudes al servidor para validaciones fallidas y memorizar los datos validados previamente. VEST ofrece muchas características, funciona con cualquier entorno JavaScript y tiene soporte completo de TypeScript.

Esto es ligeramente similar a una suite de pruebas unitarias. Describes, opcionalmente, el nombre del formulario que estás validando, y también pasas los datos del formulario con los que el usuario acaba de interactuar. Dentro de él, agregas, obviamente, una serie de pruebas. Tienes una prueba que es muy similar a una prueba de pruebas unitarias, solo que agrega un campo adicional que es el nombre del campo que estás validando, así que en este ejemplo, Nombre de usuario. Luego, pasas el mensaje que el usuario vería en caso de una validación fallida, tanto para descripción dentro del código, como para que el usuario lo vea. Luego, lo que tienes es básicamente una afirmación, y en lugar de usar Expect, que no es realmente bueno para producción, estoy usando Enforce que escribí, que es mucho más adecuado para la validación de formularios, tanto en términos de lo que hace como de cómo se comporta. Así que tienes Enforce, pasas cualquier dato que desees. En este caso, pasamos los datos del formulario, y luego agregamos nuestra afirmación, por ejemplo, NoEstáEnBlanco. Ahora, obviamente, la validación de formularios no es tan simple, y podemos agregar múltiples validaciones por campo. Podemos agregar tantas como queramos, e incluso podemos agregar más, incluso validaciones complejas, por ejemplo, validaciones asíncronas, en caso de que, por ejemplo, los nombres de usuario ya estén en uso en un servidor. Y al igual que en Jest y Mocha, pasar una función asíncrona hace que la prueba sea asíncrona. ¿Y qué pasa si, bueno, no queremos ir al servidor, en caso de que la validación ya esté fallando para el campo desde el principio, como cuando el nombre de usuario ya está fallando porque es demasiado corto? Bueno, podemos decirle que lo omita cuando tengamos errores para el campo de nombre de usuario. ¿Y qué pasa si aún no queremos que el usuario vuelva una y otra vez por el mismo nombre de usuario, incluso si es válido localmente? Entonces, bueno, podemos memorizarlo y decir, bueno, si el nombre de usuario vuelve a escribir el mismo nombre de usuario nuevamente, pues no vayas al servidor nuevamente. Y esto es solo la punta del iceberg en términos de lo que VEST puede hacer. Tiene muchas características, muchas capacidades y responde a todos los problemas que normalmente tenemos en la validación de formularios. Ahora, una de las características interesantes es que VEST funciona con cualquier cosa en JavaScript, básicamente. Si usas un framework o sin un framework o en un servidor o en cualquier lugar, realmente puedes usar VEST. Y una característica destacada de VEST es el soporte completo de TypeScript. Puedes validar cambios al interactuar. Puedes tener múltiples validaciones por campo individual. Tienes validación de advertencia. Por ejemplo, la fortaleza de la contraseña, que no solo falla el envío, sino que simplemente le dice al usuario: `Oye, aquí hay un problema`, y pone la validación en una categoría diferente. Podemos tener campos que dependen entre sí, como la confirmación y la contraseña. Tenemos validaciones asíncronas y tenemos memorización. Podemos agrupar pruebas, como en Nest para Describir. Podemos componer reglas de validación. Podemos extender VEST para agregar más aplicaciones personalizadas. Todo está estructurado y no depende de un framework. Puedes instalar VEST muy fácilmente, npm install vest. Trae algunas dependencias que son específicas de VEST, todas fueron escritas para VEST, por lo que no trae nada de terceros. Hay un sitio web de documentación, vestjs.dev. También hay un enlace al servidor de Discord allí, y si quieres echarle un vistazo, puedes probar todo esto. Muchas gracias. Y estoy muy emocionado de verte formar parte de la comunidad de VEST. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
TestJS Summit 2021TestJS Summit 2021
33 min
Network Requests with Cypress
Top Content
Whether you're testing your UI or API, Cypress gives you all the tools needed to work with and manage network requests. This intermediate-level task demonstrates how to use the cy.request and cy.intercept commands to execute, spy on, and stub network requests while testing your application in the browser. Learn how the commands work as well as use cases for each, including best practices for testing and mocking your network requests.
TestJS Summit 2021TestJS Summit 2021
38 min
Testing Pyramid Makes Little Sense, What We Can Use Instead
Top Content
Featured Video
The testing pyramid - the canonical shape of tests that defined what types of tests we need to write to make sure the app works - is ... obsolete. In this presentation, Roman Sandler and Gleb Bahmutov argue what the testing shape works better for today's web applications.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
TestJS Summit 2022TestJS Summit 2022
146 min
How to Start With Cypress
Featured WorkshopFree
The web has evolved. Finally, testing has also. Cypress is a modern testing tool that answers the testing needs of modern web applications. It has been gaining a lot of traction in the last couple of years, gaining worldwide popularity. If you have been waiting to learn Cypress, wait no more! Filip Hric will guide you through the first steps on how to start using Cypress and set up a project on your own. The good news is, learning Cypress is incredibly easy. You'll write your first test in no time, and then you'll discover how to write a full end-to-end test for a modern web application. You'll learn the core concepts like retry-ability. Discover how to work and interact with your application and learn how to combine API and UI tests. Throughout this whole workshop, we will write code and do practical exercises. You will leave with a hands-on experience that you can translate to your own project.
React Summit 2022React Summit 2022
117 min
Detox 101: How to write stable end-to-end tests for your React Native application
Top Content
WorkshopFree
Compared to unit testing, end-to-end testing aims to interact with your application just like a real user. And as we all know it can be pretty challenging. Especially when we talk about Mobile applications.
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit 2023TestJS Summit 2023
48 min
API Testing with Postman Workshop
WorkshopFree
In the ever-evolving landscape of software development, ensuring the reliability and functionality of APIs has become paramount. "API Testing with Postman" is a comprehensive workshop designed to equip participants with the knowledge and skills needed to excel in API testing using Postman, a powerful tool widely adopted by professionals in the field. This workshop delves into the fundamentals of API testing, progresses to advanced testing techniques, and explores automation, performance testing, and multi-protocol support, providing attendees with a holistic understanding of API testing with Postman.
1. Welcome to Postman- Explaining the Postman User Interface (UI)2. Workspace and Collections Collaboration- Understanding Workspaces and their role in collaboration- Exploring the concept of Collections for organizing and executing API requests3. Introduction to API Testing- Covering the basics of API testing and its significance4. Variable Management- Managing environment, global, and collection variables- Utilizing scripting snippets for dynamic data5. Building Testing Workflows- Creating effective testing workflows for comprehensive testing- Utilizing the Collection Runner for test execution- Introduction to Postbot for automated testing6. Advanced Testing- Contract Testing for ensuring API contracts- Using Mock Servers for effective testing- Maximizing productivity with Collection/Workspace templates- Integration Testing and Regression Testing strategies7. Automation with Postman- Leveraging the Postman CLI for automation- Scheduled Runs for regular testing- Integrating Postman into CI/CD pipelines8. Performance Testing- Demonstrating performance testing capabilities (showing the desktop client)- Synchronizing tests with VS Code for streamlined development9. Exploring Advanced Features - Working with Multiple Protocols: GraphQL, gRPC, and more
Join us for this workshop to unlock the full potential of Postman for API testing, streamline your testing processes, and enhance the quality and reliability of your software. Whether you're a beginner or an experienced tester, this workshop will equip you with the skills needed to excel in API testing with Postman.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.