@akinon/ai-modal-table 1.0.0

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

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