@imposium-hub/components 2.16.0-0 → 2.16.0

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

@@ -0,0 +1,132 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+let capturedDropConfig: any = {};
+
+vi.mock('react-dnd', () => ({
+    useDrop: (configFn: () => any) => {
+        capturedDropConfig = typeof configFn === 'function' ? configFn() : configFn;
+        const refCallback = vi.fn();
+        return [{}, refCallback];
+    }
+}));
+
+vi.mock('react-dnd-html5-backend', () => ({
+    NativeTypes: { FILE: '__NATIVE_FILE__' }
+}));
+
+import AssetsTableDropzone from './AssetsTableDropzone';
+
+describe('AssetsTableDropzone', () => {
+    it('renders children inside a div', () => {
+        const { getByText } = render(
+            <AssetsTableDropzone onDrop={vi.fn()}>
+                <span>Drop here</span>
+            </AssetsTableDropzone>
+        );
+
+        expect(getByText('Drop here')).toBeTruthy();
+    });
+
+    it('applies the provided className', () => {
+        const { container } = render(
+            <AssetsTableDropzone
+                onDrop={vi.fn()}
+                className='custom-zone'>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        expect(container?.firstElementChild?.className).toBe('custom-zone');
+    });
+
+    it('defaults to empty className when none is provided', () => {
+        const { container } = render(
+            <AssetsTableDropzone onDrop={vi.fn()}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        expect(container?.firstElementChild?.className).toBe('');
+    });
+
+    it('accepts NativeTypes.FILE in the drop config', () => {
+        render(
+            <AssetsTableDropzone onDrop={vi.fn()}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        expect(capturedDropConfig.accept).toContain('__NATIVE_FILE__');
+    });
+
+    it('calls onDrop with props and monitor when an item is dropped', () => {
+        const onDrop = vi.fn();
+        render(
+            <AssetsTableDropzone onDrop={onDrop}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        const mockMonitor = { isOver: vi.fn(), canDrop: vi.fn() };
+        capturedDropConfig.drop({}, mockMonitor);
+
+        expect(onDrop).toHaveBeenCalledWith(expect.objectContaining({ onDrop }), mockMonitor);
+    });
+
+    it('does not throw when onDrop is falsy', () => {
+        render(
+            <AssetsTableDropzone onDrop={undefined as any}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        const mockMonitor = { isOver: vi.fn(), canDrop: vi.fn() };
+        expect(() => capturedDropConfig.drop({}, mockMonitor)).not.toThrow();
+    });
+
+    it('uses onExternalCollect when provided', () => {
+        const onExternalCollect = vi.fn(() => ({ custom: true }));
+        render(
+            <AssetsTableDropzone
+                onDrop={vi.fn()}
+                onExternalCollect={onExternalCollect}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        const mockMonitor = { isOver: vi.fn(), canDrop: vi.fn() };
+        const result = capturedDropConfig.collect(mockMonitor);
+
+        expect(onExternalCollect).toHaveBeenCalledWith(mockMonitor);
+        expect(result).toEqual({ custom: true });
+    });
+
+    it('uses default collect when onExternalCollect is not provided', () => {
+        render(
+            <AssetsTableDropzone onDrop={vi.fn()}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        const mockIsOver = vi.fn();
+        const mockCanDrop = vi.fn();
+        const mockMonitor = { isOver: mockIsOver, canDrop: mockCanDrop };
+        const result = capturedDropConfig.collect(mockMonitor);
+
+        expect(result).toEqual({ isOver: mockIsOver, canDrop: mockCanDrop });
+    });
+
+    it('does not attach dropRef when disable is true', () => {
+        const { container } = render(
+            <AssetsTableDropzone
+                onDrop={vi.fn()}
+                disable={true}>
+                <span>content</span>
+            </AssetsTableDropzone>
+        );
+
+        expect(container.firstElementChild).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,119 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+const MOCK_DURATION = '00:01:30:00';
+const MOCK_AUDIO_DURATION = '00:02:15';
+
+vi.mock('../../Util', async (importOriginal) => {
+    const actual = (await importOriginal()) as any;
+    return {
+        ...actual,
+        getDuration: vi.fn(() => MOCK_DURATION),
+        formatAudioDuration: vi.fn(() => MOCK_AUDIO_DURATION)
+    };
+});
+
+import AssetsTableDurationCell, { secondsToTime } from './AssetsTableDurationCell';
+import { getDuration, formatAudioDuration } from '../../Util';
+import { ASSET_TYPES } from '../../constants/assets';
+
+const buildCellProp = (overrides: Record<string, any> = {}) => ({
+    row: {
+        original: {
+            type: 'video',
+            data: '{}',
+            rate: 30,
+            frame_count: 2700,
+            duration: 0,
+            ...overrides
+        }
+    }
+});
+
+describe('AssetsTableDurationCell', () => {
+    it('renders duration using getDuration when rate and frame_count exist', () => {
+        const cell = buildCellProp({ type: 'video', rate: 30, frame_count: 2700 });
+        const { container } = render(<AssetsTableDurationCell cell={cell} />);
+
+        expect(getDuration).toHaveBeenCalledWith(2700, 30);
+        expect(container.querySelector('.asset-duration-cell')).toBeTruthy();
+        expect(container.textContent).toBe(MOCK_DURATION);
+    });
+
+    it('renders empty duration when rate is missing', () => {
+        vi.mocked(getDuration).mockClear();
+        const cell = buildCellProp({ type: 'video', rate: null, frame_count: 100 });
+        const { container } = render(<AssetsTableDurationCell cell={cell} />);
+
+        expect(getDuration).not.toHaveBeenCalled();
+        expect(container.querySelector('.asset-duration-cell')).toBeTruthy();
+    });
+
+    it('renders frame count for image_sequence type', () => {
+        const cell = buildCellProp({
+            type: ASSET_TYPES.IMAGE_SEQUENCE,
+            duration: 120,
+            rate: null,
+            frame_count: null
+        });
+        const { container } = render(<AssetsTableDurationCell cell={cell} />);
+
+        expect(container.textContent).toBe('120 frames');
+    });
+
+    it('parses data JSON and renders duration for video_composition type', () => {
+        const compositionData = JSON.stringify({ frames: 900, rate: 24 });
+        const cell = buildCellProp({
+            type: ASSET_TYPES.VIDEO_COMPOSITION,
+            data: compositionData,
+            rate: null,
+            frame_count: null
+        });
+        const { container } = render(<AssetsTableDurationCell cell={cell} />);
+
+        expect(getDuration).toHaveBeenCalledWith(900, 24);
+        expect(container.textContent).toBe(MOCK_DURATION);
+    });
+
+    it('renders formatted audio duration for audio type', () => {
+        const cell = buildCellProp({
+            type: ASSET_TYPES.AUDIO,
+            duration: 135,
+            rate: null,
+            frame_count: null
+        });
+        const { container } = render(<AssetsTableDurationCell cell={cell} />);
+
+        expect(formatAudioDuration).toHaveBeenCalledWith(135);
+        expect(container.textContent).toBe(MOCK_AUDIO_DURATION);
+    });
+
+    it('renders empty div when duration is null', () => {
+        vi.mocked(getDuration).mockReturnValueOnce(null as any);
+        const cell = buildCellProp({ type: 'unknown', rate: 30, frame_count: 100 });
+        const { container } = render(<AssetsTableDurationCell cell={cell} />);
+        const durationCell = container.querySelector('.asset-duration-cell');
+
+        expect(durationCell).toBeTruthy();
+        expect(durationCell?.textContent).toBe('');
+    });
+});
+
+describe('secondsToTime', () => {
+    it('formats seconds into minutes:seconds', () => {
+        expect(secondsToTime(90)).toBe('1:30');
+    });
+
+    it('pads single-digit seconds with a leading zero', () => {
+        expect(secondsToTime(65)).toBe('1:05');
+    });
+
+    it('handles zero seconds', () => {
+        expect(secondsToTime(0)).toBe('0:00');
+    });
+
+    it('handles large values', () => {
+        expect(secondsToTime(3661)).toBe('61:01');
+    });
+});

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

@@ -0,0 +1,46 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+vi.mock('../../constants/icons', () => ({
+    ICON_GLOBE: <span data-testid='icon-globe'>globe</span>
+}));
+
+import AssetsTableGlobalCellMemoized from './AssetsTableGlobalCell';
+
+const buildCellProp = (storyId: any) => ({
+    row: { original: { story_id: storyId } }
+});
+
+describe('AssetsTableGlobalCell', () => {
+    it('hides the globe icon when story_id is a truthy string', () => {
+        const { container, queryByTestId } = render(
+            <AssetsTableGlobalCellMemoized cell={buildCellProp('story-123')} />
+        );
+
+        expect(container.querySelector('.asset-global-cell')).toBeTruthy();
+        expect(queryByTestId('icon-globe')).toBeNull();
+    });
+
+    it('hides the globe icon when story_id is undefined', () => {
+        const { queryByTestId } = render(
+            <AssetsTableGlobalCellMemoized cell={buildCellProp(undefined)} />
+        );
+
+        expect(queryByTestId('icon-globe')).toBeNull();
+    });
+
+    it('shows the globe icon when story_id is null', () => {
+        const { getByTestId } = render(
+            <AssetsTableGlobalCellMemoized cell={buildCellProp(null)} />
+        );
+
+        expect(getByTestId('icon-globe')).toBeTruthy();
+    });
+
+    it('shows the globe icon when story_id is an empty string', () => {
+        const { getByTestId } = render(<AssetsTableGlobalCellMemoized cell={buildCellProp('')} />);
+
+        expect(getByTestId('icon-globe')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,166 @@
+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

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