@imposium-hub/components 2.16.0 → 3.0.0-1

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

@@ -1,166 +0,0 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import React from 'react';
-import { render, act } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { legacy_createStore as createStore } from 'redux';
-import { assets as copy } from '../../constants/copy';
-
-let capturedTextFieldProps: any = {};
-
-vi.mock('../text-field/TextField', () => ({
-    default: (props: any) => {
-        capturedTextFieldProps = props;
-        return (
-            <div
-                data-testid='mock-text-field'
-                data-value={props.value}
-                data-disabled={props.disabled}>
-                <input
-                    value={props.value || ''}
-                    onChange={(e) => props.onChange((e.target as HTMLInputElement).value)}
-                    readOnly={props.disabled}
-                />
-            </div>
-        );
-    }
-}));
-
-vi.mock('../determinate-loader/DeterminateLoader', () => ({
-    DeterminateLoader: ({ progress, text }: any) => (
-        <div
-            data-testid='determinate-loader'
-            data-progress={progress}>
-            {text}
-        </div>
-    )
-}));
-
-vi.mock('../../redux/actions/asset-list', () => ({
-    updateAssetName: vi.fn((_api, _id, _name) => ({ type: 'MOCK_UPDATE_NAME' })),
-    default: {}
-}));
-
-import AssetsTableNameCellConnected from './AssetsTableNameCell';
-import { updateAssetName } from '../../redux/actions/asset-list';
-
-const MOCK_ASSET_ID = 'asset-abc';
-const MOCK_ASSET_NAME = 'my-video.mp4';
-const MOCK_API = { updateAsset: vi.fn() };
-
-const createMockStore = () => createStore((state = {}) => state);
-
-const buildCellProp = (overrides: Record<string, any> = {}) => ({
-    row: {
-        original: {
-            name: MOCK_ASSET_NAME,
-            id: MOCK_ASSET_ID,
-            percent: undefined,
-            error: undefined,
-            ...overrides
-        }
-    }
-});
-
-const renderComponent = (cellOverrides: Record<string, any> = {}, disabled = false) => {
-    const store = createMockStore();
-    const cell = buildCellProp(cellOverrides);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableNameCellConnected
-                cell={cell}
-                api={MOCK_API}
-                disabled={disabled}
-            />
-        </Provider>
-    );
-
-    return result;
-};
-
-describe('AssetsTableNameCell', () => {
-    beforeEach(() => {
-        vi.useFakeTimers();
-        vi.mocked(updateAssetName).mockClear();
-        capturedTextFieldProps = {};
-    });
-
-    afterEach(() => {
-        vi.useRealTimers();
-    });
-
-    it('renders a TextField with the asset name when not uploading', () => {
-        const { getByTestId } = renderComponent();
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-value')).toBe(MOCK_ASSET_NAME);
-        expect(textField.getAttribute('data-disabled')).toBe('false');
-    });
-
-    it('renders a TextField as disabled when disabled prop is true', () => {
-        const { getByTestId } = renderComponent({}, true);
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-disabled')).toBe('true');
-    });
-
-    it('renders DeterminateLoader when upload progress is under 100', () => {
-        const { getByTestId } = renderComponent({ percent: 45 });
-        const loader = getByTestId('determinate-loader');
-
-        expect(loader.getAttribute('data-progress')).toBe('45');
-        expect(loader.textContent).toBe(MOCK_ASSET_NAME);
-    });
-
-    it('renders prepare phase text when upload progress is 100 and no error', () => {
-        const { container } = renderComponent({ percent: 100 });
-
-        expect(container.textContent).toBe(copy.uploads.preparePhase);
-    });
-
-    it('renders error message when upload progress is 100 and error exists', () => {
-        const errorMessage = 'Upload failed';
-        const { container } = renderComponent({ percent: 100, error: errorMessage });
-
-        expect(container.textContent).toBe(errorMessage);
-    });
-
-    it('dispatches updateAssetName after debounce on text change', () => {
-        renderComponent();
-
-        act(() => {
-            capturedTextFieldProps.onChange('new-name');
-        });
-
-        expect(updateAssetName).not.toHaveBeenCalled();
-
-        act(() => {
-            vi.advanceTimersByTime(1000);
-        });
-
-        expect(updateAssetName).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'new-name');
-    });
-
-    it('resets debounce timer on rapid changes', () => {
-        renderComponent();
-
-        act(() => {
-            capturedTextFieldProps.onChange('first');
-        });
-
-        act(() => {
-            vi.advanceTimersByTime(500);
-        });
-
-        act(() => {
-            capturedTextFieldProps.onChange('second');
-        });
-
-        act(() => {
-            vi.advanceTimersByTime(1000);
-        });
-
-        expect(updateAssetName).toHaveBeenCalledTimes(1);
-        expect(updateAssetName).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'second');
-    });
-});

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

