Use "Cypress Driven Development" in order to add a feature to a React app
"You've all heard about TDD - now it's time for Cypress Driven Development"
Jokes aside, it can be sometimes beneficial to implement a cypress tests for a given feature before we start implementing it.
Using a cypress test, we can express the functionality we'd like to have in our app and after we implement it - we'll know if it works exactly as intended.
In this lesson we're implement a 'results not found' screen in an Emoji Search app by writing a cypress test first, and implementation later. Cypress allows us to have a very fast feedback loop that makes implementing features like this much simpler.
Instructor: [00:00] Currently, in our emoji search app, if I search for something that doesn't exist, I'm not getting any results at all. Instead, I would like to get some kind of "No emojis found" message here.
[00:09] I would like to implement it. In order to do that, we're going to use something called Cypress-driven development. We're going to start by adding the Cypress test first for the functionality that we want to have. Afterwards, we will add the code to implement it.
[00:20] Let me start with the Cypress test. First off, I'm going to copy this bit from over here in order to type in our search input. In our search input, I'm going to type, "Emoji that does not exist." Save that. It's going to run the test, but this is fine.
[00:33] Afterwards, I would like to ensure that I have zero results, so I'm going to do that as well. Right now, this test is passing, but I would like to also ensure that our page contains a text, "Emojis not found." That is going to fail, because it's not been implemented yet.
[00:49] As well, I would like to get a text, "Try searching for something else." With that test prepared, let us go and implement the feature. Now, if we switch to emoji results file, we're going to see that we are always mapping through all the emojis. If we don't have an emoji, we should probably display something else.
[01:04] I'm going to do just that. Whenever the emoji data length is greater than zero, I'm going to map over those items in order to display those emoji result for our components. Otherwise, I'm going to display a h1, "Emojis not found." Let me save that and restart the test.
[01:22] Right now, part of our test is passing because we are displaying this "Emojis not found" text, but this "Try searching for something else" text is still missing. Instead of displaying this h1 tag, I'm going to create a new component. I'm going to call it emojiNotFound.
[01:35] It's going to return a div with a class name of emojiNotFound. Inside of it, I'm going to have an h1 with this text, "Emojis not found." Let me copy and paste that over here. We're going to display a paragraph with "Try searching for something else."
[01:53] Let me go ahead and use it over here like this. Right now, if I save that and I run the test again, our test is going to pass, because we are displaying both of those messages. We can see that over here.
[02:07] To recap, using a technique that you could call a Cypress-driven development, it is possible to define the functionality that we want to have in our application using a Cypress test and afterwards implement it. We are going to know that our implementation works exactly as intended because we express this intent as a Cypress test.