@purpurds/table 0.0.1

package/src/table.story.css

@@ -0,0 +1,11 @@
+div.table-transition {
+  transition: max-width var(--purpur-motion-duration-300) var(--purpur-motion-easing-ease-in);
+}
+
+div.escape-grid {
+  max-width: 100%;
+}
+
+.table-max-height {
+  max-height: 100dvh;
+}

package/src/table.test.tsx

@@ -0,0 +1,318 @@
+import React from "react";
+import { IllustrativeIconSearchQuestionDuocolor } from "@purpurds/illustrative-icon/search-question-duocolor";
+import { render, screen, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+
+import { Table } from "./table";
+import { createColumnDefSmall } from "./test-utils/column-def.ts";
+import { copy, getTableBody, getTableHead, Selectors } from "./test-utils/helpers.ts";
+import { TableDataSmall, tableDataSmall } from "./test-utils/table-data.tsx";
+
+describe("Data Table", () => {
+  let table: HTMLTableElement;
+  let tableRows: HTMLTableRowElement[];
+  let tableHeaders: HTMLTableCellElement[];
+  let container: HTMLElement;
+
+  describe("Base Table", () => {
+    beforeEach(() => {
+      container = render(
+        <Table columns={createColumnDefSmall()} data={tableDataSmall} />
+      ).container;
+
+      table = screen.getByRole("table");
+      tableHeaders = within(getTableHead(table)).getAllByRole("columnheader");
+
+      tableRows = within(getTableBody(table)).getAllByRole("row");
+    });
+
+    it("should have 10 headers", () => {
+      const expectedHeaders = ["ID", "Name", "Link", "Age"];
+
+      expect(tableHeaders).toHaveLength(expectedHeaders.length);
+
+      expectedHeaders.forEach((expectedHeader, index) => {
+        const withinHeader = within(tableHeaders[index]);
+        if (expectedHeader === "checkbox") {
+          expect(withinHeader.getByRole("checkbox")).toBeDefined();
+        } else {
+          const paragraph = withinHeader.getByRole("paragraph");
+          expect(paragraph.textContent?.trim()).toBe(expectedHeader);
+        }
+      });
+    });
+
+    it("should have 11 rows of data", () => {
+      expect(tableRows).toHaveLength(11);
+    });
+
+    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"];
+
+      tableRowCells.forEach((tableRowCell, index) => {
+        expect(tableRowCell).toHaveTextContent(expectedCellsTextContent[index]);
+      });
+    });
+
+    it("should not have pagination", () => {
+      expect(screen.queryByTestId(Selectors.PAGINATION.ROOT)).not.toBeInTheDocument();
+    });
+
+    it("should not have row selection", () => {
+      tableRows.forEach((tableRow) => {
+        const checkbox = within(tableRow).queryByRole("checkbox");
+        expect(checkbox).not.toBeInTheDocument();
+      });
+    });
+
+    it("should not have table header filters enabled", () => {
+      const withinTableHead = within(getTableHead(table));
+      expect(withinTableHead.queryByRole("combobox")).not.toBeInTheDocument();
+      expect(withinTableHead.queryByRole("search")).not.toBeInTheDocument();
+    });
+
+    it("should not have sorting enabled", () => {
+      const withinTableHead = within(getTableHead(table));
+      expect(withinTableHead.queryByRole("button")).not.toBeInTheDocument();
+    });
+
+    it("should not have tool bar", () => {
+      expect(screen.queryByTestId(Selectors.TOOLBAR.ROOT)).not.toBeInTheDocument();
+    });
+
+    it("should be accessible", async () => {
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    it("should be accessible", async () => {
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  describe("Empty table", () => {
+    beforeEach(() => {
+      const tableData: TableDataSmall[] = [];
+      container = render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableData}
+          emptyTableCopy={{
+            title: "Title empty table",
+            description: "Body text explaining why the table is empty and what the user can do.",
+          }}
+          emptyTableHeadingTag="h2"
+          emptyTableIcon={<IllustrativeIconSearchQuestionDuocolor />}
+        />
+      ).container;
+
+      table = screen.getByRole("table");
+      tableHeaders = within(getTableHead(table)).getAllByRole("columnheader");
+
+      tableRows = within(getTableBody(table)).getAllByRole("row");
+    });
+
+    it("should have 1 row", () => {
+      expect(tableRows).toHaveLength(1);
+    });
+
+    it("should be accessible", async () => {
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    describe("Within the empty row", () => {
+      it("should have a empty table title", () => {
+        const emptyTableTitle = within(tableRows[0]).getByTestId(Selectors.EMPTY_TABLE.TITLE);
+        expect(emptyTableTitle).toHaveTextContent("Title empty table");
+      });
+
+      it("should have a empty table description", () => {
+        const emptyTableDescription = within(tableRows[0]).getByTestId(
+          Selectors.EMPTY_TABLE.DESCRIPTION
+        );
+        expect(emptyTableDescription).toHaveTextContent(
+          "Body text explaining why the table is empty and what the user can do."
+        );
+      });
+    });
+  });
+
+  describe("Export with one format", () => {
+    it("should send an event when clicking on the export button", async () => {
+      const onExportDataMock = vi.fn();
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          exportFormats="csv"
+          onExportData={onExportDataMock}
+          enableToolbar={true}
+          toolbarCopy={{
+            buttons: {
+              export: "Export",
+            },
+            ariaLabels: {
+              export: "Export csv file",
+            },
+          }}
+        />
+      );
+
+      const toolbar = screen.getByTestId(Selectors.TOOLBAR.ROOT);
+      const exportButton = within(toolbar).getByTestId(Selectors.TOOLBAR.EXPORT_BUTTON);
+
+      await userEvent.click(exportButton);
+      expect(onExportDataMock).toHaveBeenCalledWith("csv");
+    });
+  });
+
+  describe("Expand table", () => {
+    it("should have an expand button", async () => {
+      const onToggleExpandMock = vi.fn();
+
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableToolbar={true}
+          toolbarCopy={{
+            buttons: {
+              expand: "Expand",
+            },
+            ariaLabels: {
+              expand: "Expand table",
+            },
+          }}
+          onToggleExpand={onToggleExpandMock}
+        />
+      );
+
+      const expandButton = screen.getByTestId(Selectors.TOOLBAR.EXPAND_BUTTON);
+
+      await userEvent.click(expandButton);
+      expect(onToggleExpandMock).toHaveBeenCalled();
+    });
+  });
+
+  describe("Settings drawer", () => {
+    it("should have an settings button", async () => {
+      render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          enableToolbar={true}
+          settingsDrawerCopy={copy.settingsDrawer}
+          toolbarCopy={{
+            buttons: {
+              settings: "Settings",
+            },
+            ariaLabels: {
+              settings: "Settings",
+            },
+          }}
+        />
+      );
+
+      const settingsButton = screen.getByTestId(Selectors.TOOLBAR.SETTINGS_BUTTON);
+
+      expect(settingsButton).toBeInTheDocument();
+    });
+  });
+
+  describe("Loading skeletons", () => {
+    let rerender: (ui: React.ReactNode) => void;
+
+    beforeEach(() => {
+      const { container: renderContainer, rerender: renderRerender } = render(
+        <Table
+          columns={createColumnDefSmall()}
+          data={tableDataSmall}
+          loading={true}
+          skeletonRows={11}
+        />
+      );
+      container = renderContainer;
+      rerender = renderRerender;
+
+      table = screen.getByRole("table");
+      tableHeaders = within(getTableHead(table)).getAllByRole("columnheader");
+
+      tableRows = within(getTableBody(table)).getAllByRole("row");
+    });
+
+    it("should have 10 rows", () => {
+      expect(tableRows).toHaveLength(11);
+    });
+
+    it("should have 4 headers", () => {
+      expect(tableHeaders).toHaveLength(4);
+    });
+
+    it("should have 4 skeletons in a row", () => {
+      const tableRow1 = within(getTableBody(table)).getAllByRole("row")[0];
+
+      const tableRowCells = within(tableRow1).getAllByRole("cell");
+
+      expect(tableRowCells).toHaveLength(4);
+      tableRowCells.forEach((tableRowCell) => {
+        const skeleton = within(tableRowCell).getByTestId(Selectors.SKELETON);
+        expect(skeleton).toBeInTheDocument();
+      });
+    });
+
+    it("should be accessible", async () => {
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+
+    describe("When loading is false", () => {
+      beforeEach(() => {
+        rerender(<Table columns={createColumnDefSmall()} data={tableDataSmall} loading={false} />);
+      });
+
+      it("should show table data", () => {
+        const tableBody = getTableBody(table);
+        tableRows = within(tableBody).getAllByRole("row");
+
+        expect(tableRows).toHaveLength(11);
+
+        const firstDataRow = tableRows[0];
+        const dataCells = within(firstDataRow).getAllByRole("cell");
+
+        expect(dataCells[0]).toHaveTextContent("12345"); // ID
+        expect(dataCells[1]).toHaveTextContent("Name 1"); // Name
+        expect(dataCells[2]).toHaveTextContent("Link 2"); // Link
+        expect(dataCells[3]).toHaveTextContent("40"); // Age
+
+        expect(screen.queryByTestId(Selectors.SKELETON)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("is accessible", async () => {
+      const { container } = render(
+        <Table columns={createColumnDefSmall()} data={tableDataSmall} />
+      );
+      const results = await axe(container);
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      expect(results).toHaveNoViolations();
+    });
+  });
+});