@akinon/ai-modal-table 1.0.0

package/dist/cjs/ai-table/components/__tests__/filters.test.d.ts

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

package/dist/cjs/ai-table/components/__tests__/filters.test.d.ts.map

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

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

@@ -0,0 +1,400 @@
+"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 constants_1 = require("../../constants");
+const filters_1 = require("../filters");
+vitest_1.vi.mock('@akinon/icons', () => ({
+    Icon: (_a) => {
+        var { icon, className, color, size } = _a, props = __rest(_a, ["icon", "className", "color", "size"]);
+        return (React.createElement("div", Object.assign({ "data-testid": `icon-${icon}`, className: className, "data-color": color, "data-size": size }, props), icon));
+    }
+}));
+vitest_1.vi.mock('@akinon/ui-input', () => ({
+    Input: (_a) => {
+        var { onChange, value, className, placeholder, name } = _a, props = __rest(_a, ["onChange", "value", "className", "placeholder", "name"]);
+        return (React.createElement("input", Object.assign({ onChange: onChange, value: value, className: className, placeholder: placeholder, name: name, "data-testid": `input-${name}` }, props)));
+    }
+}));
+vitest_1.vi.mock('@akinon/ui-layout', () => ({
+    Flex: (_a) => {
+        var { children, align, rootClassName, gap, wrap, flex } = _a, props = __rest(_a, ["children", "align", "rootClassName", "gap", "wrap", "flex"]);
+        const testId = flex === 1 ? 'flex-container' : 'flex-filter';
+        return (React.createElement("div", Object.assign({ "data-testid": testId, "data-align": align, "data-gap": gap, "data-wrap": wrap, "data-flex": flex, className: rootClassName }, props), children));
+    }
+}));
+vitest_1.vi.mock('lodash-es', () => ({
+    debounce: (fn) => {
+        const debounced = (...args) => {
+            fn(...args);
+        };
+        debounced.cancel = vitest_1.vi.fn();
+        return debounced;
+    }
+}));
+(0, vitest_1.describe)('TableFilters', () => {
+    const mockOnFilterChange = vitest_1.vi.fn();
+    const defaultProps = {
+        filters: [
+            {
+                key: 'name',
+                placeholder: 'Search by name',
+                type: constants_1.FILTER_TYPES.INPUT
+            },
+            {
+                key: 'email',
+                placeholder: 'Search by email',
+                type: constants_1.FILTER_TYPES.INPUT
+            }
+        ],
+        filterValues: {},
+        onFilterChange: mockOnFilterChange
+    };
+    (0, vitest_1.beforeEach)(() => {
+        vitest_1.vi.clearAllMocks();
+    });
+    const renderComponent = (props = {}) => {
+        return (0, react_1.render)(React.createElement(filters_1.TableFilters, Object.assign({}, defaultProps, props)));
+    };
+    (0, vitest_1.describe)('Rendering', () => {
+        (0, vitest_1.it)('should render nothing when filters is null', () => {
+            const { container } = renderComponent({ filters: null });
+            (0, vitest_1.expect)(container.firstChild).toBeNull();
+        });
+        (0, vitest_1.it)('should render nothing when filters is undefined', () => {
+            const { container } = renderComponent({ filters: undefined });
+            (0, vitest_1.expect)(container.firstChild).toBeNull();
+        });
+        (0, vitest_1.it)('should render nothing when filters is empty array', () => {
+            const { container } = renderComponent({ filters: [] });
+            (0, vitest_1.expect)(container.firstChild).toBeNull();
+        });
+        (0, vitest_1.it)('should render Flex container when filters exist', () => {
+            renderComponent();
+            const flexContainer = react_1.screen.getByTestId('flex-container');
+            (0, vitest_1.expect)(flexContainer).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should render correct number of filters', () => {
+            renderComponent();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-email')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should apply correct Flex props', () => {
+            renderComponent();
+            const flexContainer = react_1.screen.getByTestId('flex-container');
+            (0, vitest_1.expect)(flexContainer).toHaveAttribute('data-flex', '1');
+            (0, vitest_1.expect)(flexContainer).toHaveAttribute('data-gap', '12');
+            (0, vitest_1.expect)(flexContainer).toHaveAttribute('data-wrap', 'true');
+        });
+    });
+    (0, vitest_1.describe)('Input Filters', () => {
+        (0, vitest_1.it)('should render input with correct placeholder', () => {
+            renderComponent();
+            (0, vitest_1.expect)(react_1.screen.getByPlaceholderText('Search by name')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByPlaceholderText('Search by email')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should render input with correct name attribute', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            (0, vitest_1.expect)(nameInput).toHaveAttribute('name', 'name');
+        });
+        (0, vitest_1.it)('should render input with correct className', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            (0, vitest_1.expect)(nameInput).toHaveClass('h-9', 'w-44');
+        });
+        (0, vitest_1.it)('should render search icon for each input', () => {
+            renderComponent();
+            const searchIcons = react_1.screen.getAllByTestId('icon-search');
+            (0, vitest_1.expect)(searchIcons).toHaveLength(2);
+        });
+        (0, vitest_1.it)('should render search icon with correct props', () => {
+            renderComponent();
+            const searchIcon = react_1.screen.getAllByTestId('icon-search')[0];
+            (0, vitest_1.expect)(searchIcon).toHaveClass('absolute', 'cursor-pointer', 'right-2', 'top-2');
+            (0, vitest_1.expect)(searchIcon).toHaveAttribute('data-color', 'var(--color-gray-500)');
+            (0, vitest_1.expect)(searchIcon).toHaveAttribute('data-size', '16');
+        });
+        (0, vitest_1.it)('should render filter container with relative positioning', () => {
+            renderComponent();
+            const containers = react_1.screen.getAllByTestId('flex-filter');
+            (0, vitest_1.expect)(containers.length).toBeGreaterThan(0);
+            (0, vitest_1.expect)(containers[0]).toHaveClass('relative');
+        });
+    });
+    (0, vitest_1.describe)('Filter Values', () => {
+        (0, vitest_1.it)('should display initial filter values', () => {
+            const filterValues = {
+                name: 'John',
+                email: 'john@example.com'
+            };
+            renderComponent({ filterValues });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toHaveValue('John');
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-email')).toHaveValue('john@example.com');
+        });
+        (0, vitest_1.it)('should display empty string when filter value is not set', () => {
+            renderComponent({ filterValues: {} });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toHaveValue('');
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-email')).toHaveValue('');
+        });
+        (0, vitest_1.it)('should update when filterValues prop changes', () => {
+            const { rerender } = renderComponent({ filterValues: { name: 'John' } });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toHaveValue('John');
+            rerender(React.createElement(filters_1.TableFilters, Object.assign({}, defaultProps, { filterValues: { name: 'Jane' } })));
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toHaveValue('Jane');
+        });
+    });
+    (0, vitest_1.describe)('Input Change Handling', () => {
+        (0, vitest_1.it)('should update local state on input change', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: 'Test' } });
+            (0, vitest_1.expect)(nameInput).toHaveValue('Test');
+        });
+        (0, vitest_1.it)('should call onFilterChange immediately (debounced)', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: 'Test' } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('name', 'Test');
+        });
+        (0, vitest_1.it)('should handle multiple rapid changes', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: 'T' } });
+            react_1.fireEvent.change(nameInput, { target: { value: 'Te' } });
+            react_1.fireEvent.change(nameInput, { target: { value: 'Test' } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledTimes(3);
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenLastCalledWith('name', 'Test');
+        });
+        (0, vitest_1.it)('should handle changes for different filters independently', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            const emailInput = react_1.screen.getByTestId('input-email');
+            react_1.fireEvent.change(nameInput, { target: { value: 'John' } });
+            react_1.fireEvent.change(emailInput, { target: { value: 'john@example.com' } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('name', 'John');
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('email', 'john@example.com');
+        });
+        (0, vitest_1.it)('should handle empty string input', () => {
+            renderComponent({ filterValues: { name: 'Test' } });
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: '' } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('name', '');
+        });
+        (0, vitest_1.it)('should handle special characters in input', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: '@#$%^&*()' } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('name', '@#$%^&*()');
+        });
+    });
+    (0, vitest_1.describe)('Debounce Cleanup', () => {
+        (0, vitest_1.it)('should not throw error on unmount', () => {
+            const { unmount } = renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: 'Test' } });
+            (0, vitest_1.expect)(() => unmount()).not.toThrow();
+        });
+        (0, vitest_1.it)('should recreate debounced function when onFilterChange changes', () => {
+            const firstOnFilterChange = vitest_1.vi.fn();
+            const secondOnFilterChange = vitest_1.vi.fn();
+            const { rerender } = (0, react_1.render)(React.createElement(filters_1.TableFilters, Object.assign({}, defaultProps, { onFilterChange: firstOnFilterChange })));
+            const nameInput = react_1.screen.getByTestId('input-name');
+            react_1.fireEvent.change(nameInput, { target: { value: 'Test1' } });
+            (0, vitest_1.expect)(firstOnFilterChange).toHaveBeenCalledWith('name', 'Test1');
+            rerender(React.createElement(filters_1.TableFilters, Object.assign({}, defaultProps, { onFilterChange: secondOnFilterChange })));
+            react_1.fireEvent.change(nameInput, { target: { value: 'Test2' } });
+            (0, vitest_1.expect)(secondOnFilterChange).toHaveBeenCalledWith('name', 'Test2');
+        });
+    });
+    (0, vitest_1.describe)('Multiple Filters', () => {
+        (0, vitest_1.it)('should render single filter correctly', () => {
+            const filters = [
+                {
+                    key: 'search',
+                    placeholder: 'Search',
+                    type: constants_1.FILTER_TYPES.INPUT
+                }
+            ];
+            renderComponent({ filters });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-search')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getAllByTestId('icon-search')).toHaveLength(1);
+        });
+        (0, vitest_1.it)('should render multiple filters correctly', () => {
+            const filters = [
+                { key: 'name', placeholder: 'Name', type: constants_1.FILTER_TYPES.INPUT },
+                { key: 'email', placeholder: 'Email', type: constants_1.FILTER_TYPES.INPUT },
+                { key: 'phone', placeholder: 'Phone', type: constants_1.FILTER_TYPES.INPUT }
+            ];
+            renderComponent({ filters });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-email')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-phone')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getAllByTestId('icon-search')).toHaveLength(3);
+        });
+        (0, vitest_1.it)('should handle filter order correctly', () => {
+            const filters = [
+                { key: 'first', placeholder: 'First', type: constants_1.FILTER_TYPES.INPUT },
+                { key: 'second', placeholder: 'Second', type: constants_1.FILTER_TYPES.INPUT }
+            ];
+            renderComponent({ filters });
+            const inputs = react_1.screen.getAllByRole('textbox');
+            (0, vitest_1.expect)(inputs[0]).toHaveAttribute('name', 'first');
+            (0, vitest_1.expect)(inputs[1]).toHaveAttribute('name', 'second');
+        });
+    });
+    (0, vitest_1.describe)('Filter Types', () => {
+        (0, vitest_1.it)('should render INPUT type filter', () => {
+            const filters = [
+                {
+                    key: 'test',
+                    placeholder: 'Test',
+                    type: constants_1.FILTER_TYPES.INPUT
+                }
+            ];
+            renderComponent({ filters });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-test')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should handle unknown filter type gracefully', () => {
+            const filters = [
+                {
+                    key: 'test',
+                    placeholder: 'Test',
+                    type: 'unknown'
+                }
+            ];
+            renderComponent({ filters });
+            // Should still render the container but not the filter
+            (0, vitest_1.expect)(react_1.screen.getByTestId('flex-container')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.queryByTestId('input-test')).not.toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should handle missing type property', () => {
+            const filters = [
+                {
+                    key: 'test',
+                    placeholder: 'Test'
+                }
+            ];
+            renderComponent({ filters });
+            // Should handle gracefully
+            (0, vitest_1.expect)(react_1.screen.getByTestId('flex-container')).toBeInTheDocument();
+        });
+    });
+    (0, vitest_1.describe)('Edge Cases', () => {
+        (0, vitest_1.it)('should handle filter with empty key', () => {
+            const filters = [
+                {
+                    key: '',
+                    placeholder: 'Empty key',
+                    type: constants_1.FILTER_TYPES.INPUT
+                }
+            ];
+            renderComponent({ filters });
+            (0, vitest_1.expect)(react_1.screen.getByPlaceholderText('Empty key')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should handle filter with empty placeholder', () => {
+            const filters = [
+                {
+                    key: 'test',
+                    placeholder: '',
+                    type: constants_1.FILTER_TYPES.INPUT
+                }
+            ];
+            renderComponent({ filters });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-test')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should handle very long input values', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            const longValue = 'a'.repeat(1000);
+            react_1.fireEvent.change(nameInput, { target: { value: longValue } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('name', longValue);
+        });
+        (0, vitest_1.it)('should handle unicode characters', () => {
+            renderComponent();
+            const nameInput = react_1.screen.getByTestId('input-name');
+            const unicodeValue = '你好世界 🌍 مرحبا';
+            react_1.fireEvent.change(nameInput, { target: { value: unicodeValue } });
+            (0, vitest_1.expect)(mockOnFilterChange).toHaveBeenCalledWith('name', unicodeValue);
+        });
+        (0, vitest_1.it)('should handle rapid mount/unmount', () => {
+            const { unmount } = renderComponent();
+            unmount();
+            (0, vitest_1.expect)(() => renderComponent()).not.toThrow();
+        });
+    });
+    (0, vitest_1.describe)('Filter Key Generation', () => {
+        (0, vitest_1.it)('should generate unique keys for each filter', () => {
+            renderComponent();
+            const filterContainers = react_1.screen.getAllByTestId('flex-filter');
+            (0, vitest_1.expect)(filterContainers.length).toBe(2);
+        });
+        (0, vitest_1.it)('should handle duplicate filter keys', () => {
+            const filters = [
+                { key: 'test', placeholder: 'First', type: constants_1.FILTER_TYPES.INPUT },
+                { key: 'test', placeholder: 'Second', type: constants_1.FILTER_TYPES.INPUT }
+            ];
+            renderComponent({ filters });
+            const inputs = react_1.screen.getAllByTestId('input-test');
+            (0, vitest_1.expect)(inputs).toHaveLength(2);
+        });
+    });
+    (0, vitest_1.describe)('Integration Tests', () => {
+        (0, vitest_1.it)('should handle complete user flow', () => {
+            const onFilterChange = vitest_1.vi.fn();
+            renderComponent({ onFilterChange });
+            const nameInput = react_1.screen.getByTestId('input-name');
+            const emailInput = react_1.screen.getByTestId('input-email');
+            // Type in name field
+            react_1.fireEvent.change(nameInput, { target: { value: 'John' } });
+            (0, vitest_1.expect)(nameInput).toHaveValue('John');
+            // Type in email field
+            react_1.fireEvent.change(emailInput, { target: { value: 'john@test.com' } });
+            (0, vitest_1.expect)(emailInput).toHaveValue('john@test.com');
+            (0, vitest_1.expect)(onFilterChange).toHaveBeenCalledWith('name', 'John');
+            (0, vitest_1.expect)(onFilterChange).toHaveBeenCalledWith('email', 'john@test.com');
+        });
+        (0, vitest_1.it)('should maintain state through prop updates', () => {
+            const { rerender } = renderComponent({
+                filterValues: { name: 'Initial' }
+            });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toHaveValue('Initial');
+            rerender(React.createElement(filters_1.TableFilters, Object.assign({}, defaultProps, { filterValues: { name: 'Updated' } })));
+            (0, vitest_1.expect)(react_1.screen.getByTestId('input-name')).toHaveValue('Updated');
+        });
+        (0, vitest_1.it)('should handle multiple filters with different values', () => {
+            const onFilterChange = vitest_1.vi.fn();
+            const filters = [
+                { key: 'name', placeholder: 'Name', type: constants_1.FILTER_TYPES.INPUT },
+                { key: 'email', placeholder: 'Email', type: constants_1.FILTER_TYPES.INPUT },
+                { key: 'phone', placeholder: 'Phone', type: constants_1.FILTER_TYPES.INPUT }
+            ];
+            renderComponent({ filters, onFilterChange });
+            react_1.fireEvent.change(react_1.screen.getByTestId('input-name'), {
+                target: { value: 'John' }
+            });
+            react_1.fireEvent.change(react_1.screen.getByTestId('input-email'), {
+                target: { value: 'john@test.com' }
+            });
+            react_1.fireEvent.change(react_1.screen.getByTestId('input-phone'), {
+                target: { value: '1234567890' }
+            });
+            (0, vitest_1.expect)(onFilterChange).toHaveBeenCalledWith('name', 'John');
+            (0, vitest_1.expect)(onFilterChange).toHaveBeenCalledWith('email', 'john@test.com');
+            (0, vitest_1.expect)(onFilterChange).toHaveBeenCalledWith('phone', '1234567890');
+        });
+    });
+});