@imposium-hub/components 2.16.0-0 → 3.0.0-0

package/src/components/anchor-field/AnchorField.test.tsx

@@ -1,130 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-
-// Direct import to force coverage tracking
-import AnchorField from './AnchorField';
-import { HORIZONTAL_ALIGNMENT, VERTICAL_ALIGNMENT } from '../../constants/compositions';
-
-describe('AnchorField - Streamlined Coverage Test', () => {
-    it('should render and handle basic functionality', () => {
-        const onChange = vi.fn();
-
-        // Test 1: Basic instantiation and render (covers constructor and render)
-        const instance = new AnchorField({
-            onChange,
-            config: {
-                vertical_align: VERTICAL_ALIGNMENT.CENTER,
-                horizontal_align: HORIZONTAL_ALIGNMENT.CENTER
-            }
-        });
-        expect(instance).toBeDefined();
-        const result = instance.render();
-        expect(result).toBeDefined();
-
-        // Test 2: Render with React Testing Library (covers FieldWrapper integration)
-        const { container } = render(
-            <AnchorField
-                onChange={onChange}
-                config={{
-                    vertical_align: VERTICAL_ALIGNMENT.CENTER,
-                    horizontal_align: HORIZONTAL_ALIGNMENT.CENTER
-                }}
-                label='Anchor Position'
-                width='200px'
-                tooltip='Select anchor'
-            />
-        );
-
-        expect(container.querySelector('.anchorTable')).toBeTruthy();
-
-        // Test 3: Click interaction (covers onClick handlers)
-        const cells = container.querySelectorAll('.anchorTable td');
-        expect(cells).toHaveLength(9);
-
-        // Click center cell
-        fireEvent.click(cells[4]);
-        expect(onChange).toHaveBeenCalledWith(
-            VERTICAL_ALIGNMENT.CENTER,
-            HORIZONTAL_ALIGNMENT.CENTER
-        );
-
-        // Click top-left cell
-        fireEvent.click(cells[0]);
-        expect(onChange).toHaveBeenCalledWith(VERTICAL_ALIGNMENT.TOP, HORIZONTAL_ALIGNMENT.LEFT);
-
-        // Click more cells to cover remaining onClick handlers
-        fireEvent.click(cells[1]); // top-center
-        expect(onChange).toHaveBeenCalledWith(VERTICAL_ALIGNMENT.TOP, HORIZONTAL_ALIGNMENT.CENTER);
-
-        fireEvent.click(cells[2]); // top-right
-        expect(onChange).toHaveBeenCalledWith(VERTICAL_ALIGNMENT.TOP, HORIZONTAL_ALIGNMENT.RIGHT);
-
-        fireEvent.click(cells[6]); // bottom-left
-        expect(onChange).toHaveBeenCalledWith(VERTICAL_ALIGNMENT.BOTTOM, HORIZONTAL_ALIGNMENT.LEFT);
-
-        fireEvent.click(cells[8]); // bottom-right
-        expect(onChange).toHaveBeenCalledWith(
-            VERTICAL_ALIGNMENT.BOTTOM,
-            HORIZONTAL_ALIGNMENT.RIGHT
-        );
-    });
-
-    it('should handle different alignment configurations', () => {
-        const onChange = vi.fn();
-
-        // Test different getIcons branches to increase coverage
-        const alignmentCombos = [
-            { v: VERTICAL_ALIGNMENT.TOP, h: HORIZONTAL_ALIGNMENT.LEFT },
-            { v: VERTICAL_ALIGNMENT.TOP, h: HORIZONTAL_ALIGNMENT.RIGHT },
-            { v: VERTICAL_ALIGNMENT.BOTTOM, h: HORIZONTAL_ALIGNMENT.CENTER },
-            { v: VERTICAL_ALIGNMENT.CENTER, h: HORIZONTAL_ALIGNMENT.RIGHT },
-            { v: 'invalid', h: 'invalid' } // Test the else case
-        ];
-
-        alignmentCombos.forEach(({ v, h }) => {
-            const instance = new AnchorField({
-                onChange,
-                config: { vertical_align: v, horizontal_align: h }
-            });
-
-            // Execute render to cover the getIcons branches
-            const result = instance.render();
-            expect(result).toBeDefined();
-        });
-    });
-
-    it('should handle props variations', () => {
-        const onChange = vi.fn();
-
-        // Test with minimal props
-        const { rerender } = render(
-            <AnchorField
-                onChange={onChange}
-                config={{
-                    vertical_align: VERTICAL_ALIGNMENT.TOP,
-                    horizontal_align: HORIZONTAL_ALIGNMENT.CENTER
-                }}
-            />
-        );
-
-        // Test with all props
-        rerender(
-            <AnchorField
-                onChange={onChange}
-                config={{
-                    vertical_align: VERTICAL_ALIGNMENT.BOTTOM,
-                    horizontal_align: HORIZONTAL_ALIGNMENT.LEFT
-                }}
-                label='Custom Label'
-                width={300}
-                tooltip={{ content: 'Tooltip content' }}
-                info='Info text'
-                labelPosition='top'
-                labelWidth='100px'
-            />
-        );
-
-        expect(document.querySelector('.anchorTable')).toBeTruthy();
-    });
-});

