diff --git a/src/lib/components/Pagination/Pagination.test.tsx b/src/lib/components/Pagination/Pagination.test.tsx index c7ef4db..66b4890 100644 --- a/src/lib/components/Pagination/Pagination.test.tsx +++ b/src/lib/components/Pagination/Pagination.test.tsx @@ -16,7 +16,9 @@ it("renders without crashing", () => { totalPages={10} />, ); - expect(screen.getByRole("navigation", { name: "pagination"})).toBeInTheDocument(); + expect( + screen.getByRole("navigation", { name: "pagination" }), + ).toBeInTheDocument(); }); it("displays the current page number in the input box", () => { @@ -33,7 +35,24 @@ it("displays the current page number in the input box", () => { ); expect(screen.getByRole("spinbutton")).toHaveValue(1); -}) +}); + +it("allows for a custom accessible label", () => { + render( + , + ); + + expect(screen.getByLabelText("Custom label")).toBeInTheDocument(); +}); it("disables the buttons and input box when the disabled prop is true", () => { render( @@ -51,7 +70,7 @@ it("disables the buttons and input box when the disabled prop is true", () => { expect(screen.getByRole("spinbutton")).toBeDisabled(); expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled(); expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled(); -}) +}); it("disables the 'Previous page' button when on the first page", () => { render( @@ -67,7 +86,7 @@ it("disables the 'Previous page' button when on the first page", () => { ); expect(screen.getByRole("button", { name: "Previous page" })).toBeDisabled(); -}) +}); it("disables the 'Next page' button when on the last page", () => { render( @@ -83,7 +102,7 @@ it("disables the 'Next page' button when on the last page", () => { ); expect(screen.getByRole("button", { name: "Next page" })).toBeDisabled(); -}) +}); it("can call a function when the 'Next page' button is pressed", async () => { const onNextClick = vi.fn(); @@ -102,7 +121,7 @@ it("can call a function when the 'Next page' button is pressed", async () => { await userEvent.click(screen.getByRole("button", { name: "Next page" })); expect(onNextClick).toHaveBeenCalled(); -}) +}); it("can call a function when the 'Previous page' button is pressed", async () => { const onPreviousClick = vi.fn(); @@ -121,7 +140,7 @@ it("can call a function when the 'Previous page' button is pressed", async () => await userEvent.click(screen.getByRole("button", { name: "Previous page" })); expect(onPreviousClick).toHaveBeenCalled(); -}) +}); it("can call a function when the input box's value is changed", async () => { const onInputChange = vi.fn(); @@ -141,7 +160,7 @@ it("can call a function when the input box's value is changed", async () => { await userEvent.clear(screen.getByRole("spinbutton")); expect(onInputChange).toHaveBeenCalled(); -}) +}); it("can call a function when the input box is blurred", async () => { const onInputBlur = vi.fn(); @@ -165,4 +184,4 @@ it("can call a function when the input box is blurred", async () => { // blur the input await userEvent.click(screen.getByText("of 10")); expect(onInputBlur).toHaveBeenCalled(); -}) +}); diff --git a/src/lib/components/Pagination/Pagination.tsx b/src/lib/components/Pagination/Pagination.tsx index fe57316..6a9c6eb 100644 --- a/src/lib/components/Pagination/Pagination.tsx +++ b/src/lib/components/Pagination/Pagination.tsx @@ -2,12 +2,14 @@ import { ChangeEvent, useState } from "react"; import "./Pagination.scss"; import { Button, Icon, Input } from "@canonical/react-components"; +import classNames from "classnames"; -export interface PaginationProps { +export interface PaginationProps extends React.AriaAttributes { + className?: string; currentPage: number | undefined; error?: string; - disabled: boolean; - onInputBlur: () => void; + disabled?: boolean; + onInputBlur?: () => void; onInputChange: (e: ChangeEvent) => void; onNextClick: () => void; onPreviousClick: () => void; @@ -15,6 +17,7 @@ export interface PaginationProps { } export const Pagination: React.FC = ({ + className, currentPage, error, disabled, @@ -23,9 +26,13 @@ export const Pagination: React.FC = ({ onNextClick, onPreviousClick, totalPages, + ...props }: PaginationProps) => { return ( -