@@ -1,95 +0,0 @@
-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';
-
-vi.mock('../text-field/TextField', () => ({
-    default: ({ className, submittable, submittableType, value, doSubmit, header }: any) => (
-        <div
-            data-testid='mock-text-field'
-            data-classname={className}
-            data-submittable={submittable}
-            data-submittable-type={submittableType}
-            data-value={value || ''}
-            data-header={header}>
-            <button
-                data-testid='submit-trigger'
-                onClick={() => doSubmit('new-filter-value')}>
-                Submit
-            </button>
-        </div>
-    )
-}));
-
-vi.mock('../../redux/actions/asset-filters', () => ({
-    updateFilters: vi.fn((filters) => ({ type: 'assetFilters/UPDATE', newFilters: filters })),
-    default: { UPDATE: 'assetFilters/UPDATE', RESET: 'footageFilters/RESET' }
-}));
-
-import AssetsTableNameFilterMemoized from './AssetsTableNameFilter';
-
-const MOCK_NAME_FILTER = 'existing-name-filter';
-
-const createMockStore = (nameFilter = '') => {
-    const initialState = { assetFilters: { name: nameFilter } };
-    return createStore((state: any = initialState, action: any) => {
-        if (action.type === 'assetFilters/UPDATE') {
-            return {
-                ...state,
-                assetFilters: { ...state.assetFilters, ...action.newFilters }
-            };
-        }
-        return state;
-    });
-};
-
-const renderComponent = (nameFilter = '') => {
-    const store = createMockStore(nameFilter);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableNameFilterMemoized />
-        </Provider>
-    );
-
-    return { ...result, store };
-};
-
-describe('AssetsTableNameFilter', () => {
-    it('renders the TextField with correct props', () => {
-        const { getByTestId } = renderComponent(MOCK_NAME_FILTER);
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-classname')).toBe('asset-name');
-        expect(textField.getAttribute('data-submittable')).toBe('true');
-        expect(textField.getAttribute('data-submittable-type')).toBe('search');
-        expect(textField.getAttribute('data-value')).toBe(MOCK_NAME_FILTER);
-        expect(textField.getAttribute('data-header')).toBe('true');
-    });
-
-    it('dispatches updateFilters with the submitted name value', () => {
-        const { getByTestId, store } = renderComponent();
-        const submitButton = getByTestId('submit-trigger');
-
-        submitButton.click();
-
-        const storeState = store.getState();
-        expect(storeState.assetFilters.name).toBe('new-filter-value');
-    });
-
-    it('renders with an empty filter value when no name is set', () => {
-        const { getByTestId } = renderComponent();
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-value')).toBe('');
-    });
-
-    it('passes the current filter value from the redux store', () => {
-        const filterValue = 'search-term-xyz';
-        const { getByTestId } = renderComponent(filterValue);
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-value')).toBe(filterValue);
-    });
-});

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

