Challenge: Unit Tests

Practice what we’ve learned about the Jest and Vue testing libraries.

Problem statement

Adding unit tests for components can be a great way to ensure that a component can be safely refactored without breaking its functionality. If something is broken, then tests should fail and prevent broken code from reaching users. Your task is to write unit tests for a Pagination component.

Challenge

Your project contains a Pagination component and a test file with the basic setup. Both the component and test files can be found in the src/components/pagination directory. The Pagination component includes text that displays the current page, a “next” button, and a “prev” button. Your task is to write the following tests in the pagination.spec.js file:

Paginate forward

  • When the “next” button is pressed, the page number should change from “1” to “2.”

  • When the “next” button is pressed again, the page number should change from “2” to “3.”

Paginate backward

  • When the “prev” button is pressed, the page number should change from “3” to “2.”

  • When the “prev” button is pressed again, the page number should change from “2” to “1.”

Can’t paginate forward if the last page was reached

  • If the component reached the last page, let’s say “3,” clicking on the “next” button should not increment the page to “4.”

Can’t paginate below page "1"

  • If the current page is “1,” clicking on the “previous” button shouldn’t change it to “0.”

Get hands-on with 1200+ tech skills courses.