@akinon/ai-modal-table 1.0.0

package/dist/esm/ai-table/components/__tests__/footer.test.js

@@ -0,0 +1,463 @@
+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 { TableFooter } from '../footer';
+vi.mock('@akinon/ui-button', () => ({
+    Button: (_a) => {
+        var { onClick, disabled, loading, type, className, children } = _a, props = __rest(_a, ["onClick", "disabled", "loading", "type", "className", "children"]);
+        return (React.createElement("button", Object.assign({ onClick: onClick, disabled: disabled, "data-loading": loading, "data-type": type, className: className }, props), children));
+    }
+}));
+vi.mock('@akinon/ui-layout', () => ({
+    Flex: (_a) => {
+        var { children, justify, gap } = _a, props = __rest(_a, ["children", "justify", "gap"]);
+        return (React.createElement("div", Object.assign({ "data-testid": "flex-footer", "data-justify": justify, "data-gap": gap }, props), children));
+    }
+}));
+describe('TableFooter', () => {
+    const mockOnSubmitAll = vi.fn();
+    const mockOnSubmitSelected = vi.fn();
+    const defaultProps = {
+        isSubmitting: false,
+        selectedCount: 0,
+        submitAllLabel: 'Submit All',
+        submitSelectedLabel: 'Submit Selected',
+        onSubmitAll: mockOnSubmitAll,
+        onSubmitSelected: mockOnSubmitSelected
+    };
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+    const renderComponent = (props = {}) => {
+        return render(React.createElement(TableFooter, Object.assign({}, defaultProps, props)));
+    };
+    describe('Rendering', () => {
+        it('should render Flex container', () => {
+            renderComponent();
+            expect(screen.getByTestId('flex-footer')).toBeInTheDocument();
+        });
+        it('should render two buttons', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            expect(buttons).toHaveLength(2);
+        });
+        it('should have correct Flex props', () => {
+            renderComponent();
+            const flexContainer = screen.getByTestId('flex-footer');
+            expect(flexContainer).toHaveAttribute('data-justify', 'end');
+            expect(flexContainer).toHaveAttribute('data-gap', '10');
+        });
+    });
+    describe('Button Labels', () => {
+        it('should render submitAllLabel on first button', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveTextContent('Submit All');
+        });
+        it('should render submitSelectedLabel on second button', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected');
+        });
+        it('should display custom submitAllLabel', () => {
+            renderComponent({ submitAllLabel: 'Custom All' });
+            expect(screen.getByText('Custom All')).toBeInTheDocument();
+        });
+        it('should display custom submitSelectedLabel', () => {
+            renderComponent({ submitSelectedLabel: 'Custom Selected' });
+            expect(screen.getByText('Custom Selected')).toBeInTheDocument();
+        });
+        it('should display selected count when selectedCount > 0', () => {
+            renderComponent({ selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (5)');
+        });
+        it('should not display count when selectedCount is 0', () => {
+            renderComponent({ selectedCount: 0 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected');
+            expect(buttons[1]).not.toHaveTextContent('(0)');
+        });
+        it('should update count when selectedCount changes', () => {
+            const { rerender } = renderComponent({ selectedCount: 3 });
+            let buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (3)');
+            rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { selectedCount: 10 })));
+            buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (10)');
+        });
+    });
+    describe('Button Styling', () => {
+        it('should have uppercase and semibold classes on both buttons', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveClass('uppercase', 'font-semibold');
+            expect(buttons[1]).toHaveClass('uppercase', 'font-semibold');
+        });
+        it('should have primary type on second button', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).not.toHaveAttribute('data-type', 'primary');
+            expect(buttons[1]).toHaveAttribute('data-type', 'primary');
+        });
+        it('should not have type on first button', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).not.toHaveAttribute('data-type');
+        });
+    });
+    describe('Submit All Button', () => {
+        it('should not be disabled when isSubmitting is false', () => {
+            renderComponent({ isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).not.toBeDisabled();
+        });
+        it('should be disabled when isSubmitting is true', () => {
+            renderComponent({ isSubmitting: true });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toBeDisabled();
+        });
+        it('should have loading state when isSubmitting is true', () => {
+            renderComponent({ isSubmitting: true });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveAttribute('data-loading', 'true');
+        });
+        it('should not have loading state when isSubmitting is false', () => {
+            renderComponent({ isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveAttribute('data-loading', 'false');
+        });
+        it('should call onSubmitAll when clicked', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[0]);
+            expect(mockOnSubmitAll).toHaveBeenCalledOnce();
+        });
+        it('should not call onSubmitAll when disabled', () => {
+            renderComponent({ isSubmitting: true });
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[0]);
+            expect(mockOnSubmitAll).not.toHaveBeenCalled();
+        });
+        it('should handle missing onSubmitAll callback', () => {
+            renderComponent({ onSubmitAll: undefined });
+            const buttons = screen.getAllByRole('button');
+            expect(() => {
+                fireEvent.click(buttons[0]);
+            }).not.toThrow();
+        });
+    });
+    describe('Submit Selected Button', () => {
+        it('should not be disabled when selectedCount > 0 and not submitting', () => {
+            renderComponent({ selectedCount: 5, isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).not.toBeDisabled();
+        });
+        it('should be disabled when selectedCount is 0', () => {
+            renderComponent({ selectedCount: 0, isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toBeDisabled();
+        });
+        it('should be disabled when isSubmitting is true', () => {
+            renderComponent({ selectedCount: 5, isSubmitting: true });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toBeDisabled();
+        });
+        it('should be disabled when both selectedCount is 0 and isSubmitting is true', () => {
+            renderComponent({ selectedCount: 0, isSubmitting: true });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toBeDisabled();
+        });
+        it('should have loading state when isSubmitting is true', () => {
+            renderComponent({ isSubmitting: true, selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveAttribute('data-loading', 'true');
+        });
+        it('should not have loading state when isSubmitting is false', () => {
+            renderComponent({ isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveAttribute('data-loading', 'false');
+        });
+        it('should call onSubmitSelected when clicked with selection', () => {
+            renderComponent({ selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[1]);
+            expect(mockOnSubmitSelected).toHaveBeenCalledOnce();
+        });
+        it('should not call onSubmitSelected when no selection', () => {
+            renderComponent({ selectedCount: 0 });
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[1]);
+            expect(mockOnSubmitSelected).not.toHaveBeenCalled();
+        });
+        it('should handle missing onSubmitSelected callback', () => {
+            renderComponent({ onSubmitSelected: undefined, selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            expect(() => {
+                fireEvent.click(buttons[1]);
+            }).not.toThrow();
+        });
+    });
+    describe('Selected Count', () => {
+        it('should display 1 when selectedCount is 1', () => {
+            renderComponent({ selectedCount: 1 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (1)');
+        });
+        it('should display 10 when selectedCount is 10', () => {
+            renderComponent({ selectedCount: 10 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (10)');
+        });
+        it('should display 100 when selectedCount is 100', () => {
+            renderComponent({ selectedCount: 100 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (100)');
+        });
+        it('should display large number correctly', () => {
+            renderComponent({ selectedCount: 9999 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (9999)');
+        });
+        it('should enable button when selectedCount changes from 0 to 1', () => {
+            const { rerender } = renderComponent({ selectedCount: 0 });
+            let buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toBeDisabled();
+            rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { selectedCount: 1 })));
+            buttons = screen.getAllByRole('button');
+            expect(buttons[1]).not.toBeDisabled();
+        });
+        it('should disable button when selectedCount changes from 1 to 0', () => {
+            const { rerender } = renderComponent({ selectedCount: 1 });
+            let buttons = screen.getAllByRole('button');
+            expect(buttons[1]).not.toBeDisabled();
+            rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { selectedCount: 0 })));
+            buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toBeDisabled();
+        });
+    });
+    describe('Submitting State', () => {
+        it('should have both buttons with loading state when submitting', () => {
+            renderComponent({ isSubmitting: true, selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveAttribute('data-loading', 'true');
+            expect(buttons[1]).toHaveAttribute('data-loading', 'true');
+        });
+        it('should have both buttons disabled when submitting', () => {
+            renderComponent({ isSubmitting: true, selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toBeDisabled();
+            expect(buttons[1]).toBeDisabled();
+        });
+        it('should toggle submitting state', () => {
+            const { rerender } = renderComponent({
+                isSubmitting: false,
+                selectedCount: 5
+            });
+            let buttons = screen.getAllByRole('button');
+            expect(buttons[0]).not.toBeDisabled();
+            expect(buttons[1]).not.toBeDisabled();
+            rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { isSubmitting: true, selectedCount: 5 })));
+            buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toBeDisabled();
+            expect(buttons[1]).toBeDisabled();
+        });
+    });
+    describe('Callbacks', () => {
+        it('should call onSubmitAll only once per click', () => {
+            renderComponent();
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[0]);
+            fireEvent.click(buttons[0]);
+            fireEvent.click(buttons[0]);
+            expect(mockOnSubmitAll).toHaveBeenCalledTimes(3);
+        });
+        it('should call onSubmitSelected only once per click', () => {
+            renderComponent({ selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[1]);
+            fireEvent.click(buttons[1]);
+            expect(mockOnSubmitSelected).toHaveBeenCalledTimes(2);
+        });
+        it('should call correct callback for each button', () => {
+            renderComponent({ selectedCount: 5 });
+            const buttons = screen.getAllByRole('button');
+            fireEvent.click(buttons[0]);
+            expect(mockOnSubmitAll).toHaveBeenCalledOnce();
+            expect(mockOnSubmitSelected).not.toHaveBeenCalled();
+            fireEvent.click(buttons[1]);
+            expect(mockOnSubmitAll).toHaveBeenCalledOnce();
+            expect(mockOnSubmitSelected).toHaveBeenCalledOnce();
+        });
+        it('should not throw when callbacks are undefined', () => {
+            renderComponent({
+                selectedCount: 5,
+                onSubmitAll: undefined,
+                onSubmitSelected: undefined
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(() => {
+                fireEvent.click(buttons[0]);
+                fireEvent.click(buttons[1]);
+            }).not.toThrow();
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle empty labels', () => {
+            renderComponent({
+                submitAllLabel: '',
+                submitSelectedLabel: ''
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0].textContent).toBe('');
+            expect(buttons[1].textContent).toBe('');
+        });
+        it('should handle very long labels', () => {
+            const longLabel = 'a'.repeat(100);
+            renderComponent({
+                submitAllLabel: longLabel,
+                submitSelectedLabel: longLabel
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveTextContent(longLabel);
+            expect(buttons[1]).toHaveTextContent(longLabel);
+        });
+        it('should handle negative selectedCount gracefully', () => {
+            renderComponent({ selectedCount: -1 });
+            const buttons = screen.getAllByRole('button');
+            // Component only shows count when > 0, so negative counts are not shown
+            expect(buttons[1]).toHaveTextContent('Submit Selected');
+            expect(buttons[1]).not.toHaveTextContent('(-1)');
+        });
+        it('should handle special characters in labels', () => {
+            const specialLabel = '&<>"\'';
+            renderComponent({
+                submitAllLabel: specialLabel,
+                submitSelectedLabel: specialLabel
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveTextContent(specialLabel);
+            expect(buttons[1]).toHaveTextContent(specialLabel);
+        });
+        it('should handle unicode characters in labels', () => {
+            const unicodeLabel = '你好 🚀 مرحبا';
+            renderComponent({
+                submitAllLabel: unicodeLabel,
+                submitSelectedLabel: unicodeLabel
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[0]).toHaveTextContent(unicodeLabel);
+            expect(buttons[1]).toHaveTextContent(unicodeLabel);
+        });
+        it('should handle rapid prop changes', () => {
+            const { rerender } = renderComponent({
+                selectedCount: 0,
+                isSubmitting: false
+            });
+            for (let i = 1; i <= 5; i++) {
+                rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { selectedCount: i, isSubmitting: i % 2 === 0 })));
+                const buttons = screen.getAllByRole('button');
+                const submitSelectedBtn = buttons[1];
+                if (i % 2 === 0) {
+                    expect(submitSelectedBtn).toBeDisabled();
+                }
+                else {
+                    expect(submitSelectedBtn).not.toBeDisabled();
+                }
+            }
+        });
+    });
+    describe('Integration Tests', () => {
+        it('should handle complete workflow with no selection', () => {
+            renderComponent({ selectedCount: 0, isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            // Submit all should be clickable
+            expect(buttons[0]).not.toBeDisabled();
+            fireEvent.click(buttons[0]);
+            expect(mockOnSubmitAll).toHaveBeenCalledOnce();
+            // Submit selected should be disabled
+            expect(buttons[1]).toBeDisabled();
+        });
+        it('should handle complete workflow with selection', () => {
+            renderComponent({ selectedCount: 3, isSubmitting: false });
+            const buttons = screen.getAllByRole('button');
+            // Both buttons should be clickable
+            expect(buttons[0]).not.toBeDisabled();
+            expect(buttons[1]).not.toBeDisabled();
+            // Selected count should show
+            expect(buttons[1]).toHaveTextContent('Submit Selected (3)');
+            // Click both
+            fireEvent.click(buttons[0]);
+            fireEvent.click(buttons[1]);
+            expect(mockOnSubmitAll).toHaveBeenCalledOnce();
+            expect(mockOnSubmitSelected).toHaveBeenCalledOnce();
+        });
+        it('should handle workflow with selection then submission', () => {
+            const { rerender } = renderComponent({
+                selectedCount: 5,
+                isSubmitting: false
+            });
+            const buttons = screen.getAllByRole('button');
+            expect(buttons[1]).not.toHaveAttribute('data-loading', 'true');
+            // User clicks submit
+            fireEvent.click(buttons[0]);
+            expect(mockOnSubmitAll).toHaveBeenCalledOnce();
+            // State changes to submitting
+            rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { selectedCount: 5, isSubmitting: true })));
+            const updatedButtons = screen.getAllByRole('button');
+            expect(updatedButtons[0]).toBeDisabled();
+            expect(updatedButtons[1]).toBeDisabled();
+            expect(updatedButtons[0]).toHaveAttribute('data-loading', 'true');
+            expect(updatedButtons[1]).toHaveAttribute('data-loading', 'true');
+        });
+        it('should handle selection changes during submission', () => {
+            const { rerender } = renderComponent({
+                selectedCount: 10,
+                isSubmitting: true
+            });
+            let buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (10)');
+            expect(buttons[1]).toBeDisabled();
+            // Selection changes (though unlikely during submission)
+            rerender(React.createElement(TableFooter, Object.assign({}, defaultProps, { selectedCount: 20, isSubmitting: true })));
+            buttons = screen.getAllByRole('button');
+            expect(buttons[1]).toHaveTextContent('Submit Selected (20)');
+            expect(buttons[1]).toBeDisabled();
+        });
+        it('should handle all possible disabled state combinations', () => {
+            const combinations = [
+                { selectedCount: 0, isSubmitting: false, expectedDisabled: true }, // no selection
+                { selectedCount: 0, isSubmitting: true, expectedDisabled: true }, // no selection, submitting
+                { selectedCount: 5, isSubmitting: false, expectedDisabled: false }, // has selection
+                { selectedCount: 5, isSubmitting: true, expectedDisabled: true } // has selection, submitting
+            ];
+            combinations.forEach(({ selectedCount, isSubmitting, expectedDisabled }, index) => {
+                const { unmount } = renderComponent({ selectedCount, isSubmitting });
+                const buttons = screen.getAllByRole('button');
+                const submitSelectedBtn = buttons[1];
+                if (expectedDisabled) {
+                    expect(submitSelectedBtn).toBeDisabled();
+                }
+                else {
+                    expect(submitSelectedBtn).not.toBeDisabled();
+                }
+                // Cleanup between iterations
+                if (index < combinations.length - 1) {
+                    unmount();
+                }
+            });
+        });
+    });
+});