Adding cypress to an existing project in order to start writing e2e tests
Joining a new project is always quite a challenge, how do we contribute to a new codebase without breaking things?
At some point in project's live, adding e2e (end-to-end) tests becomes a life-saver.
In this lesson we're going to learn how to install cypress and add it to a pre-existing project so we may start covering the codebase with automated e2e tests.
Link to the project: https://github.com/ahfarmer/emoji-search
Tomasz Łakomy: [0:00] We have an app which is called Emoji Search and it allows us to display a list of emojis and also to use the search box in order to search for an emoji. If I search for joy, I'm getting those three emojis. When you click on an emoji, it's going to be copied to the clipboard, so if I paste it over here, we can see that it was successfully copied.
[0:18] This app is a fork of emoji-search app which was available on GitHub and was developed by Andrew Farmer. In order to be able to contribute to this project, we would like to ensure that our changes are not going to break it. In order to do that, we're going to use Cypress in order to create and to add tests for this project.
[0:34] In order to do that, go to the terminal and run npm install --save-dev cypress. This is obviously going to take a second, so I'm going to speed up the video.
[0:45] It took a second, but now Cypress is installed in our project. We can see over here that we can open Cypress by running node_modules/.bin/cypress open. I'm going to copy this command and paste it over here. This is the first time I'm using this version of Cypress, so it's going to verify whether the Cypress can run on this machine.
[1:01] After opening the Cypress UI for the very first time, we're going to see a list of examples tests that we can use in order to learn how to build Cypress tests.
[1:08] For instance, I can click on this one, and it is going to run some example tests, showing the different features that Cypress has to offer. Nevertheless, we are going to start from scratch in order to learn how to cover this emoji app with end-to-end tests.
[1:20] In order to clean this up, I'm going to go to my project, open up the cypress directory that was created when I was installing Cypress, open up this integration folder and delete the examples directory, because we are not going to need this anymore.
[1:31] Instead, we are going to create a new file and I am going to call it basic.spec.js, because it's just going to contain some basic tests for this app. I'm going to write a very basic test, so describe('my first e2e test'). It takes a function, 'actually works', it takes another function, and here we are going to expect(true).to.equal(true).
[1:56] This is a very simple test, but it allows us to verify whether Cypress has been successfully installed in this project. In order to run those tests more easily, I'm going to open up my package.json and over here in the scripts section I'm going to create a new command, e2e, which is going to run cypress open.
[2:12] Let's go back to our test, open up the terminal, run npm run e2e. It's going to open up the Cypress UI, and here we can see our basic tests, so let me just click on this, and it's going to start our tests.
[2:25] If I move those things side by side, we can see that whenever I fail this test, so make expect(true).to.equal(false), save it, it's going to start Cypress automatically and right now we have a working Cypress setup.