@purpurds/table 0.0.1

package/src/table-kitchen-sink.test.tsx

@@ -0,0 +1,1196 @@
+import React, { useEffect, useState } from "react";
+import { Pagination } from "@purpurds/pagination";
+import { ColumnFiltersState, RowSelectionState } from "@tanstack/react-table";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+
+import { PaginationState,Table } from "./table.tsx";
+import { createColumnDefKitchenSink } from "./test-utils/column-def.ts";
+import {
+  copy,
+  filterOnSelect,
+  filterOnString,
+  getCellInRowContent,
+  getCheckBoxForTableBodyRow,
+  getCheckBoxForTableHeaderRow,
+  getComboBoxFilterForHeader,
+  getInputFilterForHeader,
+  getRadioToggleForTableBodyRow,
+  getTableBody,
+  getTableColumnHeaderByText,
+  getTableHead,
+  Selectors,
+} from "./test-utils/helpers.ts";
+import { tableDataLarge } from "./test-utils/table-data.tsx";
+
+const toggleExpandMock = vi.fn();
+const onExportDataMock = vi.fn();
+const onPrimaryButtonClickMock = vi.fn();
+const clickCellButtonMock = vi.fn();
+const clickButtonGroupCellButtonMock = vi.fn();
+
+const TestComponent = ({
+  enableMultiRowSelection = true,
+}: {
+  enableMultiRowSelection: boolean;
+}) => {
+  const exportFormats = ["csv", "xlsx"];
+
+  const [pagination, setPagination] = useState<PaginationState>({
+    pageIndex: 0,
+    pageSize: 5,
+  });
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+  const [columnVisibility, setColumnVisibility] = useState({});
+
+  const [displayData, setDisplayData] = useState(tableDataLarge);
+  const [rowCount, setRowCount] = useState(tableDataLarge.length);
+
+  const [showOnlySelectedRows, setShowOnlySelectedRows] = useState(false);
+
+  useEffect(() => {
+    if (showOnlySelectedRows) {
+      const selectedRows = Object.keys(rowSelection).filter(
+        (key) => (rowSelection as Record<string, unknown>)[key]
+      );
+
+      const filteredData = tableDataLarge.filter((row) => selectedRows.includes(`${row.id}`));
+
+      setDisplayData(filteredData);
+    } else {
+      setDisplayData(tableDataLarge);
+    }
+  }, [showOnlySelectedRows, rowSelection]);
+
+  const handleOnPageChange = (page: { currentPage: number; pageSize: number }) => {
+    setPagination({ pageIndex: page.currentPage - 1, pageSize: page.pageSize });
+  };
+
+  const paginationComponent = (
+    <Pagination
+      onPageChange={handleOnPageChange}
+      availablePageSizes={[5, 10, 50]}
+      currentPage={pagination.pageIndex + 1}
+      pageSize={pagination.pageSize}
+      totalItems={rowCount}
+      nextButtonAriaLabel="Go to next page"
+      nextButtonText="Next"
+      outOfLabel="of"
+      pageSelectorListBoxLabel="Select a page"
+      pageSelectorNoOptionsText="Page does not exist"
+      pageSizeLabel="Items per page"
+      previousButtonAriaLabel="Go to previous page"
+      previousButtonText="Previous"
+      stepNumberPrefix="Go to page"
+    />
+  );
+
+  return (
+    <div style={{ width: "80rem" }}>
+      {/* @ts-expect-error Some props are required depending on if enableMultiRowSelection is true. */}
+      <Table
+        actionbarCopy={copy.actionBar}
+        columns={createColumnDefKitchenSink(clickCellButtonMock, clickButtonGroupCellButtonMock)}
+        data={displayData}
+        enableActionBar={enableMultiRowSelection} // Enables action bar only when multi row selection is enabled
+        enableFilters={true}
+        enableRowSelection={true}
+        enableMultiRowSelection={enableMultiRowSelection}
+        enableSorting={true}
+        enableToolbar={true}
+        exportDrawerCopy={copy.exportDrawer}
+        exportFormats={exportFormats}
+        getRowId={(row) => `${row.id}`}
+        onColumnFiltersChange={setColumnFilters}
+        onColumnVisibilityChange={setColumnVisibility}
+        onExportData={onExportDataMock}
+        onRowsCountChange={setRowCount}
+        onRowSelectionChange={setRowSelection}
+        onToggleExpand={toggleExpandMock}
+        onPrimaryButtonClick={onPrimaryButtonClickMock}
+        paginationComponent={paginationComponent}
+        showOnlySelectedRows={showOnlySelectedRows}
+        setShowOnlySelectedRows={setShowOnlySelectedRows}
+        settingsDrawerCopy={copy.settingsDrawer}
+        sortingAriaLabels={copy.sortingAriaLabels}
+        state={{ pagination, columnFilters, rowSelection, columnVisibility }}
+        toolbarCopy={copy.toolbar}
+        actionBarTotalRowCount={tableDataLarge.length}
+        rowSelectionAriaLabels={copy.rowSelectionAriaLabels}
+        variant="primary"
+      />
+    </div>
+  );
+};
+
+describe("Data Table - Kitchen sink", () => {
+  describe("With row selection", () => {
+    let table: HTMLTableElement;
+
+    beforeEach(async () => {
+      render(<TestComponent enableMultiRowSelection={true} />);
+
+      table = screen.getByRole("table");
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("should have 10 headers", () => {
+      const expectedHeaders = [
+        "checkbox",
+        "ID",
+        "Name",
+        "Link",
+        "Age",
+        "Badge",
+        "Position",
+        "Action",
+        "Date",
+        "Buttons",
+      ];
+
+      const headers = within(getTableHead(table)).getAllByRole("columnheader");
+      expect(headers).toHaveLength(expectedHeaders.length);
+
+      expectedHeaders.forEach((expectedHeader, index) => {
+        const withinHeader = within(headers[index]);
+        if (expectedHeader === "checkbox") {
+          expect(withinHeader.getByRole("checkbox")).toBeDefined();
+        } else {
+          const paragraph = withinHeader.getByRole("paragraph");
+          expect(paragraph.textContent?.trim()).toBe(expectedHeader);
+        }
+      });
+    });
+
+    it("should have 5 rows of data", () => {
+      const tableRows = within(getTableBody(table)).getAllByRole("row");
+      expect(tableRows).toHaveLength(5);
+    });
+
+    it("should have data in first row", () => {
+      const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+      const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+      const expectedCellsTextContent = [
+        "",
+        "12345",
+        "Name 1",
+        "Link 2",
+        "40",
+        "Information",
+        "1",
+        "ClickMe",
+        "2025-03-26 11:14",
+        [
+          { testId: "download-icon", ariaLabeL: "ClickMe" },
+          { testId: "remove-icon", ariaLabeL: "ClickMe" },
+          { testId: "more-vertical-icon", ariaLabeL: "ClickMe" },
+        ],
+      ];
+
+      tableRowCells.forEach((tableRowCell, index) => {
+        if (typeof expectedCellsTextContent[index] === "string") {
+          expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+        } else {
+          expectedCellsTextContent[index].forEach((expectedElement, buttonIndex) => {
+            const button = within(tableRowCell).getAllByRole("button")[buttonIndex];
+            const svg = within(button).getByTestId(expectedElement.testId);
+            expect(svg).toBeInTheDocument();
+            expect(button).toHaveAttribute("aria-label", expectedElement.ariaLabeL);
+          });
+        }
+      });
+    });
+
+    it.each(["Name", "Age", "Link", "Position"])(
+      "should have sorting icons on '%s' column header",
+      (column) => {
+        const header = getTableColumnHeaderByText(table, column);
+        const button = within(header).getByRole("button");
+        expect(button).toHaveAttribute("aria-label", "Sort column");
+      }
+    );
+
+    it.each([
+      ["Search by id", "ID"],
+      ["Search by name", "Name"],
+      ["Search by age", "Age"],
+    ])("should have placeholder '%s' on '%s' input filter", (expectedPlaceholder, column) => {
+      const input = getInputFilterForHeader(table, column);
+      expect(input).toHaveAttribute("placeholder", expectedPlaceholder);
+    });
+
+    it("should have right alignment on position column cells", () => {
+      const positionCell = getCellInRowContent(table, 1, "Position");
+      const paragraph = within(positionCell).getByRole("paragraph");
+
+      const hasRightAlignClass = paragraph.className
+        .split(" ")
+        .some((c) => c.includes("__right-align"));
+
+      expect(hasRightAlignClass).toBe(true);
+    });
+
+    it("should have disabled clear filters button when no filters are applied", () => {
+      const toolbar = screen.getByTestId(Selectors.TOOLBAR.ROOT);
+      const clearFiltersButton = within(toolbar).getByTestId(
+        Selectors.TOOLBAR.CLEAR_FILTERS_BUTTON
+      );
+
+      expect(clearFiltersButton).toHaveAttribute("aria-disabled", "true");
+    });
+
+    describe("Tool bar", () => {
+      let toolbar: HTMLElement;
+
+      beforeEach(() => {
+        toolbar = screen.getByTestId(Selectors.TOOLBAR.ROOT);
+      });
+
+      describe("Clearing all filters", () => {
+        beforeEach(async () => {
+          await filterOnString(table, "Name", "Name");
+          await filterOnSelect(table, "Badge", "Special");
+        });
+
+        it("should enable clear filters button when filters are applied", async () => {
+          const clearFiltersButton = within(toolbar).getByTestId(
+            Selectors.TOOLBAR.CLEAR_FILTERS_BUTTON
+          );
+
+          expect(clearFiltersButton).not.toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("should have 2 rows of data", () => {
+          const tableRows = within(getTableBody(table)).getAllByRole("row");
+          expect(tableRows).toHaveLength(2);
+        });
+
+        it("Name input filter should contain 'Name'", () => {
+          expect(getInputFilterForHeader(table, "Name")).toHaveValue("Name");
+        });
+
+        it("Badge select should be on 'special'", () => {
+          expect(getComboBoxFilterForHeader(table, "Badge")).toHaveValue("special");
+        });
+
+        describe("Clearing all filters", () => {
+          beforeEach(async () => {
+            const clearFiltersButton = within(toolbar).getByTestId(
+              Selectors.TOOLBAR.CLEAR_FILTERS_BUTTON
+            );
+
+            await userEvent.click(clearFiltersButton);
+          });
+
+          it("should have 5 rows of data when clicking on 'Clear filters'", async () => {
+            const tableRows = within(getTableBody(table)).getAllByRole("row");
+            expect(tableRows).toHaveLength(5);
+          });
+
+          it("Name input filter should be empty", () => {
+            expect(getInputFilterForHeader(table, "Name")).toHaveValue("");
+          });
+
+          it("Badge select should be on default", () => {
+            expect(getComboBoxFilterForHeader(table, "Badge")).toHaveValue("");
+          });
+        });
+      });
+
+      describe("Export table", () => {
+        describe("Export button when multiple export methods", () => {
+          beforeEach(async () => {
+            const exportButton = within(toolbar).getByTestId(Selectors.TOOLBAR.EXPORT_BUTTON);
+
+            await userEvent.click(exportButton);
+          });
+
+          it("should open export drawer", async () => {
+            expect(screen.getByTestId(Selectors.EXPORT_DRAWER.CONTENT)).toBeVisible();
+          });
+
+          it("should call 'onExportData' when clicking on export button", async () => {
+            const exportLinks = screen.getAllByTestId(Selectors.EXPORT_DRAWER.EXPORT_BUTTON);
+            await userEvent.click(exportLinks[0]);
+            expect(onExportDataMock).toHaveBeenCalledWith("csv");
+          });
+        });
+      });
+
+      describe("Expand table", () => {
+        let expandButton: HTMLButtonElement;
+
+        beforeEach(() => {
+          expandButton = screen.getByTestId(Selectors.TOOLBAR.EXPAND_BUTTON);
+        });
+
+        it("should have expand button", () => {
+          expect(expandButton).toHaveTextContent("Expand");
+        });
+
+        it("should send an event when clicking expand button", async () => {
+          await userEvent.click(expandButton);
+          expect(toggleExpandMock).toHaveBeenCalled();
+        });
+      });
+
+      describe("Settings drawer", () => {
+        let closeButton: HTMLButtonElement;
+        let withinDrawerContent: ReturnType<typeof within>;
+        let withinGeneralSettings: ReturnType<typeof within>;
+        let withinVisibleColumns: ReturnType<typeof within>;
+
+        beforeEach(async () => {
+          const settingsButton = within(toolbar).getByTestId(Selectors.TOOLBAR.SETTINGS_BUTTON);
+
+          await userEvent.click(settingsButton);
+
+          withinDrawerContent = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT));
+          closeButton = within(screen.getByTestId(Selectors.SETTINGS_DRAWER.HEADER_ROW)).getByRole(
+            "button"
+          );
+        });
+
+        it("should open the drawer", () => {
+          expect(screen.getByTestId(Selectors.SETTINGS_DRAWER.CONTENT)).toBeVisible();
+        });
+
+        it("should be possible to close the drawer", async () => {
+          await userEvent.click(closeButton);
+          expect(screen.queryByTestId(Selectors.SETTINGS_DRAWER.CONTENT)).toBeNull();
+        });
+
+        describe("General settings", () => {
+          let toggleElements: HTMLElement[];
+
+          beforeEach(() => {
+            withinGeneralSettings = within(
+              withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
+            );
+
+            toggleElements = withinGeneralSettings.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
+          });
+
+          describe("Toggle show filters", () => {
+            beforeEach(async () => {
+              await userEvent.click(toggleElements[0]);
+              await userEvent.click(closeButton);
+            });
+
+            it.each(["ID", "Name", "Link", "Age", "Badge"])(
+              "should not have a filter on '%s'",
+              (column) => {
+                const header = getTableColumnHeaderByText(table, column);
+                const input = within(header).queryByRole("textbox");
+                expect(input).not.toBeInTheDocument();
+                const listbox = within(header).queryByRole("checkbox");
+                expect(listbox).not.toBeInTheDocument();
+              }
+            );
+
+            describe("Clear filters button", () => {
+              it("should not be visible when filters are hidden", async () => {
+                const toolbar = screen.getByTestId(Selectors.TOOLBAR.ROOT);
+                const clearFiltersButton = within(toolbar).queryByTestId(
+                  Selectors.TOOLBAR.CLEAR_FILTERS_BUTTON
+                );
+
+                expect(clearFiltersButton).not.toBeInTheDocument();
+              });
+            });
+          });
+        });
+
+        describe("Visible columns", () => {
+          let toggleElements: HTMLElement[];
+          let toggleLabels: HTMLLabelElement[];
+
+          beforeEach(() => {
+            withinVisibleColumns = within(
+              withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.VISIBLE_COLUMNS)
+            );
+
+            toggleElements = withinVisibleColumns.getAllByTestId(Selectors.SETTINGS_DRAWER.TOGGLE);
+            toggleLabels = withinVisibleColumns.getAllByTestId(
+              Selectors.SETTINGS_DRAWER.TOGGLE_LABEL
+            );
+          });
+
+          it.each([
+            { label: "ID", index: 0, dataState: "checked" },
+            { label: "Name", index: 1, dataState: "checked" },
+            { label: "Link", index: 2, dataState: "checked" },
+            { label: "Age", index: 3, dataState: "checked" },
+            { label: "Badge", index: 4, dataState: "checked" },
+            { label: "Position", index: 5, dataState: "checked" },
+            { label: "Action", index: 6, dataState: "checked" },
+            { label: "Date", index: 7, dataState: "checked" },
+            { label: "Buttons", index: 8, dataState: "checked" },
+          ])("should have '%s' toggle", ({ label, index, dataState }) => {
+            expect(toggleElements[index]).toHaveRole("switch");
+            expect(toggleElements[index]).toHaveAttribute("data-state", dataState);
+            expect(toggleElements[index]).not.toBeDisabled();
+            expect(toggleLabels[index]).toHaveTextContent(label);
+          });
+
+          it("should disable last visible column toggle", () => {
+            const toggleIndex = 2;
+            toggleElements.forEach((toggleElement, index) => {
+              if (index === toggleIndex) {
+                return;
+              }
+              fireEvent.click(toggleElement);
+            });
+            expect(toggleElements[toggleIndex]).toHaveAttribute("data-state", "checked");
+            expect(toggleElements[toggleIndex]).toBeDisabled();
+            expect(toggleLabels[toggleIndex]).toHaveTextContent("Link");
+          });
+
+          describe("Toggle Age column visibility off", () => {
+            beforeEach(async () => {
+              const ageToggle = toggleElements[3];
+              await userEvent.click(ageToggle);
+              await userEvent.click(closeButton);
+            });
+
+            it("should have 9 headers", async () => {
+              const expectedHeaders = [
+                "checkbox",
+                "ID",
+                "Name",
+                "Link",
+                "Badge",
+                "Position",
+                "Action",
+                "Date",
+                "Buttons",
+              ];
+
+              const headers = within(getTableHead(table)).getAllByRole("columnheader");
+              expect(headers).toHaveLength(expectedHeaders.length);
+
+              expectedHeaders.forEach((expectedHeader, index) => {
+                const withinHeader = within(headers[index]);
+                if (expectedHeader === "checkbox") {
+                  expect(withinHeader.getByRole("checkbox")).toBeDefined();
+                } else {
+                  const paragraph = withinHeader.getByRole("paragraph");
+                  expect(paragraph.textContent?.trim()).toBe(expectedHeader);
+                }
+              });
+            });
+
+            it("should have data in first row", () => {
+              const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+              const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+              const expectedCellsTextContent = [
+                "",
+                "12345",
+                "Name 1",
+                "Link 2",
+                "Information",
+                "1",
+                "ClickMe",
+                "2025-03-26 11:14",
+                [
+                  { testId: "download-icon", ariaLabeL: "ClickMe" },
+                  { testId: "remove-icon", ariaLabeL: "ClickMe" },
+                  { testId: "more-vertical-icon", ariaLabeL: "ClickMe" },
+                ],
+              ];
+
+              tableRowCells.forEach((tableRowCell, index) => {
+                if (typeof expectedCellsTextContent[index] === "string") {
+                  expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+                } else {
+                  expectedCellsTextContent[index].forEach((expectedElement, buttonIndex) => {
+                    const button = within(tableRowCell).getAllByRole("button")[buttonIndex];
+                    const svg = within(button).getByTestId(expectedElement.testId);
+                    expect(svg).toBeInTheDocument();
+                    expect(button).toHaveAttribute("aria-label", expectedElement.ariaLabeL);
+                  });
+                }
+              });
+            });
+          });
+        });
+
+        describe("Reset settings", () => {
+          let visibleColumnsToggleElements: HTMLElement[];
+          let generalSettingsToggleElements: HTMLElement[];
+          let resetSettingsButton: HTMLButtonElement;
+
+          beforeEach(async () => {
+            withinVisibleColumns = within(
+              withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.VISIBLE_COLUMNS)
+            );
+
+            visibleColumnsToggleElements = withinVisibleColumns.getAllByTestId(
+              Selectors.SETTINGS_DRAWER.TOGGLE
+            );
+
+            const ageToggle = visibleColumnsToggleElements[4];
+            await userEvent.click(ageToggle);
+
+            withinGeneralSettings = within(
+              withinDrawerContent.getByTestId(Selectors.SETTINGS_DRAWER.GENERAL_SETTINGS)
+            );
+
+            generalSettingsToggleElements = withinGeneralSettings.getAllByTestId(
+              Selectors.SETTINGS_DRAWER.TOGGLE
+            );
+            await userEvent.click(generalSettingsToggleElements[0]);
+            await userEvent.click(generalSettingsToggleElements[1]);
+            await userEvent.click(generalSettingsToggleElements[2]);
+          });
+
+          it("should have toggled off general settings", () => {
+            generalSettingsToggleElements.forEach((toggleElement) => {
+              expect(toggleElement).toHaveAttribute("data-state", "unchecked");
+            });
+          });
+
+          describe("When clicking on reset button", () => {
+            beforeEach(async () => {
+              resetSettingsButton = withinDrawerContent.getByTestId(
+                Selectors.SETTINGS_DRAWER.FOOTER_RESET_SETTINGS_BUTTON
+              );
+
+              await userEvent.click(resetSettingsButton);
+            });
+
+            it("should have reset general settings", () => {
+              generalSettingsToggleElements.forEach((toggleElement) => {
+                expect(toggleElement).toHaveAttribute("data-state", "checked");
+              });
+            });
+
+            it("should have reset visible columns", () => {
+              visibleColumnsToggleElements.forEach((toggleElement) => {
+                expect(toggleElement).toHaveAttribute("data-state", "checked");
+              });
+            });
+          });
+        });
+      });
+    });
+
+    describe("Paginating table", () => {
+      describe("When selecting page 3", () => {
+        beforeEach(async () => {
+          const page3Button = within(screen.getByTestId(Selectors.PAGINATION.ROOT)).getByText("3");
+
+          await userEvent.click(page3Button);
+        });
+
+        it("should have 1 rows of data", () => {
+          const tableRows = within(getTableBody(table)).getAllByRole("row");
+          expect(tableRows).toHaveLength(1);
+        });
+
+        it("should have data in first row", () => {
+          const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+          const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+          const expectedCellsTextContent = [
+            "checkbox",
+            "23414",
+            "Name 52",
+            "Link 12",
+            "30",
+            "Special",
+            "11",
+            "ClickMe",
+            "2025-03-26 11:14",
+            "-", // Button group is undefined for this table row
+          ];
+
+          tableRowCells.forEach((tableRowCell, index) => {
+            if (expectedCellsTextContent[index] === "checkbox") {
+              expect(within(tableRowCell).getByRole("checkbox")).toBeInTheDocument();
+            } else {
+              expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+            }
+          });
+        });
+      });
+
+      describe("When changing page size", () => {
+        beforeEach(async () => {
+          const pageSizeSelector = within(
+            screen.getByTestId(Selectors.PAGINATION.ROOT)
+          ).getByTestId(Selectors.PAGINATION.PAGE_SIZE_SELECT);
+
+          await userEvent.selectOptions(pageSizeSelector, "10");
+        });
+
+        it("should have 10 rows of data", () => {
+          const tableRows = within(getTableBody(table)).getAllByRole("row");
+          expect(tableRows).toHaveLength(10);
+        });
+
+        it("should have data in first row", () => {
+          const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+          const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+          const expectedCellsTextContent = [
+            "checkbox",
+            "12345",
+            "Name 1",
+            "Link 2",
+            "40",
+            "Information",
+            "1",
+            "ClickMe",
+            "2025-03-26 11:14",
+            [
+              { testId: "download-icon", ariaLabeL: "ClickMe" },
+              { testId: "remove-icon", ariaLabeL: "ClickMe" },
+              { testId: "more-vertical-icon", ariaLabeL: "ClickMe" },
+            ],
+          ];
+
+          tableRowCells.forEach((tableRowCell, index) => {
+            if (expectedCellsTextContent[index] === "checkbox") {
+              expect(within(tableRowCell).getByRole("checkbox")).toBeInTheDocument();
+            } else if (typeof expectedCellsTextContent[index] === "string") {
+              expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+            } else {
+              expectedCellsTextContent[index].forEach((expectedElement, buttonIndex) => {
+                const button = within(tableRowCell).getAllByRole("button")[buttonIndex];
+                const svg = within(button).getByTestId(expectedElement.testId);
+                expect(svg).toBeInTheDocument();
+                expect(button).toHaveAttribute("aria-label", expectedElement.ariaLabeL);
+              });
+            }
+          });
+        });
+      });
+    });
+
+    describe("Select table rows", () => {
+      it("should not display batch action bar", () => {
+        const checkbox = getCheckBoxForTableHeaderRow(table);
+        expect(checkbox).toHaveAttribute("aria-checked", "false");
+        const actionBar = screen.queryByTestId(Selectors.ACTION_BAR.ROOT);
+        expect(actionBar).not.toBeVisible();
+      });
+
+      it("should display batch action bar when user selects a row", async () => {
+        const checkbox = getCheckBoxForTableBodyRow(table, 0);
+        expect(checkbox).not.toBeChecked();
+        await userEvent.click(checkbox);
+        expect(checkbox).toBeChecked();
+
+        const actionBar = screen.getByTestId(Selectors.ACTION_BAR.ROOT);
+        expect(actionBar).toBeVisible();
+      });
+
+      describe("When user selects rows 1, 3 and 4", () => {
+        let actionBar: HTMLElement;
+
+        beforeEach(async () => {
+          const checkbox0 = getCheckBoxForTableBodyRow(table, 0);
+          await userEvent.click(checkbox0);
+          const checkbox2 = getCheckBoxForTableBodyRow(table, 2);
+          await userEvent.click(checkbox2);
+          const checkbox4 = getCheckBoxForTableBodyRow(table, 4);
+          await userEvent.click(checkbox4);
+
+          actionBar = screen.getByTestId(Selectors.ACTION_BAR.ROOT);
+        });
+
+        it("should display batch action bar with '3 of 11 selected", () => {
+          const selectedText = within(actionBar).getByTestId(Selectors.ACTION_BAR.SELECTED_TEXT);
+          expect(selectedText).toHaveTextContent("3 of 11 selected");
+        });
+
+        it("should be possible to clear the selection", async () => {
+          const cancelButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.CANCEL_BUTTON);
+          await userEvent.click(cancelButton);
+          expect(actionBar).toHaveStyle("visibility: hidden");
+        });
+
+        it("should display 'indeterminate' state on header checkbox", () => {
+          const checkbox = getCheckBoxForTableHeaderRow(table);
+          expect(checkbox).toHaveAttribute("aria-checked", "mixed");
+        });
+
+        it("should send 'onPrimaryButtonClick' event when clicking on primary button", async () => {
+          const primaryButton = within(actionBar).getByTestId(Selectors.ACTION_BAR.PRIMARY_BUTTON);
+          await userEvent.click(primaryButton);
+          expect(onPrimaryButtonClickMock).toHaveBeenCalled();
+        });
+
+        describe("When user toggles show only selected rows", () => {
+          beforeEach(async () => {
+            const toggleSelected = within(actionBar).getByTestId(
+              Selectors.ACTION_BAR.TOGGLE_SELECTED
+            );
+            await userEvent.click(toggleSelected);
+          });
+
+          it("should only display selected rows", () => {
+            const tableRows = within(getTableBody(table)).getAllByRole("row");
+            expect(tableRows).toHaveLength(3);
+          });
+
+          it("should display 'Showing 3 of 3 rows'", () => {
+            const tableRowsCount = screen.getByTestId(Selectors.TOOLBAR.TABLE_ROWS_COUNT);
+            expect(tableRowsCount).toHaveTextContent("Showing 3 of 3 rows");
+          });
+        });
+      });
+
+      describe("When user selects header checkbox", () => {
+        let actionBar: HTMLElement;
+
+        beforeEach(async () => {
+          const checkbox = getCheckBoxForTableHeaderRow(table);
+          await userEvent.click(checkbox);
+
+          actionBar = screen.getByTestId(Selectors.ACTION_BAR.ROOT);
+        });
+
+        it("should display batch action bar with '5 of 11 selected'", () => {
+          // Checking select all checkbox only selects the rows for the page
+          const selectedText = within(actionBar).getByTestId(Selectors.ACTION_BAR.SELECTED_TEXT);
+          expect(selectedText).toHaveTextContent("5 of 11 selected");
+        });
+      });
+    });
+
+    describe("Table Actions", () => {
+      describe("Button", () => {
+        it("should send an event with correct values when clicking on button", async () => {
+          const cell = getCellInRowContent(table, 0, "Action");
+          await userEvent.click(within(cell).getByRole("button"));
+
+          expect(clickCellButtonMock).toHaveBeenCalled();
+
+          const lastCalledWith = clickCellButtonMock.mock.calls[0][0];
+          expect(lastCalledWith).toMatchObject({
+            id: "12345_button",
+            row: {
+              id: "12345",
+              index: 0,
+              original: tableDataLarge[0],
+            },
+          });
+        });
+      });
+
+      describe("Button groups", () => {
+        let buttons: HTMLButtonElement[];
+
+        beforeEach(() => {
+          clickButtonGroupCellButtonMock.mockClear();
+          const cell = getCellInRowContent(table, 0, "Buttons");
+          buttons = within(cell).getAllByRole("button");
+        });
+
+        it("click on button 1", async () => {
+          const button = buttons[0];
+          await userEvent.click(button);
+
+          expect(clickButtonGroupCellButtonMock).toHaveBeenCalled();
+
+          const lastCalledWith = clickButtonGroupCellButtonMock.mock.calls[0][0];
+          expect(lastCalledWith).toMatchObject({
+            id: "12345_buttonGroup",
+            buttonId: "12345_buttonGroup_button-1",
+            row: {
+              id: "12345",
+              index: 0,
+              original: tableDataLarge[0],
+            },
+          });
+        });
+
+        it("click on button 2", async () => {
+          const button = buttons[1];
+          await userEvent.click(button);
+
+          expect(clickButtonGroupCellButtonMock).toHaveBeenCalled();
+
+          const lastCalledWith = clickButtonGroupCellButtonMock.mock.calls[0][0];
+          expect(lastCalledWith).toMatchObject({
+            id: "12345_buttonGroup",
+            buttonId: "12345_buttonGroup_button-2",
+            row: {
+              id: "12345",
+              index: 0,
+              original: tableDataLarge[0],
+            },
+          });
+        });
+
+        it("click on button 3", async () => {
+          const button = buttons[2];
+          await userEvent.click(button);
+
+          expect(clickButtonGroupCellButtonMock).toHaveBeenCalled();
+
+          const lastCalledWith = clickButtonGroupCellButtonMock.mock.calls[0][0];
+          expect(lastCalledWith).toMatchObject({
+            id: "12345_buttonGroup",
+            buttonId: "12345_buttonGroup_button-3",
+            row: {
+              id: "12345",
+              index: 0,
+              original: tableDataLarge[0],
+            },
+          });
+        });
+      });
+    });
+
+    // TODO: Skipping this test since its failing on multiple issues, see Violations at bottom of file.
+    describe.skip("Accessibility", () => {
+      it("is accessible", async () => {
+        const { container } = render(<TestComponent enableMultiRowSelection={true} />);
+        const results = await axe(container, { elementRef: true });
+
+        const buttonNameViolation = results.violations.find(
+          (violation) => violation.id === "button-name"
+        );
+
+        // "Buttons must have discernible text (button-name)"
+        // This is rule is failing on the toggles and checkboxes due to them being buttons with roles instead of input elements
+        if (buttonNameViolation) {
+          buttonNameViolation.nodes = buttonNameViolation.nodes.filter(
+            (node) =>
+              !node.element?.matches('[role="switch"]') ||
+              !node.element?.matches('[role="checkbox"]')
+          );
+
+          // remove the violation if there are no more nodes
+          if (!buttonNameViolation.nodes.length) {
+            results.violations.splice(results.violations.indexOf(buttonNameViolation), 1);
+          }
+        }
+
+        // console.log("Violations", results.violations[2].nodes[0]);
+
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // expect(results).toHaveNoViolations();
+        expect(results.violations.length).toBe(0);
+      });
+    });
+  });
+
+  describe("With row toggle", () => {
+    let table: HTMLTableElement;
+
+    beforeEach(async () => {
+      render(<TestComponent enableMultiRowSelection={false} />);
+
+      table = screen.getByRole("table");
+    });
+
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("should have 10 headers", () => {
+      const expectedHeaders = [
+        "rowSelectionAriaLabels header",
+        "ID",
+        "Name",
+        "Link",
+        "Age",
+        "Badge",
+        "Position",
+        "Action",
+        "Date",
+        "Buttons",
+      ];
+
+      const headers = within(getTableHead(table)).getAllByRole("columnheader");
+      expect(headers).toHaveLength(expectedHeaders.length);
+
+      expectedHeaders.forEach((expectedHeader, index) => {
+        expect(headers[index]).toHaveTextContent(expectedHeader);
+      });
+    });
+
+    it("should have 5 rows of data", () => {
+      const tableRows = within(getTableBody(table)).getAllByRole("row");
+      expect(tableRows).toHaveLength(5);
+    });
+
+    it("should have data in first row", () => {
+      const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+      const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+      const expectedCellsTextContent = [
+        "",
+        "12345",
+        "Name 1",
+        "Link 2",
+        "40",
+        "Information",
+        "1",
+        "ClickMe",
+        "2025-03-26 11:14",
+        [
+          { testId: "download-icon", ariaLabeL: "ClickMe" },
+          { testId: "remove-icon", ariaLabeL: "ClickMe" },
+          { testId: "more-vertical-icon", ariaLabeL: "ClickMe" },
+        ],
+      ];
+
+      tableRowCells.forEach((tableRowCell, index) => {
+        if (typeof expectedCellsTextContent[index] === "string") {
+          expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+        } else {
+          expectedCellsTextContent[index].forEach((expectedElement, buttonIndex) => {
+            const button = within(tableRowCell).getAllByRole("button")[buttonIndex];
+            const svg = within(button).getByTestId(expectedElement.testId);
+            expect(svg).toBeInTheDocument();
+            expect(button).toHaveAttribute("aria-label", expectedElement.ariaLabeL);
+          });
+        }
+      });
+    });
+
+    describe("Select table rows", () => {
+      let toggleRow0: HTMLButtonElement;
+
+      beforeEach(async () => {
+        toggleRow0 = getRadioToggleForTableBodyRow(table, 0);
+        await userEvent.click(toggleRow0);
+      });
+
+      it("should not display batch action bar when user toggles a row", async () => {
+        expect(toggleRow0).toBeChecked();
+
+        const actionBar = screen.queryByTestId(Selectors.ACTION_BAR.ROOT);
+        expect(actionBar).not.toBeInTheDocument();
+      });
+
+      it("should only have 1 checked row", async () => {
+        const toggleRow3 = getRadioToggleForTableBodyRow(table, 2);
+        await userEvent.click(toggleRow3);
+
+        expect(toggleRow0).not.toBeChecked();
+        expect(toggleRow3).toBeChecked();
+      });
+    });
+  });
+
+  // TODO: Impement this around certain sections of the table
+  describe.skip("Accessibility", () => {
+    it("is accessible", async () => {
+      const { container } = render(<TestComponent enableMultiRowSelection={true} />);
+      const results = await axe(container, { elementRef: true });
+
+      const buttonNameViolation = results.violations.find(
+        (violation) => violation.id === "button-name"
+      );
+
+      // "Buttons must have discernible text (button-name)"
+      // This is rule is failing on the toggles and checkboxes due to them being buttons with roles instead of input elements
+      if (buttonNameViolation) {
+        buttonNameViolation.nodes = buttonNameViolation.nodes.filter(
+          (node) =>
+            !node.element?.matches('[role="switch"]') || !node.element?.matches('[role="checkbox"]')
+        );
+
+        // remove the violation if there are no more nodes
+        if (!buttonNameViolation.nodes.length) {
+          results.violations.splice(results.violations.indexOf(buttonNameViolation), 1);
+        }
+      }
+
+      // console.log("Violations", results.violations[2].nodes[0]);
+
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // expect(results).toHaveNoViolations();
+      expect(results.violations.length).toBe(0);
+    });
+  });
+});
+
+describe("With row toggle", () => {
+  let table: HTMLTableElement;
+
+  beforeEach(async () => {
+    render(<TestComponent enableMultiRowSelection={false} />);
+
+    table = screen.getByRole("table");
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should have 10 headers", () => {
+    const expectedHeaders = [
+      "rowSelectionAriaLabels header",
+      "ID",
+      "Name",
+      "Link",
+      "Age",
+      "Badge",
+      "Position",
+      "Action",
+      "Date",
+      "Buttons",
+    ];
+
+    const headers = within(getTableHead(table)).getAllByRole("columnheader");
+    expect(headers).toHaveLength(expectedHeaders.length);
+
+    expectedHeaders.forEach((expectedHeader, index) => {
+      expect(headers[index]).toHaveTextContent(expectedHeader);
+    });
+  });
+
+  it("should have 5 rows of data", () => {
+    const tableRows = within(getTableBody(table)).getAllByRole("row");
+    expect(tableRows).toHaveLength(5);
+  });
+
+  it("should have data in first row", () => {
+    const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+    const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+    const expectedCellsTextContent = [
+      "",
+      "12345",
+      "Name 1",
+      "Link 2",
+      "40",
+      "Information",
+      "1",
+      "ClickMe",
+      "2025-03-26 11:14",
+      [
+        { testId: "download-icon", ariaLabeL: "ClickMe" },
+        { testId: "remove-icon", ariaLabeL: "ClickMe" },
+        { testId: "more-vertical-icon", ariaLabeL: "ClickMe" },
+      ],
+    ];
+
+    tableRowCells.forEach((tableRowCell, index) => {
+      if (typeof expectedCellsTextContent[index] === "string") {
+        expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+      } else {
+        expectedCellsTextContent[index].forEach((expectedElement, buttonIndex) => {
+          const button = within(tableRowCell).getAllByRole("button")[buttonIndex];
+          const svg = within(button).getByTestId(expectedElement.testId);
+          expect(svg).toBeInTheDocument();
+          expect(button).toHaveAttribute("aria-label", expectedElement.ariaLabeL);
+        });
+      }
+    });
+  });
+
+  describe("Select table rows", () => {
+    let toggleRow0: HTMLButtonElement;
+
+    beforeEach(async () => {
+      toggleRow0 = getRadioToggleForTableBodyRow(table, 0);
+      await userEvent.click(toggleRow0);
+    });
+
+    it("should not display batch action bar when user toggles a row", async () => {
+      expect(toggleRow0).toBeChecked();
+
+      const actionBar = screen.queryByTestId(Selectors.ACTION_BAR.ROOT);
+      expect(actionBar).not.toBeInTheDocument();
+    });
+
+    it("should only have 1 checked row", async () => {
+      const toggleRow3 = getRadioToggleForTableBodyRow(table, 2);
+      await userEvent.click(toggleRow3);
+
+      expect(toggleRow0).not.toBeChecked();
+      expect(toggleRow3).toBeChecked();
+    });
+  });
+});
+
+// TODO: Impement this around certain sections of the table
+describe.skip("Accessibility", () => {
+  it("is accessible", async () => {
+    const { container } = render(<TestComponent enableMultiRowSelection={false} />);
+    const results = await axe(container);
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore TODO fix this
+    expect(results).toHaveNoViolations();
+  });
+});
+
+// Violations [
+//   {
+//     id: 'aria-allowed-role',
+//     impact: 'minor',
+//     tags: [ 'cat.aria', 'best-practice' ],
+//     description: 'Ensure role attribute has an appropriate value for the element',
+//     help: 'ARIA role should be appropriate for the element',
+//     helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-allowed-role?application=axeAPI',
+//     nodes: [ [Object] ]
+//     html: <input aria-autocomplete="list" aria-controls=":r1a:-listbox" autocomplete="off" id=":r1a:-input"    role="combobox" min="1" max="3" data-testid="purpur-pagination-page-selector-autocomplete-input-input" aria-invalid="false" class="_purpur-text-field__input_nj9f4_27" type="number" value="1"></input>
+//   },
+//   {
+//     id: 'aria-required-attr',
+//     impact: 'critical',
+//      // should be no space between 9.4 and .1.2 but it fails @telia/pii/no-ip
+//     tags: [ 'cat.aria', 'wcag2a', 'wcag412', 'EN-301-549', 'EN-9.4 .1.2' ],
+//     description: 'Ensure elements with ARIA roles have all required ARIA attributes',
+//     help: 'Required ARIA attributes must be provided',
+//     helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI',
+//     nodes: [ [Object] ]
+//     html: <input aria-autocomplete="list" aria-controls=":r1a:-listbox" autocomplete="off" id=":r1a:-input" role="combobox" min="1" max="3" data-testid="purpur-pagination-page-selector-autocomplete-input-input" aria-invalid="false" class="_purpur-text-field__input_nj9f4_27" type="number" value="1">
+//   },
+//   {
+//     id: 'aria-valid-attr-value',
+//     impact: 'critical',
+//      // should be no space between 9.4 and .1.2 but it fails @telia/pii/no-ip
+//     tags: [ 'cat.aria', 'wcag2a', 'wcag412', 'EN-301-549', 'EN-9.4 .1.2' ],
+//     description: 'Ensure all ARIA attributes have valid values',
+//     help: 'ARIA attributes must conform to valid values',
+//     helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI',
+//     nodes: [ [Object] ]
+//     html:<input aria-autocomplete="list" aria-controls=":r1a:-listbox" autocomplete="off" id=":r1a:-input" role="combobox" min="1" max="3" data-testid="purpur-pagination-page-selector-autocomplete-input-input" aria-invalid="false" class="_purpur-text-field__input_nj9f4_27" type="number" value="1">
+//   },
+//   {
+//     id: 'label',
+//     impact: 'critical',
+//     tags: [
+//       'cat.forms',
+//       'wcag2a',
+//       'wcag412',
+//       'section508',
+//       'section508.22.n',
+//       'TTv5',
+//       'TT5.c',
+//       'EN-301-549',
+//      // should be no space between 9.4 and .1.2 but it fails @telia/pii/no-ip
+//       'EN-9.4 .1.2',
+//       'ACT'
+//     ],
+//     description: 'Ensure every form element has a label',
+//     help: 'Form elements must have labels',
+//     helpUrl: 'https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI',
+//     nodes: [ [Object] ]
+//     html:<input aria-autocomplete="list" aria-controls=":r1a:-listbox" autocomplete="off" id=":r1a:-input" role="combobox" min="1" max="3" data-testid="purpur-pagination-page-selector-autocomplete-input-input" aria-invalid="false" class="_purpur-text-field__input_nj9f4_27" type="number" value="1">
+//   }
+// ]