@astryxdesign/core 0.3.0 → 0.4.0

package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx

@@ -1,14 +1,11 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
 import {describe, it, expect, vi, beforeEach} from 'vitest';
-import {render, renderHook, screen, fireEvent} from '@testing-library/react';
+import {render, screen, fireEvent} from '@testing-library/react';
 import {useState} from 'react';
 import {Table} from '../../Table';
 import type {TableColumn} from '../../types';
-import {
-  useTableRowExpansion,
-  useTableRowExpansionState,
-} from './useTableRowExpansion';
+import {useTableRowExpansion} from './useTableRowExpansion';
 import {InternationalizationProvider} from '../../../i18n';
 
 // popover mock for context-menu tests
@@ -37,227 +34,180 @@ beforeEach(() => {
   };
 });
 
-interface TreeItem extends Record<string, unknown> {
+interface Row extends Record<string, unknown> {
   id: string;
   name: string;
-  children: TreeItem[];
+  bio: string;
 }
 
-const treeData: TreeItem[] = [
-  {
-    id: 'a',
-    name: 'Folder A',
-    children: [
-      {id: 'a1', name: 'File A1', children: []},
-      {id: 'a2', name: 'File A2', children: []},
-    ],
-  },
-  {
-    id: 'b',
-    name: 'Folder B',
-    children: [{id: 'b1', name: 'File B1', children: []}],
-  },
-  {id: 'c', name: 'Leaf C', children: []},
+const rows: Row[] = [
+  {id: 'a', name: 'Ada', bio: 'Ada bio'},
+  {id: 'b', name: 'Bo', bio: 'Bo bio'},
+  {id: 'c', name: 'Cy', bio: 'Cy bio'},
 ];
 
-const columns: TableColumn<TreeItem>[] = [{key: 'name', header: 'Name'}];
+const columns: TableColumn<Row>[] = [{key: 'name', header: 'Name'}];
 
 const EMPTY_KEYS = new Set<string>();
 
+const defaultRenderExpanded = (item: Row) => (
+  <div data-testid="panel">{`${item.name}: ${item.bio}`}</div>
+);
+
 function Harness({
   initialExpanded = EMPTY_KEYS,
+  isItemExpandable,
+  renderExpanded = defaultRenderExpanded,
 }: {
   initialExpanded?: Set<string>;
+  isItemExpandable?: (item: Row) => boolean;
+  renderExpanded?: (item: Row) => React.ReactNode;
 }) {
   const [expandedKeys, setExpandedKeys] = useState(initialExpanded);
-  const {data, expansionConfig} = useTableRowExpansionState<TreeItem>({
-    baseData: treeData,
-    getChildren: item => item.children,
-    getRowKey: item => item.id,
+  const expansion = useTableRowExpansion<Row>({
     expandedKeys,
-    setExpandedKeys,
+    onToggle: key =>
+      setExpandedKeys(prev => {
+        const next = new Set(prev);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      }),
+    getRowKey: item => item.id,
+    renderExpanded,
+    getIsItemExpandable: isItemExpandable,
   });
-  const expansion = useTableRowExpansion(expansionConfig);
   return (
-    <Table data={data} columns={columns} idKey="id" plugins={{expansion}} />
+    <Table data={rows} columns={columns} idKey="id" plugins={{expansion}} />
   );
 }
 
-describe('useTableRowExpansion', () => {
-  it('renders a chevron button for expandable rows', () => {
+describe('useTableRowExpansion (detail panel)', () => {
+  it('renders an "Expand row" chevron button for every expandable row', () => {
     render(<Harness />);
-    const buttons = screen.getAllByRole('button', {name: /expand row/i});
-    // Folder A and Folder B are expandable (top-level with children)
-    expect(buttons.length).toBe(2);
-  });
-
-  it('shows child rows when expanded', () => {
-    render(<Harness initialExpanded={new Set(['a'])} />);
-    expect(screen.getByText('File A1')).toBeInTheDocument();
-    expect(screen.getByText('File A2')).toBeInTheDocument();
-  });
-
-  it('hides child rows when collapsed', () => {
-    render(<Harness />);
-    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
+    expect(screen.getAllByRole('button', {name: /expand row/i})).toHaveLength(
+      3,
+    );
   });
 
-  it('toggles expansion on chevron click', () => {
+  it('does not render the detail panel while collapsed', () => {
     render(<Harness />);
-    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
-    fireEvent.click(screen.getAllByRole('button', {name: /expand row/i})[0]);
-    expect(screen.getByText('File A1')).toBeInTheDocument();
+    expect(screen.queryByTestId('panel')).not.toBeInTheDocument();
   });
 
-  it('contributes a context-menu action on expandable rows', () => {
-    render(<Harness />);
-    fireEvent.contextMenu(screen.getByText('Folder A'));
-    const items = screen.getAllByRole('menuitem', {
-      name: /expand row/i,
-      hidden: true,
-    });
-    expect(items.length).toBeGreaterThan(0);
+  it('renders the detail panel below the row when expanded', () => {
+    render(<Harness initialExpanded={new Set(['a'])} />);
+    const panel = screen.getByTestId('panel');
+    expect(panel).toBeInTheDocument();
+    expect(panel).toHaveTextContent('Ada: Ada bio');
   });
 
-  it('localizes the context-menu action label through the i18n catalog', () => {
+  it('renders renderExpanded content with the row item', () => {
     render(
-      <InternationalizationProvider
-        locale="fr"
-        overrides={{
-          fr: {'@astryx.tableRowExpansion.expandRow': 'Développer la ligne'},
-        }}>
-        <Harness />
-      </InternationalizationProvider>,
+      <Harness
+        initialExpanded={new Set(['b'])}
+        renderExpanded={item => <span data-testid="panel">bio={item.bio}</span>}
+      />,
     );
-    fireEvent.contextMenu(screen.getByText('Folder A'));
-    const items = screen.getAllByRole('menuitem', {
-      name: /Développer la ligne/,
-      hidden: true,
-    });
-    expect(items.length).toBeGreaterThan(0);
+    expect(screen.getByTestId('panel')).toHaveTextContent('bio=Bo bio');
   });
 
-  it('does not show chevron for leaf nodes', () => {
+  it('toggles the panel open on chevron click', () => {
     render(<Harness />);
-    // Leaf C has no children
-    expect(screen.getByText('Leaf C')).toBeInTheDocument();
-    // only 2 expand buttons (Folder A, Folder B), not 3
-    expect(
-      screen.getAllByRole('button', {name: /expand row|collapse row/i}).length,
-    ).toBe(2);
+    expect(screen.queryByTestId('panel')).not.toBeInTheDocument();
+    fireEvent.click(screen.getAllByRole('button', {name: /expand row/i})[0]);
+    expect(screen.getByTestId('panel')).toBeInTheDocument();
   });
 
-  it('renders an expand-all toggle in the header', () => {
-    render(<Harness />);
-    expect(
-      screen.getByRole('button', {name: /expand all rows/i}),
-    ).toBeInTheDocument();
+  it('relabels the chevron "Collapse row" and sets aria-expanded when open', () => {
+    render(<Harness initialExpanded={new Set(['a'])} />);
+    const collapse = screen.getByRole('button', {name: /collapse row/i});
+    expect(collapse).toHaveAttribute('aria-expanded', 'true');
   });
 
-  it('expand-all toggle expands every expandable row', () => {
+  it('marks the chevron aria-expanded=false when collapsed', () => {
     render(<Harness />);
-    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', {name: /expand all rows/i}));
-    // Both folders' children become visible.
-    expect(screen.getByText('File A1')).toBeInTheDocument();
-    expect(screen.getByText('File A2')).toBeInTheDocument();
-    expect(screen.getByText('File B1')).toBeInTheDocument();
+    expect(
+      screen.getAllByRole('button', {name: /expand row/i})[0],
+    ).toHaveAttribute('aria-expanded', 'false');
   });
 
-  it('collapse-all toggle collapses every row', () => {
-    render(<Harness initialExpanded={new Set(['a', 'b'])} />);
-    expect(screen.getByText('File A1')).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', {name: /collapse all rows/i}));
-    expect(screen.queryByText('File A1')).not.toBeInTheDocument();
-    expect(screen.queryByText('File B1')).not.toBeInTheDocument();
+  it('renders one detail panel per expanded row', () => {
+    render(<Harness initialExpanded={new Set(['a', 'c'])} />);
+    expect(screen.getAllByTestId('panel')).toHaveLength(2);
   });
-});
-
-describe('useTableRowExpansionState cycle guard', () => {
-  /** A row whose children array contains the row itself (plus a real child). */
-  function makeSelfReferential(): TreeItem[] {
-    const x: TreeItem = {id: 'x', name: 'Self', children: []};
-    const y: TreeItem = {id: 'y', name: 'Leaf Y', children: []};
-    x.children.push(x, y);
-    return [x];
-  }
-
-  /** root -> child -> grand, where grand's children point back at root. */
-  function makeDeepCycle(): TreeItem[] {
-    const root: TreeItem = {id: 'root', name: 'Root', children: []};
-    const child: TreeItem = {id: 'child', name: 'Child', children: []};
-    const grand: TreeItem = {id: 'grand', name: 'Grand', children: []};
-    root.children.push(child);
-    child.children.push(grand);
-    grand.children.push(root);
-    return [root];
-  }
 
-  function renderState(baseData: TreeItem[], expandedKeys: Set<string>) {
-    const setExpandedKeys = vi.fn();
-    const hook = renderHook(() =>
-      useTableRowExpansionState<TreeItem>({
-        baseData,
-        getChildren: item => item.children,
+  it('renders the expanded panel as a full-width cell spanning all columns', () => {
+    const multiCol: TableColumn<Row>[] = [
+      {key: 'name', header: 'Name'},
+      {key: 'bio', header: 'Bio'},
+    ];
+    function H() {
+      const [keys, setKeys] = useState(new Set(['a']));
+      const expansion = useTableRowExpansion<Row>({
+        expandedKeys: keys,
+        onToggle: () => setKeys(keys),
         getRowKey: item => item.id,
-        expandedKeys,
-        setExpandedKeys,
-      }),
+        renderExpanded: item => <div data-testid="panel">{item.bio}</div>,
+      });
+      return (
+        <Table
+          data={rows}
+          columns={multiCol}
+          idKey="id"
+          plugins={{expansion}}
+        />
+      );
+    }
+    render(<H />);
+    const panelCell = screen.getByTestId('panel').closest('td');
+    expect(panelCell).not.toBeNull();
+    // 2 user columns + 1 injected chevron column = colSpan 3
+    expect(panelCell).toHaveAttribute('colspan', '3');
+  });
+
+  it('hides the chevron for non-expandable rows and never shows their panel', () => {
+    render(<Harness isItemExpandable={item => item.id !== 'b'} />);
+    // Only a and c are expandable
+    expect(screen.getAllByRole('button', {name: /expand row/i})).toHaveLength(
+      2,
     );
-    return {hook, setExpandedKeys};
-  }
-
-  it('terminates on a self-referential expanded row and flattens each key once', () => {
-    const {hook} = renderState(makeSelfReferential(), new Set(['x']));
-    const {data, expansionConfig} = hook.result.current;
-    expect(data.map(item => item.id)).toEqual(['x', 'y']);
-    expect(expansionConfig.getDepth?.(data[0])).toBe(0);
-    expect(expansionConfig.getDepth?.(data[1])).toBe(1);
   });
 
-  it('terminates on a deeper cycle back to the root and flattens each key once', () => {
-    const {hook} = renderState(
-      makeDeepCycle(),
-      new Set(['root', 'child', 'grand']),
+  it('does not render a panel for a non-expandable row even if its key is in expandedKeys', () => {
+    render(
+      <Harness
+        initialExpanded={new Set(['b'])}
+        isItemExpandable={item => item.id !== 'b'}
+      />,
     );
-    const {data, expansionConfig} = hook.result.current;
-    expect(data.map(item => item.id)).toEqual(['root', 'child', 'grand']);
-    expect(expansionConfig.getDepth?.(data[0])).toBe(0);
-    expect(expansionConfig.getDepth?.(data[1])).toBe(1);
-    expect(expansionConfig.getDepth?.(data[2])).toBe(2);
-    // The cycle guard keeps isAllExpanded computable — true, not a crash.
-    expect(expansionConfig.isAllExpanded).toBe(true);
+    expect(screen.queryByTestId('panel')).not.toBeInTheDocument();
   });
 
-  it('terminates when collecting allExpandableKeys on cyclic data with nothing expanded', () => {
-    const {hook, setExpandedKeys} = renderState(
-      makeDeepCycle(),
-      new Set<string>(),
-    );
-    const {data, expansionConfig} = hook.result.current;
-    expect(data.map(item => item.id)).toEqual(['root']);
-    expansionConfig.onToggleExpandAll?.(true);
-    const nextKeys = setExpandedKeys.mock.calls[0][0] as Set<string>;
-    expect(Array.from(nextKeys)).toEqual(['root', 'child', 'grand']);
+  it('contributes a context-menu action on expandable rows', () => {
+    render(<Harness />);
+    fireEvent.contextMenu(screen.getByText('Ada'));
+    expect(
+      screen.getAllByRole('menuitem', {name: /expand row/i, hidden: true})
+        .length,
+    ).toBeGreaterThan(0);
   });
 
-  it('re-walks a shared child under each expanded parent (ancestor-path, not visited-set, semantics)', () => {
-    const leaf: TreeItem = {id: 'leaf', name: 'Leaf', children: []};
-    const shared: TreeItem = {id: 's', name: 'Shared', children: [leaf]};
-    const p1: TreeItem = {id: 'p1', name: 'Parent 1', children: [shared]};
-    const p2: TreeItem = {id: 'p2', name: 'Parent 2', children: [shared]};
-    const {hook} = renderState([p1, p2], new Set(['p1', 'p2', 's']));
-    // 's' is on neither parent's ancestor path, so it must flatten under
-    // both — the guard only skips true cycles, matching pre-guard behavior
-    // for acyclic (DAG-shaped) data.
-    const {data} = hook.result.current;
-    expect(data.map(item => item.id)).toEqual([
-      'p1',
-      's',
-      'leaf',
-      'p2',
-      's',
-      'leaf',
-    ]);
+  it('localizes the chevron aria-label through the i18n catalog', () => {
+    render(
+      <InternationalizationProvider
+        locale="fr"
+        overrides={{
+          fr: {'@astryx.tableRowExpansion.expandRow': 'Développer la ligne'},
+        }}>
+        <Harness />
+      </InternationalizationProvider>,
+    );
+    expect(
+      screen.getAllByRole('button', {name: 'Développer la ligne'}).length,
+    ).toBeGreaterThan(0);
   });
 });