Kent C. Dodds: 0:00 Now that we're on the book page for "Voice of war," let's make sure that we can add some cool notes here. That loading spinner should show up and disappear. We should also be able to check it as red and check the star rating as well. Of course, this is a five-star book. I'm going to give that a five-star rating in my test.

0:20 Let's start out by saying cy.findByRole name. Then within name, we're going to say cy.findByRole('textbox',{ name of notes}), and we'll type in this is an awesome book. Then we'll say cy.findByLabelText loading should exist, and then it also should not exist.

0:48 We'll wait for it to show up. We'll wait for it to disappear. We can say cy.findByRole('button', { name: /Mark/red }). We'll click on it. Once we've marked it as red, we should be able to say cy.findByRole('radio', { name: /Five Stars }).

1:12 This is the one that we want to click on. Let's save that. Come over here. So far, so good. Everything's going. We're getting to the voice of war. We're typing it in. That shows up. It disappears. We checked it as red. It looks like something is wrong. We did click on this and mark it as red.

1:33 The radio buttons are not showing up quite right, or something's going on. What's happening here is because our radio buttons are designed in the way that they are, the actual radio button itself is hidden so that we can have those cool stars.

1:50 This isn't something that you should be doing a lot. Sometimes you have to add { force: true } so that Cypress will click on it even if the thing that you're trying to click on is not visible. Now if we save this, let's go ahead and see if this will work at this time. Now, that we're forcing clicking on this button, that's not visible.

2:13 Great. Our test is passing. We're in a good spot. We've given this the rating that it deserves. Now let's move on and go to the finished books. Now that we've marked this as red and verify that everything is showing up as it should. We're going to do this navigation right here. We'll grab that.

2:32 For this, it's going to be finished books. Then within our main again, we're going to make a couple of assertions that are familiar to this one. We'll grab that, paste that right here. It should have length of one. We only have one finished book.

2:49 Before we click it, let's verify that the star ratings show up properly. We'll say cy.findByRole('radio', { name: /Five Stars }), that should be checked. You do need to spell cy correctly. Otherwise, it won't work, I promise. Let's fix that typo. Save it and come back over here. Make sure that everything we've got so far is working. Everything's looking awesome.

3:21 Let's review what we've got here so far. What we did here is once we got on to the voice of war book page, we found the text box for our notes and we filled in "This is an awesome book," we waited for the loading to show up and then waited for it to go away. We marked it as red and gave it a five-star rating.

3:42 In this case, we had to say force isTrue because of the way that we've set up our radio buttons to hide the inputs in favor of some nice looking stars. Then we navigated to the finished book page and made sure that this book now shows up on the finished book page. That the five-star rating shows up properly, and then we navigated back to the book page.