@imposium-hub/components 2.14.11 → 2.15.0-0

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

@@ -1,449 +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 { ASSET_TYPES } from '../../constants/assets';
-
-vi.mock('../../Util', async (importOriginal) => {
-    const actual = (await importOriginal()) as any;
-    return {
-        ...actual,
-        mimetypeConformsToOverlay: vi.fn(() => true)
-    };
-});
-
-vi.mock('../text-field/TextField', () => ({
-    default: ({ value, label, readOnly, placeholder, loading, buttons, ...props }: any) => (
-        <div data-testid={`textfield-${label || 'unlabeled'}`}>
-            <label>{label}</label>
-            <input
-                value={value || ''}
-                readOnly={readOnly}
-                placeholder={placeholder || ''}
-            />
-            {loading && <span data-testid='loading-indicator'>Loading...</span>}
-            {buttons && <div data-testid='buttons-container'>{buttons}</div>}
-        </div>
-    )
-}));
-
-vi.mock('../button/Button', () => ({
-    default: ({ children, onClick, tooltip, ...props }: any) => (
-        <button
-            data-testid={`btn-${tooltip || 'unknown'}`}
-            onClick={onClick}>
-            {children}
-        </button>
-    )
-}));
-
-vi.mock('./AssetsTableDropzone', () => ({
-    default: ({ children, onDrop, disable }: any) => (
-        <div
-            data-testid='dropzone'
-            data-disabled={disable}>
-            {children}
-        </div>
-    )
-}));
-
-vi.mock('./DroppableAssetRenderer', () => ({
-    default: ({ children, onDrop }: any) => <div data-testid='droppable-renderer'>{children}</div>
-}));
-
-vi.mock('../../constants/icons', () => ({
-    ICON_FILTER: '<svg data-testid="icon-filter" />',
-    ICON_TIMES: '<svg data-testid="icon-times" />'
-}));
-
-vi.mock('../../redux/actions/asset-filters', () => ({
-    updateFilters: vi.fn((filters) => ({ type: 'UPDATE_FILTERS', payload: filters }))
-}));
-
-vi.mock('../../redux/actions/asset-uploads', () => ({
-    uploadAssets: vi.fn(() => ({ type: 'UPLOAD_ASSETS' }))
-}));
-
-const createMockStore = (overrides = {}) => {
-    const defaultState = {
-        assetList: {
-            loading: false,
-            page: 1,
-            total_pages: 1,
-            asset_count: 0,
-            assets: []
-        },
-        ...overrides
-    };
-    return createStore((state = defaultState) => state);
-};
-
-const createMockApi = (assetResponse = { name: 'test-asset.png' }, shouldReject = false) => ({
-    getAssetItem: vi.fn(() =>
-        shouldReject ? Promise.reject(new Error('Not found')) : Promise.resolve(assetResponse)
-    )
-});
-
-describe('AssetField', () => {
-    let AssetFieldConnected: any;
-
-    beforeEach(async () => {
-        vi.clearAllMocks();
-        vi.useFakeTimers();
-        const module = await import('./AssetField');
-        AssetFieldConnected = module.default;
-    });
-
-    afterEach(() => {
-        vi.useRealTimers();
-    });
-
-    const defaultProps = {
-        api: createMockApi(),
-        storyId: 'story-123',
-        assetId: 'asset-456',
-        label: 'Background',
-        width: 300,
-        tooltip: 'Select an asset',
-        onChange: vi.fn(),
-        accepts: ASSET_TYPES.IMAGE
-    };
-
-    const renderWithStore = (props = {}, storeOverrides = {}) => {
-        const store = createMockStore(storeOverrides);
-        return render(
-            <Provider store={store}>
-                <AssetFieldConnected
-                    {...defaultProps}
-                    {...props}
-                />
-            </Provider>
-        );
-    };
-
-    it('renders with all wrapper components', () => {
-        const { container } = renderWithStore();
-
-        expect(container.querySelector('[data-testid="dropzone"]')).toBeTruthy();
-        expect(container.querySelector('[data-testid="droppable-renderer"]')).toBeTruthy();
-        expect(container.querySelector('[data-testid="textfield-Background"]')).toBeTruthy();
-    });
-
-    it('applies width style and error class', () => {
-        const { container } = renderWithStore({ width: 500 });
-        const assetFieldDiv: HTMLElement | null = container.querySelector('.asset-field');
-        if (assetFieldDiv) {
-            expect(assetFieldDiv.style.width).toBe('500px');
-            expect(assetFieldDiv.classList.contains('error')).toBe(false);
-        }
-    });
-
-    it('defaults to 100% width when no width prop is provided', () => {
-        const { container } = renderWithStore({ width: undefined });
-        const assetFieldDiv: HTMLElement | null = container.querySelector('.asset-field');
-        if (assetFieldDiv) {
-            expect(assetFieldDiv.style.width).toBe('100%');
-        }
-    });
-
-    it('shows drag prompt placeholder when no assetId', () => {
-        const { container } = renderWithStore({ assetId: null });
-        const input = container.querySelector('input');
-        if (input) {
-            expect(input.placeholder).toBe('Drag Asset Here');
-        }
-    });
-
-    it('calls api.getAssetItem on mount when assetId is present', () => {
-        const mockApi = createMockApi();
-        renderWithStore({ api: mockApi });
-        expect(mockApi.getAssetItem).toHaveBeenCalledWith('asset-456');
-    });
-
-    it('does not call api.getAssetItem on mount when assetId is absent', () => {
-        const mockApi = createMockApi();
-        renderWithStore({ api: mockApi, assetId: null });
-        expect(mockApi.getAssetItem).not.toHaveBeenCalled();
-    });
-
-    it('displays asset name after successful API load', async () => {
-        const mockApi = createMockApi({ name: 'my-video.mp4' });
-        const { container } = renderWithStore({ api: mockApi });
-
-        await vi.waitFor(() => {
-            const input = container.querySelector('input');
-            if (input) {
-                expect(input.value).toBe('my-video.mp4');
-            }
-        });
-    });
-
-    it('displays error message after failed API load', async () => {
-        const mockApi = createMockApi(undefined, true);
-        const { container } = renderWithStore({ api: mockApi });
-
-        await vi.waitFor(() => {
-            const input = container.querySelector('input');
-            if (input) {
-                expect(input.value).toContain('Could not find asset');
-            }
-        });
-    });
-
-    it('shows filter buttons when accepts is a string and assetName is set', async () => {
-        const mockApi = createMockApi({ name: 'loaded-asset.png' });
-        const { container } = renderWithStore({ api: mockApi, accepts: 'image' });
-
-        await vi.waitFor(() => {
-            const buttonsContainer = container.querySelector('[data-testid="buttons-container"]');
-            expect(buttonsContainer).toBeTruthy();
-
-            const filterTypeBtn = container.querySelector(
-                '[data-testid="btn-Filter assets to match Asset type"]'
-            );
-            expect(filterTypeBtn).toBeTruthy();
-
-            const filterNameBtn = container.querySelector(
-                '[data-testid="btn-Filter assets to the selected Asset"]'
-            );
-            expect(filterNameBtn).toBeTruthy();
-        });
-    });
-
-    it('shows clear button when assetId is present', () => {
-        const { container } = renderWithStore();
-
-        const clearBtn = container.querySelector('[data-testid="btn-Clear the selected Asset"]');
-        expect(clearBtn).toBeTruthy();
-    });
-
-    it('does not show filter buttons when accepts is an array', async () => {
-        const mockApi = createMockApi({ name: 'loaded.png' });
-        const { container } = renderWithStore({ api: mockApi, accepts: ['image', 'video'] });
-
-        await vi.waitFor(() => {
-            const filterTypeBtn = container.querySelector(
-                '[data-testid="btn-Filter assets to match Asset type"]'
-            );
-            expect(filterTypeBtn).toBeFalsy();
-        });
-    });
-
-    it('reloads asset when assetList changes via dispatch', () => {
-        const mockApi = createMockApi({ name: 'initial.png' });
-        const reducer = (
-            state: any = {
-                assetList: { loading: false, page: 1, total_pages: 1, asset_count: 0, assets: [] }
-            },
-            action: any
-        ) => {
-            if (action.type === 'UPDATE_ASSET_LIST') {
-                return { ...state, assetList: action.payload };
-            }
-            return state;
-        };
-        const store = createStore(reducer);
-
-        render(
-            <Provider store={store}>
-                <AssetFieldConnected
-                    {...defaultProps}
-                    api={mockApi}
-                />
-            </Provider>
-        );
-
-        mockApi.getAssetItem.mockClear();
-
-        act(() => {
-            store.dispatch({
-                type: 'UPDATE_ASSET_LIST',
-                payload: {
-                    loading: false,
-                    page: 2,
-                    total_pages: 2,
-                    asset_count: 10,
-                    assets: [{ id: '1' }]
-                }
-            });
-        });
-
-        act(() => {
-            vi.advanceTimersByTime(350);
-        });
-
-        expect(mockApi.getAssetItem).toHaveBeenCalled();
-    });
-
-    it('clears timeout on unmount', () => {
-        const clearTimeoutSpy = vi.spyOn(global, 'clearTimeout');
-        const { unmount } = renderWithStore();
-        unmount();
-        expect(clearTimeoutSpy).toHaveBeenCalled();
-        clearTimeoutSpy.mockRestore();
-    });
-
-    it('exercises setFilter with string accepts', () => {
-        const { container } = renderWithStore({ accepts: 'image' });
-        const filterBtn: HTMLElement | null = container.querySelector(
-            '[data-testid="btn-Filter assets to match Asset type"]'
-        );
-        expect(filterBtn).toBeTruthy();
-        filterBtn?.click();
-    });
-
-    it('exercises setFilter with no accepts', () => {
-        const { container } = renderWithStore({ accepts: undefined });
-        const filterBtn = container.querySelector(
-            '[data-testid="btn-Filter assets to match Asset type"]'
-        );
-        expect(filterBtn).toBeFalsy();
-    });
-
-    it('exercises clearAsset button', async () => {
-        const onChangeMock = vi.fn();
-        const { container } = renderWithStore({ onChange: onChangeMock });
-        const clearBtn: HTMLElement | null = container.querySelector(
-            '[data-testid="btn-Clear the selected Asset"]'
-        );
-        expect(clearBtn).toBeTruthy();
-        clearBtn?.click();
-
-        await vi.waitFor(() => {
-            expect(onChangeMock).toHaveBeenCalledWith(null);
-        });
-    });
-
-    it('exercises setFilterToAsset button', async () => {
-        const mockApi = createMockApi({ name: 'my-asset.png' });
-        const { container } = renderWithStore({ api: mockApi, accepts: 'image' });
-
-        await vi.waitFor(() => {
-            const filterNameBtn: HTMLElement | null = container.querySelector(
-                '[data-testid="btn-Filter assets to the selected Asset"]'
-            );
-            expect(filterNameBtn).toBeTruthy();
-            filterNameBtn?.click();
-        });
-    });
-
-    it('exercises onAssetDrop with matching type', () => {
-        const onChangeMock = vi.fn();
-        const WrappedComponent = AssetFieldConnected.WrappedComponent;
-
-        const instance = new WrappedComponent({
-            ...defaultProps,
-            onChange: onChangeMock,
-            accepts: 'image',
-            updateFilters: vi.fn(),
-            uploadAssets: vi.fn(),
-            assetList: { loading: false, page: 1, total_pages: 1, asset_count: 0, assets: [] }
-        });
-
-        instance.setState = vi.fn((stateOrFn, callback) => {
-            if (typeof stateOrFn === 'object') {
-                instance.state = { ...instance.state, ...stateOrFn };
-            }
-            if (callback) callback();
-        });
-
-        instance.onAssetDrop(
-            { rowData: { name: 'dropped.png', type: 'image', id: 'asset-789' } },
-            null
-        );
-
-        expect(instance.setState).toHaveBeenCalled();
-        expect(onChangeMock).toHaveBeenCalledWith({
-            name: 'dropped.png',
-            type: 'image',
-            id: 'asset-789'
-        });
-    });
-
-    it('exercises onAssetDrop with mismatched type and onError', () => {
-        const onErrorMock = vi.fn();
-        const WrappedComponent = AssetFieldConnected.WrappedComponent;
-
-        const instance = new WrappedComponent({
-            ...defaultProps,
-            onError: onErrorMock,
-            accepts: 'image',
-            updateFilters: vi.fn(),
-            uploadAssets: vi.fn(),
-            assetList: { loading: false, page: 1, total_pages: 1, asset_count: 0, assets: [] }
-        });
-
-        instance.setState = vi.fn();
-
-        instance.onAssetDrop(
-            { rowData: { name: 'dropped.mp4', type: 'video', id: 'asset-999' } },
-            null
-        );
-
-        expect(onErrorMock).toHaveBeenCalled();
-    });
-
-    it('exercises onAssetDrop with array accepts and mismatched type', () => {
-        const onErrorMock = vi.fn();
-        const WrappedComponent = AssetFieldConnected.WrappedComponent;
-
-        const instance = new WrappedComponent({
-            ...defaultProps,
-            onError: onErrorMock,
-            accepts: ['image', 'audio'],
-            updateFilters: vi.fn(),
-            uploadAssets: vi.fn(),
-            assetList: { loading: false, page: 1, total_pages: 1, asset_count: 0, assets: [] }
-        });
-
-        instance.setState = vi.fn();
-
-        instance.onAssetDrop(
-            { rowData: { name: 'dropped.mp4', type: 'video', id: 'asset-999' } },
-            null
-        );
-
-        expect(onErrorMock).toHaveBeenCalledWith(expect.stringContaining('image or audio'));
-    });
-
-    it('exercises onFileDrop with monitor', () => {
-        const WrappedComponent = AssetFieldConnected.WrappedComponent;
-        const uploadAssetsMock = vi.fn();
-
-        const instance = new WrappedComponent({
-            ...defaultProps,
-            accepts: 'image',
-            updateFilters: vi.fn(),
-            uploadAssets: uploadAssetsMock,
-            assetList: { loading: false, page: 1, total_pages: 1, asset_count: 0, assets: [] }
-        });
-
-        instance.setState = vi.fn();
-
-        const mockMonitor = {
-            getItem: () => ({
-                files: [new File(['content'], 'test.png', { type: 'image/png' })]
-            })
-        };
-
-        instance.onFileDrop(null, mockMonitor);
-        expect(uploadAssetsMock).toHaveBeenCalled();
-    });
-
-    it('exercises onFileDrop without monitor', () => {
-        const WrappedComponent = AssetFieldConnected.WrappedComponent;
-
-        const instance = new WrappedComponent({
-            ...defaultProps,
-            updateFilters: vi.fn(),
-            uploadAssets: vi.fn(),
-            assetList: { loading: false, page: 1, total_pages: 1, asset_count: 0, assets: [] }
-        });
-
-        instance.setState = vi.fn();
-        instance.onFileDrop(null, null);
-        expect(instance.setState).not.toHaveBeenCalled();
-    });
-});

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

