@imposium-hub/components 2.14.5 → 2.14.6

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

@@ -0,0 +1,159 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+import { Provider } from 'react-redux';
+import { legacy_createStore as createStore } from 'redux';
+
+let capturedDoSubmit: (value: string) => void;
+let capturedRemoveHandlers: Record<string, () => void> = {};
+
+vi.mock('../tag/Tag', () => ({
+    default: ({ copy, removeHandler }: any) => {
+        capturedRemoveHandlers[copy] = removeHandler;
+        return (
+            <div
+                data-testid={`tag-${copy}`}
+                className='mock-tag'>
+                <span>{copy}</span>
+                <button
+                    data-testid={`remove-${copy}`}
+                    onClick={removeHandler}>
+                    x
+                </button>
+            </div>
+        );
+    }
+}));
+
+vi.mock('../text-field/TextField', () => ({
+    default: ({ submittable, submittableType, placeholder, value, doSubmit, suggestions }: any) => {
+        capturedDoSubmit = doSubmit;
+        return (
+            <div
+                data-testid='mock-text-field'
+                data-submittable={submittable}
+                data-submittable-type={submittableType}
+                data-placeholder={placeholder}
+                data-value={value}
+                data-suggestions={JSON.stringify(suggestions || [])}>
+                <button
+                    data-testid='submit-trigger'
+                    onClick={() => doSubmit('new-tag')}>
+                    Add
+                </button>
+            </div>
+        );
+    }
+}));
+
+vi.mock('../../redux/actions/asset-list', () => ({
+    addAssetTag: vi.fn((_api, _id, _tags) => ({ type: 'MOCK_ADD_TAG' })),
+    deleteAssetTag: vi.fn((_api, _id, _tag) => ({ type: 'MOCK_DELETE_TAG' })),
+    default: {}
+}));
+
+import AssetsTableComplexTagCellMemoized from './AssetsTableComplexTagCell';
+import { addAssetTag, deleteAssetTag } from '../../redux/actions/asset-list';
+
+const MOCK_ASSET_ID = 'asset-999';
+const MOCK_API = { addAssetTag: vi.fn(), deleteAssetTag: vi.fn() };
+const MOCK_SUGGESTIONS = ['alpha', 'beta', 'gamma'];
+
+const createMockStore = (assetTags: string[] = MOCK_SUGGESTIONS) => {
+    const initialState = { assetTags };
+    return createStore((state = initialState) => state);
+};
+
+const buildCellProp = (tags: string[] = ['tag-a', 'tag-b']) => ({
+    row: {
+        original: { id: MOCK_ASSET_ID, tags }
+    }
+});
+
+const renderComponent = (tagOverrides?: string[], storeOverrides?: string[]) => {
+    capturedRemoveHandlers = {};
+    const store = createMockStore(storeOverrides);
+    const cell = buildCellProp(tagOverrides);
+
+    const result = render(
+        <Provider store={store}>
+            <AssetsTableComplexTagCellMemoized
+                cell={cell}
+                api={MOCK_API}
+            />
+        </Provider>
+    );
+
+    return { ...result, store };
+};
+
+describe('AssetsTableComplexTagCell', () => {
+    it('renders existing tags as Tag components', () => {
+        const tags = ['tag-a', 'tag-b', 'tag-c'];
+        const { getByTestId } = renderComponent(tags);
+
+        tags.forEach((tag) => {
+            expect(getByTestId(`tag-${tag}`)).toBeTruthy();
+        });
+    });
+
+    it('deduplicates tags before rendering', () => {
+        const { container } = renderComponent(['dup', 'dup', 'unique']);
+        const renderedTags = container.querySelectorAll('.mock-tag');
+
+        expect(renderedTags).toHaveLength(2);
+    });
+
+    it('renders the TextField with correct props', () => {
+        const { getByTestId } = renderComponent();
+        const textField = getByTestId('mock-text-field');
+
+        expect(textField.getAttribute('data-submittable')).toBe('true');
+        expect(textField.getAttribute('data-submittable-type')).toBe('add');
+        expect(textField.getAttribute('data-placeholder')).toBe('+');
+        expect(textField.getAttribute('data-value')).toBe('');
+    });
+
+    it('passes assetTags from store as suggestions', () => {
+        const suggestions = ['x', 'y', 'z'];
+        const { getByTestId } = renderComponent([], suggestions);
+        const textField = getByTestId('mock-text-field');
+
+        const suggestionsAttr = textField.getAttribute('data-suggestions');
+        expect(suggestionsAttr).toBeTruthy();
+        expect(JSON.parse(suggestionsAttr)).toEqual(suggestions);
+    });
+
+    it('dispatches addAssetTag when submitting a new tag', () => {
+        renderComponent(['existing']);
+
+        capturedDoSubmit('brand-new');
+
+        expect(addAssetTag).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'brand-new');
+    });
+
+    it('does not dispatch addAssetTag when submitting a duplicate tag', () => {
+        vi.mocked(addAssetTag).mockClear();
+        renderComponent(['already-here']);
+
+        capturedDoSubmit('already-here');
+
+        expect(addAssetTag).not.toHaveBeenCalled();
+    });
+
+    it('dispatches deleteAssetTag when removing a tag', () => {
+        renderComponent(['removable']);
+
+        capturedRemoveHandlers['removable']();
+
+        expect(deleteAssetTag).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'removable');
+    });
+
+    it('renders with no tags', () => {
+        const { container, getByTestId } = renderComponent([]);
+        const renderedTags = container.querySelectorAll('.mock-tag');
+
+        expect(renderedTags).toHaveLength(0);
+        expect(getByTestId('mock-text-field')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+const MOCK_FORMATTED_DATE = '4/9/2026 3:00 PM';
+
+vi.mock('../../Util', async (importOriginal) => {
+    const actual = (await importOriginal()) as any;
+    return {
+        ...actual,
+        formatDateDefault: vi.fn(() => MOCK_FORMATTED_DATE)
+    };
+});
+
+import AssetsTableDateCellMemoized from './AssetsTableDateCell';
+import { formatDateDefault } from '../../Util';
+
+const MOCK_UNIX_TIMESTAMP = 1776013200;
+
+const buildCellProp = (values: Record<string, any>) => ({
+    row: { values }
+});
+
+describe('AssetsTableDateCell', () => {
+    it('renders date_created when date_created prop is true and value exists', () => {
+        const cell = buildCellProp({ date_created: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={true}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('renders date_modified when date_created is false', () => {
+        const cell = buildCellProp({ date_modified: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('falls through to date_updated when date_modified is absent', () => {
+        const cell = buildCellProp({ date_updated: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('prefers date_modified over date_updated when both exist', () => {
+        const modifiedTimestamp = 1776099600;
+        const cell = buildCellProp({
+            date_modified: modifiedTimestamp,
+            date_updated: MOCK_UNIX_TIMESTAMP
+        });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(modifiedTimestamp);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('skips date_created value when date_created prop is false', () => {
+        vi.mocked(formatDateDefault).mockClear();
+        const cell = buildCellProp({ date_created: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).not.toHaveBeenCalled();
+        expect(container.innerHTML).toBe('');
+    });
+
+    it('returns null when no date values are present', () => {
+        const cell = buildCellProp({});
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(container.innerHTML).toBe('');
+    });
+});

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

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

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
-export const validateNumInput = (val: number, min: number, max: number) => {
-    if (val < min || val > max) {
+export const validateNumInput = (val: number, min?: number, max?: number) => {
+    if ((min !== undefined && val < min) || (max !== undefined && val > max)) {
         return false;
     } else {
         return true;
@@ -15,7 +15,7 @@ interface INumberFieldProps {
     label?: any;
     placeholder?: string;
     readOnly?: boolean;
-    value: number;
+    value: number | null;
     tooltip?: IToolTipConfig | string;
     width?: string | number;
     onChange?(e): void;
@@ -60,10 +60,14 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         if (this.props.focusOnMount && this.inputRef.current) {
             this.inputRef.current.focus();
         }
-        this.setState({
-            error: false,
-            value: this.props.value
-        });
+        this.setState(
+            {
+                value: this.props.value
+            },
+            () => {
+                this.validateValue(this.props.value);
+            }
+        );
     }
 
     public componentDidUpdate(prevProps): void {
@@ -86,15 +90,17 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
     }
 
     private onChange(e) {
-        this.validateValue(e.target.value);
         let val = e.target.value;
+
+        this.validateValue(val);
+
         if (val === '' || val === null) {
             val = this.props.min;
         } else {
             val = parseFloat(val);
         }
 
-        this.props.onChange(val);
+        this.setState({ value: val }, () => this.props.onChange(val));
     }
 
     private onKeyDownHandler(e) {