@imposium-hub/components 2.15.0-3 → 2.16.0-0

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

@@ -0,0 +1,439 @@
+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 = container.querySelector('.asset-field');
+        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 = container.querySelector('.asset-field');
+        expect(assetFieldDiv.style.width).toBe('100%');
+    });
+
+    it('shows drag prompt placeholder when no assetId', () => {
+        const { container } = renderWithStore({ assetId: null });
+        const input = container.querySelector('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');
+            expect(input.value).toBe('my-video.mp4');
+        });
+    });
+
+    it('displays error message after failed API load', async () => {
+        const mockApi = createMockApi(null, true);
+        const { container } = renderWithStore({ api: mockApi });
+
+        await vi.waitFor(() => {
+            const input = container.querySelector('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 = 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 = 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 = 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

@@ -0,0 +1,134 @@
+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 = container.querySelector('.imposium-asset-id');
+        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 = container.querySelector('.imposium-asset-id');
+        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 = container.querySelector('.imposium-asset-id');
+        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 = container.querySelector('.imposium-asset-id');
+        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

@@ -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 AssetsTableAssetIdFilterMemoized from './AssetsTableAssetIdFilter';
+
+const MOCK_ASSET_ID_FILTER = 'existing-filter-123';
+
+const createMockStore = (assetIdFilter = '') => {
+    const initialState = { assetFilters: { id: assetIdFilter } };
+    return createStore((state = 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() as any;
+        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);
+    });
+});