mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(pagination): on:change dispatches with correct value (#2194)

Browse source
This commit is contained in:
Eric Liu 2025-09-05 09:00:51 -07:00 • committed by GitHub
commit 44a6cc0dfc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/Pagination/Pagination.svelte
View file

@ -135,8 +135,8 @@
hideLabel hideLabel
noLabel noLabel
inline inline
on:change={() => { on:update={(event) => {
dispatch("change", { pageSize }); dispatch("change", { pageSize: event.detail });
}} }}
bind:selected={pageSize} bind:selected={pageSize}
> >
@ -165,8 +165,8 @@
labelText="Page number, of {totalPages} pages" labelText="Page number, of {totalPages} pages"
inline inline
hideLabel hideLabel
on:change={() => { on:update={(event) => {
dispatch("change", { page }); dispatch("change", { page: event.detail });
}} }}
bind:selected={page} bind:selected={page}
> >

27
tests/Pagination/Pagination.test.ts
View file

@ -75,7 +75,7 @@ describe("Pagination", () => {
const select = screen.getByRole("combobox", { name: "Items per page:" }); const select = screen.getByRole("combobox", { name: "Items per page:" });
await user.selectOptions(select, "15"); await user.selectOptions(select, "15");
expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 }); expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 });
expect(consoleLog).toHaveBeenCalledWith("update", { expect(consoleLog).toHaveBeenCalledWith("update", {
pageSize: 15, pageSize: 15,
page: 1, page: 1,
@ -91,7 +91,7 @@ describe("Pagination", () => {
const pageSelect = screen.getAllByRole("combobox"); const pageSelect = screen.getAllByRole("combobox");
await user.selectOptions(pageSelect[0], "5"); await user.selectOptions(pageSelect[0], "5");
expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 }); expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 5 });
expect(consoleLog).toHaveBeenCalledWith("update", { pageSize: 5, page: 1 }); expect(consoleLog).toHaveBeenCalledWith("update", { pageSize: 5, page: 1 });
}); });
@ -169,7 +169,7 @@ describe("Pagination", () => {
// Change page size // Change page size
const pageSizeSelect = screen.getAllByRole("combobox"); const pageSizeSelect = screen.getAllByRole("combobox");
await user.selectOptions(pageSizeSelect[0], "15"); await user.selectOptions(pageSizeSelect[0], "15");
expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 }); expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 });
expect(consoleLog).toHaveBeenCalledWith("update", { expect(consoleLog).toHaveBeenCalledWith("update", {
pageSize: 15, pageSize: 15,
page: 1, page: 1,
@ -178,7 +178,7 @@ describe("Pagination", () => {
// Change page // Change page
const pageSelect = screen.getAllByRole("combobox"); const pageSelect = screen.getAllByRole("combobox");
await user.selectOptions(pageSelect[1], "2"); await user.selectOptions(pageSelect[1], "2");
expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 }); expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 });
expect(consoleLog).toHaveBeenCalledWith("update", { expect(consoleLog).toHaveBeenCalledWith("update", {
pageSize: 15, pageSize: 15,
page: 2, page: 2,
@ -257,4 +257,23 @@ describe("Pagination", () => {
expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument(); expect(screen.getByText(/1–10 of 100000/)).toBeInTheDocument();
}); });
it("should dispatch change event with new value, not previous value", async () => {
const consoleLog = vi.spyOn(console, "log");
render(Pagination, {
props: { totalItems: 102, pageSizes: [10, 15, 20] },
});
const pageSizeSelect = screen.getByRole("combobox", {
name: "Items per page:",
});
await user.selectOptions(pageSizeSelect, "15");
expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 15 });
const pageSelect = screen.getAllByRole("combobox")[1];
await user.selectOptions(pageSelect, "2");
expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 });
});
}); });