@akinon/ai-modal-table 1.0.0

package/dist/esm/ai-table/components/__tests__/pagination.test.tsx

@@ -0,0 +1,629 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { fireEvent, render, screen } from '@testing-library/react';
+import * as React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { DEFAULT_CURRENT_PAGE, PAGE_SIZE_OPTIONS } from '../../constants';
+import { TablePagination } from '../pagination';
+
+vi.mock('@akinon/ui-layout', () => ({
+  Flex: ({ children, align, gap, rootClassName, ...props }: any) => (
+    <div
+      data-testid="flex-container"
+      data-align={align}
+      data-gap={gap}
+      className={rootClassName}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}));
+
+vi.mock('@akinon/ui-pagination', () => ({
+  Pagination: ({
+    current,
+    onChange,
+    pageSize,
+    total,
+    className,
+    showSizeChanger,
+    theme,
+    ...props
+  }: any) => (
+    <div
+      data-testid="pagination"
+      data-current={current}
+      data-page-size={pageSize}
+      data-total={total}
+      data-show-size-changer={showSizeChanger}
+      data-theme={theme}
+      className={className}
+      {...props}
+    >
+      <button
+        data-testid="pagination-prev"
+        onClick={() => onChange(current - 1)}
+        disabled={current === 1}
+      >
+        Prev
+      </button>
+      <span data-testid="current-page">{current}</span>
+      <button
+        data-testid="pagination-next"
+        onClick={() => onChange(current + 1)}
+        disabled={current === Math.ceil(total / pageSize)}
+      >
+        Next
+      </button>
+    </div>
+  )
+}));
+
+vi.mock('@akinon/ui-select', () => ({
+  Select: ({ value, onChange, options, ...props }: any) => (
+    <select
+      data-testid="page-size-select"
+      value={String(value)}
+      onChange={(e: any) => onChange(Number(e.target.value))}
+      {...props}
+    >
+      {options.map((opt: any) => (
+        <option key={opt.value} value={opt.value}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  )
+}));
+
+vi.mock('@akinon/ui-theme', () => ({
+  useToken: () => ({
+    token: { colorPrimary: '#1890ff' },
+    hashId: 'test-hash-id'
+  }),
+  getPrefixCls: vi.fn((cls: string) => `akinon-${cls}`)
+}));
+
+vi.mock('@ant-design/cssinjs', () => ({
+  useStyleRegister: vi.fn((_, callback: any) => {
+    callback();
+    return (node: React.ReactNode) => node;
+  })
+}));
+
+vi.mock('antd', () => ({
+  ConfigProvider: {
+    ConfigContext: React.createContext({
+      getPrefixCls: (cls: string) => `akinon-${cls}`,
+      theme: {}
+    })
+  }
+}));
+
+vi.mock('../../i18n', () => ({
+  i18n: {
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        'show.value': 'Show'
+      };
+      return translations[key] || key;
+    }
+  }
+}));
+
+describe('TablePagination', () => {
+  const mockOnPageChange = vi.fn();
+  const mockOnPageSizeChange = vi.fn();
+
+  const defaultProps = {
+    currentPage: 1,
+    pageSize: 20,
+    total: 100,
+    onPageChange: mockOnPageChange,
+    onPageSizeChange: mockOnPageSizeChange
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(<TablePagination {...defaultProps} {...props} />);
+  };
+
+  describe('Rendering', () => {
+    it('should render Flex container', () => {
+      renderComponent();
+      const flexContainers = screen.getAllByTestId('flex-container');
+      expect(flexContainers.length).toBeGreaterThan(0);
+    });
+
+    it('should render Select for page size', () => {
+      renderComponent();
+      expect(screen.getByTestId('page-size-select')).toBeInTheDocument();
+    });
+
+    it('should render Pagination component', () => {
+      renderComponent();
+      expect(screen.getByTestId('pagination')).toBeInTheDocument();
+    });
+
+    it('should display show label', () => {
+      renderComponent();
+      expect(screen.getByText('Show')).toBeInTheDocument();
+    });
+  });
+
+  describe('Page Size Select', () => {
+    it('should display current page size as value', () => {
+      renderComponent({ pageSize: 20 });
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+      expect(select.value).toBe('20');
+    });
+
+    it('should have correct page size options', () => {
+      renderComponent();
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+      const options = Array.from(select.options).map(opt => opt.value);
+
+      PAGE_SIZE_OPTIONS.forEach(opt => {
+        expect(options).toContain(String(opt.value));
+      });
+    });
+
+    it('should render all page size options', () => {
+      renderComponent();
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+      expect(select.options.length).toBe(PAGE_SIZE_OPTIONS.length);
+    });
+
+    it('should update value when pageSize prop changes', () => {
+      const { rerender } = renderComponent({ pageSize: 20 });
+
+      let select = screen.getByTestId('page-size-select') as HTMLSelectElement;
+      expect(select.value).toBe('20');
+
+      rerender(<TablePagination {...defaultProps} pageSize={50} />);
+
+      select = screen.getByTestId('page-size-select') as HTMLSelectElement;
+      expect(select.value).toBe('50');
+    });
+
+    it('should call onPageSizeChange when page size is changed', () => {
+      renderComponent();
+      const select = screen.getByTestId('page-size-select');
+
+      fireEvent.change(select, { target: { value: '20' } });
+
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(20);
+    });
+
+    it('should call onPageChange with DEFAULT_CURRENT_PAGE when page size changes', () => {
+      renderComponent();
+      const select = screen.getByTestId('page-size-select');
+
+      fireEvent.change(select, { target: { value: '20' } });
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(DEFAULT_CURRENT_PAGE);
+    });
+
+    it('should reset to page 1 when changing page size from page 2', () => {
+      mockOnPageChange.mockClear();
+      renderComponent({ currentPage: 2, pageSize: 10 });
+      const select = screen.getByTestId('page-size-select');
+
+      fireEvent.change(select, { target: { value: '20' } });
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(DEFAULT_CURRENT_PAGE);
+      expect(mockOnPageChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('should handle all page size options', () => {
+      renderComponent({ pageSize: 20 });
+      const select = screen.getByTestId('page-size-select');
+
+      // Test first option
+      fireEvent.change(select, { target: { value: '20' } });
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(20);
+
+      mockOnPageSizeChange.mockClear();
+
+      // Test second option
+      fireEvent.change(select, { target: { value: '50' } });
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(50);
+
+      mockOnPageSizeChange.mockClear();
+
+      // Test third option
+      fireEvent.change(select, { target: { value: '100' } });
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(100);
+
+      mockOnPageSizeChange.mockClear();
+
+      // Test fourth option
+      fireEvent.change(select, { target: { value: '250' } });
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(250);
+    });
+  });
+
+  describe('Pagination Component', () => {
+    it('should pass current page to Pagination', () => {
+      renderComponent({ currentPage: 1 });
+      const pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-current', '1');
+    });
+
+    it('should pass page size to Pagination', () => {
+      renderComponent({ pageSize: 20 });
+      const pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-page-size', '20');
+    });
+
+    it('should pass total to Pagination', () => {
+      renderComponent({ total: 500 });
+      const pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-total', '500');
+    });
+
+    it('should have dark theme', () => {
+      renderComponent();
+      const pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-theme', 'dark');
+    });
+
+    it('should not show size changer', () => {
+      renderComponent();
+      const pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-show-size-changer', 'false');
+    });
+
+    it('should display current page number', () => {
+      renderComponent({ currentPage: 1 });
+      expect(screen.getByTestId('current-page')).toHaveTextContent('1');
+    });
+
+    it('should update current page display when prop changes', () => {
+      const { rerender } = renderComponent({ currentPage: 1 });
+
+      let currentPageDisplay = screen.getByTestId('current-page');
+      expect(currentPageDisplay).toHaveTextContent('1');
+
+      rerender(<TablePagination {...defaultProps} currentPage={5} />);
+
+      currentPageDisplay = screen.getByTestId('current-page');
+      expect(currentPageDisplay).toHaveTextContent('5');
+    });
+  });
+
+  describe('Page Navigation', () => {
+    it('should call onPageChange when next button is clicked', () => {
+      renderComponent({ currentPage: 1, total: 100, pageSize: 10 });
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      fireEvent.click(nextBtn);
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(2);
+    });
+
+    it('should call onPageChange when prev button is clicked', () => {
+      renderComponent({ currentPage: 3, total: 100, pageSize: 10 });
+      const prevBtn = screen.getByTestId('pagination-prev');
+
+      fireEvent.click(prevBtn);
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(2);
+    });
+
+    it('should disable prev button on first page', () => {
+      renderComponent({ currentPage: 1 });
+      const prevBtn = screen.getByTestId('pagination-prev');
+
+      expect(prevBtn).toBeDisabled();
+    });
+
+    it('should enable prev button on page 2 or higher', () => {
+      renderComponent({ currentPage: 2, total: 100, pageSize: 10 });
+      const prevBtn = screen.getByTestId('pagination-prev');
+
+      expect(prevBtn).not.toBeDisabled();
+    });
+
+    it('should disable next button on last page', () => {
+      renderComponent({ currentPage: 10, total: 100, pageSize: 10 });
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      expect(nextBtn).toBeDisabled();
+    });
+
+    it('should navigate to next page', () => {
+      renderComponent({ currentPage: 1, total: 100, pageSize: 10 });
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      fireEvent.click(nextBtn);
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(2);
+      expect(mockOnPageChange).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Total Items and Page Count', () => {
+    it('should calculate correct page count with 100 items and 10 per page', () => {
+      renderComponent({ total: 100, pageSize: 10 });
+      const pagination = screen.getByTestId('pagination');
+
+      expect(pagination).toHaveAttribute('data-total', '100');
+      expect(pagination).toHaveAttribute('data-page-size', '10');
+    });
+
+    it('should calculate correct page count with 95 items and 10 per page', () => {
+      renderComponent({ total: 95, pageSize: 10 });
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      // Current page 1 -> should be able to go to page 10 (95 / 10 = 9.5 -> 10 pages)
+      expect(nextBtn).not.toBeDisabled();
+    });
+
+    it('should disable next on the actual last page', () => {
+      renderComponent({ currentPage: 10, total: 100, pageSize: 10 });
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      expect(nextBtn).toBeDisabled();
+    });
+
+    it('should handle zero total items', () => {
+      renderComponent({ total: 0, currentPage: 1, pageSize: 10 });
+      const pagination = screen.getByTestId('pagination');
+
+      expect(pagination).toHaveAttribute('data-total', '0');
+    });
+
+    it('should handle single item', () => {
+      renderComponent({ total: 1, currentPage: 1, pageSize: 10 });
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      expect(nextBtn).toBeDisabled();
+    });
+  });
+
+  describe('Different Page Sizes', () => {
+    it('should work with page size 20', () => {
+      renderComponent({ pageSize: 20, total: 200 });
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+
+      expect(select.value).toBe('20');
+    });
+
+    it('should work with page size 50', () => {
+      renderComponent({ pageSize: 50, total: 500 });
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+
+      expect(select.value).toBe('50');
+    });
+
+    it('should work with page size 100', () => {
+      renderComponent({ pageSize: 100, total: 1000 });
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+
+      expect(select.value).toBe('100');
+    });
+
+    it('should work with page size 250', () => {
+      renderComponent({ pageSize: 250, total: 2500 });
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+
+      expect(select.value).toBe('250');
+    });
+
+    it('should increase page count when page size decreases', () => {
+      // Test that changing page size calls the correct callbacks
+      renderComponent({ pageSize: 20, total: 100 });
+
+      const select = screen.getByTestId('page-size-select');
+      fireEvent.change(select, { target: { value: '50' } });
+
+      // Should call both callbacks
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(50);
+      expect(mockOnPageChange).toHaveBeenCalledWith(DEFAULT_CURRENT_PAGE);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it('should handle complete page navigation workflow', () => {
+      const { rerender } = renderComponent({
+        currentPage: 1,
+        pageSize: 10,
+        total: 100
+      });
+
+      // Go to next page
+      const nextBtn = screen.getByTestId('pagination-next');
+      fireEvent.click(nextBtn);
+      expect(mockOnPageChange).toHaveBeenCalledWith(2);
+
+      // Rerender with updated page
+      mockOnPageChange.mockClear();
+      rerender(
+        <TablePagination
+          currentPage={2}
+          pageSize={10}
+          total={100}
+          onPageChange={mockOnPageChange}
+          onPageSizeChange={mockOnPageSizeChange}
+        />
+      );
+
+      // Go to previous page
+      const prevBtn = screen.getByTestId('pagination-prev');
+      fireEvent.click(prevBtn);
+      expect(mockOnPageChange).toHaveBeenCalledWith(1);
+    });
+
+    it('should handle page size change and navigation', () => {
+      renderComponent({ currentPage: 1, pageSize: 10, total: 100 });
+
+      // Change page size (should reset to page 1)
+      const select = screen.getByTestId('page-size-select');
+      fireEvent.change(select, { target: { value: '20' } });
+
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(20);
+      expect(mockOnPageChange).toHaveBeenCalledWith(DEFAULT_CURRENT_PAGE);
+
+      // Navigate
+      mockOnPageChange.mockClear();
+      const nextBtn = screen.getByTestId('pagination-next');
+      fireEvent.click(nextBtn);
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(2);
+    });
+
+    it('should maintain state through multiple page size changes', () => {
+      renderComponent({ currentPage: 1, pageSize: 10, total: 100 });
+
+      const select = screen.getByTestId('page-size-select');
+
+      fireEvent.change(select, { target: { value: '20' } });
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(20);
+
+      mockOnPageChange.mockClear();
+      mockOnPageSizeChange.mockClear();
+
+      fireEvent.change(select, { target: { value: '50' } });
+      expect(mockOnPageSizeChange).toHaveBeenCalledWith(50);
+      expect(mockOnPageChange).toHaveBeenCalledWith(DEFAULT_CURRENT_PAGE);
+    });
+
+    it('should handle rapid page changes', () => {
+      renderComponent({ currentPage: 1, pageSize: 10, total: 100 });
+
+      const nextBtn = screen.getByTestId('pagination-next');
+
+      // Click next button multiple times
+      fireEvent.click(nextBtn);
+      fireEvent.click(nextBtn);
+      fireEvent.click(nextBtn);
+
+      // Each click should call onPageChange with incremented page
+      expect(mockOnPageChange).toHaveBeenCalledTimes(3);
+      expect(mockOnPageChange).toHaveBeenNthCalledWith(1, 2);
+      expect(mockOnPageChange).toHaveBeenNthCalledWith(2, 2);
+      expect(mockOnPageChange).toHaveBeenNthCalledWith(3, 2);
+    });
+
+    it('should handle edge case of last page navigation', () => {
+      renderComponent({ currentPage: 9, pageSize: 10, total: 100 });
+
+      const nextBtn = screen.getByTestId('pagination-next');
+      fireEvent.click(nextBtn); // -> page 10 (last page)
+
+      expect(mockOnPageChange).toHaveBeenCalledWith(10);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle very large total', () => {
+      renderComponent({ total: 1000000, pageSize: 10, currentPage: 1 });
+      const pagination = screen.getByTestId('pagination');
+
+      expect(pagination).toHaveAttribute('data-total', '1000000');
+    });
+
+    it('should handle current page at exactly total pages boundary', () => {
+      // total 100, pageSize 10 = 10 pages
+      renderComponent({ total: 100, pageSize: 10, currentPage: 10 });
+
+      const nextBtn = screen.getByTestId('pagination-next');
+      expect(nextBtn).toBeDisabled();
+    });
+
+    it('should handle current page just before last page', () => {
+      renderComponent({ total: 100, pageSize: 10, currentPage: 9 });
+
+      const nextBtn = screen.getByTestId('pagination-next');
+      expect(nextBtn).not.toBeDisabled();
+    });
+
+    it('should handle currentPage 1 explicitly', () => {
+      renderComponent({ currentPage: 1 });
+      const currentPageDisplay = screen.getByTestId('current-page');
+
+      expect(currentPageDisplay).toHaveTextContent('1');
+    });
+
+    it('should display correct page in select', () => {
+      renderComponent({ pageSize: 50 });
+      const select = screen.getByTestId(
+        'page-size-select'
+      ) as HTMLSelectElement;
+
+      expect(select.value).toBe('50');
+    });
+  });
+
+  describe('Prop Updates', () => {
+    it('should update with new currentPage', () => {
+      const { rerender } = renderComponent({ currentPage: 1 });
+
+      let currentPageDisplay = screen.getByTestId('current-page');
+      expect(currentPageDisplay).toHaveTextContent('1');
+
+      rerender(<TablePagination {...defaultProps} currentPage={5} />);
+
+      currentPageDisplay = screen.getByTestId('current-page');
+      expect(currentPageDisplay).toHaveTextContent('5');
+    });
+
+    it('should update with new total', () => {
+      const { rerender } = renderComponent({ total: 100 });
+
+      let pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-total', '100');
+
+      rerender(<TablePagination {...defaultProps} total={500} />);
+
+      pagination = screen.getByTestId('pagination');
+      expect(pagination).toHaveAttribute('data-total', '500');
+    });
+
+    it('should maintain callbacks through rerenders', () => {
+      const newOnPageChange = vi.fn();
+      const { rerender } = renderComponent();
+
+      const nextBtn = screen.getByTestId('pagination-next');
+      fireEvent.click(nextBtn);
+
+      expect(mockOnPageChange).toHaveBeenCalled();
+
+      rerender(
+        <TablePagination
+          currentPage={1}
+          pageSize={10}
+          total={100}
+          onPageChange={newOnPageChange}
+          onPageSizeChange={mockOnPageSizeChange}
+        />
+      );
+
+      mockOnPageChange.mockClear();
+
+      fireEvent.click(screen.getByTestId('pagination-next'));
+
+      // New callback should be used
+      expect(newOnPageChange).toHaveBeenCalled();
+    });
+  });
+});

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

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

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

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