Get familiar with the application

[00:00 - 00:17] In this part, we will learn to test our React and TypeScript applications. Unlike other sections where we start from scratch and build an application, in this one we will begin with an existing app and we will cover it with tests.

[00:18 - 00:34] We will use React Testing Library because it has a simple API, it is easy to set up, and it is recommended by the React team. And of course it supports TypeScript.

[00:35 - 00:51] It isn't always obvious how to test front-end applications. It isn't always obvious how to test the front-end application, but the React Testing Library makes it easy.

[00:52 - 01:20] We are going to learn how to test components in React with just how to mock dependencies, test routing and even test React hooks. Before we begin, let's get familiar with the example application that we'll be covering with tests.

[01:21 - 01:54] This course has an attached folder with examples for each step. The completed example for this app, the location of the completed example of this app is in the video description.

[01:55 - 02:05] Go to the app folder, there will first need to install the dependencies and you might need to use the ignore engines options. And you might need to use the ignore engines option.

[02:06 - 02:30] Otherwise, you might get an error saying that your node version is incompatible with NES CSS, the styling framework that we are using here. So if that happens, just use ignore engines and try to install the dependencies again.

[02:31 - 02:57] After you have them installed, run yarn, run yarn dev, it will launch both the server and the client. And after it's done, open localhost 3000.

[02:58 - 03:14] Here on the main page, you can see the list of hero equipment, weapons, armor, potions and other stuff like crossberry pie. Click add to cart buttons to add items to the cart.

[03:15 - 03:35] You will see that the number goes up. After we have a bunch of items in the cart, click the cart icon and here you can remove the items that you don't want to buy.

[03:36 - 03:59] For example, let's remove the golden armor, it's too pricey. After you finished reviewing the items, you can click go to checkout.

[04:00 - 04:33] Here you see the summary, what are you going to buy? You need to enter your name, the cart number, the expiration date and the CVV code.

[04:34 - 05:02] This form has validation, so for example, if we don't provide a name, we will get an error. After you are done, after you are done filling the form, press checkout button or place order and you will get redirected to the order page.

[05:03 - 05:16] This is the order summary that you've just performed. This is the order summary for the, this is the order summary, this data comes from the backend, we get it using the order ID.

[05:17 - 05:38] Now the cart is empty and if we get back to the store, we can start buying things again. If we go to the cart now, it's going to say that the cart is empty and we'll propose to go back to the main page.

[05:39 - 05:57] That's it, here we have a tiny fancy store where you can put products into the cart, review the cart, maybe remove some products from it and then fill in the checkout form and perform the purchase. We will go through the code of each page, discuss its functionality and then cover it with tests.