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) }) })