Loading
Current section: Best Practices 7 exercises
Problem

Element Presence

Loading exercise

Transcript

00:00 Our discount form keeps getting better. Now when the users apply discounts that they want, they can also remove them by clicking on this X icon, and the discount is gone. But if you take a look at this network log over here, you can see two mocked requests because I'm using MSW for development too. So when I clicked on that remove button,

00:19 I actually performed a delete request to the same API endpoint. That request is handled because in my handlers.ts, I have defined a handler for it, http.delete for this URL, and then I await delay for 500 milliseconds to simulate server response time, and respond with an empty response,

00:38 which basically means the deletion was successful. Now your task for this exercise will be to complete the automated test for this scenario when the user removes a discount code. This means that you'll be dealing with element presence and also elements disappearance, which may be trickier than you think. Usually writing assertions around things not being visible

00:57 are prone to being false positive. In other words, as soon as your test confirms that the element is not in the dome, it will pass, even if something appends that element half a second later. But to deal with this trickiness, you will rely on the built-in retryability of assertions in Vitest. This is really exciting, so head to the test suite for a discount form,

01:16 complete the instructions, have the test passing, and see you once you're done.