overleaf/services/web/test/frontend/shared/components/pagination.test.js
Jessica Lawshe f8ab7c32ea Merge pull request #4202 from overleaf/jel-gallery-pagination
Add pagination to the gallery

GitOrigin-RevId: 7107133da5e5ccf316235a6688070203c8bfa566
2021-06-17 02:09:38 +00:00

68 lines
2.8 KiB
JavaScript

import { expect } from 'chai'
import React from 'react'
import { render, screen } from '@testing-library/react'
import Pagination from '../../../../frontend/js/shared/components/pagination'
describe('<Pagination />', function () {
it('renders with current page handled', async function () {
render(
<Pagination currentPage={6} totalPages={10} handlePageClick={() => {}} />
)
await screen.findByLabelText('Page 6, Current Page')
})
it('renders with nearby page buttons and prev/next button', async function () {
render(
<Pagination currentPage={2} totalPages={4} handlePageClick={() => {}} />
)
await screen.findByLabelText('Page 2, Current Page')
await screen.findByLabelText('Go to page 1')
await screen.findByLabelText('Go to page 3')
await screen.findByLabelText('Go to page 4')
await screen.findByLabelText('Go to Previous Page')
await screen.findByLabelText('Go to Next Page')
})
it('does not render the prev button when expected', async function () {
render(
<Pagination currentPage={1} totalPages={2} handlePageClick={() => {}} />
)
await screen.findByLabelText('Page 1, Current Page')
await screen.findByLabelText('Go to Next Page')
expect(screen.queryByLabelText('Go to Prev Page')).to.be.null
})
it('does not render the next button when expected', async function () {
render(
<Pagination currentPage={2} totalPages={2} handlePageClick={() => {}} />
)
await screen.findByLabelText('Page 2, Current Page')
await screen.findByLabelText('Go to Previous Page')
expect(screen.queryByLabelText('Go to Next Page')).to.be.null
})
it('renders 1 ellipses when there are more pages than buttons and on first page', async function () {
render(
<Pagination currentPage={1} totalPages={10} handlePageClick={() => {}} />
)
const ellipses = await screen.findAllByText('…')
expect(ellipses.length).to.equal(1)
})
it('renders 1 ellipses when on last page and there are more previous pages than buttons', async function () {
render(
<Pagination currentPage={10} totalPages={10} handlePageClick={() => {}} />
)
const ellipses = await screen.findAllByText('…')
expect(ellipses.length).to.equal(1)
})
it('renders 2 ellipses when there are more pages than buttons', async function () {
render(
<Pagination currentPage={5} totalPages={10} handlePageClick={() => {}} />
)
const ellipses = await screen.findAllByText('…')
expect(ellipses.length).to.equal(2)
})
it('only renders the number of page buttons set by maxOtherPageButtons', async function () {
render(
<Pagination currentPage={1} totalPages={100} handlePageClick={() => {}} />
)
const items = document.querySelectorAll('button')
expect(items.length).to.equal(6) // 5 page buttons + next button
})
})