@imposium-hub/components 2.15.0-3 → 2.16.0

package/src/components/advanced-number-field/AdvancedNumberField.test.tsx

@@ -0,0 +1,724 @@
+import React from 'react';
+import { render, fireEvent, screen } from '../../test/utils';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import AdvancedNumberField from './AdvancedNumberField';
+
+describe('AdvancedNumberField', () => {
+    const defaultProps = {
+        value: 12,
+        onChange: vi.fn(),
+        label: 'Test Advanced Number Field',
+        activeOverride: 'test-override'
+    };
+
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    describe('Basic Rendering', () => {
+        it('renders without crashing', () => {
+            render(<AdvancedNumberField {...defaultProps} />);
+            const input = screen.getByRole('spinbutton');
+            expect(input).toBeDefined();
+        });
+
+        it('displays the correct value', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={25}
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.value).toBe('25');
+        });
+
+        it('displays placeholder when provided', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    placeholder='Enter font size'
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.placeholder).toBe('Enter font size');
+        });
+
+        it('sets readOnly attribute when readOnly prop is true', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    readOnly
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.readOnly).toBe(true);
+        });
+
+        it('applies min and max attributes', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    min={8}
+                    max={72}
+                />
+            );
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.min).toBe('8');
+            expect(input.max).toBe('72');
+        });
+
+        it('renders increment and decrement buttons', () => {
+            const { container } = render(<AdvancedNumberField {...defaultProps} />);
+
+            const decrementButton: HTMLInputElement | null =
+                container.querySelector('.minus-font-size');
+            const incrementButton: HTMLInputElement | null =
+                container.querySelector('.add-font-size');
+
+            if (decrementButton && incrementButton) {
+                expect(decrementButton).toBeDefined();
+                expect(incrementButton).toBeDefined();
+                expect(decrementButton.value).toBe('-');
+                expect(incrementButton.value).toBe('+');
+            }
+        });
+
+        it('renders with custom width', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    width='200px'
+                />
+            );
+
+            const fieldWrapper = container.querySelector('[data-testid="field-wrapper"]');
+            expect(fieldWrapper).toBeDefined();
+        });
+    });
+
+    describe('Value Changes', () => {
+        it('calls onChange when value is typed', () => {
+            const onChange = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '18' } });
+
+            expect(onChange).toHaveBeenCalledWith(18);
+        });
+
+        it('calls onChange with null when empty string is entered', () => {
+            const onChange = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '' } });
+
+            expect(onChange).toHaveBeenCalledWith(null);
+        });
+
+        it('parses float values correctly', () => {
+            const onChange = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '14.5' } });
+
+            expect(onChange).toHaveBeenCalledWith(14.5);
+        });
+    });
+
+    describe('Increment/Decrement Buttons', () => {
+        it('increments value when plus button is clicked', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    onChange={onChange}
+                />
+            );
+
+            const incrementButton = container.querySelector('.add-font-size');
+            if (incrementButton) {
+                fireEvent.click(incrementButton);
+            }
+
+            expect(onChange).toHaveBeenCalledWith(13);
+        });
+
+        it('decrements value when minus button is clicked', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    onChange={onChange}
+                />
+            );
+
+            const decrementButton = container.querySelector('.minus-font-size');
+            if (decrementButton) {
+                fireEvent.click(decrementButton);
+            }
+
+            expect(onChange).toHaveBeenCalledWith(11);
+        });
+
+        it('does not call onChange when incrementing would exceed max', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={72}
+                    max={72}
+                    onChange={onChange}
+                />
+            );
+
+            const incrementButton = container.querySelector('.add-font-size');
+            if (incrementButton) {
+                fireEvent.click(incrementButton);
+            }
+
+            expect(onChange).not.toHaveBeenCalled();
+        });
+
+        it('does not call onChange when decrementing would go below min', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={8}
+                    min={8}
+                    onChange={onChange}
+                />
+            );
+
+            const decrementButton = container.querySelector('.minus-font-size');
+            if (decrementButton) {
+                fireEvent.click(decrementButton);
+            }
+
+            expect(onChange).not.toHaveBeenCalled();
+        });
+    });
+
+    describe('Validation', () => {
+        it('shows error state when value is below minimum', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={5}
+                    min={8}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '5' } });
+
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+        });
+
+        it('shows error state when value is above maximum', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={100}
+                    max={72}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '100' } });
+
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+        });
+
+        it('shows correct error message for min constraint only', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    min={8}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '5' } });
+
+            // Check for error class which indicates validation failed
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+        });
+
+        it('shows correct error message for max constraint only', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    max={72}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '100' } });
+
+            // Check for error class which indicates validation failed
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+        });
+
+        it('shows correct error message for min and max constraints', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    min={8}
+                    max={72}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '100' } });
+
+            // Check for error class which indicates validation failed
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+        });
+
+        it('does not show error state when value is valid', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={24}
+                    min={8}
+                    max={72}
+                />
+            );
+
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeNull();
+        });
+
+        it('calls onChange when valid value is entered with constraints', () => {
+            const onChange = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    min={8}
+                    max={72}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '24' } });
+
+            // Should call onChange with valid value
+            expect(onChange).toHaveBeenCalledWith(24);
+        });
+
+        it('clears error state when valid value is entered after error', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                    min={8}
+                    max={72}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+
+            // First enter invalid value
+            fireEvent.change(input, { target: { value: '100' } });
+            let fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+
+            // Then enter valid value
+            fireEvent.change(input, { target: { value: '24' } });
+            fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeNull();
+            expect(onChange).toHaveBeenCalledWith(24);
+        });
+    });
+
+    describe('Font Size Dropdown', () => {
+        it('shows dropdown when input is clicked', () => {
+            const { container } = render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.click(input);
+
+            const dropdown = container.querySelector('.font-size-list');
+            expect(dropdown).toBeDefined();
+        });
+
+        it('hides dropdown when input is clicked again', () => {
+            const { container } = render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+
+            // Click to show dropdown
+            fireEvent.click(input);
+            let dropdown = container.querySelector('.font-size-list');
+            expect(dropdown).toBeDefined();
+
+            // Click again to hide dropdown
+            fireEvent.click(input);
+            dropdown = container.querySelector('.font-size-list');
+            expect(dropdown).toBeNull();
+        });
+
+        it('renders all font sizes in dropdown', () => {
+            const { container } = render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.click(input);
+
+            const fontSizeButtons = container.querySelectorAll('.font-size-btn');
+            expect(fontSizeButtons.length).toBe(13); // FONT_SIZES array length
+
+            // Check if all font sizes are present
+            const expectedSizes = [8, 9, 10, 12, 14, 18, 24, 30, 36, 48, 60, 72, 96];
+            expectedSizes.forEach((size, index) => {
+                expect(fontSizeButtons[index].textContent).toBe(size.toString());
+            });
+        });
+
+        it('selects font size when dropdown item is clicked', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.click(input);
+
+            const fontSizeButton = container.querySelector('.font-size-btn');
+            if (fontSizeButton) {
+                fireEvent.click(fontSizeButton);
+            }
+
+            expect(onChange).toHaveBeenCalledWith(8); // First font size
+        });
+
+        it('hides dropdown after selecting a font size', () => {
+            const { container } = render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.click(input);
+
+            const fontSizeButton = container.querySelector('.font-size-btn');
+            if (fontSizeButton) {
+                fireEvent.click(fontSizeButton);
+            }
+
+            const dropdown = container.querySelector('.font-size-list');
+            expect(dropdown).toBeNull();
+        });
+
+        it('hides dropdown when key is pressed', () => {
+            const { container } = render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.click(input);
+
+            let dropdown = container.querySelector('.font-size-list');
+            expect(dropdown).toBeDefined();
+
+            fireEvent.keyDown(input, { key: 'Escape' });
+
+            dropdown = container.querySelector('.font-size-list');
+            expect(dropdown).toBeNull();
+        });
+    });
+
+    describe('Focus and Blur Events', () => {
+        it('handles focus event', () => {
+            render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.focus(input);
+
+            // Test that focus event was handled (no errors thrown)
+            expect(input).toBeDefined();
+        });
+
+        it('handles blur event', () => {
+            render(<AdvancedNumberField {...defaultProps} />);
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.blur(input);
+
+            // Test that blur event was handled (no errors thrown)
+            expect(input).toBeDefined();
+        });
+    });
+
+    describe('Component Lifecycle', () => {
+        it('initializes with correct state on mount', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={24}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.value).toBe('24');
+        });
+
+        it('updates state when props.value changes', () => {
+            const { rerender } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={12}
+                />
+            );
+
+            rerender(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={18}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.value).toBe('18');
+        });
+
+        it('clears error state when props.value changes', () => {
+            const { container, rerender } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={100}
+                    max={72}
+                />
+            );
+
+            // Trigger error state
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '100' } });
+
+            let fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeDefined();
+
+            // Update props to valid value
+            rerender(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={24}
+                    max={72}
+                />
+            );
+
+            fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeNull();
+        });
+    });
+
+    describe('Edge Cases', () => {
+        it('handles null value correctly', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={undefined as any}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.value).toBe('');
+        });
+
+        it('handles zero value correctly', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={0}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.value).toBe('0');
+        });
+
+        it('handles negative values correctly', () => {
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={-5}
+                />
+            );
+
+            const input: HTMLInputElement = screen.getByRole('spinbutton');
+            expect(input.value).toBe('-5');
+        });
+
+        it('renders custom buttons when provided', () => {
+            const customButton = <button key='custom'>Custom</button>;
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    buttons={customButton}
+                />
+            );
+
+            const button = screen.getByText('Custom');
+            expect(button).toBeDefined();
+        });
+
+        it('displays info message when no error', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={24}
+                    info='This is helpful information'
+                />
+            );
+
+            // Check that no error class is present (component renders normally)
+            const fieldWrapper = container.querySelector('.advanced-number-field.invalid');
+            expect(fieldWrapper).toBeNull();
+
+            // Check that the component renders without errors
+            const input = screen.getByRole('spinbutton');
+            expect(input).toBeDefined();
+        });
+
+        it('handles validation without min/max constraints', () => {
+            const onChange = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    onChange={onChange}
+                />
+            );
+
+            const input = screen.getByRole('spinbutton');
+            fireEvent.change(input, { target: { value: '999' } });
+
+            expect(onChange).toHaveBeenCalledWith(999);
+        });
+
+        it('handles increment from zero', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={0}
+                    onChange={onChange}
+                />
+            );
+
+            const incrementButton = container.querySelector('.add-font-size');
+            if (incrementButton) {
+                fireEvent.click(incrementButton);
+            }
+
+            expect(onChange).toHaveBeenCalledWith(1);
+        });
+
+        it('handles decrement to negative values', () => {
+            const onChange = vi.fn();
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    value={0}
+                    onChange={onChange}
+                />
+            );
+
+            const decrementButton = container.querySelector('.minus-font-size');
+            if (decrementButton) {
+                fireEvent.click(decrementButton);
+            }
+
+            expect(onChange).toHaveBeenCalledWith(-1);
+        });
+    });
+
+    describe('Advanced Props', () => {
+        it('passes through FieldWrapper props correctly', () => {
+            const { container } = render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    propKey='fontSize'
+                    showCopyPropIds={true}
+                    activeOverride='test-override'
+                    previewMultiplier={2}
+                />
+            );
+
+            const fieldWrapper = container.querySelector('[data-testid="field-wrapper"]');
+            expect(fieldWrapper).toBeDefined();
+        });
+
+        it('handles setOverride callback', () => {
+            const setOverride = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    setOverride={setOverride}
+                />
+            );
+
+            // Component should render without errors
+            const input = screen.getByRole('spinbutton');
+            expect(input).toBeDefined();
+        });
+
+        it('handles removeOverride callback', () => {
+            const removeOverride = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    removeOverride={removeOverride}
+                />
+            );
+
+            // Component should render without errors
+            const input = screen.getByRole('spinbutton');
+            expect(input).toBeDefined();
+        });
+
+        it('handles onClose callback', () => {
+            const onClose = vi.fn();
+            render(
+                <AdvancedNumberField
+                    {...defaultProps}
+                    onClose={onClose}
+                />
+            );
+
+            // Component should render without errors
+            const input = screen.getByRole('spinbutton');
+            expect(input).toBeDefined();
+        });
+    });
+});