@@ -1,142 +0,0 @@
-import { describe, it, expect, vi, beforeEach } 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';
-import { copying } from '../../constants/copy';
-
-vi.mock('../../redux/actions/asset-filters', () => ({
-    updateFilters: vi.fn(() => ({ type: 'MOCK_UPDATE_FILTERS' })),
-    default: { UPDATE: 'assetFilters/UPDATE', RESET: 'footageFilters/RESET' }
-}));
-
-import AssetsTableAssetIdCellMemoized from './AssetsTableAssetIdCell';
-
-const MOCK_ASSET_ID = 'asset-abc-123';
-
-const createMockStore = (overrides = {}) => {
-    const defaultState = {
-        assetFilters: {},
-        ...overrides
-    };
-    return createStore((state = defaultState) => state);
-};
-
-const buildCellProp = (assetId: string) => ({
-    row: {
-        original: { id: assetId }
-    }
-});
-
-const renderComponent = (propOverrides = {}) => {
-    const defaultProps = {
-        cell: buildCellProp(MOCK_ASSET_ID),
-        onNotification: vi.fn(),
-        onError: vi.fn(),
-        ...propOverrides
-    };
-
-    const store = createMockStore();
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableAssetIdCellMemoized {...defaultProps} />
-        </Provider>
-    );
-
-    return { ...result, props: defaultProps };
-};
-
-describe('AssetsTableAssetIdCell', () => {
-    let clipboardWriteTextMock: ReturnType<typeof vi.fn>;
-
-    beforeEach(() => {
-        clipboardWriteTextMock = vi.fn();
-        Object.assign(navigator, {
-            clipboard: {
-                writeText: clipboardWriteTextMock
-            }
-        });
-    });
-
-    it('renders the asset id in a div with the correct class', () => {
-        const { container } = renderComponent();
-        const idCell = container.querySelector('.imposium-asset-id');
-
-        expect(idCell).toBeTruthy();
-        expect(idCell?.textContent).toBe(MOCK_ASSET_ID);
-    });
-
-    it('calls onNotification after successful clipboard copy', async () => {
-        clipboardWriteTextMock.mockResolvedValueOnce(undefined);
-        const { container, props } = renderComponent();
-
-        const idCell: HTMLElement | null = container.querySelector('.imposium-asset-id');
-        if (idCell) {
-            fireEvent.click(idCell);
-        }
-
-        await vi.waitFor(() => {
-            expect(clipboardWriteTextMock).toHaveBeenCalledWith(MOCK_ASSET_ID);
-            expect(props.onNotification).toHaveBeenCalledWith(copying.copied);
-        });
-    });
-
-    it('calls onError after failed clipboard copy', async () => {
-        clipboardWriteTextMock.mockRejectedValueOnce(new Error('clipboard denied'));
-        const { container, props } = renderComponent();
-
-        const idCell: HTMLElement | null = container.querySelector('.imposium-asset-id');
-        if (idCell) {
-            fireEvent.click(idCell);
-        }
-
-        await vi.waitFor(() => {
-            expect(props.onError).toHaveBeenCalledWith(copying.error);
-        });
-    });
-
-    it('does not throw when onNotification is not provided', async () => {
-        clipboardWriteTextMock.mockResolvedValueOnce(undefined);
-        const { container } = renderComponent({
-            onNotification: undefined,
-            onError: undefined
-        });
-
-        const idCell: HTMLElement | null = container.querySelector('.imposium-asset-id');
-        if (idCell) {
-            fireEvent.click(idCell);
-        }
-
-        await vi.waitFor(() => {
-            expect(clipboardWriteTextMock).toHaveBeenCalledWith(MOCK_ASSET_ID);
-        });
-    });
-
-    it('does not throw when onError is not provided', async () => {
-        clipboardWriteTextMock.mockRejectedValueOnce(new Error('denied'));
-        const { container } = renderComponent({
-            onNotification: undefined,
-            onError: undefined
-        });
-
-        const idCell: HTMLElement | null = container.querySelector('.imposium-asset-id');
-        if (idCell) {
-            fireEvent.click(idCell);
-        }
-
-        await vi.waitFor(() => {
-            expect(clipboardWriteTextMock).toHaveBeenCalled();
-        });
-    });
-
-    it('renders with a different asset id', () => {
-        const differentId = 'other-asset-456';
-        const { container } = renderComponent({
-            cell: buildCellProp(differentId)
-        });
-
-        const idCell = container.querySelector('.imposium-asset-id');
-        expect(idCell?.textContent).toBe(differentId);
-    });
-});

