@akinon/ai-modal-table 1.0.0

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

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

package/dist/esm/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/esm/ai-table/components/__tests__/filters.test.js

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