@multiplatform.one/table 6.7.0 → 7.1.0

package/src/components/DataTableGrouping/DataTableGrouping.spec.tsx

@@ -7,6 +7,7 @@ import { DataTable } from "../DataTable";
 import {
   type AggregationConfig,
   DataTableGrouping,
+  DataTableGroupingConfig,
   formatAggregateValue,
   groupData,
 } from "./index";
@@ -238,6 +239,73 @@ describe("DataTableGrouping", () => {
     expect(screen.queryByText("Alice")).not.toBeInTheDocument();
   });
 
+  describe("stacked-group radius (LC-72)", () => {
+    it("rounds only the stack's outer corners on collapsed headers", () => {
+      renderWithProviders(
+        <DataTableGrouping data={salesData} columns={columns} groupBy={["region"]} />,
+      );
+
+      const headers = screen.getAllByTestId("data-table-group-header");
+      expect(headers).toHaveLength(2);
+      expect(headers[0]).toHaveAttribute("data-group-position", "first");
+      expect(headers[0]).toHaveAttribute("data-stack-start", "true");
+      expect(headers[0]).toHaveAttribute("data-stack-end", "false");
+      expect(headers[1]).toHaveAttribute("data-group-position", "last");
+      expect(headers[1]).toHaveAttribute("data-stack-start", "false");
+      expect(headers[1]).toHaveAttribute("data-stack-end", "true");
+    });
+
+    it("drops trailing radius on an open last header (accordion corollary)", () => {
+      renderWithProviders(
+        <DataTableGrouping
+          data={salesData}
+          columns={columns}
+          groupBy={["region"]}
+          expandedGroups={new Set(["Europe"])}
+        />,
+      );
+
+      const europe = screen
+        .getAllByTestId("data-table-group-header")
+        .find((el) => el.textContent?.includes("Europe"))!;
+      expect(europe).toHaveAttribute("data-group-position", "last");
+      expect(europe).toHaveAttribute("data-stack-end", "false");
+      expect(europe).toHaveAttribute("aria-expanded", "true");
+    });
+
+    it("gives the last leaf of a trailing group the stack's trailing edge", () => {
+      renderWithProviders(
+        <DataTableGrouping
+          data={salesData}
+          columns={columns}
+          groupBy={["region"]}
+          expandedGroups={new Set(["Europe"])}
+        />,
+      );
+
+      const items = screen.getAllByTestId("data-table-group-item");
+      expect(items.length).toBeGreaterThan(0);
+      expect(items.at(-1)).toHaveAttribute("data-stack-end", "true");
+    });
+
+    it("keeps leaf rows of a non-trailing group square", () => {
+      renderWithProviders(
+        <DataTableGrouping
+          data={salesData}
+          columns={columns}
+          groupBy={["region"]}
+          expandedGroups={new Set(["North America"])}
+        />,
+      );
+
+      const items = screen.getAllByTestId("data-table-group-item");
+      expect(items.length).toBe(3);
+      for (const item of items) {
+        expect(item).toHaveAttribute("data-stack-end", "false");
+      }
+    });
+  });
+
   it("keeps a group expanded when data changes (uncontrolled expansion, stable keys)", () => {
     const { rerender } = renderWithProviders(
       <DataTableGrouping data={salesData} columns={columns} groupBy={["region"]} />,
@@ -343,6 +411,23 @@ describe("DataTableGrouping", () => {
 
     expect(mockRenderGroupFooter).toHaveBeenCalled();
   });
+
+  it("reorders group-by columns from the config popover", () => {
+    const onConfigChange = vi.fn();
+    renderWithProviders(
+      <DataTableGroupingConfig
+        columns={columns}
+        currentConfig={{ columns: ["region", "category"], aggregations: [] }}
+        onConfigChange={onConfigChange}
+      />,
+    );
+
+    fireEvent.click(screen.getByLabelText("Grouping configuration"));
+    fireEvent.click(screen.getByLabelText("Move Region down"));
+    expect(onConfigChange).toHaveBeenCalledWith(
+      expect.objectContaining({ columns: ["category", "region"] }),
+    );
+  });
 });
 
 describe("groupData", () => {