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
parent c34d5997e9
commit f8ab7c32ea
6 changed files with 283 additions and 2 deletions
@@ -0,0 +1,68 @@
+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
+  })
+})