@akinon/ai-modal-table 1.0.0

package/dist/esm/ai-table/__tests__/index.test.js

@@ -0,0 +1,346 @@
+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;
+};
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { AiTable } from '../index';
+// Mock sub-components
+vi.mock('../components/content', () => ({
+    TableContent: ({ data, selectedRows, onToggleSelection, rowKey }) => (React.createElement("div", { "data-testid": "table-content" },
+        data.map((row) => {
+            const customId = rowKey
+                ? row[rowKey]
+                : row.id;
+            return (React.createElement("div", { key: customId, "data-testid": `row-${customId}`, onClick: () => onToggleSelection(customId) }, JSON.stringify(row)));
+        }),
+        React.createElement("div", { "data-testid": "selected-count" }, selectedRows.length)))
+}));
+vi.mock('../components/filters', () => ({
+    TableFilters: ({ filters, onFilterChange }) => (React.createElement("div", { "data-testid": "table-filters" }, filters.map(filter => (React.createElement("input", { key: filter.key, "data-testid": `filter-${filter.key}`, onChange: e => onFilterChange(filter.key, e.target.value), placeholder: filter.key })))))
+}));
+vi.mock('../components/footer', () => ({
+    TableFooter: ({ selectedCount, isSubmitting, onSubmitAll, onSubmitSelected }) => (React.createElement("div", { "data-testid": "table-footer" },
+        React.createElement("div", { "data-testid": "selected-count" }, selectedCount),
+        React.createElement("button", { "data-testid": "submit-all", onClick: onSubmitAll, disabled: isSubmitting }, "Submit All"),
+        React.createElement("button", { "data-testid": "submit-selected", onClick: onSubmitSelected, disabled: isSubmitting || selectedCount === 0 }, "Submit Selected")))
+}));
+vi.mock('../components/pagination', () => ({
+    TablePagination: ({ currentPage, pageSize, total, onPageChange, onPageSizeChange }) => (React.createElement("div", { "data-testid": "table-pagination" },
+        React.createElement("div", { "data-testid": "current-page" }, currentPage),
+        React.createElement("div", { "data-testid": "page-size" }, pageSize),
+        React.createElement("div", { "data-testid": "total" }, total),
+        React.createElement("button", { "data-testid": "prev-page", onClick: () => onPageChange(currentPage - 1) }, "Prev"),
+        React.createElement("button", { "data-testid": "next-page", onClick: () => onPageChange(currentPage + 1) }, "Next"),
+        React.createElement("select", { "data-testid": "page-size-select", onChange: e => onPageSizeChange(Number(e.target.value)), value: pageSize },
+            React.createElement("option", { value: "10" }, "10"),
+            React.createElement("option", { value: "20" }, "20"))))
+}));
+vi.mock('@akinon/ui-ai-spinner', () => ({
+    AiSpinner: () => React.createElement("div", { "data-testid": "ai-spinner" }, "Loading...")
+}));
+vi.mock('@akinon/ui-button', () => ({
+    Button: (_a) => {
+        var { children, onClick } = _a, props = __rest(_a, ["children", "onClick"]);
+        return (React.createElement("button", Object.assign({ onClick: onClick }, props), children));
+    }
+}));
+vi.mock('@akinon/ui-layout', () => ({
+    Flex: (_a) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return (React.createElement("div", Object.assign({}, props), children));
+    }
+}));
+describe('AiTable', () => {
+    const mockData = [
+        { pk: 1, id: 1, name: 'Ali', category: 'Electronics' },
+        { pk: 2, id: 2, name: 'Ayşe', category: 'Clothing' },
+        { pk: 3, id: 3, name: 'Mehmet', category: 'Electronics' }
+    ];
+    const mockColumns = [
+        { title: 'ID', dataIndex: 'id' },
+        { title: 'Name', dataIndex: 'name' },
+        { title: 'Category', dataIndex: 'category' }
+    ];
+    const defaultProps = {
+        data: mockData,
+        columns: mockColumns,
+        selectedRows: [],
+        onChangeSelectedRows: vi.fn(),
+        onEdit: vi.fn(),
+        onSubmitAllData: vi.fn(),
+        onSubmitSelectedData: vi.fn(),
+        isLoading: false,
+        isSubmitting: false,
+        submitAllLabel: 'Submit All',
+        submitSelectedLabel: 'Submit Selected',
+        filters: []
+    };
+    describe('Rendering', () => {
+        it('should render loading spinner when isLoading is true', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { isLoading: true })));
+            expect(screen.getByTestId('ai-spinner')).toBeInTheDocument();
+        });
+        it('should render all components when data is loaded', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps)));
+            expect(screen.getByTestId('table-filters')).toBeInTheDocument();
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+            expect(screen.getByTestId('table-footer')).toBeInTheDocument();
+            expect(screen.getByTestId('table-pagination')).toBeInTheDocument();
+        });
+        it('should render custom class name when provided', () => {
+            const { container } = render(React.createElement(AiTable, Object.assign({}, defaultProps, { tableClassName: "custom-class" })));
+            expect(container.querySelector('.custom-class')).toBeInTheDocument();
+        });
+        it('should render expand/collapse buttons when mapperConfig is provided', () => {
+            const mapperConfig = {
+                dataIndex: 'attributes',
+                onAddItem: vi.fn(),
+                onRemoveItem: vi.fn(),
+                onItemChange: vi.fn()
+            };
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { mapperConfig: mapperConfig })));
+            expect(screen.getByText('Expand All')).toBeInTheDocument();
+            expect(screen.getByText('Collapse All')).toBeInTheDocument();
+        });
+        it('should not render expand/collapse buttons when mapperConfig is not provided', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { mapperConfig: undefined })));
+            expect(screen.queryByText('Expand All')).not.toBeInTheDocument();
+            expect(screen.queryByText('Collapse All')).not.toBeInTheDocument();
+        });
+    });
+    describe('Data Display', () => {
+        it('should display all data on initial render', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps)));
+            expect(screen.getByTestId('row-1')).toBeInTheDocument();
+            expect(screen.getByTestId('row-2')).toBeInTheDocument();
+            expect(screen.getByTestId('row-3')).toBeInTheDocument();
+        });
+        it('should display empty table when data is empty', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { data: [] })));
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+            expect(screen.queryByTestId('row-1')).not.toBeInTheDocument();
+        });
+        it('should use custom rowKey when provided', () => {
+            const customKeyData = [
+                { userId: 'user-1', name: 'Ali' },
+                { userId: 'user-2', name: 'Ayşe' }
+            ];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { data: customKeyData, rowKey: "userId" })));
+            expect(screen.getByTestId('row-user-1')).toBeInTheDocument();
+            expect(screen.getByTestId('row-user-2')).toBeInTheDocument();
+        });
+    });
+    describe('Filtering', () => {
+        it('should call onFilterChange when filter input changes', async () => {
+            const user = userEvent.setup();
+            const mockFilters = [{ key: 'name', type: 'text' }];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { filters: mockFilters })));
+            const filterInput = screen.getByTestId('filter-name');
+            await user.type(filterInput, 'Ali');
+            expect(screen.getByTestId('row-1')).toBeInTheDocument();
+        });
+        it('should reset to first page when filter changes', async () => {
+            const user = userEvent.setup();
+            const mockFilters = [{ key: 'category', type: 'text' }];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { filters: mockFilters })));
+            // First change page
+            const nextPageBtn = screen.getByTestId('next-page');
+            await user.click(nextPageBtn);
+            let currentPage = screen.getAllByTestId('current-page')[0];
+            expect(currentPage).toHaveTextContent('2');
+            // Then apply filter
+            const filterInput = screen.getByTestId('filter-category');
+            await user.type(filterInput, 'Electronics');
+            // Should reset to page 1
+            currentPage = screen.getAllByTestId('current-page')[0];
+            expect(currentPage).toHaveTextContent('1');
+        });
+        it('should handle multiple filters simultaneously', async () => {
+            const user = userEvent.setup();
+            const mockFilters = [
+                { key: 'name', type: 'text' },
+                { key: 'category', type: 'text' }
+            ];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { filters: mockFilters })));
+            const nameFilter = screen.getByTestId('filter-name');
+            const categoryFilter = screen.getByTestId('filter-category');
+            await user.type(nameFilter, 'Ali');
+            await user.type(categoryFilter, 'Electronics');
+            expect(screen.getByTestId('row-1')).toBeInTheDocument();
+        });
+    });
+    describe('Pagination', () => {
+        const largeData = Array.from({ length: 25 }, (_, i) => ({
+            id: i + 1,
+            name: `Item ${i + 1}`,
+            category: 'Test'
+        }));
+        it('should display total count correctly', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { data: largeData })));
+            expect(screen.getByTestId('total')).toHaveTextContent('25');
+        });
+        it('should change page when next page button is clicked', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { data: largeData })));
+            const nextPageBtn = screen.getByTestId('next-page');
+            await user.click(nextPageBtn);
+            expect(screen.getAllByTestId('current-page')[0]).toHaveTextContent('2');
+        });
+        it('should change page size when page size select changes', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { data: largeData })));
+            const pageSizeSelect = screen.getByTestId('page-size-select');
+            await user.selectOptions(pageSizeSelect, '20');
+            expect(screen.getByTestId('page-size')).toHaveTextContent('20');
+        });
+        it('should handle edge case when on last page', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { data: largeData })));
+            expect(screen.getByTestId('total')).toHaveTextContent('25');
+            expect(screen.getByTestId('current-page')).toHaveTextContent('1');
+        });
+    });
+    describe('Row Selection', () => {
+        it('should call onChangeSelectedRows when row selection changes', async () => {
+            const user = userEvent.setup();
+            const onChangeSelectedRows = vi.fn();
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { onChangeSelectedRows: onChangeSelectedRows })));
+            const row1 = screen.getByTestId('row-1');
+            await user.click(row1);
+            expect(onChangeSelectedRows).toHaveBeenCalled();
+        });
+        it('should maintain selected rows state', () => {
+            const selectedRows = [1];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { selectedRows: selectedRows })));
+            const footerElement = screen.getByTestId('table-footer');
+            const selectedCountElement = within(footerElement).getByTestId('selected-count');
+            expect(selectedCountElement).toHaveTextContent('1');
+        });
+        it('should display correct selected count in footer', () => {
+            const selectedRows = [1, 2];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { selectedRows: selectedRows })));
+            const footerSelectedCount = screen
+                .getAllByTestId('selected-count')
+                .find(el => { var _a; return ((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute('data-testid')) === 'table-footer'; });
+            expect(footerSelectedCount).toHaveTextContent('2');
+        });
+        it('should disable submit selected button when no rows are selected', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { selectedRows: [] })));
+            const submitSelectedBtn = screen.getByTestId('submit-selected');
+            expect(submitSelectedBtn).toBeDisabled();
+        });
+        it('should enable submit selected button when rows are selected', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { selectedRows: [1, 2] })));
+            const submitSelectedBtn = screen.getByTestId('submit-selected');
+            expect(submitSelectedBtn).toBeEnabled();
+        });
+    });
+    describe('Form Submission', () => {
+        it('should call onSubmitAllData when submit all is clicked', async () => {
+            const user = userEvent.setup();
+            const onSubmitAllData = vi.fn();
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { onSubmitAllData: onSubmitAllData })));
+            const submitAllBtn = screen.getByTestId('submit-all');
+            await user.click(submitAllBtn);
+            expect(onSubmitAllData).toHaveBeenCalled();
+        });
+        it('should call onSubmitSelectedData when submit selected is clicked', async () => {
+            const user = userEvent.setup();
+            const onSubmitSelectedData = vi.fn();
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { selectedRows: [1, 2], onSubmitSelectedData: onSubmitSelectedData })));
+            const submitSelectedBtn = screen.getByTestId('submit-selected');
+            await user.click(submitSelectedBtn);
+            expect(onSubmitSelectedData).toHaveBeenCalled();
+        });
+        it('should disable submit buttons when isSubmitting is true', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { isSubmitting: true })));
+            expect(screen.getByTestId('submit-all')).toBeDisabled();
+            expect(screen.getByTestId('submit-selected')).toBeDisabled();
+        });
+        it('should display custom submit labels when provided', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { submitAllLabel: "Save All", submitSelectedLabel: "Save Selected" })));
+            expect(screen.getByText('Submit All')).toBeInTheDocument();
+            expect(screen.getByText('Submit Selected')).toBeInTheDocument();
+        });
+    });
+    describe('Custom Action Buttons', () => {
+        it('should render custom action buttons when provided', () => {
+            const customActionButtons = (rowId) => (React.createElement("button", { key: "edit", onClick: vi.fn() },
+                "Edit ",
+                rowId));
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { customActionButtons: customActionButtons })));
+            // Note: Since TableContent is mocked, we're verifying the prop is passed
+            const tableContent = screen.getByTestId('table-content');
+            expect(tableContent).toBeInTheDocument();
+        });
+    });
+    describe('Mapper Configuration', () => {
+        it('should pass mapper configuration to table content', () => {
+            const mapperConfig = {
+                dataIndex: 'attributes',
+                onAddItem: vi.fn(),
+                onRemoveItem: vi.fn(),
+                onItemChange: vi.fn()
+            };
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { mapperConfig: mapperConfig })));
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+        it('should handle expand all button click', async () => {
+            const user = userEvent.setup();
+            const mapperConfig = {
+                dataIndex: 'attributes',
+                onAddItem: vi.fn(),
+                onRemoveItem: vi.fn(),
+                onItemChange: vi.fn()
+            };
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { mapperConfig: mapperConfig })));
+            const expandAllBtn = screen.getByText('Expand All');
+            await user.click(expandAllBtn);
+            expect(expandAllBtn).toBeInTheDocument();
+        });
+        it('should handle collapse all button click', async () => {
+            const user = userEvent.setup();
+            const mapperConfig = {
+                dataIndex: 'attributes',
+                onAddItem: vi.fn(),
+                onRemoveItem: vi.fn(),
+                onItemChange: vi.fn()
+            };
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { mapperConfig: mapperConfig })));
+            const collapseAllBtn = screen.getByText('Collapse All');
+            await user.click(collapseAllBtn);
+            expect(collapseAllBtn).toBeInTheDocument();
+        });
+    });
+    describe('Edit Functionality', () => {
+        it('should pass onEdit callback to table content', () => {
+            const onEdit = vi.fn();
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { onEdit: onEdit })));
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+        it('should pass editDataIndexes to table content', () => {
+            const editDataIndexes = ['0', '2'];
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { editDataIndexes: editDataIndexes })));
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle empty columns array', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { columns: [] })));
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+        it('should handle zero columns', () => {
+            render(React.createElement(AiTable, Object.assign({}, defaultProps, { columns: [], data: [{ id: 1 }] })));
+            expect(screen.getByTestId('table-content')).toBeInTheDocument();
+        });
+    });
+});