@purpurds/table 0.0.1

package/src/test-utils/helpers.ts

@@ -0,0 +1,234 @@
+import { fireEvent, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect } from "vitest";
+
+export const getTableHead = (table: HTMLElement): HTMLElement => {
+  const thead = within(table).getAllByRole("rowgroup")[0];
+  expect(thead.tagName).toBe("THEAD");
+  return thead;
+};
+
+export const getTableBody = (table: HTMLElement): HTMLElement => {
+  const tbody = within(table).getAllByRole("rowgroup")[1];
+  expect(tbody.tagName).toBe("TBODY");
+  return tbody;
+};
+
+export const getTableColumnHeaderByText = (
+  table: HTMLElement,
+  columnHeader: string
+): HTMLElement => {
+  const thead = getTableHead(table);
+  const columnHeaders = within(thead).getAllByRole("columnheader");
+  const index = getTableColumnHeaderIndex(columnHeaders, columnHeader);
+  return columnHeaders[index];
+};
+
+export const getCellInRowContent = (
+  table: HTMLTableElement,
+  rowNr: number,
+  columnHeader: string
+): HTMLTableCellElement => {
+  const tbody = getTableBody(table);
+  const row = within(tbody).getAllByRole("row")[rowNr];
+  const thead = getTableHead(table);
+  const columnHeaders = within(thead).getAllByRole("columnheader");
+  const index = getTableColumnHeaderIndex(columnHeaders, columnHeader);
+
+  return within(row).getAllByRole<HTMLTableCellElement>("cell")[index];
+};
+
+export const getTableHeadRow = (table: HTMLTableElement, rowNr = 0): HTMLTableRowElement => {
+  return within(getTableHead(table)).getAllByRole<HTMLTableRowElement>("row")[rowNr];
+};
+
+export const getTableBodyRow = (table: HTMLTableElement, rowNr: number): HTMLTableRowElement => {
+  return within(getTableBody(table)).getAllByRole<HTMLTableRowElement>("row")[rowNr];
+};
+
+// Ideally the return type should be HTMLInputElement but purpur checkbox is a button
+export const getCheckBoxForTableBodyRow = (
+  table: HTMLTableElement,
+  rowNr: number
+): HTMLButtonElement => {
+  return within(getTableBodyRow(table, rowNr)).getByRole("checkbox");
+};
+
+export const getRadioToggleForTableBodyRow = (
+  table: HTMLTableElement,
+  rowNr: number
+): HTMLButtonElement => {
+  return within(getTableBodyRow(table, rowNr)).getByRole("radio");
+};
+
+// Ideally the return type should be HTMLInputElement but purpur checkbox is a button
+export const getCheckBoxForTableHeaderRow = (
+  table: HTMLTableElement,
+  rowNr = 0
+): HTMLButtonElement => {
+  return within(getTableHeadRow(table, rowNr)).getByRole("checkbox");
+};
+
+export const getInputFilterForHeader = (table: HTMLTableElement, column: string) => {
+  const header = getTableColumnHeaderByText(table, column);
+  return within(header).getByRole("textbox");
+};
+
+export const filterOnString = async (
+  table: HTMLTableElement,
+  column: string,
+  filterValue: string
+) => {
+  const input = getInputFilterForHeader(table, column);
+
+  await waitFor(() => {
+    fireEvent.change(input, { target: { value: filterValue } });
+  });
+};
+
+export const getComboBoxFilterForHeader = (table: HTMLTableElement, column: string) => {
+  const header = getTableColumnHeaderByText(table, column);
+  return within(header).getByRole("combobox");
+};
+
+export const filterOnSelect = async (
+  table: HTMLTableElement,
+  column: string,
+  filterValue: string
+) => {
+  const select = getComboBoxFilterForHeader(table, column);
+  await userEvent.selectOptions(select, filterValue);
+};
+
+export const Selectors = {
+  ACTION_BAR: {
+    CANCEL_BUTTON: "purpur-table-action-bar-cancel-button",
+    PRIMARY_BUTTON: "purpur-table-action-bar-primary-button",
+    ROOT: "purpur-table-action-bar",
+    SECONDARY_BUTTON: "purpur-table-action-bar-secondary-button",
+    SELECTED_TEXT: "purpur-table-action-bar-selected-text",
+    TOGGLE_SELECTED: "purpur-table-action-bar-toggle-selected",
+  },
+  COLUMN_HEADER_CELL_TITLE: "purpur-table-column-header-cell-title",
+  EXPORT_DRAWER: {
+    BODY_TEXT: "purpur-table-export-drawer-content-description",
+    CLOSE_BUTTON: "purpur-table-toolbar-export",
+    CONTENT: "purpur-table-export-drawer-content",
+    HEADER_ROW: "purpur-drawer-header-row",
+    EXPORT_BUTTON: "purpur-table-export-drawer-export-button",
+    TITLE: "purpur-drawer-header-title",
+  },
+  SETTINGS_DRAWER: {
+    CONTENT: "purpur-table-settings-drawer-content",
+    FOOTER: "purpur-drawer-frame-sticky-footer",
+    FOOTER_RESET_SETTINGS_BUTTON: "purpur-table-settings-drawer-reset-button",
+    GENERAL_SETTINGS: "purpur-table-settings-drawer-general-settings",
+    HEADER_ROW: "purpur-drawer-header-row",
+    ROOT: "purpur-table-settings-drawer",
+    TITLE: "purpur-drawer-header-title",
+    TOGGLE: "purpur-table-settings-drawer-toggle",
+    TOGGLE_LABEL: "purpur-table-settings-drawer-toggle-label",
+    VISIBLE_COLUMNS: "purpur-table-settings-drawer-visible-columns",
+  },
+  TOOLBAR: {
+    CLEAR_FILTERS_BUTTON: "purpur-table-toolbar-clear-filters-button",
+    EXPAND_BUTTON: "purpur-table-toolbar-expand-button",
+    EXPORT_BUTTON: "purpur-table-toolbar-export-button",
+    ROOT: "purpur-table-toolbar",
+    SETTINGS_BUTTON: "purpur-table-toolbar-settings-button",
+    TABLE_ROWS_COUNT: "purpur-table-toolbar-table-rows-count",
+  },
+  EMPTY_TABLE: {
+    TITLE: "purpur-table-empty-table-title",
+    DESCRIPTION: "purpur-table-empty-table-description",
+  },
+  PAGINATION: {
+    ROOT: "purpur-pagination",
+    PAGE_SIZE_SELECT: "purpur-pagination-page-size-selector-select-select",
+  },
+  SKELETON: "purpur-table-cell-skeleton",
+};
+
+export const copy = {
+  actionBar: {
+    buttons: {
+      cancel: "Close action bar",
+      primary: "Primary button",
+      secondary: "Secondary button",
+      toggleSelected: "Show only selected rows",
+    },
+    selectedRowsCount: {
+      of: "of",
+      selected: "selected",
+    },
+  },
+  exportDrawer: {
+    bodyText: "Choose the format you want to export the table in.",
+    closeButtonText: "Close drawer",
+    link: "Export as",
+    title: "Export table",
+  },
+  pagination: {
+    nextButtonAriaLabel: "Go to next page",
+    nextButtonText: "Next",
+    outOfLabel: "of",
+    pageSelectorListBoxLabel: "Select a page",
+    pageSelectorNoOptionsText: "Page does not exist",
+    previousButtonAriaLabel: "Go to previous page",
+    previousButtonText: "Previous",
+    stepNumberPrefix: "Go to page",
+  },
+  settingsDrawer: {
+    buttons: {
+      closeDrawer: "Close drawer",
+      resetSettings: "Reset settings",
+    },
+    generalSettings: {
+      header: "General settings",
+      toggles: {
+        lockFirstcolumn: "Lock first column",
+        showFilters: "Show Filters",
+        stickyHeader: "Sticky header",
+      },
+    },
+    title: "Table settings",
+    visibleColumns: {
+      header: "Visible columns",
+    },
+  },
+  sortingAriaLabels: {
+    asc: "Sort ascending",
+    default: "Sort column",
+    desc: "Sort descending",
+  },
+  toolbar: {
+    buttons: {
+      clearFilters: "Clear filters",
+      expand: "Expand",
+      export: "Export",
+      settings: "Settings",
+    },
+    ariaLabels: {
+      clearFilters: "Clear all filters",
+      expand: "Expand table",
+      export: "Open export drawer",
+      settings: "Open settings drawer",
+    },
+    rowCount: {
+      of: "of",
+      rows: "rows",
+      showing: "Showing",
+    },
+  },
+  rowSelectionAriaLabels: {
+    header: "rowSelectionAriaLabels header",
+    row: "rowSelectionAriaLabels row",
+  },
+};
+
+const getTableColumnHeaderIndex = (columnHeaders: HTMLElement[], text: string) => {
+  return columnHeaders.findIndex((columnHeader) => {
+    const paragraph = within(columnHeader).queryByTestId(Selectors.COLUMN_HEADER_CELL_TITLE);
+    return paragraph?.innerHTML === text;
+  });
+};

