@akinon/ai-modal-table 1.0.0

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

@@ -0,0 +1,382 @@
+"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 });
+require("@testing-library/jest-dom/vitest");
+const react_1 = require("@testing-library/react");
+const react_2 = require("react");
+const vitest_1 = require("vitest");
+const constants_1 = require("../../constants");
+const row_actions_1 = require("../row-actions");
+vitest_1.vi.mock('@akinon/ui-button', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Button: (_a) => {
+        var { children, icon, onClick, className, disabled } = _a, props = __rest(_a, ["children", "icon", "onClick", "className", "disabled"]);
+        return (react_2.default.createElement("button", Object.assign({ onClick: onClick, className: className, disabled: disabled, "data-testid": `button-${icon}`, "data-icon": icon }, props), children));
+    }
+}));
+vitest_1.vi.mock('@akinon/ui-layout', () => ({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    Flex: (_a) => {
+        var { children } = _a, props = __rest(_a, ["children"]);
+        return (react_2.default.createElement("div", Object.assign({ "data-testid": "flex" }, props), children));
+    }
+}));
+vitest_1.vi.mock('@akinon/ui-theme', () => ({
+    useToken: () => ({
+        token: { colorBorder: '#ccc' },
+        hashId: 'hash-id'
+    }),
+    getPrefixCls: vitest_1.vi.fn(cls => `ant-${cls}`)
+}));
+vitest_1.vi.mock('@ant-design/cssinjs', () => ({
+    useStyleRegister: vitest_1.vi.fn((_config, cb) => {
+        cb();
+        return (node) => node;
+    })
+}));
+(0, vitest_1.describe)('ActionButtons', () => {
+    const defaultProps = {
+        hasEdit: false,
+        isEditing: false,
+        isSelected: false,
+        rowId: 1,
+        setIsEditingPk: vitest_1.vi.fn(),
+        onToggleSelection: vitest_1.vi.fn(),
+        customActionButtons: undefined
+    };
+    (0, vitest_1.beforeEach)(() => {
+        vitest_1.vi.clearAllMocks();
+    });
+    const renderComponent = (props = {}) => {
+        return (0, react_1.render)(react_2.default.createElement(row_actions_1.ActionButtons, Object.assign({}, defaultProps, props)));
+    };
+    (0, vitest_1.describe)('Rendering', () => {
+        (0, vitest_1.it)('should render flex container', () => {
+            renderComponent();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('flex')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should always render selection button', () => {
+            renderComponent();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should render edit button when hasEdit is true', () => {
+            renderComponent({ hasEdit: true });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-edit')).toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should not render edit button when hasEdit is false', () => {
+            renderComponent({ hasEdit: false });
+            (0, vitest_1.expect)(react_1.screen.queryByTestId('button-edit')).not.toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should render custom action buttons when provided', () => {
+            const customActionButtons = vitest_1.vi.fn(() => (react_2.default.createElement("div", { "data-testid": "custom-button" }, "Custom Action")));
+            renderComponent({ customActionButtons });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('custom-button')).toBeInTheDocument();
+            (0, vitest_1.expect)(customActionButtons).toHaveBeenCalledWith(1);
+        });
+        (0, vitest_1.it)('should not render custom action buttons when not provided', () => {
+            renderComponent({ customActionButtons: undefined });
+            (0, vitest_1.expect)(react_1.screen.queryByTestId('custom-button')).not.toBeInTheDocument();
+        });
+        (0, vitest_1.it)('should render multiple buttons in correct order', () => {
+            renderComponent({ hasEdit: true });
+            const buttons = react_1.screen.getAllByRole('button');
+            // Should have edit button and selection button
+            (0, vitest_1.expect)(buttons.length).toBeGreaterThanOrEqual(2);
+        });
+    });
+    (0, vitest_1.describe)('Selection Button', () => {
+        (0, vitest_1.it)('should call onToggleSelection when selection button is clicked', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            renderComponent({ onToggleSelection, rowId: 1 });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledWith(1);
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledTimes(1);
+        });
+        (0, vitest_1.it)('should pass correct rowId to onToggleSelection', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            renderComponent({ onToggleSelection, rowId: 'custom-id' });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledWith('custom-id');
+        });
+        (0, vitest_1.it)('should apply selected styles when isSelected is true', () => {
+            renderComponent({ isSelected: true });
+            const button = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(button).toHaveClass('bg-green-600');
+            (0, vitest_1.expect)(button).toHaveClass('border-green-600');
+        });
+        (0, vitest_1.it)('should not apply selected styles when isSelected is false', () => {
+            renderComponent({ isSelected: false });
+            const button = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(button).not.toHaveClass('bg-green-600');
+            (0, vitest_1.expect)(button).not.toHaveClass('border-green-600');
+        });
+        (0, vitest_1.it)('should have proper default styles for selection button', () => {
+            renderComponent({ isSelected: false });
+            const button = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(button).toHaveClass('border');
+            (0, vitest_1.expect)(button).toHaveClass('border-ebonyClay-200');
+            (0, vitest_1.expect)(button).toHaveClass('bg-ebonyClay-400');
+            (0, vitest_1.expect)(button).toHaveClass('h-7');
+        });
+    });
+    (0, vitest_1.describe)('Edit Button', () => {
+        (0, vitest_1.it)('should call setIsEditingPk with rowId when edit button is clicked and not editing', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            renderComponent({
+                hasEdit: true,
+                isEditing: false,
+                rowId: 1,
+                setIsEditingPk
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith(1);
+        });
+        (0, vitest_1.it)('should call setIsEditingPk with IS_EDITING_INITIAL_VALUE when edit button is clicked and already editing', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            renderComponent({
+                hasEdit: true,
+                isEditing: true,
+                rowId: 1,
+                setIsEditingPk
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith(constants_1.IS_EDITING_INITIAL_VALUE);
+        });
+        (0, vitest_1.it)('should pass correct rowId to setIsEditingPk', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            renderComponent({
+                hasEdit: true,
+                isEditing: false,
+                rowId: 'custom-id',
+                setIsEditingPk
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith('custom-id');
+        });
+        (0, vitest_1.it)('should have proper styles for edit button', () => {
+            renderComponent({ hasEdit: true });
+            const button = react_1.screen.getByTestId('button-edit');
+            (0, vitest_1.expect)(button).toHaveClass('border');
+            (0, vitest_1.expect)(button).toHaveClass('border-ebonyClay-200');
+            (0, vitest_1.expect)(button).toHaveClass('bg-ebonyClay-400');
+            (0, vitest_1.expect)(button).toHaveClass('h-7');
+        });
+        (0, vitest_1.it)('should have correct icon for edit button', () => {
+            renderComponent({ hasEdit: true });
+            const button = react_1.screen.getByTestId('button-edit');
+            (0, vitest_1.expect)(button).toHaveAttribute('data-icon', 'edit');
+        });
+        (0, vitest_1.it)('should have correct icon for selection button', () => {
+            renderComponent();
+            const button = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(button).toHaveAttribute('data-icon', 'katalogkontrol');
+        });
+    });
+    (0, vitest_1.describe)('Event Handling', () => {
+        (0, vitest_1.it)('should stop event propagation on selection button click', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            renderComponent({ onToggleSelection });
+            const button = react_1.screen.getByTestId('button-katalogkontrol');
+            react_1.fireEvent.click(button);
+            // Event propagation should be stopped (via fireEvent behavior)
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalled();
+        });
+        (0, vitest_1.it)('should only call onToggleSelection, not setIsEditingPk on selection button click', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            const setIsEditingPk = vitest_1.vi.fn();
+            renderComponent({ onToggleSelection, setIsEditingPk, hasEdit: true });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledTimes(1);
+            (0, vitest_1.expect)(setIsEditingPk).not.toHaveBeenCalled();
+        });
+    });
+    (0, vitest_1.describe)('Multiple Row IDs', () => {
+        (0, vitest_1.it)('should handle numeric rowId', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            renderComponent({ rowId: 42, onToggleSelection });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledWith(42);
+        });
+        (0, vitest_1.it)('should handle string rowId', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            renderComponent({ rowId: 'row-uuid-123', onToggleSelection });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledWith('row-uuid-123');
+        });
+        (0, vitest_1.it)('should handle rowId in edit button click', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            renderComponent({
+                rowId: 'uuid-edit',
+                hasEdit: true,
+                isEditing: false,
+                setIsEditingPk
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith('uuid-edit');
+        });
+    });
+    (0, vitest_1.describe)('Custom Action Buttons', () => {
+        (0, vitest_1.it)('should call customActionButtons with correct rowId', () => {
+            const customActionButtons = vitest_1.vi.fn(() => (react_2.default.createElement("div", { "data-testid": "custom" }, "Custom")));
+            renderComponent({ customActionButtons, rowId: 'test-row' });
+            (0, vitest_1.expect)(customActionButtons).toHaveBeenCalledWith('test-row');
+        });
+        (0, vitest_1.it)('should render custom buttons before edit button when both exist', () => {
+            const customActionButtons = vitest_1.vi.fn(() => (react_2.default.createElement("button", { "data-testid": "custom-btn" }, "Custom")));
+            renderComponent({ customActionButtons, hasEdit: true });
+            const customBtn = react_1.screen.getByTestId('custom-btn');
+            const editBtn = react_1.screen.getByTestId('button-edit');
+            (0, vitest_1.expect)(customBtn).toBeInTheDocument();
+            (0, vitest_1.expect)(editBtn).toBeInTheDocument();
+            // Custom button should come before edit button in DOM
+            (0, vitest_1.expect)(customBtn.compareDocumentPosition(editBtn)).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+        });
+        (0, vitest_1.it)('should not break when customActionButtons returns null', () => {
+            const customActionButtons = vitest_1.vi.fn(() => null);
+            renderComponent({ customActionButtons });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+        });
+    });
+    (0, vitest_1.describe)('Editing State', () => {
+        (0, vitest_1.it)('should toggle editing state on edit button click', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            const { rerender } = renderComponent({
+                hasEdit: true,
+                isEditing: false,
+                rowId: 1,
+                setIsEditingPk
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith(1);
+            // Simulate editing state change
+            rerender(react_2.default.createElement(row_actions_1.ActionButtons, Object.assign({}, defaultProps, { hasEdit: true, isEditing: true, rowId: 1, setIsEditingPk: setIsEditingPk })));
+            // Click again to exit editing
+            setIsEditingPk.mockClear();
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith(constants_1.IS_EDITING_INITIAL_VALUE);
+        });
+    });
+    (0, vitest_1.describe)('Integration Tests', () => {
+        (0, vitest_1.it)('should handle all button interactions together', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            const onToggleSelection = vitest_1.vi.fn();
+            const customActionButtons = vitest_1.vi.fn(() => (react_2.default.createElement("button", { "data-testid": "custom" }, "Custom")));
+            renderComponent({
+                hasEdit: true,
+                isEditing: false,
+                isSelected: false,
+                rowId: 'integration-test',
+                setIsEditingPk,
+                onToggleSelection,
+                customActionButtons
+            });
+            // Click custom button
+            react_1.fireEvent.click(react_1.screen.getByTestId('custom'));
+            // Click edit button
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith('integration-test');
+            // Click selection button
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledWith('integration-test');
+            // Verify all callbacks were called correctly
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledTimes(1);
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledTimes(1);
+        });
+        (0, vitest_1.it)('should render correctly with all features enabled', () => {
+            const customActionButtons = vitest_1.vi.fn(() => (react_2.default.createElement("button", { "data-testid": "custom" }, "Action")));
+            renderComponent({
+                hasEdit: true,
+                isEditing: false,
+                isSelected: true,
+                customActionButtons
+            });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('custom')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-edit')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-katalogkontrol')).toHaveClass('bg-green-600');
+        });
+        (0, vitest_1.it)('should render correctly with minimal features', () => {
+            renderComponent({
+                hasEdit: false,
+                customActionButtons: undefined
+            });
+            (0, vitest_1.expect)(react_1.screen.queryByTestId('button-edit')).not.toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.queryByTestId('custom')).not.toBeInTheDocument();
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-katalogkontrol')).toBeInTheDocument();
+        });
+    });
+    (0, vitest_1.describe)('Styling', () => {
+        (0, vitest_1.it)('should apply correct button size class', () => {
+            renderComponent({ hasEdit: true });
+            const editBtn = react_1.screen.getByTestId('button-edit');
+            const selectionBtn = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(editBtn).toHaveClass('h-7');
+            (0, vitest_1.expect)(selectionBtn).toHaveClass('h-7');
+        });
+        (0, vitest_1.it)('should apply correct border classes', () => {
+            renderComponent({ hasEdit: true });
+            const editBtn = react_1.screen.getByTestId('button-edit');
+            const selectionBtn = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(editBtn).toHaveClass('border', 'border-ebonyClay-200');
+            (0, vitest_1.expect)(selectionBtn).toHaveClass('border', 'border-ebonyClay-200');
+        });
+        (0, vitest_1.it)('should apply background color correctly', () => {
+            renderComponent({ hasEdit: true, isSelected: false });
+            const editBtn = react_1.screen.getByTestId('button-edit');
+            const selectionBtn = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(editBtn).toHaveClass('bg-ebonyClay-400');
+            (0, vitest_1.expect)(selectionBtn).toHaveClass('bg-ebonyClay-400');
+        });
+        (0, vitest_1.it)('should override background when selected', () => {
+            renderComponent({ isSelected: true });
+            const selectionBtn = react_1.screen.getByTestId('button-katalogkontrol');
+            (0, vitest_1.expect)(selectionBtn).toHaveClass('bg-green-600');
+            (0, vitest_1.expect)(selectionBtn).toHaveClass('border-green-600');
+        });
+    });
+    (0, vitest_1.describe)('Props Combinations', () => {
+        (0, vitest_1.it)('should handle edit=true, select=true combination', () => {
+            renderComponent({ hasEdit: true, isSelected: true });
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-edit')).toHaveClass('bg-ebonyClay-400');
+            (0, vitest_1.expect)(react_1.screen.getByTestId('button-katalogkontrol')).toHaveClass('bg-green-600');
+        });
+        (0, vitest_1.it)('should handle edit=true, editing=true combination', () => {
+            const setIsEditingPk = vitest_1.vi.fn();
+            renderComponent({
+                hasEdit: true,
+                isEditing: true,
+                setIsEditingPk
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith(constants_1.IS_EDITING_INITIAL_VALUE);
+        });
+        (0, vitest_1.it)('should handle custom, edit, and select all together', () => {
+            const onToggleSelection = vitest_1.vi.fn();
+            const setIsEditingPk = vitest_1.vi.fn();
+            const customActionButtons = vitest_1.vi.fn(() => (react_2.default.createElement("button", { "data-testid": "custom" }, "Custom")));
+            renderComponent({
+                hasEdit: true,
+                isEditing: false,
+                isSelected: false,
+                onToggleSelection,
+                setIsEditingPk,
+                customActionButtons
+            });
+            react_1.fireEvent.click(react_1.screen.getByTestId('custom'));
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-edit'));
+            react_1.fireEvent.click(react_1.screen.getByTestId('button-katalogkontrol'));
+            (0, vitest_1.expect)(setIsEditingPk).toHaveBeenCalledWith(vitest_1.expect.anything());
+            (0, vitest_1.expect)(onToggleSelection).toHaveBeenCalledWith(vitest_1.expect.anything());
+        });
+    });
+});