Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[QUILL-1575]/Meenu/fix: pagination implementation #62

Merged
merged 9 commits into from
Apr 16, 2024
Merged

[QUILL-1575]/Meenu/fix: pagination implementation #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
90979e5
fix: pagination implementation
meenakshi-deriv Apr 15, 2024
70ca6b2
fix: added folder name in storybook
meenakshi-deriv Apr 15, 2024
3d17137
Merge branch 'main' into meenu-pagination-component
meenakshi-deriv Apr 15, 2024
f3c2b93
fix: conflicts
meenakshi-deriv Apr 15, 2024
6b8b3f8
fix: updated captiontext for numbers
meenakshi-deriv Apr 15, 2024
322da4a
fix: revert caption text bold change
meenakshi-deriv Apr 15, 2024
c73187c
Merge branch 'main' into meenu-pagination-component
meenakshi-deriv Apr 15, 2024
352791a
fix: updated snapshots
meenakshi-deriv Apr 16, 2024
9eb20a9
fix: updated imports
meenakshi-deriv Apr 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions lib/components/Button/social/__tests__/__snapshots__/social-button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ exports[`Social Button Should render Apple Button 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#0a8da6708d08ec3e0aa0b4890e7af9d3__a)"
clip-path="url(#2985ee5b2c374b48d8881ed9ac01ec09__a)"
fill="#fff"
>
<path
Expand All @@ -23,7 +23,7 @@ exports[`Social Button Should render Apple Button 1`] = `
</g>
<defs>
<clippath
id="0a8da6708d08ec3e0aa0b4890e7af9d3__a"
id="2985ee5b2c374b48d8881ed9ac01ec09__a"
>
<path
d="M0 0h32v32H0z"
Expand Down Expand Up @@ -55,7 +55,7 @@ exports[`Social Button Should render Facebook Button 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#eefed0f40af5ccee01a60b699b655769__a)"
clip-path="url(#921bc730889c3f10110214969d5b0559__a)"
>
<path
clip-rule="evenodd"
Expand All @@ -70,7 +70,7 @@ exports[`Social Button Should render Facebook Button 1`] = `
</g>
<defs>
<clippath
id="eefed0f40af5ccee01a60b699b655769__a"
id="921bc730889c3f10110214969d5b0559__a"
>
<path
d="M0 0h32v32H0z"
Expand Down Expand Up @@ -102,7 +102,7 @@ exports[`Social Button Should render Google Button 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#1bec3c91c96e92d9628defa9055f76be__a)"
clip-path="url(#f34b37979f8c7a9adfb2f0e6b04a3211__a)"
>
<path
d="M32 16.375c0-1.097-.1-2.194-.294-3.273H16.325v6.186h8.787a7.34 7.34 0 0 1-3.256 4.829l5.274 4.02C30.22 25.348 32 21.248 32 16.374"
Expand All @@ -123,7 +123,7 @@ exports[`Social Button Should render Google Button 1`] = `
</g>
<defs>
<clippath
id="1bec3c91c96e92d9628defa9055f76be__a"
id="f34b37979f8c7a9adfb2f0e6b04a3211__a"
>
<path
d="M0 0h32v32H0z"
Expand Down Expand Up @@ -155,7 +155,7 @@ exports[`Social Button Should render Primary Variant 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#0a8da6708d08ec3e0aa0b4890e7af9d3__a)"
clip-path="url(#2985ee5b2c374b48d8881ed9ac01ec09__a)"
fill="#fff"
>
<path
Expand All @@ -164,7 +164,7 @@ exports[`Social Button Should render Primary Variant 1`] = `
</g>
<defs>
<clippath
id="0a8da6708d08ec3e0aa0b4890e7af9d3__a"
id="2985ee5b2c374b48d8881ed9ac01ec09__a"
>
<path
d="M0 0h32v32H0z"
Expand Down Expand Up @@ -196,7 +196,7 @@ exports[`Social Button Should render Secondary Variant 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#1bec3c91c96e92d9628defa9055f76be__a)"
clip-path="url(#f34b37979f8c7a9adfb2f0e6b04a3211__a)"
>
<path
d="M32 16.375c0-1.097-.1-2.194-.294-3.273H16.325v6.186h8.787a7.34 7.34 0 0 1-3.256 4.829l5.274 4.02C30.22 25.348 32 21.248 32 16.374"
Expand All @@ -217,7 +217,7 @@ exports[`Social Button Should render Secondary Variant 1`] = `
</g>
<defs>
<clippath
id="1bec3c91c96e92d9628defa9055f76be__a"
id="f34b37979f8c7a9adfb2f0e6b04a3211__a"
>
<path
d="M0 0h32v32H0z"
Expand Down Expand Up @@ -249,7 +249,7 @@ exports[`Social Button Should render no label if hideLabel is true 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#1bec3c91c96e92d9628defa9055f76be__a)"
clip-path="url(#f34b37979f8c7a9adfb2f0e6b04a3211__a)"
>
<path
d="M32 16.375c0-1.097-.1-2.194-.294-3.273H16.325v6.186h8.787a7.34 7.34 0 0 1-3.256 4.829l5.274 4.02C30.22 25.348 32 21.248 32 16.374"
Expand All @@ -270,7 +270,7 @@ exports[`Social Button Should render no label if hideLabel is true 1`] = `
</g>
<defs>
<clippath
id="1bec3c91c96e92d9628defa9055f76be__a"
id="f34b37979f8c7a9adfb2f0e6b04a3211__a"
>
<path
d="M0 0h32v32H0z"
Expand All @@ -297,7 +297,7 @@ exports[`Social Button Should render properly with fullWidth true 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<g
clip-path="url(#eefed0f40af5ccee01a60b699b655769__a)"
clip-path="url(#921bc730889c3f10110214969d5b0559__a)"
>
<path
clip-rule="evenodd"
Expand All @@ -312,7 +312,7 @@ exports[`Social Button Should render properly with fullWidth true 1`] = `
</g>
<defs>
<clippath
id="eefed0f40af5ccee01a60b699b655769__a"
id="921bc730889c3f10110214969d5b0559__a"
>
<path
d="M0 0h32v32H0z"
Expand Down
141 changes: 141 additions & 0 deletions lib/components/Pagination/__tests__/pagination.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import Pagination from "@components/Pagination";

jest.mock("@deriv/quill-icons/Standalone", () => ({
StandaloneChevronLeftRegularIcon: () => <div>Previous</div>,
StandaloneChevronRightRegularIcon: () => <div>Next</div>,
StandaloneEllipsisRegularIcon: () => <div>...</div>,
StandaloneCircleFillIcon: () => <div>O</div>,
}));

describe("Pagination", () => {
const mockonClickPagination = jest.fn();

it("should render Previous and next navigation buttons and page numbers", () => {
render(
<Pagination
contentPerPage={5}
contentLength={50}
variant="number"
onClickPagination={mockonClickPagination}
/>,
);

const elPreviousButton = screen.getByRole("button", {
name: /previous/i,
});
const elNextButton = screen.getByRole("button", { name: /next/i });
const elPageNumbers = screen.getAllByRole("button", { name: /\d+/i });

expect(elPreviousButton).toBeInTheDocument();
expect(elNextButton).toBeInTheDocument();
expect(elPageNumbers).toHaveLength(6);
});

it("should render Previous and next navigation buttons and bullet points", () => {
render(
<Pagination
contentPerPage={5}
contentLength={50}
variant="bullet"
onClickPagination={mockonClickPagination}
/>,
);

const elPreviousButton = screen.getByRole("button", {
name: /Go to Previous page/i,
});
const elNextButton = screen.getByRole("button", {
name: /Go to Next page/i,
});
const elPageNumbers = screen.getAllByRole("button", {
name: /Go to page/i,
});

expect(elPreviousButton).toBeInTheDocument();
expect(elNextButton).toBeInTheDocument();
expect(elPageNumbers).toHaveLength(10);
});

it("should disable Previous button when current page is 1", () => {
render(
<Pagination
contentPerPage={5}
contentLength={50}
variant="number"
onClickPagination={mockonClickPagination}
/>,
);

const elPreviousButton = screen.getByRole("button", {
name: /previous/i,
});

expect(elPreviousButton).toBeDisabled();
});

it("should disable Next button when current page is last page", async () => {
render(
<Pagination
contentPerPage={10}
contentLength={50}
variant="number"
onClickPagination={mockonClickPagination}
/>,
);

const elNextButton = screen.getByRole("button", { name: /next/i });

await userEvent.click(elNextButton);
await userEvent.click(elNextButton);
await userEvent.click(elNextButton);
await userEvent.click(elNextButton);

expect(elNextButton).toBeDisabled();
});

it("should render disabled ellipses button when total page count is more than 5", () => {
render(
<Pagination
contentPerPage={5}
contentLength={50}
variant="number"
onClickPagination={mockonClickPagination}
/>,
);

const elEllipsesButton = screen.getByRole("button", {
name: /Hidden pages/i,
});

expect(elEllipsesButton).toBeDisabled();
});

it("should trigger onClickPagination event when page is changed", async () => {
render(
<Pagination
contentPerPage={10}
contentLength={50}
variant="bullet"
onClickPagination={mockonClickPagination}
/>,
);
const elPreviousButton = screen.getByRole("button", {
name: /previous/i,
});
const elNextButton = screen.getByRole("button", { name: /next/i });

await userEvent.click(elNextButton);
expect(mockonClickPagination).toHaveBeenCalledWith({
currentPage: 2,
totalPageCount: 5,
});

await userEvent.click(elPreviousButton);
expect(mockonClickPagination).toHaveBeenCalledWith({
currentPage: 1,
totalPageCount: 5,
});
});
});
83 changes: 83 additions & 0 deletions lib/components/Pagination/base/__tests__/pagination-button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import PaginationButton from "@components/Pagination/base";

jest.mock("@deriv/quill-icons/Standalone", () => ({
StandaloneEllipsisRegularIcon: () => <div>...</div>,
StandaloneCircleFillIcon: () => <div>O</div>,
}));

describe("PaginationButton", () => {
it("should render bullet icons when variant is bullet", () => {
render(
<PaginationButton
currentPage={2}
handleOnClick={jest.fn()}
pageNumber={1}
variant="bullet"
/>,
);

const elBullet = screen.getByRole("button", { name: /Go to page 1/i });

expect(elBullet.innerHTML).toMatch("O");
});

it("should render ellipsis icon when page number is DOTS", () => {
render(
<PaginationButton
currentPage={2}
handleOnClick={jest.fn()}
pageNumber={"..."}
variant="number"
/>,
);

const elEllipsis = screen.getByRole("button", {
name: /Hidden pages/i,
});

expect(elEllipsis).toBeInTheDocument();
expect(elEllipsis).toBeDisabled();
});

it("should render page number when variant is number", () => {
render(
<PaginationButton
currentPage={2}
handleOnClick={jest.fn()}
pageNumber={1}
variant="number"
/>,
);

const elPageNumber = screen.getByRole("button", {
name: /Go to page 1/i,
});

expect(elPageNumber).toBeInTheDocument();
expect(elPageNumber.innerHTML).toMatch("1");
});

it("should call handleOnClick when clicked", async () => {
const handleOnClick = jest.fn();
const pageNumber = 3;

render(
<PaginationButton
currentPage={2}
handleOnClick={handleOnClick}
pageNumber={pageNumber}
variant="number"
/>,
);

const elPageNumber = screen.getByRole("button", {
name: /Go to page 3/i,
});

await userEvent.click(elPageNumber);

expect(handleOnClick).toHaveBeenCalledWith(pageNumber.toString());
});
});
Loading
Loading