import * as React from "react"
import * as renderer from "react-test-renderer"
import { Pagination, PageInfo } from "../Pagination"
import { Link } from "jamplay-common/routing"
const mockTranslate = (s) => s
test("Pagination render", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 50,
currentPage: 2
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const tree = component.toJSON()
expect(tree).toMatchSnapshot()
})
describe("Pagination render", () => {
it("should lastPage=4 current=1 render < |1| 2 3 4 > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 4,
currentPage: 1
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(6)
for (let i = 1; i <= pageInfoMock.lastPage; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + i
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${i}`
)
})
expect(paginationString.length).toBe(1)
// Next page
if (i === 2) {
expect(pagination.length).toBe(2)
}
}
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
const backNode = component.root.findAll((node) => {
return ( node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const backLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + pageInfoMock.currentPage && node.props.style && node.props.style.pointerEvents === "none"
})
expect(backLink.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(0)
})
it("should lastPage=3 current=1 render < 1 |2| 3 4 > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 4,
currentPage: 2
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
for (let i = 1; i <= pageInfoMock.lastPage; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + i
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${i}`
)
})
expect(paginationString.length).toBe(1)
// Back page
if (i === 1) {
expect(pagination.length).toBe(2)
}
// Next page
if (i === 3) {
expect(pagination.length).toBe(2)
}
}
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(6)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(0)
})
it("should lastPage=3 current=3 render < 1 2 3 |4| > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 4,
currentPage: 4
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const backPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=3"
})
expect(backPage.length).toBe(2)
for (let i = 1; i <= pageInfoMock.lastPage; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + i
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${i}`
)
})
expect(paginationString.length).toBe(1)
// Back page
if (i === 3) {
expect(pagination.length).toBe(2)
}
}
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(6)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
const nextLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + pageInfoMock.currentPage && node.props.style && node.props.style.pointerEvents === "none"
})
expect(nextLink.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(0)
})
it("should lastPage=9 current=0 render < |1| 2 ... 10 > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 10,
currentPage: 1
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const nextPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=2"
})
expect(nextPage.length).toBe(2)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(5)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const backLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + pageInfoMock.currentPage && node.props.style && node.props.style.pointerEvents === "none"
})
expect(backLink.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(1)
const numberList = [1, 2, 10]
// for (let i = 0; i < numberList.length; i++) {
for (const num of numberList) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + `${num}`
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${num}`
)
})
expect(paginationString.length).toBe(1)
}
})
it("should lastPage=9 current=3 render < 1 2 |3| 4 ... 10 > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 10,
currentPage: 3
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const backPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=2"
})
expect(backPage.length).toBe(2)
const nextPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=4"
})
expect(nextPage.length).toBe(2)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(7)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(1)
const numberList = [1, 2, 3, 4, 10]
for (const num of numberList) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + `${num}`
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${num}`
)
})
expect(paginationString.length).toBe(1)
}
})
it("should lastPage=9 current=10 render < 1 ... 9 |10| > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 10,
currentPage: 10
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const backPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=9"
})
expect(backPage.length).toBe(2)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(5)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
const nextLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=" + pageInfoMock.currentPage && node.props.style && node.props.style.pointerEvents === "none"
})
expect(nextLink.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(1)
const numberList = [1, 9, 10]
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < numberList.length; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return (
isLink && node.props.href === "/search?page=" + `${numberList[i]}`
)
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${numberList[i]}`
)
})
expect(paginationString.length).toBe(1)
}
})
it("should lastPage=9 current=5 render < 1 ... 5 |6| 7 ... 10 > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 10,
currentPage: 6
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const nextPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=7"
})
expect(nextPage.length).toBe(2)
const backPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=5"
})
expect(backPage.length).toBe(2)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(7)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(2)
const numberList = [1, 5, 6, 7, 10]
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < numberList.length; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return (
isLink && node.props.href === "/search?page=" + `${numberList[i]}`
)
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${numberList[i]}`
)
})
expect(paginationString.length).toBe(1)
}
})
it("should lastPage=50 current=43 render < 1 ... 43 |44| 45 ... 51 > correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 51,
currentPage: 44
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const nextPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=45"
})
expect(nextPage.length).toBe(2)
const backPage = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink && node.props.href === "/search?page=43"
})
expect(backPage.length).toBe(2)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(7)
const backNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "<"
)
})
expect(backNode.length).toBe(1)
const nextNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === ">"
)
})
expect(nextNode.length).toBe(1)
// Find '...'
const shortNode = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === "..."
)
})
expect(shortNode.length).toBe(2)
const numberList = [1, 43, 44, 45, 51]
// tslint:disable-next-line:prefer-for-of
for (let i = 0; i < numberList.length; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return (
isLink && node.props.href === "/search?page=" + `${numberList[i]}`
)
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${numberList[i]}`
)
})
expect(paginationString.length).toBe(1)
}
})
it("should Link.BookDetail correctly", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 4,
currentPage: 1
}
const customParams = {
_id: "test",
category: "romantic",
limit: 10
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const pageLink = component.root.find((node) => {
return (
node.type === (Link.BookDetail as any) && node.props.params.page === 3
)
})
expect(pageLink).toEqual(expect.anything())
expect(pageLink.props.params.limit).toEqual(10)
for (let i = 1; i <= pageInfoMock.lastPage; i++) {
const pagination = component.root.findAll((node) => {
const isLink = node.type === "a"
return (
isLink && node.props.href === "/romantic/booktest?limit=10&page=" + i
)
})
expect(pagination.length).toBeGreaterThanOrEqual(1)
const paginationString = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.dangerouslySetInnerHTML &&
node.props.dangerouslySetInnerHTML.__html === `${i}`
)
})
expect(paginationString.length).toBe(1)
// Next page
if (i === 2) {
expect(pagination.length).toBe(2)
}
}
})
it("should lastPage=4 current=0 not render | Pagination Fail ", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 4,
currentPage: 0
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(0)
const errorMsg = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.className === "Pagination--no-need-to-display"
)
})
expect(errorMsg.length).toBe(1)
})
it("should lastPage=4 current=-1 not render | Pagination Fail ", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 4,
currentPage: -1
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(0)
const errorMsg = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.className === "Pagination--no-need-to-display"
)
})
expect(errorMsg.length).toBe(1)
})
it("should lastPage=1 current=1 not render | Pagination Fail ", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 1,
currentPage: 1
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(0)
const errorMsg = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.className === "Pagination--no-need-to-display"
)
})
expect(errorMsg.length).toBe(1)
})
it("should lastPage=2 current=3 not render | Pagination Fail ", () => {
const pageInfoMock: PageInfo = {
total: 93,
lastPage: 2,
currentPage: 3
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(0)
const errorMsg = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.className === "Pagination--no-need-to-display"
)
})
expect(errorMsg.length).toBe(1)
})
it("should not working when not provide customLink if not passing url", () => {
expect(() =>
renderer.create(
)
).toThrowError()
})
it("should not working if passing customLinkParams but not passing customLink", () => {
expect(() =>
renderer.create(
)
).toThrowError()
})
it("should when passing url and customLink", () => {
renderer.create(
)
})
it("should lastPage=0 current=0 not render | Pagination Fail ", () => {
const pageInfoMock: PageInfo = {
total: 0,
lastPage: 0,
currentPage: 0
}
const component = renderer.create(
// tslint:disable-next-line:jsx-no-lambda
)
const aLink = component.root.findAll((node) => {
const isLink = node.type === "a"
return isLink
})
expect(aLink.length).toBe(0)
const errorMsg = component.root.findAll((node) => {
return (
node.type === "div" &&
node.props.className === "Pagination--no-need-to-display"
)
})
expect(errorMsg.length).toBe(1)
})
})