@imposium-hub/components 2.14.11 → 2.15.0-0

package/src/components/assets/AssetsTableSelectFilter.test.tsx

@@ -1,119 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { legacy_createStore as createStore } from 'redux';
-
-vi.mock('../checkbox-field/CheckboxField', () => ({
-    default: ({ label, propagate, value, onChange }: any) => (
-        <div
-            data-testid='mock-checkbox-field'
-            data-label={label}
-            data-propagate={propagate}
-            data-value={value}>
-            <input
-                type='checkbox'
-                checked={value}
-                onChange={() => onChange()}
-            />
-        </div>
-    )
-}));
-
-vi.mock('../../redux/actions/selected-assets', () => ({
-    selectAll: vi.fn(() => ({ type: 'selectedAssets/SELECT_ALL' })),
-    resetSelection: vi.fn(() => ({ type: 'selectedAssets/RESET' }))
-}));
-
-import AssetsTableSelectFilterMemoized from './AssetsTableSelectFilter';
-
-const createMockStore = (selectedAssets: string[] = []) => {
-    const initialState = { selectedAssets };
-    return createStore((state: any = initialState, action: any) => {
-        switch (action.type) {
-            case 'selectedAssets/SELECT_ALL':
-                return {
-                    ...state,
-                    selectedAssets: ['asset-1', 'asset-2', 'asset-3']
-                };
-            case 'selectedAssets/RESET':
-                return {
-                    ...state,
-                    selectedAssets: []
-                };
-            default:
-                return state;
-        }
-    });
-};
-
-const renderComponent = (selectedAssets: string[] = []) => {
-    const store = createMockStore(selectedAssets);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableSelectFilterMemoized />
-        </Provider>
-    );
-
-    return { ...result, store };
-};
-
-describe('AssetsTableSelectFilter', () => {
-    it('renders CheckboxField with correct props when no assets are selected', () => {
-        const { getByTestId } = renderComponent();
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-label')).toBe('');
-        expect(checkbox.getAttribute('data-propagate')).toBe('false');
-        expect(checkbox.getAttribute('data-value')).toBe('false');
-    });
-
-    it('renders CheckboxField as checked when assets are selected', () => {
-        const { getByTestId } = renderComponent(['asset-1', 'asset-2']);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-
-    it('dispatches selectAll when checkbox is clicked and no assets are selected', () => {
-        const { getByRole, store } = renderComponent();
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput);
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toEqual(['asset-1', 'asset-2', 'asset-3']);
-    });
-
-    it('dispatches resetSelection when checkbox is clicked and assets are selected', () => {
-        const { getByRole, store } = renderComponent(['asset-1', 'asset-2']);
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput);
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toEqual([]);
-    });
-
-    it('shows unchecked state when selectedAssets array is empty', () => {
-        const { getByTestId } = renderComponent([]);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('false');
-    });
-
-    it('shows checked state when selectedAssets array has one item', () => {
-        const { getByTestId } = renderComponent(['single-asset']);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-
-    it('shows checked state when selectedAssets array has multiple items', () => {
-        const { getByTestId } = renderComponent(['asset-1', 'asset-2', 'asset-3']);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-});

package/src/components/assets/AssetsTableStatusCell.test.tsx

@@ -1,60 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import React from 'react';
-import { render } from '@testing-library/react';
-import AssetsTableStatusCellMemoized from './AssetsTableStatusCell';
-
-const buildCellProp = (overrides: Record<string, any> = {}) => ({
-    row: {
-        original: {
-            processing: false,
-            ...overrides
-        }
-    }
-});
-
-const renderComponent = (overrides: Record<string, any> = {}) => {
-    return render(<AssetsTableStatusCellMemoized cell={buildCellProp(overrides)} />);
-};
-
-describe('AssetsTableStatusCell', () => {
-    it('renders with complete status when processing is false', () => {
-        const { container } = renderComponent({ processing: false });
-        const statusCell = container.querySelector('.asset-status-cell');
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusCell).toBeTruthy();
-        expect(statusIndicator?.className).toBe('status-indicator complete');
-    });
-
-    it('renders with processing status when processing is true', () => {
-        const { container } = renderComponent({ processing: true });
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusIndicator?.className).toBe('status-indicator processing');
-    });
-
-    it('renders with complete status when processing is undefined', () => {
-        const { container } = renderComponent({ processing: undefined });
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusIndicator?.className).toBe('status-indicator complete');
-    });
-
-    it('renders with complete status when processing is null', () => {
-        const { container } = renderComponent({ processing: null });
-        const statusIndicator = container.querySelector('.status-indicator');
-
-        expect(statusIndicator?.className).toBe('status-indicator complete');
-    });
-
-    it('renders the correct DOM structure', () => {
-        const { container } = renderComponent();
-        const statusCell = container.querySelector('.asset-status-cell');
-        const statusIndicator = statusCell?.querySelector('.status-indicator');
-
-        expect(statusCell).toBeTruthy();
-        expect(statusIndicator).toBeTruthy();
-        expect(statusCell?.children).toHaveLength(1);
-        expect(statusCell?.firstChild).toEqual(statusIndicator);
-    });
-});

package/src/components/number-field/NumberField.test.tsx

@@ -1,383 +0,0 @@
-import React from 'react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, fireEvent, screen } from '../../test/utils';
-import NumberField, { validateNumInput } from './NumberField';
-
-describe('NumberField', () => {
-    const defaultProps = {
-        value: 10,
-        onChange: vi.fn(),
-        label: 'Test Number Field'
-    };
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-    });
-
-    describe('Rendering', () => {
-        it('renders without crashing', () => {
-            render(<NumberField {...defaultProps} />);
-            const input = screen.getByRole('spinbutton');
-            expect(input).toBeDefined();
-        });
-
-        it('displays the correct value', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={25}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.value).toBe('25');
-        });
-
-        it('displays placeholder when provided', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    placeholder='Enter number'
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.placeholder).toBe('Enter number');
-        });
-
-        it('displays empty string when value is null', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={null}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.value).toBe('');
-        });
-
-        it('applies min and max attributes', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    min={0}
-                    max={100}
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.min).toBe('0');
-            expect(input.max).toBe('100');
-        });
-
-        it('sets readOnly attribute when readOnly prop is true', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    readOnly
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.readOnly).toBe(true);
-        });
-    });
-
-    describe('User Interactions', () => {
-        it('calls onChange when value changes', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.change(input, { target: { value: '42' } });
-
-            expect(onChange).toHaveBeenCalledWith(42);
-        });
-
-        it('calls onChange with min value when empty string is entered', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onChange={onChange}
-                    min={5}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.change(input, { target: { value: '' } });
-
-            expect(onChange).toHaveBeenCalledWith(5);
-        });
-
-        it('parses float values correctly', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.change(input, { target: { value: '3.14' } });
-
-            expect(onChange).toHaveBeenCalledWith(3.14);
-        });
-
-        it('calls onBlur when provided', () => {
-            const onBlur = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    onBlur={onBlur}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.blur(input, { target: { value: '15' } });
-
-            expect(onBlur).toHaveBeenCalledWith('15');
-        });
-
-        it('focuses input on mount when focusOnMount is true', () => {
-            render(
-                <NumberField
-                    {...defaultProps}
-                    focusOnMount
-                />
-            );
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(document.activeElement).toBe(input);
-        });
-    });
-
-    describe('Keyboard Interactions', () => {
-        it('increases value by 9 when Shift+ArrowUp is pressed', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={10}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowUp',
-                shiftKey: true
-            });
-
-            expect(onChange).toHaveBeenCalledWith(19);
-        });
-
-        it('decreases value by 9 when Shift+ArrowDown is pressed', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={20}
-                    onChange={onChange}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowDown',
-                shiftKey: true
-            });
-
-            expect(onChange).toHaveBeenCalledWith(11);
-        });
-
-        it('does not call onChange when value would exceed max limit', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={95}
-                    max={100}
-                    onChange={onChange}
-                />
-            );
-
-            const input = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowUp',
-                shiftKey: true
-            });
-
-            expect(onChange).not.toHaveBeenCalled();
-        });
-
-        it('sets error state when value would go below min limit', () => {
-            const onChange = vi.fn();
-            render(
-                <NumberField
-                    {...defaultProps}
-                    value={5}
-                    min={0}
-                    onChange={onChange}
-                />
-            );
-
-            const input = screen.getByRole('spinbutton');
-            fireEvent.keyDown(input, {
-                code: 'ArrowDown',
-                shiftKey: true
-            });
-
-            // The component should set error state instead of calling onChange
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={-5}
-                    min={0}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-    });
-
-    describe('Validation', () => {
-        it('shows error state when value is below minimum', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={5}
-                    min={10}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state when value is above maximum', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state for min constraint', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={5}
-                    min={10}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state for max constraint', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('shows error state for min and max constraints', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    min={10}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-
-        it('does not show error state when value is valid', () => {
-            const { container } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={50}
-                    min={10}
-                    max={100}
-                />
-            );
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeNull();
-        });
-    });
-
-    describe('Component Updates', () => {
-        it('updates internal state when props.value changes', () => {
-            const { rerender } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={10}
-                />
-            );
-
-            rerender(
-                <NumberField
-                    {...defaultProps}
-                    value={20}
-                />
-            );
-
-            const input: HTMLInputElement = screen.getByRole('spinbutton');
-            expect(input.value).toBe('20');
-        });
-
-        it('validates value when props change', () => {
-            const { container, rerender } = render(
-                <NumberField
-                    {...defaultProps}
-                    value={50}
-                />
-            );
-
-            rerender(
-                <NumberField
-                    {...defaultProps}
-                    value={150}
-                    max={100}
-                />
-            );
-
-            const formField = container.querySelector('.number-field.invalid');
-            expect(formField).toBeDefined();
-        });
-    });
-});
-
-describe('validateNumInput utility', () => {
-    it('returns true for valid values within range', () => {
-        expect(validateNumInput(50, 0, 100)).toBe(true);
-        expect(validateNumInput(0, 0, 100)).toBe(true);
-        expect(validateNumInput(100, 0, 100)).toBe(true);
-    });
-
-    it('returns false for values below minimum', () => {
-        expect(validateNumInput(-5, 0, 100)).toBe(false);
-    });
-
-    it('returns false for values above maximum', () => {
-        expect(validateNumInput(150, 0, 100)).toBe(false);
-    });
-
-    it('handles undefined min/max values', () => {
-        expect(validateNumInput(50, undefined, 100)).toBe(true);
-        expect(validateNumInput(50, 0, undefined)).toBe(true);
-        expect(validateNumInput(50, undefined, undefined)).toBe(true);
-    });
-});