@astryxdesign/core 0.7.5 → 0.7.6-canary.0bd3b37

package/src/Table/plugins/columnSettings/useTableColumnSettings.test.tsx

@@ -1,175 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useTableColumnSettings.test.tsx
- * @input useTableColumnSettings, useTableColumnSettingsState, Table, React testing utilities
- * @output Functional tests for the column settings plugin, selector adapter, and integration
- * @position Test file; validates plugin behavior and integration
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {useState} from 'react';
-import {render, screen} from '@testing-library/react';
-import {renderHook} from '@testing-library/react';
-import {Table} from '../../Table';
-import {
-  useTableColumnSettings,
-  type UseTableColumnSettingsConfig,
-  type ColumnSettingsOption,
-} from './useTableColumnSettings';
-import {useTableColumnSettingsState} from './useTableColumnSettingsState';
-import type {TableColumn} from '../../types';
-
-// =============================================================================
-// Test Data
-// =============================================================================
-
-interface User extends Record<string, unknown> {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  status: string;
-  lastLogin: string;
-}
-
-const testUsers: User[] = [
-  {
-    id: '1',
-    name: 'Alice',
-    email: 'alice@test.com',
-    role: 'admin',
-    status: 'active',
-    lastLogin: '2026-01-01',
-  },
-  {
-    id: '2',
-    name: 'Bob',
-    email: 'bob@test.com',
-    role: 'user',
-    status: 'inactive',
-    lastLogin: '2026-02-01',
-  },
-];
-
-const allTableColumns: TableColumn<User>[] = [
-  {key: 'name', header: 'Name'},
-  {key: 'email', header: 'Email'},
-  {key: 'role', header: 'Role'},
-  {key: 'status', header: 'Status'},
-  {key: 'lastLogin', header: 'Last Login'},
-];
-
-const columnOptions: ColumnSettingsOption[] = [
-  {key: 'name', label: 'Name', isAlwaysVisible: true},
-  {key: 'email', label: 'Email'},
-  {key: 'role', label: 'Role'},
-  {key: 'status', label: 'Status'},
-  {key: 'lastLogin', label: 'Last Login'},
-];
-
-// =============================================================================
-// Plugin Hook Tests
-// =============================================================================
-
-describe('useTableColumnSettings', () => {
-  function renderPluginHook(
-    overrides: Partial<UseTableColumnSettingsConfig> = {},
-  ) {
-    const defaultConfig: UseTableColumnSettingsConfig = {
-      columns: columnOptions,
-      activeColumnKeys: ['name', 'email', 'role'],
-      onChangeActiveColumnKeys: vi.fn(),
-      ...overrides,
-    };
-
-    return renderHook(() => useTableColumnSettings<User>(defaultConfig));
-  }
-
-  it('returns a TablePlugin with transformColumns', () => {
-    const {result} = renderPluginHook();
-    expect(result.current).toBeDefined();
-    expect(result.current.transformColumns).toBeInstanceOf(Function);
-  });
-
-  it('transformColumns filters columns by activeColumnKeys', () => {
-    const {result} = renderPluginHook({
-      activeColumnKeys: ['name', 'email'],
-    });
-
-    const filtered = result.current.transformColumns!(allTableColumns);
-    expect(filtered.map(c => c.key)).toEqual(['name', 'email']);
-  });
-
-  it('transformColumns reorders columns by activeColumnKeys order', () => {
-    const {result} = renderPluginHook({
-      activeColumnKeys: ['role', 'name'],
-    });
-
-    const filtered = result.current.transformColumns!(allTableColumns);
-    expect(filtered.map(c => c.key)).toEqual(['role', 'name']);
-  });
-
-  it('plugin reference is stable across renders', () => {
-    const {result, rerender} = renderPluginHook();
-    const firstPlugin = result.current;
-    rerender();
-    expect(result.current).toBe(firstPlugin);
-  });
-});
-
-// =============================================================================
-// Integration: state hook + plugin hook + Table
-// =============================================================================
-
-describe('integration with Table', () => {
-  function ColumnSettingsTable({
-    initialActiveKeys,
-  }: {
-    initialActiveKeys: string[];
-  }) {
-    const [activeKeys, setActiveKeys] = useState(initialActiveKeys);
-
-    const state = useTableColumnSettingsState({
-      columns: columnOptions,
-      activeColumnKeys: activeKeys,
-      onChangeActiveColumnKeys: (keys: ReadonlyArray<string>) =>
-        setActiveKeys([...keys]),
-    });
-
-    const plugin = useTableColumnSettings<User>(state.columnSettingsConfig);
-
-    return (
-      <Table
-        data={testUsers}
-        columns={allTableColumns}
-        plugins={{columnSettings: plugin}}
-        idKey="id"
-      />
-    );
-  }
-
-  it('table renders only active columns', () => {
-    render(
-      <ColumnSettingsTable initialActiveKeys={['name', 'email', 'role']} />,
-    );
-
-    expect(screen.getByText('Name')).toBeInTheDocument();
-    expect(screen.getByText('Email')).toBeInTheDocument();
-    expect(screen.getByText('Role')).toBeInTheDocument();
-
-    expect(screen.queryByText('Status')).not.toBeInTheDocument();
-    expect(screen.queryByText('Last Login')).not.toBeInTheDocument();
-  });
-
-  it('column order matches activeColumnKeys order', () => {
-    render(
-      <ColumnSettingsTable initialActiveKeys={['role', 'name', 'email']} />,
-    );
-
-    const headers = screen.getAllByRole('columnheader');
-    expect(headers[0]).toHaveTextContent('Role');
-    expect(headers[1]).toHaveTextContent('Name');
-    expect(headers[2]).toHaveTextContent('Email');
-  });
-});

