@akinon/ai-modal-table 1.0.0

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

@@ -0,0 +1,601 @@
+/* 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 type { MapperRow } from '../../../types';
+import { TableMapper } from '../mapper';
+
+vi.mock('@akinon/icons', () => ({
+  Icon: ({ icon, size, color, className, onClick, ...props }: any) => (
+    <div
+      data-testid={`icon-${icon}`}
+      data-size={size}
+      data-color={color}
+      className={className}
+      onClick={onClick}
+      {...props}
+    >
+      {icon}
+    </div>
+  )
+}));
+
+vi.mock('@akinon/ui-input', () => ({
+  Input: ({ onChange, value, className, size, ...props }: any) => (
+    <input
+      onChange={onChange}
+      value={value}
+      className={className}
+      data-size={size}
+      data-testid={`input-${value || 'empty'}`}
+      {...props}
+    />
+  )
+}));
+
+vi.mock('@akinon/ui-layout', () => ({
+  Flex: ({ children, gap, vertical, align, rootClassName, ...props }: any) => (
+    <div
+      data-testid={vertical ? 'flex-vertical' : 'flex-horizontal'}
+      data-gap={gap}
+      data-vertical={vertical}
+      data-align={align}
+      className={rootClassName}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}));
+
+describe('TableMapper', () => {
+  const mockHandleAddItem = vi.fn();
+  const mockHandleRemoveItem = vi.fn(() => vi.fn());
+  const mockHandleItemChange = vi.fn();
+
+  const defaultValues: MapperRow[] = [
+    {
+      key: { type: 'text', value: 'key1' },
+      value: { type: 'text', value: 'value1' }
+    },
+    {
+      key: { type: 'text', value: 'key2' },
+      value: { type: 'text', value: 'value2' }
+    },
+    {
+      key: { type: 'text', value: 'key3' },
+      value: { type: 'text', value: 'value3' }
+    }
+  ];
+
+  const defaultProps = {
+    values: defaultValues,
+    handleAddItem: mockHandleAddItem,
+    handleRemoveItem: mockHandleRemoveItem,
+    handleItemChange: mockHandleItemChange
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderComponent = (props = {}) => {
+    return render(
+      <TableMapper
+        values={defaultProps.values}
+        handleAddItem={mockHandleAddItem}
+        handleRemoveItem={mockHandleRemoveItem}
+        handleItemChange={mockHandleItemChange}
+        {...props}
+      />
+    );
+  };
+
+  describe('Rendering', () => {
+    it('should render Flex container with vertical layout', () => {
+      renderComponent();
+      expect(screen.getByTestId('flex-vertical')).toBeInTheDocument();
+    });
+
+    it('should have correct Flex props on main container', () => {
+      renderComponent();
+      const mainFlex = screen.getByTestId('flex-vertical');
+      expect(mainFlex).toHaveAttribute('data-gap', '5');
+      expect(mainFlex).toHaveAttribute('data-vertical', 'true');
+    });
+
+    it('should render all rows regardless of previous state', () => {
+      renderComponent();
+      const horizontalFlexes = screen.getAllByTestId('flex-horizontal');
+      // Should have rows (each row with items) + icon containers
+      expect(horizontalFlexes.length).toBeGreaterThan(0);
+    });
+
+    it('should render inputs for all values', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs.length).toBe(6); // 3 values * 2 inputs (key + value)
+    });
+
+    it('should render correct number of plus/minus icons', () => {
+      renderComponent();
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      const minusIcons = screen.getAllByTestId('icon-minus');
+      expect(plusIcons).toHaveLength(3); // One per row
+      expect(minusIcons).toHaveLength(3); // One per row
+    });
+  });
+
+  describe('All Values Display', () => {
+    it('should display all values from props', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(6); // 3 items * 2 inputs
+    });
+
+    it('should display all values in correct order', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs[0]).toHaveValue('key1');
+      expect(inputs[1]).toHaveValue('value1');
+      expect(inputs[2]).toHaveValue('key2');
+      expect(inputs[3]).toHaveValue('value2');
+      expect(inputs[4]).toHaveValue('key3');
+      expect(inputs[5]).toHaveValue('value3');
+    });
+
+    it('should render correct number of rows', () => {
+      renderComponent();
+      const horizontalFlexes = screen.getAllByTestId('flex-horizontal');
+      // Should have: 3 rows (each with items) + 3 icon containers = at least 6
+      expect(horizontalFlexes.length).toBeGreaterThanOrEqual(6);
+    });
+  });
+
+  describe('Single Value', () => {
+    it('should display single value correctly', () => {
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: 'singleKey' },
+            value: { type: 'text', value: 'singleValue' }
+          }
+        ]
+      });
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(2);
+      expect(inputs[0]).toHaveValue('singleKey');
+      expect(inputs[1]).toHaveValue('singleValue');
+    });
+
+    it('should render add/remove icons for single value', () => {
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: 'singleKey' },
+            value: { type: 'text', value: 'singleValue' }
+          }
+        ]
+      });
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      const minusIcons = screen.getAllByTestId('icon-minus');
+      expect(plusIcons).toHaveLength(1);
+      expect(minusIcons).toHaveLength(1);
+    });
+  });
+
+  describe('Input Changes', () => {
+    it('should call handleItemChange when input changes', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+
+      fireEvent.change(inputs[0], { target: { value: 'newKey' } });
+
+      expect(mockHandleItemChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          index: 0
+        })
+      );
+    });
+
+    it('should call handleItemChange for value input', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+
+      fireEvent.change(inputs[1], { target: { value: 'newValue' } });
+
+      expect(mockHandleItemChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          index: 0
+        })
+      );
+    });
+
+    it('should call handleItemChange for correct item', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+
+      // Update second item's key (index 2)
+      fireEvent.change(inputs[2], { target: { value: 'newKey2' } });
+
+      expect(mockHandleItemChange).toHaveBeenCalled();
+    });
+
+    it('should handle empty input values', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+
+      fireEvent.change(inputs[0], { target: { value: '' } });
+
+      expect(mockHandleItemChange).toHaveBeenCalled();
+    });
+
+    it('should handle special characters in input', () => {
+      renderComponent();
+      const inputs = screen.getAllByRole('textbox');
+
+      fireEvent.change(inputs[0], { target: { value: '@#$%^&*' } });
+
+      expect(mockHandleItemChange).toHaveBeenCalled();
+    });
+  });
+
+  describe('Add Field', () => {
+    it('should render plus icon for each row', () => {
+      renderComponent();
+      expect(screen.getAllByTestId('icon-plus')).toHaveLength(3); // One for each row
+    });
+
+    it('should have correct color on plus icon', () => {
+      renderComponent();
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      expect(plusIcons[0]).toHaveAttribute(
+        'data-color',
+        'var(--color-green-500)'
+      );
+    });
+
+    it('should call handleAddItem when plus icon clicked', () => {
+      renderComponent();
+      const plusIcons = screen.getAllByTestId('icon-plus');
+
+      fireEvent.click(plusIcons[0]);
+
+      expect(mockHandleAddItem).toHaveBeenCalled();
+    });
+
+    it('should handle multiple plus clicks', () => {
+      renderComponent();
+      const plusIcons = screen.getAllByTestId('icon-plus');
+
+      fireEvent.click(plusIcons[0]);
+      fireEvent.click(plusIcons[0]);
+
+      expect(mockHandleAddItem).toHaveBeenCalledTimes(2);
+    });
+
+    it('should handle handleAddItem undefined', () => {
+      renderComponent({ handleAddItem: undefined as any });
+      const plusIcons = screen.getAllByTestId('icon-plus');
+
+      expect(() => {
+        fireEvent.click(plusIcons[0]);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Remove Field', () => {
+    it('should render minus icons for each row', () => {
+      renderComponent();
+      const minusIcons = screen.getAllByTestId('icon-minus');
+      expect(minusIcons).toHaveLength(3);
+    });
+
+    it('should have correct color on minus icon', () => {
+      renderComponent();
+      const minusIcons = screen.getAllByTestId('icon-minus');
+      expect(minusIcons[0]).toHaveAttribute(
+        'data-color',
+        'var(--color-red-425)'
+      );
+    });
+
+    it('should call handleRemoveItem when rendering (to get onClick)', () => {
+      renderComponent();
+
+      // handleRemoveItem is called during render to get the onClick handler for each row
+      expect(mockHandleRemoveItem).toHaveBeenCalled();
+      expect(mockHandleRemoveItem.mock.calls.length).toBeGreaterThanOrEqual(3);
+    });
+
+    it('should handle minus icon clicks without throwing', () => {
+      renderComponent();
+      const minusIcons = screen.getAllByTestId('icon-minus');
+
+      expect(() => {
+        fireEvent.click(minusIcons[0]);
+        fireEvent.click(minusIcons[1]);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Icons', () => {
+    it('should have cursor-pointer class on plus and minus icons', () => {
+      renderComponent();
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      const minusIcons = screen.getAllByTestId('icon-minus');
+
+      expect(plusIcons[0]).toHaveClass('cursor-pointer');
+      expect(minusIcons[0]).toHaveClass('cursor-pointer');
+    });
+
+    it('should have correct size on icons', () => {
+      renderComponent();
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      const minusIcons = screen.getAllByTestId('icon-minus');
+
+      expect(plusIcons[0]).toHaveAttribute('data-size', '20');
+      expect(minusIcons[0]).toHaveAttribute('data-size', '20');
+    });
+  });
+
+  describe('Empty Values', () => {
+    it('should render with empty array', () => {
+      renderComponent({ values: [] });
+      expect(screen.getByTestId('flex-vertical')).toBeInTheDocument();
+    });
+
+    it('should not render any rows with empty array', () => {
+      renderComponent({ values: [] });
+      const inputs = screen.queryAllByRole('textbox');
+      expect(inputs).toHaveLength(0);
+    });
+  });
+
+  describe('Prop Updates', () => {
+    it('should use values from props', () => {
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: 'initialKey' },
+            value: { type: 'text', value: 'initialValue' }
+          }
+        ]
+      });
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs[0]).toHaveValue('initialKey');
+      expect(inputs[1]).toHaveValue('initialValue');
+    });
+
+    it('should render different values when props change', () => {
+      const { rerender } = render(
+        <TableMapper
+          values={[
+            {
+              key: { type: 'text', value: 'key1' },
+              value: { type: 'text', value: 'value1' }
+            }
+          ]}
+          handleAddItem={mockHandleAddItem}
+          handleRemoveItem={mockHandleRemoveItem}
+          handleItemChange={mockHandleItemChange}
+        />
+      );
+
+      let inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(2);
+
+      rerender(
+        <TableMapper
+          values={[
+            {
+              key: { type: 'text', value: 'key1' },
+              value: { type: 'text', value: 'value1' }
+            },
+            {
+              key: { type: 'text', value: 'key2' },
+              value: { type: 'text', value: 'value2' }
+            }
+          ]}
+          handleAddItem={mockHandleAddItem}
+          handleRemoveItem={mockHandleRemoveItem}
+          handleItemChange={mockHandleItemChange}
+        />
+      );
+
+      inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(4);
+    });
+
+    it('should always render all values (controlled by parent)', () => {
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: 'key1' },
+            value: { type: 'text', value: 'value1' }
+          },
+          {
+            key: { type: 'text', value: 'key2' },
+            value: { type: 'text', value: 'value2' }
+          },
+          {
+            key: { type: 'text', value: 'key3' },
+            value: { type: 'text', value: 'value3' }
+          }
+        ]
+      });
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(6);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it('should handle edit, add, and remove operations', () => {
+      renderComponent();
+
+      const inputs = screen.getAllByRole('textbox');
+
+      // Edit first item
+      fireEvent.change(inputs[0], { target: { value: 'edited1' } });
+      expect(mockHandleItemChange).toHaveBeenCalled();
+
+      // Add new field
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      expect(() => {
+        fireEvent.click(plusIcons[0]);
+      }).not.toThrow();
+      expect(mockHandleAddItem).toHaveBeenCalled();
+
+      // Remove an item
+      const minusIcons = screen.getAllByTestId('icon-minus');
+      expect(() => {
+        fireEvent.click(minusIcons[1]);
+      }).not.toThrow();
+    });
+
+    it('should handle rapid add operations', () => {
+      renderComponent();
+
+      const plusIcons = screen.getAllByTestId('icon-plus');
+
+      expect(() => {
+        fireEvent.click(plusIcons[0]);
+        fireEvent.click(plusIcons[1]);
+        fireEvent.click(plusIcons[2]);
+      }).not.toThrow();
+    });
+
+    it('should handle rapid remove operations', () => {
+      renderComponent();
+
+      const minusIcons = screen.getAllByTestId('icon-minus');
+
+      expect(() => {
+        fireEvent.click(minusIcons[0]);
+        fireEvent.click(minusIcons[1]);
+        fireEvent.click(minusIcons[2]);
+      }).not.toThrow();
+    });
+
+    it('should render updated values after prop changes', () => {
+      const { rerender } = render(
+        <TableMapper
+          values={[
+            {
+              key: { type: 'text', value: 'k1' },
+              value: { type: 'text', value: 'v1' }
+            }
+          ]}
+          handleAddItem={mockHandleAddItem}
+          handleRemoveItem={mockHandleRemoveItem}
+          handleItemChange={mockHandleItemChange}
+        />
+      );
+
+      // Re-render with new values
+      rerender(
+        <TableMapper
+          values={[
+            {
+              key: { type: 'text', value: 'k1' },
+              value: { type: 'text', value: 'v1' }
+            },
+            {
+              key: { type: 'text', value: 'k2' },
+              value: { type: 'text', value: 'v2' }
+            }
+          ]}
+          handleAddItem={mockHandleAddItem}
+          handleRemoveItem={mockHandleRemoveItem}
+          handleItemChange={mockHandleItemChange}
+        />
+      );
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(4);
+    });
+
+    it('should handle very long values', () => {
+      const longValue = 'a'.repeat(500);
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: longValue },
+            value: { type: 'text', value: longValue }
+          }
+        ]
+      });
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs[0]).toHaveValue(longValue);
+      expect(inputs[1]).toHaveValue(longValue);
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeKey = '你好键';
+      const unicodeValue = '🚀 مرحبا';
+
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: unicodeKey },
+            value: { type: 'text', value: unicodeValue }
+          }
+        ]
+      });
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs[0]).toHaveValue(unicodeKey);
+      expect(inputs[1]).toHaveValue(unicodeValue);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle many items', () => {
+      const manyItems: MapperRow[] = Array.from({ length: 10 }, (_, i) => ({
+        [`key${i}`]: { type: 'text', value: `key${i}` },
+        [`value${i}`]: { type: 'text', value: `value${i}` }
+      }));
+
+      renderComponent({ values: manyItems });
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs).toHaveLength(20); // 10 items * 2 inputs
+    });
+
+    it('should handle many icons', () => {
+      const manyItems: MapperRow[] = Array.from({ length: 10 }, (_, i) => ({
+        [`key${i}`]: { type: 'text', value: `key${i}` },
+        [`value${i}`]: { type: 'text', value: `value${i}` }
+      }));
+
+      renderComponent({ values: manyItems });
+
+      const plusIcons = screen.getAllByTestId('icon-plus');
+      const minusIcons = screen.getAllByTestId('icon-minus');
+      expect(plusIcons).toHaveLength(10);
+      expect(minusIcons).toHaveLength(10);
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeKey = '你好键';
+      const unicodeValue = '🚀 مرحبا';
+
+      renderComponent({
+        values: [
+          {
+            key: { type: 'text', value: unicodeKey },
+            value: { type: 'text', value: unicodeValue }
+          }
+        ]
+      });
+
+      const inputs = screen.getAllByRole('textbox');
+      expect(inputs[0]).toHaveValue(unicodeKey);
+      expect(inputs[1]).toHaveValue(unicodeValue);
+    });
+  });
+});

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=pagination.test.d.ts.map

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

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