@@ -1,191 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-
-const MOCK_PREVIEW_STYLE = { width: 200, height: 150 };
-
-vi.mock('../../index', () => ({
-    ASSET_TYPES: {
-        VIDEO: 'video',
-        IMAGE: 'image',
-        AUDIO: 'audio'
-    },
-    AssetsTypeIcon: ({ type }: any) => (
-        <div
-            data-testid='assets-type-icon'
-            data-type={type}
-        />
-    ),
-    ImagePreview: ({ url, onRequestClose, style }: any) => (
-        <div
-            data-testid='image-preview'
-            data-url={url}
-            style={style}>
-            <button
-                data-testid='image-close'
-                onClick={onRequestClose}>
-                Close
-            </button>
-        </div>
-    ),
-    VideoPreview: ({ url, onRequestClose, playbackSettings, style }: any) => (
-        <div
-            data-testid='video-preview'
-            data-url={url}
-            data-autoplay={playbackSettings?.autoPlay}
-            data-loop={playbackSettings?.loop}
-            style={style}>
-            <button
-                data-testid='video-close'
-                onClick={onRequestClose}>
-                Close
-            </button>
-        </div>
-    ),
-    AudioPreview: ({ url, onRequestClose, playbackSettings, style }: any) => (
-        <div
-            data-testid='audio-preview'
-            data-url={url}
-            data-autoplay={playbackSettings?.autoPlay}
-            data-loop={playbackSettings?.loop}
-            style={style}>
-            <button
-                data-testid='audio-close'
-                onClick={onRequestClose}>
-                Close
-            </button>
-        </div>
-    ),
-    getMediaPreviewStyle: vi.fn(() => MOCK_PREVIEW_STYLE)
-}));
-
-import AssetsTablePreviewCellMemoized from './AssetsTablePreviewCell';
-
-const MOCK_URL = 'https://example.com/asset.mp4';
-const MOCK_WIDTH = 1920;
-const MOCK_HEIGHT = 1080;
-
-const buildCellProp = (type: string) => ({
-    row: {
-        values: { type },
-        original: {
-            url: MOCK_URL,
-            width: MOCK_WIDTH,
-            height: MOCK_HEIGHT
-        }
-    }
-});
-
-const renderComponent = (
-    type: string,
-    showMedia: boolean,
-    overrides: { asset?: any; onClick?: () => void; onRequestClose?: () => void } = {}
-) => {
-    const onClick = overrides.onClick ?? vi.fn();
-    const onRequestClose = overrides.onRequestClose ?? vi.fn();
-    const asset = overrides.asset ?? undefined;
-    const cell = buildCellProp(type);
-
-    const result = render(
-        <AssetsTablePreviewCellMemoized
-            cell={cell}
-            showMedia={showMedia}
-            asset={asset}
-            onClick={onClick}
-            onRequestClose={onRequestClose}
-        />
-    );
-
-    return { ...result, onClick, onRequestClose };
-};
-
-describe('AssetsTablePreviewCell', () => {
-    it('renders AssetsTypeIcon with the correct type', () => {
-        const { getByTestId } = renderComponent('video', false);
-        const icon = getByTestId('assets-type-icon');
-
-        expect(icon.getAttribute('data-type')).toBe('video');
-    });
-
-    it('calls onClick when clicked and showMedia is false', () => {
-        const onClick = vi.fn();
-        const { container } = renderComponent('image', false, { onClick });
-        const cell = container.querySelector('.asset-type-cell');
-
-        if (cell) {
-            fireEvent.click(cell);
-        }
-
-        expect(onClick).toHaveBeenCalledOnce();
-    });
-
-    it('does not call onClick when clicked and showMedia is true', () => {
-        const onClick = vi.fn();
-        const { container } = renderComponent('image', true, { onClick });
-        const cell = container.querySelector('.asset-type-cell');
-
-        if (cell) {
-            fireEvent.click(cell);
-        }
-
-        expect(onClick).not.toHaveBeenCalled();
-    });
-
-    it('renders ImagePreview when type is IMAGE and showMedia is true', () => {
-        const { getByTestId, queryByTestId } = renderComponent('image', true);
-
-        expect(getByTestId('image-preview').getAttribute('data-url')).toBe(MOCK_URL);
-        expect(queryByTestId('video-preview')).toBeNull();
-        expect(queryByTestId('audio-preview')).toBeNull();
-    });
-
-    it('renders VideoPreview when type is VIDEO and showMedia is true', () => {
-        const { getByTestId, queryByTestId } = renderComponent('video', true);
-
-        expect(getByTestId('video-preview').getAttribute('data-url')).toBe(MOCK_URL);
-        expect(queryByTestId('image-preview')).toBeNull();
-        expect(queryByTestId('audio-preview')).toBeNull();
-    });
-
-    it('renders AudioPreview when type is AUDIO and showMedia is true', () => {
-        const { getByTestId, queryByTestId } = renderComponent('audio', true);
-
-        expect(getByTestId('audio-preview').getAttribute('data-url')).toBe(MOCK_URL);
-        expect(queryByTestId('image-preview')).toBeNull();
-        expect(queryByTestId('video-preview')).toBeNull();
-    });
-
-    it('does not render any preview when showMedia is false', () => {
-        const { queryByTestId } = renderComponent('video', false);
-
-        expect(queryByTestId('image-preview')).toBeNull();
-        expect(queryByTestId('video-preview')).toBeNull();
-        expect(queryByTestId('audio-preview')).toBeNull();
-    });
-
-    it('calls onRequestClose when a preview close button is clicked', () => {
-        const onRequestClose = vi.fn();
-        const { getByTestId } = renderComponent('image', true, { onRequestClose });
-
-        fireEvent.click(getByTestId('image-close'));
-
-        expect(onRequestClose).toHaveBeenCalledOnce();
-    });
-
-    it('uses asset url/dimensions when asset prop is provided', () => {
-        const customAsset = {
-            url: 'https://example.com/custom.png',
-            width: 800,
-            height: 600
-        };
-        const { getByTestId } = renderComponent('image', true, { asset: customAsset });
-
-        expect(getByTestId('image-preview').getAttribute('data-url')).toBe(customAsset.url);
-    });
-
-    it('falls back to cell.row.original values when asset is undefined', () => {
-        const { getByTestId } = renderComponent('image', true);
-
-        expect(getByTestId('image-preview').getAttribute('data-url')).toBe(MOCK_URL);
-    });
-});

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

