@imposium-hub/components 2.16.0 → 3.0.0-1

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

@@ -1,724 +0,0 @@
-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();
-        });
-    });
-});