@akinon/ai-modal-table 1.0.0

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

@@ -0,0 +1,451 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/* 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 { TableMapper } from '../mapper';
+vi.mock('@akinon/icons', () => ({
+    Icon: (_a) => {
+        var { icon, size, color, className, onClick } = _a, props = __rest(_a, ["icon", "size", "color", "className", "onClick"]);
+        return (React.createElement("div", Object.assign({ "data-testid": `icon-${icon}`, "data-size": size, "data-color": color, className: className, onClick: onClick }, props), icon));
+    }
+}));
+vi.mock('@akinon/ui-input', () => ({
+    Input: (_a) => {
+        var { onChange, value, className, size } = _a, props = __rest(_a, ["onChange", "value", "className", "size"]);
+        return (React.createElement("input", Object.assign({ onChange: onChange, value: value, className: className, "data-size": size, "data-testid": `input-${value || 'empty'}` }, props)));
+    }
+}));
+vi.mock('@akinon/ui-layout', () => ({
+    Flex: (_a) => {
+        var { children, gap, vertical, align, rootClassName } = _a, props = __rest(_a, ["children", "gap", "vertical", "align", "rootClassName"]);
+        return (React.createElement("div", Object.assign({ "data-testid": vertical ? 'flex-vertical' : 'flex-horizontal', "data-gap": gap, "data-vertical": vertical, "data-align": align, className: rootClassName }, props), children));
+    }
+}));
+describe('TableMapper', () => {
+    const mockHandleAddItem = vi.fn();
+    const mockHandleRemoveItem = vi.fn(() => vi.fn());
+    const mockHandleItemChange = vi.fn();
+    const defaultValues = [
+        {
+            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(React.createElement(TableMapper, Object.assign({ 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 });
+            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(React.createElement(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(React.createElement(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(React.createElement(TableMapper, { values: [
+                    {
+                        key: { type: 'text', value: 'k1' },
+                        value: { type: 'text', value: 'v1' }
+                    }
+                ], handleAddItem: mockHandleAddItem, handleRemoveItem: mockHandleRemoveItem, handleItemChange: mockHandleItemChange }));
+            // Re-render with new values
+            rerender(React.createElement(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 = 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 = 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);
+        });
+    });
+});