Using Tests for What?!

Rate this content
Bookmark

In the talk I will explain the pains and problems of form validation Then I will explain the mental model of unit tests, and compare it to how we think about form validations.

I will introduce vest with a bit of live coding showing its unit testing syntax.

11 min
03 Nov, 2022

Video Summary and Transcription

Today's Talk introduces VEST, a form validation framework that combines the syntax and style of Unitest with form validation. The lack of structure in form validation is a major problem, leading to messy and difficult-to-maintain code. Testing forms and form validation can be challenging, especially with complex logic. VEST offers a solution by allowing the creation of a form validation suite using unit tests. It provides features like multiple validations per field, async validations, and memoization, with support for any JavaScript environment and full TypeScript support.

Available in Español

1. Introduction to Form Validation Framework

Short description:

Today, we're going to talk about a form validation framework that combines my passion for open-source tools and libraries with my love for Unitest. It takes the syntax and style of Unitest and introduces them into the world of form validation.

Hi everyone, I'm Evitar, I'm a Frontend Engineer at Meta, and one of my passions is working on open-source tools and libraries and frameworks for other developers to use, and today we're going to talk about one of them. Now this one, in particular, is a combination between that passion and my other passion, which is Unitest. I love Unitest so much that I actually built a unitesting framework. I mean, not really a framework, we have enough of those, but I did build a form validation framework that takes the syntax and style of Unitest and libraries like Mocha or Jest and introduces them into the world of form validation.

2. Understanding the Problem with Form Validation

Short description:

In the world of form validation, the lack of structure is a major problem. When adding forms to our features, it's often unclear where and how to implement validation. This leads to validation code becoming intertwined with feature code, resulting in a messy and difficult-to-maintain codebase. When making changes to the feature later on, we have to disassemble and reassemble the code to fit our current needs.

But before we talk about the VEST itself, let's first try to understand what is the problem with form validation. I mean, we've been doing forms for 20 years now, so what is the problem? And I think there are three main problems in the world of form validation, and it all begins with structure, or the lack of really. When we write our feature and we add the forms, we don't really know where and how to put the form validation. I mean, yes, we have a change handler and it should come out from there. But inside the forms, we usually not just care about the data, we care about the feature and the user experience. And then a lot of the validation code gets intertwined with the feature code. And then we get a pile of spaghetti code, really, that's all about both form validation and user experience. And then when we come back to maintain the feature, like months later, and try to add in stuff or remove stuff or make changes, like make fields depend on one another, we have to disassemble all the feature-specific code that we wrote and reassemble it in a way that's suitable to our current need.

3. Challenges with Form Validation Testing

Short description:

Forms and form validation are difficult to test, especially when it comes to complex validation logic. This leads to the most bug-prone areas of our apps not being tested, which is a problem.

And one other problem is that forms and form validation is really difficult to test. Unfortunately, forms are the interaction-heavy parts of our apps. It's where people touch, scroll, type, do everything, basically click. And that's also where the money comes from. And because this is the most interaction-heavy part of our app, this is also the most bug-prone. And unfortunately, it's really, really hard to test. I mean, everything you want to do in form validation in terms of testing has to go through all the flows. So either user event simulation or you have to go through all the data. And it's really hard to test, especially if you have some complex validation logic that you don't want to go all the way through. And we end up not testing those, and that's a bummer.

4. Types of Form Validations and Using Unit Tests

Short description:

Types of form validations: functional matchers, schema validation libraries, and framework-specific UI form state validation or state management libraries. Unit tests can be used in form validation by creating a form validation suite.

But what types of form validations are out there? I mean, that cannot be the first form validation library. I mean, we've all used form validation libraries, both in the client and the server. So I'll try to get a brief overview of what's there, and then we'll understand how VEST is different.

And first we have the functional matchers, like basic functions like isEmail, isNumber, longer than, that basically give us a Boolean response if some value matches some criteria. And this is really simple and this is also really useful. But it doesn't care much about structure, it doesn't help us with maintenance, and neither with testing. And this is really useful, but not a full-fledged solution for form validation.

Second is that we have the schema validation libraries that take like a next step of what we just described. They take the form of the data, the shape of the data, and the shape of the data in its entirety has to conform to some criteria. And this is good mostly for the API level. But when talking about the client, not really. I mean, what do you do when the user interacts with a form, like types inside the username field? Do you validate the whole thing, the whole schema? And also it's really hard to describe complex ideas, like fields that depend on one another, inside of a schema. So it's really useful, but not necessarily the way we want it to be.

And third, we have in the client framework-specific UI form state validation or state management libraries that are specific to the framework and they give you components or event handlers or directives to use inside your app. And then what it does is basically take some control away from you, but gives you all the state management on the form and all the form validation for the form, and then you are pretty much set and it's good. But the problem is, well, it's framework-specific, UI framework-specific, so we cannot share between your client and server easily, or between Angular or React or Vue easily, and most of us have at least some apps or some different types of our apps. And also, because they take control from you, they put their stuff inside your app, it's really hard to take that control back when you need to bypass some behavior. It's good, but not necessarily, again, the way we want it to be.

And how do unit tests fit in? This is Test.js. A couple of years ago, like six years ago, I started writing unit tests as part of my work, and I realized this. When we write a unit test, we have our unit testing suite. That usually starts with a describe, it doesn't have to, but it starts with some top level suite that describes the idea that we're testing our feature or app or whatever it is. Inside of it, we have a series of tests that basically describe what assertion we're making now and what is the error that we're going to show in case of failure. Then we have our assertion, for example, expect and what we expect it to be. What if we could use that same idea inside of the world of form validation? I mean, it's pretty much the same. When we write a form, we have our top most concept of a form that we want to describe. Inside of it, we have the different fields, a set of fields that we want to test, and then we just want to make assertion. Now, instead of asserting behavior, we want to assert data. I played around with this specific idea, and this is what I came up with. First, we create our form validation suite.

5. Overview of VEST Form Validation

Short description:

In VEST, you describe the form you're validating and add a series of tests. Each test includes the field name, a validation failure message, and an assertion using the Enforce library. VEST supports multiple validations per field, including complex async validations. You can skip server requests for failing validations and memoize previously validated data. VEST offers many features, works with any JavaScript environment, and has full TypeScript support.

That's slightly similar to a unit testing suite. You describe, optionally, the name of the form that you're validating, and also you pass in the data from the form that the user just interacted with. Inside of it, you add, obviously, a series of tests. You have a test that's very similar to a unit testing test, only that it adds one extra field, which is the name of the field that you're validating, so in this example, Username. Then, you pass in the message that the user would see in case of a validation failure, so you do it also both for description inside of the code, and also for the user to see.

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.