@@ -1,87 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import React from 'react';
-import { render } from '@testing-library/react';
-import AssetsTableRateCell from './AssetsTableRateCell';
-
-const VIDEO_COMPOSITION_TYPE = 'video_composition';
-const VIDEO_TYPE = 'video';
-
-const buildCellProp = (overrides: Record<string, any> = {}) => ({
-    row: {
-        original: {
-            type: VIDEO_TYPE,
-            data: null,
-            rate: null,
-            ...overrides
-        }
-    }
-});
-
-const renderComponent = (overrides: Record<string, any> = {}) => {
-    return render(<AssetsTableRateCell cell={buildCellProp(overrides)} />);
-};
-
-describe('AssetsTableRateCell', () => {
-    it('renders the rate formatted to two decimal places', () => {
-        const { container } = renderComponent({ rate: 29.97 });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('29.97');
-    });
-
-    it('renders an integer rate with two decimal places', () => {
-        const { container } = renderComponent({ rate: 30 });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('30.00');
-    });
-
-    it('renders empty when rate is null', () => {
-        const { container } = renderComponent({ rate: null });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('');
-    });
-
-    it('renders empty when rate is undefined', () => {
-        const { container } = renderComponent({ rate: undefined });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('');
-    });
-
-    it('uses rate from parsed data JSON when type is video_composition', () => {
-        const compositionData = JSON.stringify({ rate: 24 });
-        const { container } = renderComponent({
-            type: VIDEO_COMPOSITION_TYPE,
-            data: compositionData,
-            rate: 30
-        });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('24.00');
-    });
-
-    it('ignores data when type is not video_composition', () => {
-        const compositionData = JSON.stringify({ rate: 24 });
-        const { container } = renderComponent({
-            type: VIDEO_TYPE,
-            data: compositionData,
-            rate: 60
-        });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('60.00');
-    });
-
-    it('does not parse data when data is null even for video_composition type', () => {
-        const { container } = renderComponent({
-            type: VIDEO_COMPOSITION_TYPE,
-            data: null,
-            rate: 25
-        });
-        const cell = container.querySelector('.asset-rate-cell');
-
-        expect(cell?.textContent).toBe('25.00');
-    });
-});

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

