@octopusdeploy/design-system-components
Version:
The design systems component library.
100 lines (99 loc) • 5.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const vitest_axe_1 = require("vitest-axe");
const TestDesignSystemProvider_1 = require("../../TestDesignSystemProvider");
const Pagination_1 = require("../Pagination");
(0, vitest_1.describe)("Pagination", () => {
const commonProps = {
label: "results",
totalResults: 30,
currentPage: 1,
itemsPerPageOptions: [5, 10, 50, 100],
selectedItemsPerPage: 5,
onPageChange: (_) => { },
onPageSizeChange: (_) => { },
};
(0, vitest_1.it)("is accessible", async () => {
const pagination = renderPagination(commonProps);
await pagination.shouldBeAccessible();
});
(0, vitest_1.it)("renders results label correctly", () => {
const pagination = renderPagination(commonProps);
pagination.shouldShowLabel("1 - 5 of 30 results");
});
(0, vitest_1.it)("renders previous button disabled and next button enabled when paging is only available forwards", () => {
const pagination = renderPagination(commonProps);
pagination.shouldShowPreviousButtonDisabled();
pagination.shouldShowNextButtonEnabled();
});
(0, vitest_1.it)("renders previous button enabled and next button enabled when paging is available both forward and backwards", () => {
const pagination = renderPagination({ ...commonProps, currentPage: 2 });
pagination.shouldShowPreviousButtonEnabled();
pagination.shouldShowNextButtonEnabled();
});
(0, vitest_1.it)("renders previous button enabled and next button disabled when paging is only available backwards", () => {
const pagination = renderPagination({ ...commonProps, currentPage: 6 });
pagination.shouldShowPreviousButtonEnabled();
pagination.shouldShowNextButtonDisabled();
});
(0, vitest_1.it)("renders both previous and next buttons as disabled when paging is not available", () => {
const pagination = renderPagination({ ...commonProps, currentPage: 1, selectedItemsPerPage: 30, totalResults: 30 });
pagination.shouldShowLabel("1 - 30 of 30 results");
pagination.shouldShowPreviousButtonDisabled();
pagination.shouldShowNextButtonDisabled();
});
(0, vitest_1.it)("shows results per page menu when clicked", async () => {
const pagination = renderPagination(commonProps);
await pagination.clickResultsPerPageButton("1 - 5 of 30 results");
pagination.shouldShowMenu();
});
(0, vitest_1.it)("omits the total number of results when a value is not provided", () => {
const pagination = renderPagination({ ...commonProps, totalResults: "unknown", hasMoreResults: false });
pagination.shouldShowLabel("1 - 5 results");
});
(0, vitest_1.it)("renders the next button disabled when total results are unknown and there are not more results", () => {
const pagination = renderPagination({ ...commonProps, totalResults: "unknown", hasMoreResults: false });
pagination.shouldShowNextButtonDisabled();
});
(0, vitest_1.it)("renders the next button enabled when total results are unknown and there are more results", () => {
const pagination = renderPagination({ ...commonProps, totalResults: "unknown", hasMoreResults: true });
pagination.shouldShowNextButtonEnabled();
});
});
function renderPagination(props) {
const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(TestDesignSystemProvider_1.TestDesignSystemProvider, { children: (0, jsx_runtime_1.jsx)(Pagination_1.Pagination, { ...props }) }));
return paginationInteraction(container);
}
function paginationInteraction(container) {
return {
shouldBeAccessible: async () => {
const results = await (0, vitest_axe_1.axe)(container);
(0, vitest_1.expect)(results).toHaveNoViolations();
},
shouldShowLabel: (label) => {
(0, vitest_1.expect)(react_1.screen.getByText(label)).toBeInTheDocument();
},
shouldShowNextButtonDisabled: () => {
testing_library_1.domQueries.getButton("Next").assertIsDisabled();
},
shouldShowNextButtonEnabled: () => {
testing_library_1.domQueries.getButton("Next").assertIsEnabled();
},
shouldShowPreviousButtonDisabled: () => {
testing_library_1.domQueries.getButton("Previous").assertIsDisabled();
},
shouldShowPreviousButtonEnabled: () => {
testing_library_1.domQueries.getButton("Previous").assertIsEnabled();
},
clickResultsPerPageButton: async (label) => {
await testing_library_1.domQueries.getButton(label).click();
},
shouldShowMenu: () => {
testing_library_1.domQueries.getMenu("Change page size").assertIsInTheDocument();
},
};
}