@imposium-hub/components 2.14.8 → 2.14.11

package/{dist/esm/components/assets/AssetsTableAssetIdFilter.test.js → src/components/assets/AssetsTableNameFilter.test.tsx}

@@ -3,19 +3,37 @@ 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 }) => (React.createElement("div", { "data-testid": 'mock-text-field', "data-classname": className, "data-submittable": submittable, "data-submittable-type": submittableType, "data-value": value || '', "data-header": header },
-        React.createElement("button", { "data-testid": 'submit-trigger', onClick: () => doSubmit('new-filter-value') }, "Submit")))
+    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 AssetsTableAssetIdFilterMemoized from './AssetsTableAssetIdFilter';
-const MOCK_ASSET_ID_FILTER = 'existing-filter-123';
-const createMockStore = (assetIdFilter = '') => {
-    const initialState = { assetFilters: { id: assetIdFilter } };
-    return createStore((state = initialState, action) => {
+
+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,
@@ -25,39 +43,53 @@ const createMockStore = (assetIdFilter = '') => {
         return state;
     });
 };
-const renderComponent = (assetIdFilter = '') => {
-    const store = createMockStore(assetIdFilter);
-    const result = render(React.createElement(Provider, { store: store },
-        React.createElement(AssetsTableAssetIdFilterMemoized, null)));
+
+const renderComponent = (nameFilter = '') => {
+    const store = createMockStore(nameFilter);
+
+    const result = render(
+        <Provider store={store}>
+            <AssetsTableNameFilterMemoized />
+        </Provider>
+    );
+
     return { ...result, store };
 };
-describe('AssetsTableAssetIdFilter', () => {
+
+describe('AssetsTableNameFilter', () => {
     it('renders the TextField with correct props', () => {
-        const { getByTestId } = renderComponent(MOCK_ASSET_ID_FILTER);
+        const { getByTestId } = renderComponent(MOCK_NAME_FILTER);
         const textField = getByTestId('mock-text-field');
-        expect(textField.getAttribute('data-classname')).toBe('asset-id');
+
+        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_ASSET_ID_FILTER);
+        expect(textField.getAttribute('data-value')).toBe(MOCK_NAME_FILTER);
         expect(textField.getAttribute('data-header')).toBe('true');
     });
-    it('dispatches updateFilters with the submitted value', () => {
+
+    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.id).toBe('new-filter-value');
+        expect(storeState.assetFilters.name).toBe('new-filter-value');
     });
-    it('renders with an empty filter value when no id is set', () => {
+
+    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-abc';
+        const filterValue = 'search-term-xyz';
         const { getByTestId } = renderComponent(filterValue);
         const textField = getByTestId('mock-text-field');
+
         expect(textField.getAttribute('data-value')).toBe(filterValue);
     });
 });
-//# sourceMappingURL=AssetsTableAssetIdFilter.test.js.map

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

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

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

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

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

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