@@ -1,156 +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, width, value, onChange }: any) => (
-        <div
-            data-testid='mock-checkbox-field'
-            data-label={label}
-            data-width={width}
-            data-value={value}>
-            <input
-                type='checkbox'
-                checked={value}
-                onChange={(e) => onChange(e.target.checked, e)}
-            />
-        </div>
-    )
-}));
-
-vi.mock('../../redux/actions/selected-assets', () => ({
-    selectAsset: vi.fn((id) => ({ type: 'selectedAssets/SELECT', id })),
-    deselectAsset: vi.fn((id) => ({ type: 'selectedAssets/DESELECT', id })),
-    selectMultipleAssets: vi.fn((id) => ({ type: 'selectedAssets/SELECT_MULTIPLE', id }))
-}));
-
-import AssetsTableSelectCellMemoized from './AssetsTableSelectCell';
-
-const MOCK_ASSET_ID = 'asset-123';
-const MOCK_OTHER_ASSET_ID = 'asset-456';
-
-const buildCellProp = (overrides: Record<string, any> = {}) => ({
-    row: {
-        original: {
-            id: MOCK_ASSET_ID,
-            type: 'video',
-            ...overrides
-        }
-    }
-});
-
-const createMockStore = (selectedAssets: string[] = []) => {
-    const initialState = { selectedAssets };
-    return createStore((state: any = initialState, action: any) => {
-        switch (action.type) {
-            case 'selectedAssets/SELECT':
-                return {
-                    ...state,
-                    selectedAssets: [...state.selectedAssets, action.id]
-                };
-            case 'selectedAssets/DESELECT':
-                return {
-                    ...state,
-                    selectedAssets: state.selectedAssets.filter((id) => id !== action.id)
-                };
-            case 'selectedAssets/SELECT_MULTIPLE':
-                return {
-                    ...state,
-                    selectedAssets: [...state.selectedAssets, action.id]
-                };
-            default:
-                return state;
-        }
-    });
-};
-
-const renderComponent = (
-    cellOverrides: Record<string, any> = {},
-    selectedAssets: string[] = []
-) => {
-    const store = createMockStore(selectedAssets);
-    const cell = buildCellProp(cellOverrides);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableSelectCellMemoized cell={cell} />
-        </Provider>
-    );
-
-    return { ...result, store };
-};
-
-describe('AssetsTableSelectCell', () => {
-    it('renders CheckboxField with correct props when asset is not selected', () => {
-        const { getByTestId } = renderComponent();
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-label')).toBe('');
-        expect(checkbox.getAttribute('data-width')).toBe('auto');
-        expect(checkbox.getAttribute('data-value')).toBe('false');
-    });
-
-    it('renders CheckboxField as checked when asset is selected', () => {
-        const { getByTestId } = renderComponent({}, [MOCK_ASSET_ID]);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-
-    it('returns null when asset type is upload', () => {
-        const { container } = renderComponent({ type: 'upload' });
-
-        expect(container.firstChild).toBeNull();
-    });
-
-    it('dispatches selectAsset when checkbox is checked without shift key', () => {
-        const { getByRole, store } = renderComponent();
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput);
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toContain(MOCK_ASSET_ID);
-    });
-
-    it('dispatches deselectAsset when checkbox is unchecked', () => {
-        const { getByRole, store } = renderComponent({}, [MOCK_ASSET_ID]);
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput);
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).not.toContain(MOCK_ASSET_ID);
-    });
-
-    it('dispatches selectMultipleAssets when checkbox is checked with shift key and other assets selected', () => {
-        const { getByRole, store } = renderComponent({}, [MOCK_OTHER_ASSET_ID]);
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput, { shiftKey: true });
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toContain(MOCK_ASSET_ID);
-        expect(storeState.selectedAssets).toContain(MOCK_OTHER_ASSET_ID);
-    });
-
-    it('dispatches selectAsset when shift key is pressed but no other assets are selected', () => {
-        const { getByRole, store } = renderComponent();
-        const checkboxInput = getByRole('checkbox');
-
-        fireEvent.click(checkboxInput, { shiftKey: true });
-
-        const storeState = store.getState();
-        expect(storeState.selectedAssets).toContain(MOCK_ASSET_ID);
-        expect(storeState.selectedAssets).toHaveLength(1);
-    });
-
-    it('correctly identifies selected state when asset ID is in selectedAssets array', () => {
-        const { getByTestId } = renderComponent({}, [MOCK_OTHER_ASSET_ID, MOCK_ASSET_ID]);
-        const checkbox = getByTestId('mock-checkbox-field');
-
-        expect(checkbox.getAttribute('data-value')).toBe('true');
-    });
-});