mirror of
https://github.com/oceanprotocol/commons.git
synced 2023-03-15 18:03:00 +01:00
add pagination UI render test
This commit is contained in:
parent
8a5d89e640
commit
1a15a30435
16
client/src/components/molecules/Pagination.test.tsx
Normal file
16
client/src/components/molecules/Pagination.test.tsx
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { render } from 'react-testing-library'
|
||||||
|
import Pagination from './Pagination'
|
||||||
|
|
||||||
|
describe('Button', () => {
|
||||||
|
it('renders without crashing', () => {
|
||||||
|
const { container, getByRole } = render(
|
||||||
|
<Pagination
|
||||||
|
totalPages={20}
|
||||||
|
currentPage={1}
|
||||||
|
handlePageClick={() => Promise.resolve()}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
|
@ -14,20 +14,21 @@ export default class Pagination extends PureComponent<{
|
||||||
totalPages > 1 && (
|
totalPages > 1 && (
|
||||||
<ReactPaginate
|
<ReactPaginate
|
||||||
pageCount={totalPages}
|
pageCount={totalPages}
|
||||||
|
// react-pagination starts counting at 0, we start at 1
|
||||||
initialPage={currentPage - 1}
|
initialPage={currentPage - 1}
|
||||||
marginPagesDisplayed={1}
|
marginPagesDisplayed={1}
|
||||||
pageRangeDisplayed={6}
|
pageRangeDisplayed={6}
|
||||||
onPageChange={data => handlePageClick(data)}
|
onPageChange={data => handlePageClick(data)}
|
||||||
|
disableInitialCallback
|
||||||
|
previousLabel={'←'}
|
||||||
|
nextLabel={'→'}
|
||||||
|
breakLabel={'...'}
|
||||||
containerClassName={styles.pagination}
|
containerClassName={styles.pagination}
|
||||||
pageLinkClassName={styles.number}
|
pageLinkClassName={styles.number}
|
||||||
activeLinkClassName={styles.current}
|
activeLinkClassName={styles.current}
|
||||||
previousLinkClassName={styles.prev}
|
previousLinkClassName={styles.prev}
|
||||||
nextLinkClassName={styles.next}
|
nextLinkClassName={styles.next}
|
||||||
disabledClassName={styles.prevNextDisabled}
|
disabledClassName={styles.prevNextDisabled}
|
||||||
disableInitialCallback
|
|
||||||
previousLabel={'←'}
|
|
||||||
nextLabel={'→'}
|
|
||||||
breakLabel={'...'}
|
|
||||||
breakLinkClassName={styles.break}
|
breakLinkClassName={styles.break}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|
|
@ -73,6 +73,7 @@ export default class Search extends PureComponent<SearchProps, SearchState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
private handlePageClick = async (data: { selected: number }) => {
|
private handlePageClick = async (data: { selected: number }) => {
|
||||||
|
// react-pagination starts counting at 0, we start at 1
|
||||||
let toPage = data.selected + 1
|
let toPage = data.selected + 1
|
||||||
|
|
||||||
this.props.history.push({
|
this.props.history.push({
|
||||||
|
|
Loading…
Reference in New Issue
Block a user