@akinon/ai-modal-table 1.0.0

package/dist/esm/ai-table/__tests__/index.test.tsx

@@ -0,0 +1,572 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import type { AiTableProps } from '../../types';
+import { AiTable } from '../index';
+
+// Mock sub-components
+vi.mock('../components/content', () => ({
+  TableContent: ({
+    data,
+    selectedRows,
+    onToggleSelection,
+    rowKey
+  }: {
+    data: Record<string, unknown>[];
+    selectedRows: (number | string)[];
+    onToggleSelection: (id: number | string) => void;
+    rowKey?: string;
+  }) => (
+    <div data-testid="table-content">
+      {data.map((row: Record<string, unknown>) => {
+        const customId = rowKey
+          ? (row[rowKey] as number | string)
+          : (row.id as number | string);
+        return (
+          <div
+            key={customId}
+            data-testid={`row-${customId}`}
+            onClick={() => onToggleSelection(customId)}
+          >
+            {JSON.stringify(row)}
+          </div>
+        );
+      })}
+      <div data-testid="selected-count">{selectedRows.length}</div>
+    </div>
+  )
+}));
+
+vi.mock('../components/filters', () => ({
+  TableFilters: ({
+    filters,
+    onFilterChange
+  }: {
+    filters: Array<{ key: string }>;
+    onFilterChange: (key: string, value: string) => void;
+  }) => (
+    <div data-testid="table-filters">
+      {filters.map(filter => (
+        <input
+          key={filter.key}
+          data-testid={`filter-${filter.key}`}
+          onChange={e => onFilterChange(filter.key, e.target.value)}
+          placeholder={filter.key}
+        />
+      ))}
+    </div>
+  )
+}));
+
+vi.mock('../components/footer', () => ({
+  TableFooter: ({
+    selectedCount,
+    isSubmitting,
+    onSubmitAll,
+    onSubmitSelected
+  }: {
+    selectedCount: number;
+    isSubmitting: boolean;
+    onSubmitAll: () => void;
+    onSubmitSelected: () => void;
+  }) => (
+    <div data-testid="table-footer">
+      <div data-testid="selected-count">{selectedCount}</div>
+      <button
+        data-testid="submit-all"
+        onClick={onSubmitAll}
+        disabled={isSubmitting}
+      >
+        Submit All
+      </button>
+      <button
+        data-testid="submit-selected"
+        onClick={onSubmitSelected}
+        disabled={isSubmitting || selectedCount === 0}
+      >
+        Submit Selected
+      </button>
+    </div>
+  )
+}));
+
+vi.mock('../components/pagination', () => ({
+  TablePagination: ({
+    currentPage,
+    pageSize,
+    total,
+    onPageChange,
+    onPageSizeChange
+  }: {
+    currentPage: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (size: number) => void;
+  }) => (
+    <div data-testid="table-pagination">
+      <div data-testid="current-page">{currentPage}</div>
+      <div data-testid="page-size">{pageSize}</div>
+      <div data-testid="total">{total}</div>
+      <button
+        data-testid="prev-page"
+        onClick={() => onPageChange(currentPage - 1)}
+      >
+        Prev
+      </button>
+      <button
+        data-testid="next-page"
+        onClick={() => onPageChange(currentPage + 1)}
+      >
+        Next
+      </button>
+      <select
+        data-testid="page-size-select"
+        onChange={e => onPageSizeChange(Number(e.target.value))}
+        value={pageSize}
+      >
+        <option value="10">10</option>
+        <option value="20">20</option>
+      </select>
+    </div>
+  )
+}));
+
+vi.mock('@akinon/ui-ai-spinner', () => ({
+  AiSpinner: () => <div data-testid="ai-spinner">Loading...</div>
+}));
+
+vi.mock('@akinon/ui-button', () => ({
+  Button: ({
+    children,
+    onClick,
+    ...props
+  }: {
+    children: ReactNode;
+    onClick?: () => void;
+  }) => (
+    <button onClick={onClick} {...props}>
+      {children}
+    </button>
+  )
+}));
+
+vi.mock('@akinon/ui-layout', () => ({
+  Flex: ({ children, ...props }: { children: ReactNode }) => (
+    <div {...props}>{children}</div>
+  )
+}));
+
+describe('AiTable', () => {
+  const mockData = [
+    { pk: 1, id: 1, name: 'Ali', category: 'Electronics' },
+    { pk: 2, id: 2, name: 'Ayşe', category: 'Clothing' },
+    { pk: 3, id: 3, name: 'Mehmet', category: 'Electronics' }
+  ];
+
+  const mockColumns = [
+    { title: 'ID', dataIndex: 'id' },
+    { title: 'Name', dataIndex: 'name' },
+    { title: 'Category', dataIndex: 'category' }
+  ];
+
+  const defaultProps: AiTableProps = {
+    data: mockData,
+    columns: mockColumns,
+    selectedRows: [],
+    onChangeSelectedRows: vi.fn(),
+    onEdit: vi.fn(),
+    onSubmitAllData: vi.fn(),
+    onSubmitSelectedData: vi.fn(),
+    isLoading: false,
+    isSubmitting: false,
+    submitAllLabel: 'Submit All',
+    submitSelectedLabel: 'Submit Selected',
+    filters: []
+  };
+
+  describe('Rendering', () => {
+    it('should render loading spinner when isLoading is true', () => {
+      render(<AiTable {...defaultProps} isLoading={true} />);
+
+      expect(screen.getByTestId('ai-spinner')).toBeInTheDocument();
+    });
+
+    it('should render all components when data is loaded', () => {
+      render(<AiTable {...defaultProps} />);
+
+      expect(screen.getByTestId('table-filters')).toBeInTheDocument();
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+      expect(screen.getByTestId('table-footer')).toBeInTheDocument();
+      expect(screen.getByTestId('table-pagination')).toBeInTheDocument();
+    });
+
+    it('should render custom class name when provided', () => {
+      const { container } = render(
+        <AiTable {...defaultProps} tableClassName="custom-class" />
+      );
+
+      expect(container.querySelector('.custom-class')).toBeInTheDocument();
+    });
+
+    it('should render expand/collapse buttons when mapperConfig is provided', () => {
+      const mapperConfig = {
+        dataIndex: 'attributes',
+        onAddItem: vi.fn(),
+        onRemoveItem: vi.fn(),
+        onItemChange: vi.fn()
+      };
+
+      render(<AiTable {...defaultProps} mapperConfig={mapperConfig} />);
+
+      expect(screen.getByText('Expand All')).toBeInTheDocument();
+      expect(screen.getByText('Collapse All')).toBeInTheDocument();
+    });
+
+    it('should not render expand/collapse buttons when mapperConfig is not provided', () => {
+      render(<AiTable {...defaultProps} mapperConfig={undefined} />);
+
+      expect(screen.queryByText('Expand All')).not.toBeInTheDocument();
+      expect(screen.queryByText('Collapse All')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Data Display', () => {
+    it('should display all data on initial render', () => {
+      render(<AiTable {...defaultProps} />);
+
+      expect(screen.getByTestId('row-1')).toBeInTheDocument();
+      expect(screen.getByTestId('row-2')).toBeInTheDocument();
+      expect(screen.getByTestId('row-3')).toBeInTheDocument();
+    });
+
+    it('should display empty table when data is empty', () => {
+      render(<AiTable {...defaultProps} data={[]} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+      expect(screen.queryByTestId('row-1')).not.toBeInTheDocument();
+    });
+
+    it('should use custom rowKey when provided', () => {
+      const customKeyData: Record<string, unknown>[] = [
+        { userId: 'user-1', name: 'Ali' },
+        { userId: 'user-2', name: 'Ayşe' }
+      ];
+
+      render(
+        <AiTable {...defaultProps} data={customKeyData} rowKey="userId" />
+      );
+
+      expect(screen.getByTestId('row-user-1')).toBeInTheDocument();
+      expect(screen.getByTestId('row-user-2')).toBeInTheDocument();
+    });
+  });
+
+  describe('Filtering', () => {
+    it('should call onFilterChange when filter input changes', async () => {
+      const user = userEvent.setup();
+      const mockFilters = [{ key: 'name', type: 'text' }];
+
+      render(<AiTable {...defaultProps} filters={mockFilters} />);
+
+      const filterInput = screen.getByTestId('filter-name');
+      await user.type(filterInput, 'Ali');
+
+      expect(screen.getByTestId('row-1')).toBeInTheDocument();
+    });
+
+    it('should reset to first page when filter changes', async () => {
+      const user = userEvent.setup();
+      const mockFilters = [{ key: 'category', type: 'text' }];
+
+      render(<AiTable {...defaultProps} filters={mockFilters} />);
+
+      // First change page
+      const nextPageBtn = screen.getByTestId('next-page');
+      await user.click(nextPageBtn);
+      let currentPage = screen.getAllByTestId('current-page')[0];
+      expect(currentPage).toHaveTextContent('2');
+
+      // Then apply filter
+      const filterInput = screen.getByTestId('filter-category');
+      await user.type(filterInput, 'Electronics');
+
+      // Should reset to page 1
+      currentPage = screen.getAllByTestId('current-page')[0];
+      expect(currentPage).toHaveTextContent('1');
+    });
+
+    it('should handle multiple filters simultaneously', async () => {
+      const user = userEvent.setup();
+      const mockFilters = [
+        { key: 'name', type: 'text' },
+        { key: 'category', type: 'text' }
+      ];
+
+      render(<AiTable {...defaultProps} filters={mockFilters} />);
+
+      const nameFilter = screen.getByTestId('filter-name');
+      const categoryFilter = screen.getByTestId('filter-category');
+
+      await user.type(nameFilter, 'Ali');
+      await user.type(categoryFilter, 'Electronics');
+
+      expect(screen.getByTestId('row-1')).toBeInTheDocument();
+    });
+  });
+
+  describe('Pagination', () => {
+    const largeData = Array.from({ length: 25 }, (_, i) => ({
+      id: i + 1,
+      name: `Item ${i + 1}`,
+      category: 'Test'
+    }));
+
+    it('should display total count correctly', () => {
+      render(<AiTable {...defaultProps} data={largeData} />);
+
+      expect(screen.getByTestId('total')).toHaveTextContent('25');
+    });
+
+    it('should change page when next page button is clicked', async () => {
+      const user = userEvent.setup();
+
+      render(<AiTable {...defaultProps} data={largeData} />);
+
+      const nextPageBtn = screen.getByTestId('next-page');
+      await user.click(nextPageBtn);
+
+      expect(screen.getAllByTestId('current-page')[0]).toHaveTextContent('2');
+    });
+
+    it('should change page size when page size select changes', async () => {
+      const user = userEvent.setup();
+
+      render(<AiTable {...defaultProps} data={largeData} />);
+
+      const pageSizeSelect = screen.getByTestId('page-size-select');
+      await user.selectOptions(pageSizeSelect, '20');
+
+      expect(screen.getByTestId('page-size')).toHaveTextContent('20');
+    });
+
+    it('should handle edge case when on last page', () => {
+      render(<AiTable {...defaultProps} data={largeData} />);
+
+      expect(screen.getByTestId('total')).toHaveTextContent('25');
+      expect(screen.getByTestId('current-page')).toHaveTextContent('1');
+    });
+  });
+
+  describe('Row Selection', () => {
+    it('should call onChangeSelectedRows when row selection changes', async () => {
+      const user = userEvent.setup();
+      const onChangeSelectedRows = vi.fn();
+
+      render(
+        <AiTable
+          {...defaultProps}
+          onChangeSelectedRows={onChangeSelectedRows}
+        />
+      );
+
+      const row1 = screen.getByTestId('row-1');
+      await user.click(row1);
+
+      expect(onChangeSelectedRows).toHaveBeenCalled();
+    });
+
+    it('should maintain selected rows state', () => {
+      const selectedRows = [1];
+
+      render(<AiTable {...defaultProps} selectedRows={selectedRows} />);
+
+      const footerElement = screen.getByTestId('table-footer');
+      const selectedCountElement =
+        within(footerElement).getByTestId('selected-count');
+      expect(selectedCountElement).toHaveTextContent('1');
+    });
+
+    it('should display correct selected count in footer', () => {
+      const selectedRows = [1, 2];
+
+      render(<AiTable {...defaultProps} selectedRows={selectedRows} />);
+
+      const footerSelectedCount = screen
+        .getAllByTestId('selected-count')
+        .find(
+          el => el.parentElement?.getAttribute('data-testid') === 'table-footer'
+        );
+
+      expect(footerSelectedCount).toHaveTextContent('2');
+    });
+
+    it('should disable submit selected button when no rows are selected', () => {
+      render(<AiTable {...defaultProps} selectedRows={[]} />);
+
+      const submitSelectedBtn = screen.getByTestId('submit-selected');
+      expect(submitSelectedBtn).toBeDisabled();
+    });
+
+    it('should enable submit selected button when rows are selected', () => {
+      render(<AiTable {...defaultProps} selectedRows={[1, 2]} />);
+
+      const submitSelectedBtn = screen.getByTestId('submit-selected');
+      expect(submitSelectedBtn).toBeEnabled();
+    });
+  });
+
+  describe('Form Submission', () => {
+    it('should call onSubmitAllData when submit all is clicked', async () => {
+      const user = userEvent.setup();
+      const onSubmitAllData = vi.fn();
+
+      render(<AiTable {...defaultProps} onSubmitAllData={onSubmitAllData} />);
+
+      const submitAllBtn = screen.getByTestId('submit-all');
+      await user.click(submitAllBtn);
+
+      expect(onSubmitAllData).toHaveBeenCalled();
+    });
+
+    it('should call onSubmitSelectedData when submit selected is clicked', async () => {
+      const user = userEvent.setup();
+      const onSubmitSelectedData = vi.fn();
+
+      render(
+        <AiTable
+          {...defaultProps}
+          selectedRows={[1, 2]}
+          onSubmitSelectedData={onSubmitSelectedData}
+        />
+      );
+
+      const submitSelectedBtn = screen.getByTestId('submit-selected');
+      await user.click(submitSelectedBtn);
+
+      expect(onSubmitSelectedData).toHaveBeenCalled();
+    });
+
+    it('should disable submit buttons when isSubmitting is true', () => {
+      render(<AiTable {...defaultProps} isSubmitting={true} />);
+
+      expect(screen.getByTestId('submit-all')).toBeDisabled();
+      expect(screen.getByTestId('submit-selected')).toBeDisabled();
+    });
+
+    it('should display custom submit labels when provided', () => {
+      render(
+        <AiTable
+          {...defaultProps}
+          submitAllLabel="Save All"
+          submitSelectedLabel="Save Selected"
+        />
+      );
+
+      expect(screen.getByText('Submit All')).toBeInTheDocument();
+      expect(screen.getByText('Submit Selected')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Action Buttons', () => {
+    it('should render custom action buttons when provided', () => {
+      const customActionButtons = (rowId: number | string) => (
+        <button key="edit" onClick={vi.fn()}>
+          Edit {rowId}
+        </button>
+      );
+
+      render(
+        <AiTable {...defaultProps} customActionButtons={customActionButtons} />
+      );
+
+      // Note: Since TableContent is mocked, we're verifying the prop is passed
+      const tableContent = screen.getByTestId('table-content');
+      expect(tableContent).toBeInTheDocument();
+    });
+  });
+
+  describe('Mapper Configuration', () => {
+    it('should pass mapper configuration to table content', () => {
+      const mapperConfig = {
+        dataIndex: 'attributes',
+        onAddItem: vi.fn(),
+        onRemoveItem: vi.fn(),
+        onItemChange: vi.fn()
+      };
+
+      render(<AiTable {...defaultProps} mapperConfig={mapperConfig} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+
+    it('should handle expand all button click', async () => {
+      const user = userEvent.setup();
+      const mapperConfig = {
+        dataIndex: 'attributes',
+        onAddItem: vi.fn(),
+        onRemoveItem: vi.fn(),
+        onItemChange: vi.fn()
+      };
+
+      render(<AiTable {...defaultProps} mapperConfig={mapperConfig} />);
+
+      const expandAllBtn = screen.getByText('Expand All');
+      await user.click(expandAllBtn);
+
+      expect(expandAllBtn).toBeInTheDocument();
+    });
+
+    it('should handle collapse all button click', async () => {
+      const user = userEvent.setup();
+      const mapperConfig = {
+        dataIndex: 'attributes',
+        onAddItem: vi.fn(),
+        onRemoveItem: vi.fn(),
+        onItemChange: vi.fn()
+      };
+
+      render(<AiTable {...defaultProps} mapperConfig={mapperConfig} />);
+
+      const collapseAllBtn = screen.getByText('Collapse All');
+      await user.click(collapseAllBtn);
+
+      expect(collapseAllBtn).toBeInTheDocument();
+    });
+  });
+
+  describe('Edit Functionality', () => {
+    it('should pass onEdit callback to table content', () => {
+      const onEdit = vi.fn();
+
+      render(<AiTable {...defaultProps} onEdit={onEdit} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+
+    it('should pass editDataIndexes to table content', () => {
+      const editDataIndexes = ['0', '2'];
+
+      render(<AiTable {...defaultProps} editDataIndexes={editDataIndexes} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty columns array', () => {
+      render(<AiTable {...defaultProps} columns={[]} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+
+    it('should handle zero columns', () => {
+      render(<AiTable {...defaultProps} columns={[]} data={[{ id: 1 }]} />);
+
+      expect(screen.getByTestId('table-content')).toBeInTheDocument();
+    });
+  });
+});

package/dist/esm/ai-table/components/__tests__/content.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/vitest';
+//# sourceMappingURL=content.test.d.ts.map

package/dist/esm/ai-table/components/__tests__/content.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.test.d.ts","sourceRoot":"","sources":["../../../../../src/ai-table/components/__tests__/content.test.tsx"],"names":[],"mappings":"AACA,OAAO,kCAAkC,CAAC"}