package/src/test-utils/table-data.tsx

@@ -0,0 +1,318 @@
+import React from "react";
+import { BadgeVariant } from "@purpurds/badge";
+import { ButtonProps } from "@purpurds/button";
+import { IconDownload } from "@purpurds/icon/download";
+import { IconMoreVertical } from "@purpurds/icon/more-vertical";
+import { IconRemove } from "@purpurds/icon/remove";
+
+import { ButtonGroupButtonProp } from "../cell-types/button-group-cell";
+
+export type TableDataLarge = {
+  id: number;
+  name: string;
+  link: { href: string; children: string };
+  badge: {
+    variant: BadgeVariant;
+    children: string;
+  };
+  age: number;
+  position: number;
+  date: string;
+  button: ButtonProps;
+  buttonGroup?: ButtonGroupButtonProp[];
+};
+
+const buttonGroup: ButtonGroupButtonProp[] = [
+  {
+    id: "button-1",
+    ariaLabel: "ClickMe",
+    variant: "primary",
+    icon: <IconDownload data-testid="download-icon" />,
+  },
+  {
+    id: "button-2",
+    ariaLabel: "ClickMe",
+    icon: <IconRemove data-testid="remove-icon" />,
+    variant: "primary",
+  },
+  {
+    id: "button-3",
+    ariaLabel: "ClickMe",
+    icon: <IconMoreVertical data-testid="more-vertical-icon" />,
+    variant: "primary",
+  },
+];
+
+export const tableDataLarge: TableDataLarge[] = [
+  {
+    id: 12345,
+    name: "Name 1",
+    link: { href: "#", children: "Link 2" },
+    badge: {
+      variant: "information",
+      children: "Information",
+    },
+    age: 40,
+    position: 1,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 67890,
+    name: "Name 7",
+    link: { href: "#", children: "Link 9" },
+    badge: {
+      variant: "success",
+      children: "Success",
+    },
+    age: 25,
+    position: 3,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 12346,
+    name: "Name 5",
+    link: { href: "#", children: "Link 1" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    age: 30,
+    position: 2,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 98463,
+    name: "Name 9",
+    link: { href: "#", children: "Link 9" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    age: 30,
+    position: 5,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 56367,
+    name: "Name 13",
+    link: { href: "#", children: "Link 13" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    age: 66,
+    position: 4,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 98793,
+    name: "Name 45",
+    link: { href: "#", children: "Link 45" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    age: 30,
+    position: 6,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 38542,
+    name: "Name 34",
+    link: { href: "#", children: "Link 34" },
+    badge: {
+      variant: "attention",
+      children: "Attention",
+    },
+    age: 30,
+    position: 7,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+  },
+  {
+    id: 8723,
+    name: "Test name 1",
+    link: { href: "#", children: "Link 100" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    age: 24,
+    position: 10,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 566347,
+    name: "Some really long name that I can check truncation on",
+    link: { href: "#", children: "Link 99" },
+    badge: {
+      variant: "warning",
+      children: "Warning",
+    },
+    age: 30,
+    position: 9,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+  },
+  {
+    id: 92385,
+    name: "Some other name",
+    link: { href: "#", children: "Link 453" },
+    badge: {
+      variant: "special",
+      children: "Special",
+    },
+    age: 75,
+    position: 8,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+    buttonGroup,
+  },
+  {
+    id: 23414,
+    name: "Name 52",
+    link: { href: "#", children: "Link 12" },
+    badge: {
+      variant: "special",
+      children: "Special",
+    },
+    age: 30,
+    position: 11,
+    date: "2025-03-26T10:14:57.343Z",
+    button: {
+      type: "button",
+      children: "ClickMe",
+      variant: "primary",
+    },
+  },
+];
+
+export type TableDataSmall = {
+  id: number;
+  name: string;
+  link: { href: string; children: string };
+  age: number;
+};
+
+export const tableDataSmall: TableDataSmall[] = [
+  {
+    id: 12345,
+    name: "Name 1",
+    link: { href: "#", children: "Link 2" },
+    age: 40,
+  },
+  {
+    id: 67890,
+    name: "Name 7",
+    link: { href: "#", children: "Link 9" },
+    age: 25,
+  },
+  {
+    id: 12346,
+    name: "Name 5",
+    link: { href: "#", children: "Link 1" },
+    age: 30,
+  },
+  {
+    id: 98463,
+    name: "Name 9",
+    link: { href: "#", children: "Link 9" },
+    age: 30,
+  },
+  {
+    id: 56367,
+    name: "Name 13",
+    link: { href: "#", children: "Link 13" },
+    age: 66,
+  },
+  {
+    id: 98793,
+    name: "Name 45",
+    link: { href: "#", children: "Link 45" },
+    age: 30,
+  },
+  {
+    id: 38542,
+    name: "Name 34",
+    link: { href: "#", children: "Link 34" },
+    age: 30,
+  },
+  {
+    id: 8723,
+    name: "Test name 1",
+    link: { href: "#", children: "Link 100" },
+    age: 24,
+  },
+  {
+    id: 566347,
+    name: "Some really long name that I can check truncation on",
+    link: { href: "#", children: "Link 99" },
+    age: 30,
+  },
+  {
+    id: 92385,
+    name: "Some other name",
+    link: { href: "#", children: "Link 453" },
+    age: 75,
+  },
+  {
+    id: 23414,
+    name: "Name 52",
+    link: { href: "#", children: "Link 12" },
+    age: 30,
+  },
+];