package/src/Table/plugins/columnSettings/useTableColumnSettingsState.test.tsx

@@ -1,296 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useTableColumnSettingsState.test.tsx
- * @input useTableColumnSettingsState, React testing utilities
- * @output Functional tests for the column settings state hook
- * @position Test file; validates state operations independent of the plugin
- */
-
-import {describe, it, expect, vi} from 'vitest';
-import {renderHook, act} from '@testing-library/react';
-import {
-  useTableColumnSettingsState,
-  type UseTableColumnSettingsStateConfig,
-} from './useTableColumnSettingsState';
-import type {ColumnSettingsOption} from './useTableColumnSettings';
-
-// =============================================================================
-// Test Data
-// =============================================================================
-
-const columnOptions: ColumnSettingsOption[] = [
-  {key: 'name', label: 'Name', isAlwaysVisible: true},
-  {key: 'email', label: 'Email'},
-  {key: 'role', label: 'Role'},
-  {key: 'status', label: 'Status'},
-  {key: 'lastLogin', label: 'Last Login'},
-];
-
-// =============================================================================
-// Helpers
-// =============================================================================
-
-function renderStateHook(
-  overrides: Partial<UseTableColumnSettingsStateConfig> = {},
-) {
-  const defaultConfig: UseTableColumnSettingsStateConfig = {
-    columns: columnOptions,
-    activeColumnKeys: ['name', 'email', 'role'],
-    onChangeActiveColumnKeys: vi.fn(),
-    ...overrides,
-  };
-
-  return renderHook(() => useTableColumnSettingsState(defaultConfig));
-}
-
-// =============================================================================
-// Tests
-// =============================================================================
-
-describe('useTableColumnSettingsState', () => {
-  // ===========================================================================
-  // Return value shape
-  // ===========================================================================
-
-  describe('return value', () => {
-    it('returns columnSettingsConfig that matches input config', () => {
-      const config: UseTableColumnSettingsStateConfig = {
-        columns: columnOptions,
-        activeColumnKeys: ['name', 'email'],
-        onChangeActiveColumnKeys: vi.fn(),
-      };
-      const {result} = renderHook(() => useTableColumnSettingsState(config));
-      expect(result.current.columnSettingsConfig).toBe(config);
-    });
-
-    it('returns activeColumnKeys passthrough', () => {
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email'],
-      });
-      expect(result.current.activeColumnKeys).toEqual(['name', 'email']);
-    });
-
-    it('returns all operation functions', () => {
-      const {result} = renderStateHook();
-      expect(result.current.toggleColumn).toBeInstanceOf(Function);
-      expect(result.current.isColumnActive).toBeInstanceOf(Function);
-      expect(result.current.isColumnToggleable).toBeInstanceOf(Function);
-      expect(result.current.showAllColumns).toBeInstanceOf(Function);
-      expect(result.current.resetToDefault).toBeInstanceOf(Function);
-      expect(result.current.setActiveColumnKeys).toBeInstanceOf(Function);
-    });
-  });
-
-  // ===========================================================================
-  // toggleColumn
-  // ===========================================================================
-
-  describe('toggleColumn', () => {
-    it('removes active column', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email', 'role'],
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() => result.current.toggleColumn('email'));
-      expect(onChange).toHaveBeenCalledWith(['name', 'role']);
-    });
-
-    it('adds inactive column at end', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email'],
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() => result.current.toggleColumn('status'));
-      expect(onChange).toHaveBeenCalledWith(['name', 'email', 'status']);
-    });
-
-    it('no-op for isAlwaysVisible columns', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email'],
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() => result.current.toggleColumn('name'));
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
-
-  // ===========================================================================
-  // isColumnActive
-  // ===========================================================================
-
-  describe('isColumnActive', () => {
-    it('returns true for active columns', () => {
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email'],
-      });
-      expect(result.current.isColumnActive('name')).toBe(true);
-      expect(result.current.isColumnActive('email')).toBe(true);
-    });
-
-    it('returns false for inactive columns', () => {
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email'],
-      });
-      expect(result.current.isColumnActive('role')).toBe(false);
-      expect(result.current.isColumnActive('status')).toBe(false);
-    });
-  });
-
-  // ===========================================================================
-  // isColumnToggleable
-  // ===========================================================================
-
-  describe('isColumnToggleable', () => {
-    it('returns true for normal columns', () => {
-      const {result} = renderStateHook();
-      expect(result.current.isColumnToggleable('email')).toBe(true);
-      expect(result.current.isColumnToggleable('role')).toBe(true);
-    });
-
-    it('returns false for always-visible columns', () => {
-      const {result} = renderStateHook();
-      expect(result.current.isColumnToggleable('name')).toBe(false);
-    });
-  });
-
-  // ===========================================================================
-  // showAllColumns
-  // ===========================================================================
-
-  describe('showAllColumns', () => {
-    it('sets all column keys as active in columns config order', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name'],
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() => result.current.showAllColumns());
-      expect(onChange).toHaveBeenCalledWith([
-        'name',
-        'email',
-        'role',
-        'status',
-        'lastLogin',
-      ]);
-    });
-  });
-
-  // ===========================================================================
-  // resetToDefault
-  // ===========================================================================
-
-  describe('resetToDefault', () => {
-    it('resets to defaultColumnKeys when provided', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name', 'email', 'role', 'status', 'lastLogin'],
-        onChangeActiveColumnKeys: onChange,
-        defaultColumnKeys: ['name', 'email'],
-      });
-
-      act(() => result.current.resetToDefault());
-      expect(onChange).toHaveBeenCalledWith(['name', 'email']);
-    });
-
-    it('shows all columns when no defaultColumnKeys', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        activeColumnKeys: ['name'],
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() => result.current.resetToDefault());
-      expect(onChange).toHaveBeenCalledWith([
-        'name',
-        'email',
-        'role',
-        'status',
-        'lastLogin',
-      ]);
-    });
-  });
-
-  // ===========================================================================
-  // setActiveColumnKeys
-  // ===========================================================================
-
-  describe('setActiveColumnKeys', () => {
-    it('passes selected values to onChangeActiveColumnKeys', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() =>
-        result.current.setActiveColumnKeys(['name', 'email', 'status']),
-      );
-      expect(onChange).toHaveBeenCalledWith(
-        expect.arrayContaining(['name', 'email', 'status']),
-      );
-    });
-
-    it('enforces isAlwaysVisible columns remain in set', () => {
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      // Try to deselect 'name' (isAlwaysVisible) by not including it
-      act(() => result.current.setActiveColumnKeys(['email']));
-      const calledWith = onChange.mock.calls[0][0] as string[];
-      expect(calledWith).toContain('name');
-      expect(calledWith).toContain('email');
-    });
-  });
-
-  // ===========================================================================
-  // Edge Cases
-  // ===========================================================================
-
-  describe('edge cases', () => {
-    it('handles empty columns config', () => {
-      const {result} = renderStateHook({
-        columns: [],
-        activeColumnKeys: [],
-      });
-
-      expect(result.current.activeColumnKeys).toEqual([]);
-    });
-
-    it('handles single column with isAlwaysVisible', () => {
-      const {result} = renderStateHook({
-        columns: [{key: 'name', label: 'Name', isAlwaysVisible: true}],
-        activeColumnKeys: ['name'],
-      });
-
-      expect(result.current.isColumnToggleable('name')).toBe(false);
-      expect(result.current.isColumnActive('name')).toBe(true);
-    });
-
-    it('handles all columns isAlwaysVisible', () => {
-      const allVisible: ColumnSettingsOption[] = [
-        {key: 'name', label: 'Name', isAlwaysVisible: true},
-        {key: 'email', label: 'Email', isAlwaysVisible: true},
-      ];
-
-      const onChange = vi.fn();
-      const {result} = renderStateHook({
-        columns: allVisible,
-        activeColumnKeys: ['name', 'email'],
-        onChangeActiveColumnKeys: onChange,
-      });
-
-      act(() => result.current.toggleColumn('name'));
-      act(() => result.current.toggleColumn('email'));
-      expect(onChange).not.toHaveBeenCalled();
-    });
-  });
-});

