Testing Frontend Applications: User Story 4 - User can delete a post (Part 3E)
- #1: Introduction
- #2: Setting up Next.js Project for testing
- #3: Writing the tests
- #3A: What should I test?
- #3B: Testing App Initial Load
- #3C: User can create a post
- #3D: User can edit a post
- #3E: User can delete a post (i.e This article 😁)
- #3F: Snapshot Tests and Conclusion
- #4: Are my tests enough?
Line 1 : Write the description of our test block
Line 2 : Render the component and set up user events
Line 4 : Since we want to delete posts, we need to be certain that posts already exist in our document, so we wait for the "Loading..." text to be removed
Line 6 : Get posts in the document. As usual, since we are testing the "accessible way" we use our getAllByRole
Line 7 : We get the first post
Line 9 : Use the within key to get the "Delete" button inside the first post
Line 11 : Click the delete button
Line 13 : Assert that an axios delete call has been made
Line 15 : Get the remaining posts
Line 16 : Assert that there are now 9 posts, since initially they were 10 and we have deleted just 1.