@astryxdesign/core 0.1.6 → 0.1.7-canary.04cd8f7

package/src/Table/plugins/tree/useTableTreeData.test.tsx

@@ -0,0 +1,594 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useTableTreeData.test.tsx
+ * @input Uses vitest, @testing-library/react, Table components
+ * @output Unit tests for the useTableTreeData plugin
+ * @position Testing; validates tree column decoration, expander behavior,
+ *   row ARIA, and the flat-data migration no-op
+ */
+
+import {describe, it, expect, vi} from 'vitest';
+import {render, screen, within} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {useState} from 'react';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableSelection, useTableSelectionState} from '../selection';
+import {useTableSortableState} from '../sortable';
+import {useTableTreeData} from './useTableTreeData';
+import {useTableTreeState} from './useTableTreeState';
+import type {UseTableTreeStateConfig} from './useTableTreeState';
+
+// =============================================================================
+// Test Data
+// =============================================================================
+
+interface FileRow extends Record<string, unknown> {
+  id: string;
+  name: string;
+  size: number;
+  children?: FileRow[];
+}
+
+const fileTree: FileRow[] = [
+  {
+    id: 'src',
+    name: 'src',
+    size: 0,
+    children: [
+      {
+        id: 'components',
+        name: 'components',
+        size: 0,
+        children: [{id: 'button', name: 'Button.tsx', size: 120}],
+      },
+      {id: 'utils', name: 'utils.ts', size: 40},
+    ],
+  },
+  {id: 'readme', name: 'README.md', size: 10},
+];
+
+const columns: TableColumn<FileRow>[] = [
+  {key: 'name', header: 'Name'},
+  {key: 'size', header: 'Size'},
+];
+
+function TreeTable(
+  props: Partial<UseTableTreeStateConfig<FileRow>> & {data?: FileRow[]},
+) {
+  const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+    data: props.data ?? fileTree,
+    idKey: 'id',
+    ...props,
+  });
+  const tree = useTableTreeData(treeConfig);
+
+  return (
+    <Table data={visibleData} columns={columns} idKey="id" plugins={{tree}} />
+  );
+}
+
+/** All body rows (skips the header row). */
+function getBodyRows(): HTMLElement[] {
+  return screen.getAllByRole('row').slice(1);
+}
+
+function getRowByText(text: string): HTMLElement {
+  const row = getBodyRows().find(r => within(r).queryByText(text));
+  if (!row) {
+    throw new Error(`no row containing "${text}"`);
+  }
+  return row;
+}
+
+// =============================================================================
+// Expander button
+// =============================================================================
+
+describe('useTableTreeData — expander', () => {
+  it('renders an "Expand row" button on collapsed expandable rows only', () => {
+    render(<TreeTable />);
+
+    const srcRow = getRowByText('src');
+    expect(
+      within(srcRow).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+
+    const readmeRow = getRowByText('README.md');
+    expect(within(readmeRow).queryByRole('button')).toBeNull();
+  });
+
+  it('expands children on click and relabels the button "Collapse row"', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable />);
+
+    expect(screen.queryByText('components')).toBeNull();
+
+    await user.click(
+      within(getRowByText('src')).getByRole('button', {name: 'Expand row'}),
+    );
+
+    expect(screen.getByText('components')).toBeInTheDocument();
+    expect(screen.getByText('utils.ts')).toBeInTheDocument();
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Collapse row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('collapses an expanded row on click, unmounting the subtree', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable defaultExpandedIds={['src', 'components']} />);
+
+    expect(screen.getByText('Button.tsx')).toBeInTheDocument();
+
+    await user.click(
+      within(getRowByText('src')).getByRole('button', {name: 'Collapse row'}),
+    );
+
+    expect(screen.queryByText('components')).toBeNull();
+    expect(screen.queryByText('Button.tsx')).toBeNull();
+    // Unmounted, not hidden: only roots + header remain.
+    expect(screen.getAllByRole('row')).toHaveLength(3);
+  });
+
+  it('sets aria-expanded on the expander button', async () => {
+    const user = userEvent.setup();
+    render(<TreeTable />);
+
+    const button = within(getRowByText('src')).getByRole('button', {
+      name: 'Expand row',
+    });
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    await user.click(button);
+
+    expect(
+      within(getRowByText('src')).getByRole('button', {name: 'Collapse row'}),
+    ).toHaveAttribute('aria-expanded', 'true');
+  });
+});
+
+// =============================================================================
+// Row ARIA
+// =============================================================================
+
+describe('useTableTreeData — row ARIA', () => {
+  it('sets 1-based aria-level on every body row', () => {
+    render(<TreeTable defaultExpandedIds={['src', 'components']} />);
+
+    expect(getRowByText('src')).toHaveAttribute('aria-level', '1');
+    expect(getRowByText('components')).toHaveAttribute('aria-level', '2');
+    expect(getRowByText('Button.tsx')).toHaveAttribute('aria-level', '3');
+    expect(getRowByText('README.md')).toHaveAttribute('aria-level', '1');
+  });
+
+  it('sets aria-expanded on expandable rows and omits it on leaves', () => {
+    render(<TreeTable defaultExpandedIds={['src']} />);
+
+    expect(getRowByText('src')).toHaveAttribute('aria-expanded', 'true');
+    expect(getRowByText('components')).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+    expect(getRowByText('utils.ts')).not.toHaveAttribute('aria-expanded');
+    expect(getRowByText('README.md')).not.toHaveAttribute('aria-expanded');
+  });
+});
+
+// =============================================================================
+// Migration no-op (flat data)
+// =============================================================================
+
+describe('useTableTreeData — flat data is a no-op', () => {
+  const flat: FileRow[] = [
+    {id: 'a', name: 'alpha', size: 1},
+    {id: 'b', name: 'beta', size: 2},
+  ];
+
+  it('renders no expanders, spacers, or tree ARIA for flat data', () => {
+    render(<TreeTable data={flat} />);
+
+    expect(screen.queryByRole('button')).toBeNull();
+    for (const row of getBodyRows()) {
+      expect(row).not.toHaveAttribute('aria-level');
+      expect(row).not.toHaveAttribute('aria-expanded');
+    }
+  });
+
+  it('renders first-column cell content identically to a plugin-free Table', () => {
+    const {container: withPlugin} = render(<TreeTable data={flat} />);
+    const pluginCell = withPlugin.querySelector('tbody td');
+
+    const {container: without} = render(
+      <Table data={flat} columns={columns} idKey="id" />,
+    );
+    const plainCell = without.querySelector('tbody td');
+
+    expect(pluginCell).toBeTruthy();
+    expect(plainCell).toBeTruthy();
+    expect(pluginCell?.innerHTML).toBe(plainCell?.innerHTML);
+  });
+});
+
+// =============================================================================
+// Stability across data-shape changes
+// =============================================================================
+
+describe('useTableTreeData — stability when the data shape changes', () => {
+  const flat: FileRow[] = [
+    {id: 'a', name: 'alpha', size: 1},
+    {id: 'b', name: 'beta', size: 2},
+  ];
+
+  it('does not remount the table when flat data becomes nested', () => {
+    const {container, rerender} = render(<TreeTable data={flat} />);
+    const tableBefore = container.querySelector('table');
+
+    rerender(<TreeTable data={fileTree} />);
+
+    expect(container.querySelector('table')).toBe(tableBefore);
+    // The tree affordance appears without a remount.
+    expect(
+      screen.getAllByRole('button', {name: 'Expand row'}).length,
+    ).toBeGreaterThan(0);
+  });
+
+  it('does not warn about an empty plugin for flat data', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    try {
+      render(<TreeTable data={flat} />);
+      const pluginWarnings = warn.mock.calls.filter(args =>
+        String(args[0]).includes('no transform methods'),
+      );
+      expect(pluginWarnings).toHaveLength(0);
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it('removes tree ARIA from rows when nested data becomes flat', () => {
+    const {rerender} = render(
+      <TreeTable data={fileTree} defaultExpandedIds={['src']} />,
+    );
+    expect(getRowByText('src')).toHaveAttribute('aria-level', '1');
+
+    rerender(<TreeTable data={flat} />);
+
+    for (const row of getBodyRows()) {
+      expect(row).not.toHaveAttribute('aria-level');
+      expect(row).not.toHaveAttribute('aria-expanded');
+    }
+  });
+});
+
+// =============================================================================
+// Toggle batching
+// =============================================================================
+
+describe('useTableTreeState — batched toggles', () => {
+  it('applies two different toggles landing in the same React batch', async () => {
+    const user = userEvent.setup();
+
+    function TwoTogglesTable() {
+      const {visibleData, treeConfig, expandAll} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+      });
+      const tree = useTableTreeData(treeConfig);
+      return (
+        <>
+          <button
+            type="button"
+            onClick={() => {
+              // Two commits in one event handler — one React batch.
+              treeConfig.onToggleItem(fileTree[0]); // expand 'src'
+              treeConfig.onToggleItem(fileTree[0].children![0]); // expand 'components'
+            }}>
+            expand two
+          </button>
+          <Table
+            data={visibleData}
+            columns={columns}
+            idKey="id"
+            plugins={{tree}}
+          />
+          <button type="button" onClick={expandAll}>
+            noop
+          </button>
+        </>
+      );
+    }
+
+    render(<TwoTogglesTable />);
+
+    await user.click(screen.getByRole('button', {name: 'expand two'}));
+
+    // Both toggles must survive the batch.
+    expect(screen.getByText('components')).toBeInTheDocument();
+    expect(screen.getByText('Button.tsx')).toBeInTheDocument();
+  });
+});
+
+// =============================================================================
+// Indentation
+// =============================================================================
+
+describe('useTableTreeData — indentation', () => {
+  it('indents nested rows by calc(level * step) and leaves roots unindented', () => {
+    render(<TreeTable defaultExpandedIds={['src', 'components']} />);
+
+    const cellWrapper = (text: string) =>
+      within(getRowByText(text)).getByText(text).closest('td')
+        ?.firstElementChild as HTMLElement;
+
+    expect(cellWrapper('src').getAttribute('style') ?? '').not.toContain(
+      'calc',
+    );
+    expect(cellWrapper('components').getAttribute('style')).toContain(
+      'calc(1 *',
+    );
+    expect(cellWrapper('Button.tsx').getAttribute('style')).toContain(
+      'calc(2 *',
+    );
+  });
+
+  it('respects the indent token size', () => {
+    render(<TreeTable defaultExpandedIds={['src']} indent="lg" />);
+
+    const wrapper = within(getRowByText('utils.ts'))
+      .getByText('utils.ts')
+      .closest('td')?.firstElementChild as HTMLElement;
+    // lg maps to the --spacing-6 token
+    expect(wrapper.getAttribute('style')).toContain('--spacing-6');
+  });
+
+  it('never indents with a physical inline padding (logical property lives in the StyleX class)', () => {
+    // The indent is a StyleX dynamic style: the inline style carries only
+    // the CSS variable with the calc value; the paddingInlineStart property
+    // itself is compiled into the class. Guard against a regression to
+    // physical inline padding, which would not mirror in RTL.
+    render(<TreeTable defaultExpandedIds={['src']} />);
+
+    const wrapper = within(getRowByText('utils.ts'))
+      .getByText('utils.ts')
+      .closest('td')?.firstElementChild as HTMLElement;
+    const style = wrapper.getAttribute('style') ?? '';
+    expect(style).toContain('calc(1 *');
+    expect(style).not.toContain('padding-left');
+    expect(style).not.toContain('margin-left');
+  });
+
+  it('supports deep nesting with no depth cap', () => {
+    // a > b > c > d > e (levels 0..4)
+    let node: FileRow = {id: 'e', name: 'leaf-e', size: 0};
+    for (const id of ['d', 'c', 'b', 'a']) {
+      node = {id, name: `node-${id}`, size: 0, children: [node]};
+    }
+    render(
+      <TreeTable data={[node]} defaultExpandedIds={['a', 'b', 'c', 'd']} />,
+    );
+
+    const leafRow = getRowByText('leaf-e');
+    expect(leafRow).toHaveAttribute('aria-level', '5');
+    const wrapper = within(leafRow).getByText('leaf-e').closest('td')
+      ?.firstElementChild as HTMLElement;
+    expect(wrapper.getAttribute('style')).toContain('calc(4 *');
+  });
+});
+
+// =============================================================================
+// treeColumnKey
+// =============================================================================
+
+describe('useTableTreeData — treeColumnKey', () => {
+  it('moves the expander into the configured column', () => {
+    render(<TreeTable treeColumnKey="size" />);
+
+    const srcRow = getRowByText('src');
+    const cells = within(srcRow).getAllByRole('cell');
+    // name column carries no expander; size column does
+    expect(within(cells[0]).queryByRole('button')).toBeNull();
+    expect(
+      within(cells[1]).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+
+  it('falls back to the first column when the configured column is absent', () => {
+    // e.g. columnSettings hid the configured tree column — the expander
+    // must not vanish while rows still announce aria-expanded.
+    render(<TreeTable treeColumnKey="not-a-column" />);
+
+    const srcRow = getRowByText('src');
+    const cells = within(srcRow).getAllByRole('cell');
+    expect(
+      within(cells[0]).getByRole('button', {name: 'Expand row'}),
+    ).toBeInTheDocument();
+  });
+});
+
+// =============================================================================
+// Lazy loading
+// =============================================================================
+
+describe('useTableTreeData — lazy loading', () => {
+  it('shows an expander before children exist and reveals them once loaded', async () => {
+    const user = userEvent.setup();
+
+    function LazyTable() {
+      const [data, setData] = useState<FileRow[]>([
+        {id: 'folder', name: 'folder', size: 0},
+      ]);
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data,
+        idKey: 'id',
+        isItemExpandable: item => item.id === 'folder',
+        onExpandedIdsChange: ids => {
+          if (ids.has('folder')) {
+            // Simulated fetch: children arrive after expansion.
+            setData([
+              {
+                id: 'folder',
+                name: 'folder',
+                size: 0,
+                children: [{id: 'lazy-child', name: 'lazy-child', size: 3}],
+              },
+            ]);
+          }
+        },
+      });
+      const tree = useTableTreeData(treeConfig);
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree}}
+        />
+      );
+    }
+
+    render(<LazyTable />);
+
+    await user.click(screen.getByRole('button', {name: 'Expand row'}));
+
+    expect(screen.getByText('lazy-child')).toBeInTheDocument();
+  });
+});
+
+// =============================================================================
+// Degenerate configurations
+// =============================================================================
+
+describe('useTableTreeData — degenerate configurations', () => {
+  it('renders without crashing when the table has zero columns', () => {
+    function ZeroColumnsTable() {
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+      });
+      const tree = useTableTreeData(treeConfig);
+      return (
+        <Table data={visibleData} columns={[]} idKey="id" plugins={{tree}} />
+      );
+    }
+
+    expect(() => render(<ZeroColumnsTable />)).not.toThrow();
+  });
+
+  it('updates aria-level in place when a row is reparented deeper', () => {
+    const flat: FileRow[] = [
+      {
+        id: 'a',
+        name: 'alpha',
+        size: 0,
+        children: [{id: 'k', name: 'kid', size: 1}],
+      },
+      {id: 'm', name: 'mover', size: 2},
+    ];
+    const nested: FileRow[] = [
+      {
+        id: 'a',
+        name: 'alpha',
+        size: 0,
+        children: [
+          {id: 'k', name: 'kid', size: 1},
+          {id: 'm', name: 'mover', size: 2},
+        ],
+      },
+    ];
+
+    const {rerender} = render(
+      <TreeTable data={flat} defaultExpandedIds={['a']} />,
+    );
+    expect(getRowByText('mover')).toHaveAttribute('aria-level', '1');
+
+    rerender(<TreeTable data={nested} defaultExpandedIds={['a']} />);
+
+    expect(getRowByText('mover')).toHaveAttribute('aria-level', '2');
+  });
+});
+
+// =============================================================================
+// Composition with selection
+// =============================================================================
+
+describe('useTableTreeData — composition with selection', () => {
+  it('prepends the selection checkbox column before the tree column', () => {
+    function ComposedTable() {
+      const [selectedKeys, setSelectedKeys] = useState<Set<string>>(
+        () => new Set(),
+      );
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+        defaultExpandedIds: ['src'],
+      });
+      const {selectionConfig} = useTableSelectionState({
+        data: visibleData,
+        idKey: 'id',
+        selectedKeys,
+        setSelectedKeys,
+      });
+      const tree = useTableTreeData(treeConfig);
+      const selection = useTableSelection(selectionConfig);
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree, selection}}
+        />
+      );
+    }
+
+    render(<ComposedTable />);
+
+    const srcRow = getRowByText('src');
+    const cells = within(srcRow).getAllByRole('cell');
+    // Checkbox column first, then the tree (name) column with the expander.
+    expect(within(cells[0]).getByRole('checkbox')).toBeInTheDocument();
+    expect(
+      within(cells[1]).getByRole('button', {name: 'Collapse row'}),
+    ).toBeInTheDocument();
+  });
+});
+
+// =============================================================================
+// Composition with sorting
+// =============================================================================
+
+describe('useTableTreeData — composition with sorting', () => {
+  it('sorts sibling groups via applySort without interleaving levels', () => {
+    function SortedTree() {
+      const {applySort} = useTableSortableState<FileRow>({
+        data: fileTree,
+        defaultSort: [{sortKey: 'name', direction: 'descending'}],
+      });
+      const {visibleData, treeConfig} = useTableTreeState<FileRow>({
+        data: fileTree,
+        idKey: 'id',
+        defaultExpandedIds: ['src'],
+        sortSiblings: applySort,
+      });
+      const tree = useTableTreeData(treeConfig);
+      return (
+        <Table
+          data={visibleData}
+          columns={columns}
+          idKey="id"
+          plugins={{tree}}
+        />
+      );
+    }
+
+    render(<SortedTree />);
+
+    const names = getBodyRows().map(
+      row => within(row).getAllByRole('cell')[0].textContent,
+    );
+    // Roots desc: src > README.md; src's children desc: utils.ts > components.
+    // Children stay directly under their parent.
+    expect(names).toEqual(['src', 'utils.ts', 'components', 'README.md']);
+  });
+});