Add Unit Testing with Jest and React Testing Library

[codingcodymiller]

⚙️ Feature

All existing React components should now have tests written in Jest and React Testing Library to verify that they are working as intended.

✅ Task List

---

Components

---

ChangeUsernameForm

• When a user types into the form control, their value is visible in the input.
• No message is shown when the form first loads and the form is clean.
• Message is shown to indicate that the username is available if it is available.
• Message is shown to indicate that the username is unavailable if it is unavailable.
• When the form is submitted, a success message is shown if the username is updated successfully.
• When the form is submitted, a failure message is shown if the username is not updated successfully.
• When the form is submitted, the form control is cleared after the response message is shown.
• When the form is submitted, there is no message visible anymore after the response message is shown.

DropdownSearchBar

• When a user clicks the dropdown button, a dropdown menu is visible.
• When a user clicks an option in the dropdown menu, the dropdown button shows the selected option as its text content.
• When a user types into the input, the value the user typed is visible in the input.

EditQuoteForm

• Form controls are automatically filled with existing values for the quote being edited.
• Tooltip should be visible when the info icon for making a quote public is clicked.
• While the quote field is empty, the Submit button is disabled.

QuoteControls

• Should show icons to filter, reverse, and share quotes if viewing a personal feed.
• Should not show the Share icon if viewing a shared feed.
• Should show the modal containing filter options when the filter icon is clicked.

QuoteListItem

• Should show if a quote is public or private.
• Should show the quoted text.
• Should show the author and name of the book the quote is from.
• Should show a page number if one is provided.
• Should show the Cancel and Confirm icons if the Delete icon is clicked.
• Should hide the Cancel and Confirm icons if the Cancel icon is clicked.
• Should hide the Cancel and Confirm icons if the Delete icon is clicked again.

SaveQuoteForm

• Tooltip should be visible when the info icon for making a quote public is clicked.
• While the quote field is empty, the Submit button is disabled.

SearchBar

• Should show the text a user types as the value of the search bar
• Should submit the form if the magnifying glass icon is clicked
  • Use jest.fn() as the submit event handler, and test if it was called

---

Pages

---

BookDetails

• Should show loading spinner while book data is retrieved
• Should show book title, image, author, and description once data is retrieved successfully.

QuoteDashboard

• Should show edit and delete icons if the user is viewing their personal feed.
• Should not show edit and delete icons if the user is not viewing their personal feed.