@imposium-hub/components 2.15.0-3 → 2.16.0

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

@@ -0,0 +1,161 @@
+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';
+
+let capturedDoSubmit: (value: string) => void;
+let capturedRemoveHandlers: Record<string, () => void> = {};
+
+vi.mock('../tag/Tag', () => ({
+    default: ({ copy, removeHandler }: any) => {
+        capturedRemoveHandlers[copy] = removeHandler;
+        return (
+            <div
+                data-testid={`tag-${copy}`}
+                className='mock-tag'>
+                <span>{copy}</span>
+                <button
+                    data-testid={`remove-${copy}`}
+                    onClick={removeHandler}>
+                    x
+                </button>
+            </div>
+        );
+    }
+}));
+
+vi.mock('../text-field/TextField', () => ({
+    default: ({ submittable, submittableType, placeholder, value, doSubmit, suggestions }: any) => {
+        capturedDoSubmit = doSubmit;
+        return (
+            <div
+                data-testid='mock-text-field'
+                data-submittable={submittable}
+                data-submittable-type={submittableType}
+                data-placeholder={placeholder}
+                data-value={value}
+                data-suggestions={JSON.stringify(suggestions || [])}>
+                <button
+                    data-testid='submit-trigger'
+                    onClick={() => doSubmit('new-tag')}>
+                    Add
+                </button>
+            </div>
+        );
+    }
+}));
+
+vi.mock('../../redux/actions/asset-list', () => ({
+    addAssetTag: vi.fn((_api, _id, _tags) => ({ type: 'MOCK_ADD_TAG' })),
+    deleteAssetTag: vi.fn((_api, _id, _tag) => ({ type: 'MOCK_DELETE_TAG' })),
+    default: {}
+}));
+
+import AssetsTableComplexTagCellMemoized from './AssetsTableComplexTagCell';
+import { addAssetTag, deleteAssetTag } from '../../redux/actions/asset-list';
+
+const MOCK_ASSET_ID = 'asset-999';
+const MOCK_API = { addAssetTag: vi.fn(), deleteAssetTag: vi.fn() };
+const MOCK_SUGGESTIONS = ['alpha', 'beta', 'gamma'];
+
+const createMockStore = (assetTags: string[] = MOCK_SUGGESTIONS) => {
+    const initialState = { assetTags };
+    return createStore((state = initialState) => state);
+};
+
+const buildCellProp = (tags: string[] = ['tag-a', 'tag-b']) => ({
+    row: {
+        original: { id: MOCK_ASSET_ID, tags }
+    }
+});
+
+const renderComponent = (tagOverrides?: string[], storeOverrides?: string[]) => {
+    capturedRemoveHandlers = {};
+    const store = createMockStore(storeOverrides);
+    const cell = buildCellProp(tagOverrides);
+
+    const result = render(
+        <Provider store={store}>
+            <AssetsTableComplexTagCellMemoized
+                cell={cell}
+                api={MOCK_API}
+            />
+        </Provider>
+    );
+
+    return { ...result, store };
+};
+
+describe('AssetsTableComplexTagCell', () => {
+    it('renders existing tags as Tag components', () => {
+        const tags = ['tag-a', 'tag-b', 'tag-c'];
+        const { getByTestId } = renderComponent(tags);
+
+        tags.forEach((tag) => {
+            expect(getByTestId(`tag-${tag}`)).toBeTruthy();
+        });
+    });
+
+    it('deduplicates tags before rendering', () => {
+        const { container } = renderComponent(['dup', 'dup', 'unique']);
+        const renderedTags = container.querySelectorAll('.mock-tag');
+
+        expect(renderedTags).toHaveLength(2);
+    });
+
+    it('renders the TextField with correct props', () => {
+        const { getByTestId } = renderComponent();
+        const textField = getByTestId('mock-text-field');
+
+        expect(textField.getAttribute('data-submittable')).toBe('true');
+        expect(textField.getAttribute('data-submittable-type')).toBe('add');
+        expect(textField.getAttribute('data-placeholder')).toBe('+');
+        expect(textField.getAttribute('data-value')).toBe('');
+    });
+
+    it('passes assetTags from store as suggestions', () => {
+        const suggestions = ['x', 'y', 'z'];
+        const { getByTestId } = renderComponent([], suggestions);
+        const textField = getByTestId('mock-text-field');
+
+        const suggestionsAttr = textField.getAttribute('data-suggestions');
+        if (suggestionsAttr) {
+            expect(suggestionsAttr).toBeTruthy();
+            expect(JSON.parse(suggestionsAttr)).toEqual(suggestions);
+        }
+    });
+
+    it('dispatches addAssetTag when submitting a new tag', () => {
+        renderComponent(['existing']);
+
+        capturedDoSubmit('brand-new');
+
+        expect(addAssetTag).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'brand-new');
+    });
+
+    it('does not dispatch addAssetTag when submitting a duplicate tag', () => {
+        vi.mocked(addAssetTag).mockClear();
+        renderComponent(['already-here']);
+
+        capturedDoSubmit('already-here');
+
+        expect(addAssetTag).not.toHaveBeenCalled();
+    });
+
+    it('dispatches deleteAssetTag when removing a tag', () => {
+        renderComponent(['removable']);
+
+        capturedRemoveHandlers['removable']();
+
+        expect(deleteAssetTag).toHaveBeenCalledWith(MOCK_API, MOCK_ASSET_ID, 'removable');
+    });
+
+    it('renders with no tags', () => {
+        const { container, getByTestId } = renderComponent([]);
+        const renderedTags = container.querySelectorAll('.mock-tag');
+
+        expect(renderedTags).toHaveLength(0);
+        expect(getByTestId('mock-text-field')).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi } from 'vitest';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+const MOCK_FORMATTED_DATE = '4/9/2026 3:00 PM';
+
+vi.mock('../../Util', async (importOriginal) => {
+    const actual = (await importOriginal()) as any;
+    return {
+        ...actual,
+        formatDateDefault: vi.fn(() => MOCK_FORMATTED_DATE)
+    };
+});
+
+import AssetsTableDateCellMemoized from './AssetsTableDateCell';
+import { formatDateDefault } from '../../Util';
+
+const MOCK_UNIX_TIMESTAMP = 1776013200;
+
+const buildCellProp = (values: Record<string, any>) => ({
+    row: { values }
+});
+
+describe('AssetsTableDateCell', () => {
+    it('renders date_created when date_created prop is true and value exists', () => {
+        const cell = buildCellProp({ date_created: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={true}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('renders date_modified when date_created is false', () => {
+        const cell = buildCellProp({ date_modified: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('falls through to date_updated when date_modified is absent', () => {
+        const cell = buildCellProp({ date_updated: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(MOCK_UNIX_TIMESTAMP);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('prefers date_modified over date_updated when both exist', () => {
+        const modifiedTimestamp = 1776099600;
+        const cell = buildCellProp({
+            date_modified: modifiedTimestamp,
+            date_updated: MOCK_UNIX_TIMESTAMP
+        });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).toHaveBeenCalledWith(modifiedTimestamp);
+        expect(container.textContent).toBe(MOCK_FORMATTED_DATE);
+    });
+
+    it('skips date_created value when date_created prop is false', () => {
+        vi.mocked(formatDateDefault).mockClear();
+        const cell = buildCellProp({ date_created: MOCK_UNIX_TIMESTAMP });
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(formatDateDefault).not.toHaveBeenCalled();
+        expect(container.innerHTML).toBe('');
+    });
+
+    it('returns null when no date values are present', () => {
+        const cell = buildCellProp({});
+        const { container } = render(
+            <AssetsTableDateCellMemoized
+                cell={cell}
+                date_created={false}
+            />
+        );
+
+        expect(container.innerHTML).toBe('');
+    });
+});

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();
+    });
+});