Skip to content

feat: Add builit-in formatter, and ability to pass custom children #17

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

Open
drake-nathan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: Add builit-in formatter, and ability to pass custom children #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
91 changes: 91 additions & 0 deletions src/Pagination/Pagination.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,28 @@ const setupPagination = ({
);

describe("Pagination", () => {
const mockFormat = jest.fn((number) => {
Copy link
Copy Markdown
Author

@drake-nathan drake-nathan Feb 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to mock this, otherwise the test would fail in any locale outside the US.

const parts = number.toString().split(".");
const wholeNumber = parts[0];

return wholeNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
});

beforeEach(() => {
const MockNumberFormat = jest.fn(() => ({
format: mockFormat,
})) as jest.Mock & typeof Intl.NumberFormat;

// Add required static methods
MockNumberFormat.supportedLocalesOf = jest.fn();

global.Intl.NumberFormat = MockNumberFormat;
});

afterEach(() => {
jest.restoreAllMocks();
});

it("renders correctly with basic setup of prevButton, pageButton and nextButton", () => {
const { asFragment } = setupPagination({});

Expand Down Expand Up @@ -216,4 +238,73 @@ describe("Pagination", () => {

expect(mockSetCurrentPage).toHaveBeenCalledWith(3);
});

it("renders correctly with function as children", () => {
const { asFragment } = setupPagination({
children: (
<>
<Pagination.PrevButton>Previous</Pagination.PrevButton>
<div className="flex items-center justify-center flex-grow">
<Pagination.PageButton
dataTestIdActive="function-children"
children={(page) => `Page ${page}`}
/>
</div>
<Pagination.NextButton>Next</Pagination.NextButton>
</>
),
});

expect(asFragment()).toMatchSnapshot();
const element = screen.getByTestId("function-children");
expect(element.textContent).toBe("Page 6"); // Since currentPage is 5 in setup
});

it("uses default number formatter correctly", () => {
const { asFragment } = setupPagination({
currentPage: 1000,
totalPages: 1200,
children: (
<>
<Pagination.PrevButton>Previous</Pagination.PrevButton>
<div className="flex items-center justify-center flex-grow">
<Pagination.PageButton dataTestIdActive="default-formatter" />
</div>
<Pagination.NextButton>Next</Pagination.NextButton>
</>
),
});

expect(asFragment()).toMatchSnapshot();
const element = screen.getByTestId("default-formatter");
// Should format 2 as "2" (currentPage is 1, so active page is 2)
expect(element.textContent).toBe("1,001");
});

it("applies custom number formatter correctly", () => {
const romanNumerals = ["I", "II", "III", "IV", "V"];
const customFormatter = (page: number) => romanNumerals[page - 1];

const { asFragment } = setupPagination({
currentPage: 1,
totalPages: 5,
children: (
<>
<Pagination.PrevButton>Previous</Pagination.PrevButton>
<div className="flex items-center justify-center flex-grow">
<Pagination.PageButton
dataTestIdActive="custom-formatter"
formatter={customFormatter}
/>
</div>
<Pagination.NextButton>Next</Pagination.NextButton>
</>
),
});

expect(asFragment()).toMatchSnapshot();
const element = screen.getByTestId("custom-formatter");
// Should format 2 as "II" (currentPage is 1, so active page is 2)
expect(element.textContent).toBe("II");
});
});
258 changes: 258 additions & 0 deletions src/Pagination/Pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,75 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Pagination applies custom number formatter correctly 1`] = `
<DocumentFragment>
<div
class=""
>
<button
class=""
tabindex="0"
>
Previous
</button>
<div
class="flex items-center justify-center flex-grow"
>
<li>
<a
class=""
data-testid="undefined-1"
tabindex="0"
>
I
</a>
</li>
<li>
<a
class=""
data-testid="custom-formatter"
tabindex="0"
>
II
</a>
</li>
<li>
<a
class=""
data-testid="undefined-3"
tabindex="0"
>
III
</a>
</li>
<li>
<a
class=""
data-testid="undefined-4"
tabindex="0"
>
IV
</a>
</li>
<li>
<a
class=""
data-testid="undefined-5"
tabindex="0"
>
V
</a>
</li>
</div>
<button
class=""
tabindex="0"
>
Next
</button>
</div>
</DocumentFragment>
`;

exports[`Pagination renders correctly with advanced setup of prevButton, pageButton and nextButton using Tailwind 1`] = `
<DocumentFragment>
<div
Expand Down Expand Up @@ -533,3 +603,191 @@ exports[`Pagination renders correctly with extra page button props 1`] = `
</div>
</DocumentFragment>
`;

exports[`Pagination renders correctly with function as children 1`] = `
<DocumentFragment>
<div
class=""
>
<button
class=""
tabindex="0"
>
Previous
</button>
<div
class="flex items-center justify-center flex-grow"
>
<li>
<a
class=""
data-testid="undefined-1"
tabindex="0"
>
Page 1
</a>
</li>
<li>
...
</li>
<li>
<a
class=""
data-testid="undefined-4"
tabindex="0"
>
Page 4
</a>
</li>
<li>
<a
class=""
data-testid="undefined-5"
tabindex="0"
>
Page 5
</a>
</li>
<li>
<a
class=""
data-testid="function-children"
tabindex="0"
>
Page 6
</a>
</li>
<li>
<a
class=""
data-testid="undefined-7"
tabindex="0"
>
Page 7
</a>
</li>
<li>
<a
class=""
data-testid="undefined-8"
tabindex="0"
>
Page 8
</a>
</li>
<li>
...
</li>
<li>
<a
class=""
data-testid="undefined-10"
tabindex="0"
>
Page 10
</a>
</li>
</div>
<button
class=""
tabindex="0"
>
Next
</button>
</div>
</DocumentFragment>
`;

exports[`Pagination uses default number formatter correctly 1`] = `
<DocumentFragment>
<div
class=""
>
<button
class=""
tabindex="0"
>
Previous
</button>
<div
class="flex items-center justify-center flex-grow"
>
<li>
<a
class=""
data-testid="undefined-1"
tabindex="0"
>
1
</a>
</li>
<li>
...
</li>
<li>
<a
class=""
data-testid="undefined-999"
tabindex="0"
>
999
</a>
</li>
<li>
<a
class=""
data-testid="undefined-1000"
tabindex="0"
>
1,000
</a>
</li>
<li>
<a
class=""
data-testid="default-formatter"
tabindex="0"
>
1,001
</a>
</li>
<li>
<a
class=""
data-testid="undefined-1002"
tabindex="0"
>
1,002
</a>
</li>
<li>
<a
class=""
data-testid="undefined-1003"
tabindex="0"
>
1,003
</a>
</li>
<li>
...
</li>
<li>
<a
class=""
data-testid="undefined-1200"
tabindex="0"
>
1,200
</a>
</li>
</div>
<button
class=""
tabindex="0"
>
Next
</button>
</div>
</DocumentFragment>
`;
Loading