00:00 We write tests to make sure that our code, in this case, our components, fulfill their purpose. And the purpose of the discount code form is to be able to apply a given discount to imaginary checkout process. So let's implement this little user journey in the test itself. First, I will rename the test because it will no longer just render the form.

00:19 It will actually make sure that the user is able to apply the discount code. Next, let's enter the code into the appropriate input. So we already have this input here and we got it by label text in the previous exercise. So now I want to interact with this element. But the first thing I will do, I will actually remove this to be visible assertion.

00:38 And instead, I will call this input and then fill and provide the value I want to fill into that input, our discount code. For example, Epic 2025. So why did we get rid of the visibility assertion? Well, because interacting with the element implies its visibility and accessibility. So we don't have to repeat that assertion.

00:57 We just can interact with the element and gain the same result. So here, we're entering the discount code into the input. And this fill method on the locator returns us a promise that will be resolved once the browser is done typing this value in. So now that we enter this code, we have to apply it by clicking on the discount button.

01:17 And it's the same logic here. We don't need this visibility assertion anymore. Instead, we can just grab our button and call the click method on it. That's going to force Playwright to click on this button and the visibility of the button is once again implied. So now we have a tiny user journey here, entering the value and clicking on the button to submit the form.

01:36 And it's finally the time for us to reflect some expectations. So what is supposed to happen as the result of these actions? If I take a look at this discount code form, I can see that once the discount is applied, it gets rendered for the user in this paragraph that says discount,

01:52 then the discount code, and the discount percentage in the parentheses. That's exactly what I want to reflect in my test to make sure that the component actually displays what the user expects to see. So I will add this final assertion. I will write expect element.

02:09 I will locate this element by its text because you know that paragraphs don't have any roles and any accessible names. So get by text and provide this text as is. So this discount is visible for the user.

02:24 And you can see that I'm including the actual value I entered in this assertion just to make sure that we're displaying the correct code. And finally, I need to add the assertion itself. So here I will chain to be visible.

02:40 Now that we have this interaction described, let's run this test. So npm test. And we can see it passing. So let's recap what we did here. We still locating the elements the same way we did before using accessible locators.

02:55 We dropped the explicit visibility assertion because now it's implied using this interaction methods like fill or click. If you explore your locators, you can see that Vitest actually gives you a bunch of different methods to call on them. But you may be more familiar to something like user event from React testing library, right?

03:14 That object still exists with browser mode. If you go to this Vitest slash browser slash context, you can access user event object as well and use it like you normally would, for example, for filling some values and simply the call signature changes. So why have two different approaches here?

03:33 Well, this user event object actually taps into locators for the implementation. So whenever you can, you can utilize locator methods directly. But the user event object provides a few additional higher level interactions. For example, you can have user event upload or cut or paste.

03:52 So as a rule of thumb, rely on the built-in methods on your locators. And if you want a little bit more, then reach for the user event from Vitest. And of course, once we're done interacting with the form, we write the assertion to make sure that the correct element, the correct discount confirmation is displayed for the user.