diff --git a/ui/src/Components/Pagination/index.js b/ui/src/Components/Pagination/index.js index 4495b2c6b..4767e3589 100644 --- a/ui/src/Components/Pagination/index.js +++ b/ui/src/Components/Pagination/index.js @@ -11,6 +11,8 @@ import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight"; import { faAngleDoubleLeft } from "@fortawesome/free-solid-svg-icons/faAngleDoubleLeft"; import { faAngleDoubleRight } from "@fortawesome/free-solid-svg-icons/faAngleDoubleRight"; +import { IsMobile } from "Common/Device"; + class PageSelect extends Component { static propTypes = { totalPages: PropTypes.number.isRequired, @@ -48,6 +50,8 @@ class PageSelect extends Component { setPageCallback, } = this.props; + const isMobile = IsMobile(); + return ( { + originalInnerWidth = global.innerWidth; +}); + +beforeEach(() => { + global.innerWidth = originalInnerWidth; +}); + +afterEach(() => { + global.innerWidth = originalInnerWidth; +}); + describe("", () => { it("calls setPageCallback on arrow key press", () => { const setPageCallback = jest.fn(); @@ -48,4 +62,32 @@ describe("", () => { PressKey(tree, "ArrowLeft", 37); expect(setPageCallback).toHaveBeenLastCalledWith(1); }); + + it("renders 5 page range on desktop", () => { + global.innerWidth = 1024; + const tree = mount( + + ); + expect(tree.find(".page-link")).toHaveLength(7); + }); + + it("renders 3 page range on mobile", () => { + global.innerWidth = 760; + const tree = mount( + + ); + expect(tree.find(".page-link")).toHaveLength(5); + }); });