@akinon/ai-modal-table 1.0.0

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

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