package/src/Table/plugins/filtering/useTableFilterState.test.tsx

@@ -1,143 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file useTableFilterState.test.tsx
- * @input Uses vitest, @testing-library/react
- * @output Unit tests for the useTableFilterState hook
- * @position Testing; validates the filter state helper (set/overwrite,
- *   null-deletes, clearAll, callback stability)
- */
-
-import {describe, it, expect} from 'vitest';
-import {act, renderHook} from '@testing-library/react';
-import {useTableFilterState} from './useTableFilterState';
-
-// =============================================================================
-// Initial state
-// =============================================================================
-
-describe('useTableFilterState — initial state', () => {
-  it('starts with an empty filter map', () => {
-    const {result} = renderHook(() => useTableFilterState());
-
-    expect(result.current.filters).toEqual({});
-  });
-
-  it('adopts the provided initial state', () => {
-    const {result} = renderHook(() =>
-      useTableFilterState({status: 'active', tags: ['a', 'b']}),
-    );
-
-    expect(result.current.filters).toEqual({
-      status: 'active',
-      tags: ['a', 'b'],
-    });
-  });
-});
-
-// =============================================================================
-// onFilterChange
-// =============================================================================
-
-describe('useTableFilterState — onFilterChange', () => {
-  it('sets a filter value for a key', () => {
-    const {result} = renderHook(() => useTableFilterState());
-
-    act(() => {
-      result.current.onFilterChange('status', 'active');
-    });
-
-    expect(result.current.filters).toEqual({status: 'active'});
-  });
-
-  it('overwrites an existing key with the new value', () => {
-    const {result} = renderHook(() => useTableFilterState({status: 'active'}));
-
-    act(() => {
-      result.current.onFilterChange('status', 'archived');
-    });
-
-    expect(result.current.filters).toEqual({status: 'archived'});
-  });
-
-  it('keeps other keys intact when setting a new one', () => {
-    const {result} = renderHook(() => useTableFilterState({status: 'active'}));
-
-    act(() => {
-      result.current.onFilterChange('owner', 'alice');
-    });
-
-    expect(result.current.filters).toEqual({
-      status: 'active',
-      owner: 'alice',
-    });
-  });
-
-  it('deletes the key entirely when the value is null', () => {
-    const {result} = renderHook(() =>
-      useTableFilterState({status: 'active', owner: 'alice'}),
-    );
-
-    act(() => {
-      result.current.onFilterChange('status', null);
-    });
-
-    // The key must be absent — not present with a null value.
-    expect('status' in result.current.filters).toBe(false);
-    expect(result.current.filters).toEqual({owner: 'alice'});
-  });
-
-  it('deleting a key that is not set leaves the state unchanged', () => {
-    const {result} = renderHook(() => useTableFilterState({owner: 'alice'}));
-
-    act(() => {
-      result.current.onFilterChange('ghost', null);
-    });
-
-    expect(result.current.filters).toEqual({owner: 'alice'});
-  });
-});
-
-// =============================================================================
-// clearAll
-// =============================================================================
-
-describe('useTableFilterState — clearAll', () => {
-  it('resets both initial and added filters to an empty map', () => {
-    const {result} = renderHook(() => useTableFilterState({status: 'active'}));
-
-    act(() => {
-      result.current.onFilterChange('owner', 'alice');
-    });
-    expect(result.current.filters).toEqual({
-      status: 'active',
-      owner: 'alice',
-    });
-
-    act(() => {
-      result.current.clearAll();
-    });
-
-    expect(result.current.filters).toEqual({});
-  });
-});
-
-// =============================================================================
-// Callback stability
-// =============================================================================
-
-describe('useTableFilterState — callback stability', () => {
-  it('keeps onFilterChange and clearAll referentially stable across updates and rerenders', () => {
-    const {result, rerender} = renderHook(() => useTableFilterState());
-    const initialOnFilterChange = result.current.onFilterChange;
-    const initialClearAll = result.current.clearAll;
-
-    act(() => {
-      result.current.onFilterChange('status', 'active');
-    });
-    rerender();
-
-    expect(result.current.onFilterChange).toBe(initialOnFilterChange);
-    expect(result.current.clearAll).toBe(initialClearAll);
-  });
-});