TodoMVC App Install & Overview

The application we will be writing tests for can be found here. The app is a TodoMVC application built with React. Don't worry if you do not know React. You can still follow along even if you have never used React before.

Clone Repo

If you have git installed, you can clone down the TodoMVC repo by entering the following command in your terminal:

git clone [email protected]:cypress-io/cypress-realworld-testing-todomvc.git

An alternative to git is to download a .zip file of the repo by clicking on the green "Code" button and then "Download Zip."

Next, you will need to open the repo in your text editor. We will be using VS Code, but feel free to use any text editor you like.

Install

important

Node version 14 or higher is required.

This project uses Yarn to manage dependencies. If you do not have Yarn, you can install it with this command:

npm install -g yarn

Change directories into the repo.

cd cypress-realworld-testing-todomvc

Install the dependencies with the following command:

yarn install

tip

If you are having trouble seeing the screenshots, you can click on them to open a larger image.

Start the app:

yarn start

You can then open your browser to the HTTP server URL shown in the console (e.g. http://localhost:8888), and you should see the following:

App Overview

The app is a basic todo app where you can add todos, complete todos, and filter todos based upon their active or completed state. Take some time to play around with the app to get a sense of the overall functionality.

Testing is a mindset, so before we can begin to write tests for our app, we first need to understand what we need to test and why. To find out what to test, we need to think about the core functionality of the application. Ask yourself the question, "what are some of the most important features of this app?" Start by breaking down the features and functionality of the app into individual pieces. The " why " should become much clearer once you understand some of the core functionality and features.

For example, since this is a todo application, one of the most important features should be adding todos. If a user is not able to add todos, the entire app is useless. Therefore, one of the first things we should test is that a user can add todos.

In the next lesson, we will learn how to install Cypress and write our first test to make sure we can add a todo to the app.

Practice

After completing all of the lessons in this tutorial, make sure to check out the practice.js file in the repo. This file contains several tests, with helpful comments, to help you put into practice all of the concepts you will learn in this tutorial.

Should you get stuck or need some help, all of the answers are provided within final/practice.js