package/src/components/asset-details/AssetDetails.test.tsx

@@ -1,494 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '../../test/utils';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { Provider } from 'react-redux';
-import { legacy_createStore as createStore } from 'redux';
-import AssetDetails from './AssetDetails';
-import { ASSET_TYPES } from '../../constants/assets';
-
-// Mock the utility functions
-vi.mock('../../Util', async (importOriginal) => {
-    const actual = (await importOriginal()) as any;
-    return {
-        ...actual,
-        formatDateDefault: vi.fn((date) => `Formatted: ${date}`),
-        getDuration: vi.fn((frameCount, rate) => `${frameCount}/${rate}`)
-    };
-});
-
-// Mock problematic components
-vi.mock('../text-field/TextField', () => ({
-    default: ({ value, label, readOnly, onChange, onSubmit, width, ...props }: any) => (
-        <div
-            data-testid={`textfield-${label || 'unlabeled'}`}
-            style={{ width }}>
-            <label>{label}</label>
-            <input
-                value={value || ''}
-                readOnly={readOnly}
-                onChange={
-                    onChange ? (e) => onChange((e.target as HTMLInputElement).value) : undefined
-                }
-                onKeyDown={
-                    onSubmit
-                        ? (e) => e.key === 'Enter' && onSubmit((e.target as HTMLInputElement).value)
-                        : undefined
-                }
-                {...props}
-            />
-        </div>
-    )
-}));
-
-vi.mock('../number-field/NumberField', () => ({
-    default: ({ value, label, readOnly, ...props }: any) => (
-        <div data-testid={`numberfield-${label || 'unlabeled'}`}>
-            <label>{label}</label>
-            <input
-                type='number'
-                value={value || ''}
-                readOnly={readOnly}
-                {...props}
-            />
-        </div>
-    )
-}));
-
-vi.mock('../smpte-field/SMPTEField', () => ({
-    default: ({ value, label, readOnly, ...props }: any) => (
-        <div data-testid={`smptefield-${label || 'unlabeled'}`}>
-            <label>{label}</label>
-            <input
-                value={value || ''}
-                readOnly={readOnly}
-                {...props}
-            />
-        </div>
-    )
-}));
-
-vi.mock('../tag/Tag', () => ({
-    default: ({ copy, removeHandler }: any) => (
-        <div data-testid={`tag-${copy}`}>
-            <span>{copy}</span>
-            {removeHandler && <button onClick={removeHandler}>×</button>}
-        </div>
-    )
-}));
-
-vi.mock('../field-wrapper/FieldWrapper', () => ({
-    default: ({ label, children, ...props }: any) => (
-        <div
-            data-testid={`fieldwrapper-${label || 'unlabeled'}`}
-            {...props}>
-            {label && <label>{label}</label>}
-            {children}
-        </div>
-    )
-}));
-
-vi.mock('../h-rule/HRule', () => ({
-    default: () => <hr data-testid='hrule' />
-}));
-
-// Create a mock Redux store
-const createMockStore = (initialState = {}) => {
-    const defaultState = {
-        assetTags: ['tag1', 'tag2', 'tag3'],
-        assetList: {
-            assets: [
-                {
-                    id: 'asset-1',
-                    name: 'Test Asset',
-                    tags: ['existing-tag'],
-                    type: ASSET_TYPES.VIDEO,
-                    date_created: '2024-01-01',
-                    width: 1920,
-                    height: 1080,
-                    rate: 30,
-                    frame_count: 900
-                }
-            ]
-        },
-        ...initialState
-    };
-
-    const reducer = (state = defaultState) => state;
-    return createStore(reducer);
-};
-
-// Helper function to render component with Redux provider
-const renderWithRedux = (component, store = createMockStore()) => {
-    return render(<Provider store={store}>{component}</Provider>);
-};
-
-describe('AssetDetails', () => {
-    const defaultAsset = {
-        id: 'asset-1',
-        name: 'Test Asset',
-        tags: ['existing-tag'],
-        type: ASSET_TYPES.VIDEO,
-        date_created: '2024-01-01',
-        width: 1920,
-        height: 1080,
-        rate: 30,
-        frame_count: 900
-    };
-
-    const defaultProps = {
-        asset: defaultAsset,
-        columns: 1,
-        newAsset: false,
-        onNameChange: vi.fn(),
-        onAddTag: vi.fn(),
-        onRemoveTag: vi.fn()
-    };
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-    });
-
-    describe('Basic Rendering', () => {
-        it('renders without crashing', () => {
-            const { container } = renderWithRedux(<AssetDetails {...defaultProps} />);
-            expect(container.querySelector('.asset-details')).toBeTruthy();
-        });
-
-        it('renders asset details title for existing asset', () => {
-            renderWithRedux(<AssetDetails {...defaultProps} />);
-            expect(screen.getByText('Asset Details')).toBeTruthy();
-        });
-
-        it('renders new asset details title for new asset', () => {
-            const props = { ...defaultProps, newAsset: true };
-            renderWithRedux(<AssetDetails {...props} />);
-            expect(screen.getByText('New Asset Details')).toBeTruthy();
-        });
-
-        it('handles null asset gracefully', () => {
-            // Note: The component has a design issue where it destructures asset properties
-            // before checking if asset is null. This test documents the current behavior.
-            const props = { ...defaultProps, asset: null };
-
-            expect(() => {
-                renderWithRedux(<AssetDetails {...props} />);
-            }).toThrow('Cannot read properties of null');
-        });
-
-        it('renders asset ID field as read-only', () => {
-            renderWithRedux(<AssetDetails {...defaultProps} />);
-            const assetIdInput = screen.getByDisplayValue('asset-1');
-            expect(assetIdInput).toBeTruthy();
-            expect(assetIdInput.getAttribute('readonly')).toBe('');
-        });
-
-        it('renders asset name field', () => {
-            renderWithRedux(<AssetDetails {...defaultProps} />);
-            const nameInput = screen.getByDisplayValue('Test Asset');
-            expect(nameInput).toBeTruthy();
-        });
-
-        it('renders formatted date field', () => {
-            renderWithRedux(<AssetDetails {...defaultProps} />);
-            expect(screen.getByDisplayValue('Formatted: 2024-01-01')).toBeTruthy();
-        });
-    });
-
-    describe('Asset Type Specific Rendering', () => {
-        it('renders video-specific fields for video assets', () => {
-            const videoAsset = { ...defaultAsset, type: ASSET_TYPES.VIDEO };
-            const props = { ...defaultProps, asset: videoAsset };
-            renderWithRedux(<AssetDetails {...props} />);
-
-            // Should render frame rate field
-            expect(screen.getByDisplayValue('30')).toBeTruthy();
-
-            // Should render duration field (mocked to return frame_count/rate)
-            expect(screen.getByDisplayValue('900/30')).toBeTruthy();
-        });
-
-        it('does not render video-specific fields for non-video assets', () => {
-            const imageAsset = { ...defaultAsset, type: ASSET_TYPES.IMAGE };
-            const props = { ...defaultProps, asset: imageAsset };
-            renderWithRedux(<AssetDetails {...props} />);
-
-            // Should not render frame rate or duration fields
-            expect(screen.queryByDisplayValue('30')).toBeFalsy();
-            expect(screen.queryByDisplayValue('900/30')).toBeFalsy();
-        });
-
-        it('renders width and height fields when present', () => {
-            renderWithRedux(<AssetDetails {...defaultProps} />);
-            expect(screen.getByDisplayValue('1920')).toBeTruthy();
-            expect(screen.getByDisplayValue('1080')).toBeTruthy();
-        });
-
-        it('does not render width field when not present', () => {
-            const assetWithoutDimensions = { ...defaultAsset, width: null, height: null };
-            const props = { ...defaultProps, asset: assetWithoutDimensions };
-            renderWithRedux(<AssetDetails {...props} />);
-
-            expect(screen.queryByDisplayValue('1920')).toBeFalsy();
-            expect(screen.queryByDisplayValue('1080')).toBeFalsy();
-        });
-    });
-
-    describe('Column Layout', () => {
-        it('applies correct width for single column layout', () => {
-            const props = { ...defaultProps, columns: 1 };
-            const { container } = renderWithRedux(<AssetDetails {...props} />);
-
-            // Name field should be 100% width in single column
-            const nameField: HTMLElement = container.querySelector(
-                '[data-testid="textfield-Name"]'
-            );
-            expect(nameField).toBeTruthy();
-            expect(nameField.style.width).toBe('100%');
-        });
-
-        it('applies correct width for two column layout', () => {
-            const props = { ...defaultProps, columns: 2 };
-            const { container } = renderWithRedux(<AssetDetails {...props} />);
-
-            // Name field should be 50% width in two column
-            const nameField: HTMLElement = container.querySelector(
-                '[data-testid="textfield-Name"]'
-            );
-            expect(nameField).toBeTruthy();
-            expect(nameField.style.width).toBe('50%');
-        });
-    });
-
-    describe('Tag Management', () => {
-        it('renders existing tags', () => {
-            const store = createMockStore({
-                assetList: {
-                    assets: [
-                        {
-                            ...defaultAsset,
-                            tags: ['tag1', 'tag2', 'tag3']
-                        }
-                    ]
-                }
-            });
-
-            renderWithRedux(<AssetDetails {...defaultProps} />, store);
-
-            expect(screen.getByText('tag1')).toBeTruthy();
-            expect(screen.getByText('tag2')).toBeTruthy();
-            expect(screen.getByText('tag3')).toBeTruthy();
-        });
-
-        it('renders unique tags only', () => {
-            const store = createMockStore({
-                assetList: {
-                    assets: [
-                        {
-                            ...defaultAsset,
-                            tags: ['duplicate', 'duplicate', 'unique']
-                        }
-                    ]
-                }
-            });
-
-            const { container } = renderWithRedux(<AssetDetails {...defaultProps} />, store);
-
-            // Should only render one instance of 'duplicate'
-            const duplicateTags = container.querySelectorAll('[data-testid*="duplicate"]');
-            expect(duplicateTags.length).toBeLessThanOrEqual(1);
-        });
-
-        it('calls onRemoveTag when tag remove button is clicked', () => {
-            const onRemoveTagMock = vi.fn();
-            const props = { ...defaultProps, onRemoveTag: onRemoveTagMock };
-
-            const store = createMockStore({
-                assetList: {
-                    assets: [
-                        {
-                            ...defaultAsset,
-                            tags: ['removable-tag']
-                        }
-                    ]
-                }
-            });
-
-            const { container } = renderWithRedux(<AssetDetails {...props} />, store);
-
-            // Find and click the remove button for the tag
-            const removeButtons = container.querySelectorAll('button');
-            if (removeButtons.length > 0) {
-                fireEvent.click(removeButtons[0]);
-                expect(onRemoveTagMock).toHaveBeenCalled();
-            }
-        });
-
-        it('renders add tag field with suggestions', () => {
-            renderWithRedux(<AssetDetails {...defaultProps} />);
-
-            // Should render the add tag field
-            const addTagLabel = screen.getByText('Add Tag');
-            expect(addTagLabel).toBeTruthy();
-        });
-    });
-
-    describe('User Interactions', () => {
-        it('calls onNameChange on name field submit for existing assets', () => {
-            const onNameChangeMock = vi.fn();
-            const props = { ...defaultProps, onNameChange: onNameChangeMock, newAsset: false };
-
-            renderWithRedux(<AssetDetails {...props} />);
-
-            const nameInput = screen.getByDisplayValue('Test Asset');
-            fireEvent.change(nameInput, { target: { value: 'Updated Name' } });
-            fireEvent.keyDown(nameInput, { key: 'Enter' });
-
-            // For existing assets, onNameChange should be called on submit
-            expect(onNameChangeMock).toHaveBeenCalled();
-        });
-
-        it('calls onNameChange on name field change for new assets', () => {
-            const onNameChangeMock = vi.fn();
-            const props = { ...defaultProps, onNameChange: onNameChangeMock, newAsset: true };
-
-            renderWithRedux(<AssetDetails {...props} />);
-
-            const nameInput = screen.getByDisplayValue('Test Asset');
-            fireEvent.change(nameInput, { target: { value: 'New Asset Name' } });
-
-            // For new assets, onNameChange should be called on change
-            expect(onNameChangeMock).toHaveBeenCalled();
-        });
-
-        it('calls onAddTag when add tag field is submitted', () => {
-            const onAddTagMock = vi.fn();
-            const props = { ...defaultProps, onAddTag: onAddTagMock };
-
-            renderWithRedux(<AssetDetails {...props} />);
-
-            // Find the add tag input and submit a new tag
-            const inputs = screen.getAllByRole('textbox');
-            const addTagInput = inputs.find(
-                (input) =>
-                    input.getAttribute('placeholder')?.includes('tag') ||
-                    input.closest('[data-testid*="tag"]')
-            );
-
-            if (addTagInput) {
-                fireEvent.change(addTagInput, { target: { value: 'new-tag' } });
-                fireEvent.keyDown(addTagInput, { key: 'Enter' });
-                expect(onAddTagMock).toHaveBeenCalledWith('new-tag');
-            }
-        });
-    });
-
-    describe('Component Lifecycle', () => {
-        it('initializes state correctly on mount', () => {
-            const { container } = renderWithRedux(<AssetDetails {...defaultProps} />);
-
-            // Component should render without errors
-            expect(container.querySelector('.asset-details')).toBeTruthy();
-        });
-
-        it('handles new asset tags correctly', () => {
-            const newAssetWithTags = {
-                ...defaultAsset,
-                tags: ['new-tag-1', 'new-tag-2']
-            };
-
-            const props = { ...defaultProps, asset: newAssetWithTags, newAsset: true };
-            renderWithRedux(<AssetDetails {...props} />);
-
-            // Should render the new asset tags
-            expect(screen.getByText('new-tag-1')).toBeTruthy();
-            expect(screen.getByText('new-tag-2')).toBeTruthy();
-        });
-
-        it('updates when asset changes', () => {
-            const { rerender } = renderWithRedux(<AssetDetails {...defaultProps} />);
-
-            const updatedAsset = { ...defaultAsset, name: 'Updated Asset Name' };
-            const updatedProps = { ...defaultProps, asset: updatedAsset };
-
-            rerender(
-                <Provider store={createMockStore()}>
-                    <AssetDetails {...updatedProps} />
-                </Provider>
-            );
-
-            expect(screen.getByDisplayValue('Updated Asset Name')).toBeTruthy();
-        });
-    });
-
-    describe('Header Buttons', () => {
-        it('renders header buttons when provided', () => {
-            const headerButtons = [<button key='test-button'>Test Button</button>];
-
-            const props = { ...defaultProps, headerButtons };
-            renderWithRedux(<AssetDetails {...props} />);
-
-            expect(screen.getByText('Test Button')).toBeTruthy();
-        });
-
-        it('renders header buttons container even when no buttons provided', () => {
-            const { container } = renderWithRedux(<AssetDetails {...defaultProps} />);
-
-            expect(container.querySelector('.header-buttons')).toBeTruthy();
-        });
-    });
-
-    describe('Edge Cases', () => {
-        it('handles missing asset properties gracefully', () => {
-            const incompleteAsset = {
-                id: 'incomplete-asset',
-                name: 'Incomplete Asset',
-                type: ASSET_TYPES.IMAGE,
-                tags: []
-                // Missing other properties
-            };
-
-            const store = createMockStore({
-                assetList: {
-                    assets: [incompleteAsset]
-                }
-            });
-
-            const props = { ...defaultProps, asset: incompleteAsset };
-            const { container } = renderWithRedux(<AssetDetails {...props} />, store);
-
-            expect(container.querySelector('.asset-details')).toBeTruthy();
-        });
-
-        it('handles empty asset list in Redux store', () => {
-            const store = createMockStore({
-                assetList: {
-                    assets: [
-                        // Include the asset in the store to prevent find() returning undefined
-                        { ...defaultAsset, tags: [] }
-                    ]
-                },
-                assetTags: []
-            });
-
-            // This should handle the case where asset is not found in the list
-            expect(() => {
-                renderWithRedux(<AssetDetails {...defaultProps} />, store);
-            }).not.toThrow();
-        });
-
-        it('handles null tags gracefully', () => {
-            const assetWithNullTags = { ...defaultAsset, tags: null };
-            const store = createMockStore({
-                assetList: {
-                    assets: [assetWithNullTags]
-                }
-            });
-
-            const props = { ...defaultProps, asset: assetWithNullTags };
-
-            expect(() => {
-                renderWithRedux(<AssetDetails {...props} />, store);
-            }).not.toThrow();
-        });
-    });
-});