package/src/components/assets/AssetsTableAssetIdFilter.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 AssetsTableAssetIdFilterMemoized from './AssetsTableAssetIdFilter';
-
-const MOCK_ASSET_ID_FILTER = 'existing-filter-123';
-
-const createMockStore = (assetIdFilter = '') => {
-    const initialState = { assetFilters: { id: assetIdFilter } };
-    return createStore((state: any = initialState, action: any) => {
-        if (action.type === 'assetFilters/UPDATE') {
-            return {
-                ...state,
-                assetFilters: { ...state.assetFilters, ...action.newFilters }
-            };
-        }
-        return state;
-    });
-};
-
-const renderComponent = (assetIdFilter = '') => {
-    const store = createMockStore(assetIdFilter);
-
-    const result = render(
-        <Provider store={store}>
-            <AssetsTableAssetIdFilterMemoized />
-        </Provider>
-    );
-
-    return { ...result, store };
-};
-
-describe('AssetsTableAssetIdFilter', () => {
-    it('renders the TextField with correct props', () => {
-        const { getByTestId } = renderComponent(MOCK_ASSET_ID_FILTER);
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-classname')).toBe('asset-id');
-        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-header')).toBe('true');
-    });
-
-    it('dispatches updateFilters with the submitted value', () => {
-        const { getByTestId, store } = renderComponent();
-        const submitButton = getByTestId('submit-trigger');
-
-        submitButton.click();
-
-        const storeState = store.getState();
-        expect(storeState.assetFilters.id).toBe('new-filter-value');
-    });
-
-    it('renders with an empty filter value when no id 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 { getByTestId } = renderComponent(filterValue);
-        const textField = getByTestId('mock-text-field');
-
-        expect(textField.getAttribute('data-value')).toBe(filterValue);
-    });
-});