+
+
+ ) : null,
+}));
+
+vi.mock('../../../forms/GroupManager', () => ({
+ default: ({ isOpen, onClose }) =>
+ isOpen ? (
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../../modals/ProfileModal', () => ({
+ default: ({ opened, onClose }) =>
+ opened ? (
+
+
+
+ ) : null,
+ renderProfileOption: vi.fn(() => () => null),
+}));
+
+vi.mock('../../../modals/EPGMatchModal', () => ({
+ default: ({ opened, onClose }) =>
+ opened ? (
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../../ConfirmationDialog', () => ({
+ default: ({ opened, onClose, onConfirm, title, loading }) =>
+ opened ? (
+
+ {title}
+
+
+
+ ) : null,
+}));
+
+// ── @mantine/core ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color, variant }) => (
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, disabled, variant, color }) => (
+
+ ),
+ Flex: ({ children }) => {children}
,
+ Group: ({ children }) => {children}
,
+ Menu: Object.assign(
+ ({ children }) => {children}
,
+ {
+ Target: ({ children }) => {children}
,
+ Dropdown: ({ children }) => (
+ {children}
+ ),
+ Item: ({ children, onClick, disabled }) => (
+
+ ),
+ Divider: () => , + Label: ({ children }) =>
{children}
,
+ }
+ ),
+ MenuDivider: () => , + MenuDropdown: ({ children }) => ( +
{children}
+ ),
+ MenuItem: ({ children, onClick, disabled }) => (
+
+ ),
+ MenuLabel: ({ children }) => {children}
,
+ MenuTarget: ({ children }) => {children}
,
+ Popover: ({ children, opened }) => (
+
+ {children}
+
+ ),
+ PopoverDropdown: ({ children }) => (
+ {children}
+ ),
+ PopoverTarget: ({ children }) => {children}
,
+ Select: ({ value, onChange, data }) => (
+
+ ),
+ Text: ({ children, c }) => (
+
+ {children}
+
+ ),
+ TextInput: ({ value, onChange, placeholder }) => (
+
+ ),
+ Tooltip: ({ children, label }) => {children}
,
+ useMantineTheme: () => ({
+ tailwind: {
+ green: { 5: 'green.5' },
+ yellow: { 5: 'yellow.5' },
+ },
+ palette: { custom: {} },
+ }),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ArrowDown01: () => ,
+ Binary: () => ,
+ CircleCheck: () => ,
+ EllipsisVertical: () => ,
+ Eye: () => ,
+ EyeOff: () => ,
+ Filter: () => ,
+ Lock: () => ,
+ LockOpen: () => ,
+ Pin: () => ,
+ PinOff: () => ,
+ Settings: () => ,
+ Square: () => ,
+ SquareCheck: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsStore from '../../../../store/channels';
+import useChannelsTableStore from '../../../../store/channelsTable';
+import useAuthStore from '../../../../store/auth';
+import useWarningsStore from '../../../../store/warnings';
+import * as ChannelsTableUtils from '../../../../utils/tables/ChannelsTableUtils.js';
+import ChannelTableHeader from '../ChannelTableHeader';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const ADMIN = 10;
+const STANDARD = 1;
+
+const makeProfiles = () => ({
+ 0: { id: 0, name: 'All Channels' },
+ 1: { id: 1, name: 'Profile A' },
+ 2: { id: 2, name: 'Profile B' },
+});
+
+const makeTable = (overrides = {}) => ({
+ headerPinned: false,
+ setHeaderPinned: vi.fn(),
+ selectedTableIds: [],
+ setSelectedTableIds: vi.fn(),
+ ...overrides,
+});
+
+const makeDefaultProps = (overrides = {}) => ({
+ rows: [],
+ editChannel: vi.fn(),
+ deleteChannels: vi.fn(),
+ selectedTableIds: [],
+ table: makeTable(),
+ showDisabled: true,
+ setShowDisabled: vi.fn(),
+ showOnlyStreamlessChannels: false,
+ setShowOnlyStreamlessChannels: vi.fn(),
+ showOnlyStaleChannels: false,
+ setShowOnlyStaleChannels: vi.fn(),
+ showOnlyOverriddenChannels: false,
+ setShowOnlyOverriddenChannels: vi.fn(),
+ visibilityFilter: 'active',
+ setVisibilityFilter: vi.fn(),
+ ...overrides,
+});
+
+const setupMocks = ({
+ userLevel = ADMIN,
+ profiles = makeProfiles(),
+ selectedProfileId = '0',
+ isUnlocked = false,
+ isWarningSuppressed = vi.fn(() => false),
+ suppressWarning = vi.fn(),
+} = {}) => {
+ const mockSetSelectedProfileId = vi.fn();
+ const mockSetIsUnlocked = vi.fn();
+
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({
+ profiles,
+ selectedProfileId,
+ setSelectedProfileId: mockSetSelectedProfileId,
+ })
+ );
+
+ vi.mocked(useChannelsTableStore).mockImplementation((sel) =>
+ sel({
+ isUnlocked,
+ setIsUnlocked: mockSetIsUnlocked,
+ })
+ );
+
+ vi.mocked(useAuthStore).mockImplementation((sel) =>
+ sel({ user: { user_level: userLevel } })
+ );
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ isWarningSuppressed, suppressWarning })
+ );
+
+ return { mockSetSelectedProfileId, mockSetIsUnlocked };
+};
+
+describe('ChannelTableHeader', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(ChannelsTableUtils.addChannelProfile).mockResolvedValue(undefined);
+ vi.mocked(ChannelsTableUtils.deleteChannelProfile).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the profile select', () => {
+ setupMocks();
+ render(
+ {children}
+
+ ),
+}));
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeHeader = (id, size, grow = false, minSize = 50) => ({
+ id,
+ getSize: () => size,
+ column: {
+ columnDef: { grow, minSize },
+ },
+});
+
+const makeTable = (overrides = {}) => {
+ const headers = [makeHeader('col1', 100), makeHeader('col2', 200)];
+
+ return {
+ tableSize: 'default',
+ filters: {},
+ allRowIds: [],
+ headerCellRenderFns: {},
+ selectedTableIds: [],
+ tableCellProps: vi.fn(),
+ headerPinned: false,
+ enableDragDrop: false,
+ expandedRowIds: [],
+ expandedRowRenderer: null,
+ bodyCellRenderFns: {},
+ getRowStyles: vi.fn(),
+ selectedTableIdsSet: new Set(),
+ handleRowClickRef: { current: vi.fn() },
+ onSelectAllChange: null,
+ renderBodyCell: null,
+ getState: () => ({ columnSizing: {} }),
+ getHeaderGroups: () => [{ headers }],
+ getFlatHeaders: () => headers,
+ getRowModel: () => ({ rows: [] }),
+ ...overrides,
+ };
+};
+
+describe('CustomTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders CustomTableHeader and CustomTableBody', () => {
+ render(
+ {children}
+
+ ),
+ Flex: ({ children, align, style }) => (
+
+ {children}
+
+ ),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ GripVertical: ({ size, opacity }) => (
+
+ ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsTableStore from '../../../../store/channelsTable';
+import { useSortable } from '@dnd-kit/sortable';
+import CustomTableBody from '../CustomTableBody';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+const makeCell = (id, columnId, grow = false, maxSize = null) => ({
+ id: `${id}-${columnId}`,
+ column: {
+ id: columnId,
+ columnDef: {
+ grow,
+ ...(maxSize && { maxSize }),
+ },
+ },
+});
+
+const makeRow = (id, cells = [], originalId = null) => ({
+ id: `row-${id}`,
+ original: { id: originalId ?? id },
+ getVisibleCells: () => cells,
+});
+
+const defaultProps = (overrides = {}) => {
+ const row1 = makeRow(1, [makeCell(1, 'name'), makeCell(1, 'actions')]);
+ const row2 = makeRow(2, [makeCell(2, 'name'), makeCell(2, 'actions')]);
+
+ return {
+ getRowModel: vi.fn(() => ({ rows: [row1, row2] })),
+ expandedRowIds: [],
+ expandedRowRenderer: vi.fn(() => ),
+ renderBodyCell: vi.fn(({ cell }) => (
+ {cell.id}
+ )),
+ getRowStyles: null,
+ tableCellProps: null,
+ enableDragDrop: false,
+ selectedTableIdsSet: null,
+ handleRowClickRef: null,
+ ...overrides,
+ };
+};
+
+const setupMocks = ({ isUnlocked = false } = {}) => {
+ vi.mocked(useChannelsTableStore).mockImplementation((sel) =>
+ sel({ isUnlocked })
+ );
+};
+
+describe('CustomTableBody', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ setupMocks();
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders a tbody container', () => {
+ render(Expanded!
+ ));
+ const props = defaultProps({
+ getRowModel: vi.fn(() => ({ rows: [row] })),
+ expandedRowIds: [1],
+ expandedRowRenderer,
+ });
+ render(Expanded!
+ ));
+ const props = defaultProps({
+ getRowModel: vi.fn(() => ({ rows: [row] })),
+ expandedRowIds: [],
+ expandedRowRenderer,
+ });
+ render({children}
+ ),
+}));
+
+// ── @mantine/core ─────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ Box: ({ children, className, style, 'data-header-pinned': pinned }) => (
+
+ {children}
+
+ ),
+ Center: ({ children, style }) => {children}
,
+ Checkbox: ({ checked, indeterminate, onChange, size }) => (
+ {
+ if (el) el.indeterminate = !!indeterminate;
+ }}
+ onChange={onChange}
+ data-size={size}
+ />
+ ),
+ Flex: ({ children, align, style }) => (
+
+ {children}
+
+ ),
+}));
+
+// ── Imports after mocks ───────────────────────────────────────────────────────
+import useChannelsTableStore from '../../../../store/channelsTable';
+import CustomTableHeader from '../CustomTableHeader';
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+/**
+ * Build a minimal header group structure that CustomTableHeader expects.
+ * Each header entry maps an id to a column definition.
+ */
+const makeHeader = (
+ id,
+ { grow = false, maxSize, canResize = false, isResizing = false, style } = {}
+) => ({
+ id,
+ column: {
+ id,
+ columnDef: { id, header: id.toUpperCase(), grow, maxSize, style },
+ getCanResize: () => canResize,
+ getIsResizing: () => isResizing,
+ },
+ getContext: () => ({}),
+ getResizeHandler: () => vi.fn(),
+ getSize: () => 100,
+});
+
+const makeHeaderGroups = (headers) => [{ id: 'hg-0', headers }];
+
+const defaultProps = (overrides = {}) => ({
+ getHeaderGroups: () =>
+ makeHeaderGroups([makeHeader('name'), makeHeader('status')]),
+ allRowIds: ['1', '2', '3'],
+ selectedTableIds: [],
+ headerCellRenderFns: {},
+ onSelectAllChange: vi.fn(),
+ tableCellProps: vi.fn(() => ({})),
+ headerPinned: true,
+ enableDragDrop: false,
+ ...overrides,
+});
+
+const setupStore = ({ isUnlocked = false } = {}) => {
+ vi.mocked(useChannelsTableStore).mockImplementation((sel) =>
+ sel({ isUnlocked })
+ );
+};
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('CustomTableHeader', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ setupStore();
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders a thead element', () => {
+ render(
+ {label && }
+ onChange?.(e.target.value ? [e.target.value] : [])}
+ />
+ {(data || []).map((opt) => (
+
+ ))}
+
+ );
+ MockMultiSelect.displayName = 'MultiSelect';
+
+ return {
+ MultiSelect: MockMultiSelect,
+ Box: ({ children, style, ...props }) => (
+
+ {children}
+
+ ),
+ Flex: ({ children, style }) => (
+
+ {children}
+
+ ),
+ Pill: ({
+ children,
+ onRemove,
+ onClick,
+ withRemoveButton,
+ removeButtonProps,
+ }) => (
+
+ {children}
+ {withRemoveButton && (
+
+ )}
+
+ ),
+ Tooltip: ({ children, label }) => (
+
+ {label}
+ {children}
+
+ ),
+ };
+});
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import { MultiSelect } from '@mantine/core';
+import MultiSelectHeaderWrapper from '../MultiSelectHeaderWrapper';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeData = (n = 3) =>
+ Array.from({ length: n }, (_, i) => ({
+ value: `val-${i}`,
+ label: `Label ${i}`,
+ }));
+
+describe('MultiSelectHeaderWrapper', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ // ── Non-MultiSelect passthrough ────────────────────────────────────────────
+
+ describe('non-MultiSelect children', () => {
+ it('renders a plain div child unchanged', () => {
+ render(
+ Hello
+
+ Nested
+
+
+
+
+ {children}
+
+ ),
+ Checkbox: ({ checked, onChange }) => (
+ {})}
+ />
+ ),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ChevronDown: () => ,
+ ChevronRight: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import { useTable } from '../';
+import { useReactTable, flexRender } from '@tanstack/react-table';
+import useTablePreferences from '../../../../hooks/useTablePreferences';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const setupMocks = ({ headerPinned = false, tableSize = 'default' } = {}) => {
+ vi.mocked(useReactTable).mockReturnValue({
+ getRowModel: vi.fn(() => ({ rows: [] })),
+ getHeaderGroups: vi.fn(() => []),
+ });
+ vi.mocked(useTablePreferences).mockReturnValue({
+ headerPinned,
+ setHeaderPinned: vi.fn(),
+ tableSize,
+ setTableSize: vi.fn(),
+ });
+};
+
+const makeRow = (id) => ({ original: { id } });
+
+const makeCell = (columnId) => ({
+ column: { id: columnId, columnDef: {} },
+ getContext: () => ({}),
+});
+
+const makeClickEvent = (overrides = {}) => ({
+ shiftKey: false,
+ ctrlKey: false,
+ metaKey: false,
+ target: { closest: () => null },
+ ...overrides,
+});
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('useTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ afterEach(() => {
+ // Clean up any body class/style mutations made by keyboard handlers
+ document.body.classList.remove('shift-key-active');
+ document.body.style.removeProperty('user-select');
+ document.body.style.removeProperty('-webkit-user-select');
+ document.body.style.removeProperty('-ms-user-select');
+ document.body.style.removeProperty('cursor');
+ });
+
+ // ── Initialization ─────────────────────────────────────────────────────────
+
+ describe('initialization', () => {
+ it('starts with an empty selectedTableIds array', () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2], columns: [], data: [] })
+ );
+ expect(result.current.selectedTableIds).toEqual([]);
+ });
+
+ it('starts with an empty expandedRowIds array', () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2], columns: [], data: [] })
+ );
+ expect(result.current.expandedRowIds).toEqual([]);
+ });
+
+ it('returns renderBodyCell as a function', () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [], columns: [], data: [] })
+ );
+ expect(typeof result.current.renderBodyCell).toBe('function');
+ });
+
+ it('exposes allRowIds in the returned object', () => {
+ setupMocks();
+ const allRowIds = [10, 20, 30];
+ const { result } = renderHook(() =>
+ useTable({ allRowIds, columns: [], data: [] })
+ );
+ expect(result.current.allRowIds).toEqual(allRowIds);
+ });
+
+ it('returns headerPinned and tableSize from useTablePreferences', () => {
+ setupMocks({ headerPinned: true, tableSize: 'compact' });
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [], columns: [], data: [] })
+ );
+ expect(result.current.headerPinned).toBe(true);
+ expect(result.current.tableSize).toBe('compact');
+ });
+
+ it('passes headerCellRenderFns through to the returned object', () => {
+ setupMocks();
+ const headerCellRenderFns = { name: vi.fn() };
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [], columns: [], data: [], headerCellRenderFns })
+ );
+ expect(result.current.headerCellRenderFns).toBe(headerCellRenderFns);
+ });
+
+ it('defaults to an empty bodyCellRenderFns when not provided', () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [], columns: [], data: [] })
+ );
+ expect(result.current.bodyCellRenderFns).toEqual({});
+ });
+ });
+
+ // ── Keyboard event handling ────────────────────────────────────────────────
+
+ describe('keyboard event handling', () => {
+ it('adds shift-key-active class and disables text selection on Shift keydown', () => {
+ setupMocks();
+ renderHook(() => useTable({ allRowIds: [], columns: [], data: [] }));
+
+ fireEvent.keyDown(window, { key: 'Shift' });
+
+ expect(document.body.classList.contains('shift-key-active')).toBe(true);
+ expect(document.body.style.userSelect).toBe('none');
+ });
+
+ it('removes shift-key-active class and restores text selection on Shift keyup', () => {
+ setupMocks();
+ renderHook(() => useTable({ allRowIds: [], columns: [], data: [] }));
+
+ fireEvent.keyDown(window, { key: 'Shift' });
+ fireEvent.keyUp(window, { key: 'Shift' });
+
+ expect(document.body.classList.contains('shift-key-active')).toBe(false);
+ expect(document.body.style.userSelect).toBe('');
+ });
+
+ it('removes shift-key-active class on window blur', () => {
+ setupMocks();
+ renderHook(() => useTable({ allRowIds: [], columns: [], data: [] }));
+
+ fireEvent.keyDown(window, { key: 'Shift' });
+ fireEvent.blur(window);
+
+ expect(document.body.classList.contains('shift-key-active')).toBe(false);
+ });
+
+ it('does not add shift-key-active class for non-Shift keydown', () => {
+ setupMocks();
+ renderHook(() => useTable({ allRowIds: [], columns: [], data: [] }));
+
+ fireEvent.keyDown(window, { key: 'a' });
+
+ expect(document.body.classList.contains('shift-key-active')).toBe(false);
+ });
+ });
+
+ // ── onSelectAllChange ──────────────────────────────────────────────────────
+
+ describe('onSelectAllChange', () => {
+ it('selects all allRowIds when checked', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.onSelectAllChange({ target: { checked: true } });
+ });
+
+ expect(result.current.selectedTableIds).toEqual([1, 2, 3]);
+ });
+
+ it('clears selectedTableIds when unchecked', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.onSelectAllChange({ target: { checked: true } });
+ });
+ await act(async () => {
+ result.current.onSelectAllChange({ target: { checked: false } });
+ });
+
+ expect(result.current.selectedTableIds).toEqual([]);
+ });
+
+ it('calls onRowSelectionChange callback with all ids when selecting all', async () => {
+ setupMocks();
+ const onRowSelectionChange = vi.fn();
+ const { result } = renderHook(() =>
+ useTable({
+ allRowIds: [1, 2],
+ columns: [],
+ data: [],
+ onRowSelectionChange,
+ })
+ );
+
+ await act(async () => {
+ result.current.onSelectAllChange({ target: { checked: true } });
+ });
+
+ expect(onRowSelectionChange).toHaveBeenCalledWith([1, 2]);
+ });
+
+ it('calls onRowSelectionChange with empty array when deselecting all', async () => {
+ setupMocks();
+ const onRowSelectionChange = vi.fn();
+ const { result } = renderHook(() =>
+ useTable({
+ allRowIds: [1, 2],
+ columns: [],
+ data: [],
+ onRowSelectionChange,
+ })
+ );
+
+ await act(async () => {
+ result.current.onSelectAllChange({ target: { checked: true } });
+ });
+ await act(async () => {
+ result.current.onSelectAllChange({ target: { checked: false } });
+ });
+
+ expect(onRowSelectionChange).toHaveBeenLastCalledWith([]);
+ });
+ });
+
+ // ── updateSelectedTableIds ─────────────────────────────────────────────────
+
+ describe('updateSelectedTableIds', () => {
+ it('updates selectedTableIds to the given array', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.updateSelectedTableIds([2, 3]);
+ });
+
+ expect(result.current.selectedTableIds).toEqual([2, 3]);
+ });
+
+ it('calls onRowSelectionChange with the new ids', async () => {
+ setupMocks();
+ const onRowSelectionChange = vi.fn();
+ const { result } = renderHook(() =>
+ useTable({
+ allRowIds: [1, 2, 3],
+ columns: [],
+ data: [],
+ onRowSelectionChange,
+ })
+ );
+
+ await act(async () => {
+ result.current.updateSelectedTableIds([1]);
+ });
+
+ expect(onRowSelectionChange).toHaveBeenCalledWith([1]);
+ });
+
+ it('does not throw when onRowSelectionChange is not provided', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1], columns: [], data: [] })
+ );
+
+ await expect(
+ act(async () => result.current.updateSelectedTableIds([1]))
+ ).resolves.not.toThrow();
+ });
+ });
+
+ // ── handleRowClickRef ──────────────────────────────────────────────────────
+
+ describe('handleRowClickRef', () => {
+ it('does nothing when the click target is an interactive element', async () => {
+ setupMocks();
+ const onRowSelectionChange = vi.fn();
+ const { result } = renderHook(() =>
+ useTable({
+ allRowIds: [1],
+ columns: [],
+ data: [],
+ onRowSelectionChange,
+ })
+ );
+
+ const button = document.createElement('button');
+ await act(async () => {
+ result.current.handleRowClickRef.current(1, {
+ shiftKey: true,
+ ctrlKey: false,
+ metaKey: false,
+ target: {
+ closest: (sel) => (sel.includes('button') ? button : null),
+ },
+ });
+ });
+
+ expect(onRowSelectionChange).not.toHaveBeenCalled();
+ });
+
+ it('ctrl+click adds an unselected row to selectedTableIds', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 2,
+ makeClickEvent({ ctrlKey: true })
+ );
+ });
+
+ expect(result.current.selectedTableIds).toContain(2);
+ });
+
+ it('ctrl+click removes an already-selected row from selectedTableIds', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.updateSelectedTableIds([2]);
+ });
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 2,
+ makeClickEvent({ ctrlKey: true })
+ );
+ });
+
+ expect(result.current.selectedTableIds).not.toContain(2);
+ });
+
+ it('meta+click adds an unselected row to selectedTableIds', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 3,
+ makeClickEvent({ metaKey: true })
+ );
+ });
+
+ expect(result.current.selectedTableIds).toContain(3);
+ });
+
+ it('plain click (no modifier key) does not change selection', async () => {
+ setupMocks();
+ const onRowSelectionChange = vi.fn();
+ const { result } = renderHook(() =>
+ useTable({
+ allRowIds: [1, 2],
+ columns: [],
+ data: [],
+ onRowSelectionChange,
+ })
+ );
+
+ await act(async () => {
+ result.current.handleRowClickRef.current(1, makeClickEvent());
+ });
+
+ expect(onRowSelectionChange).not.toHaveBeenCalled();
+ });
+
+ it('shift+click selects the range between lastClickedId and the clicked row', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3, 4, 5], columns: [], data: [] })
+ );
+
+ // Ctrl+click row 2 to establish lastClickedId
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 2,
+ makeClickEvent({ ctrlKey: true })
+ );
+ });
+ // Shift+click row 4 to select range [2, 3, 4]
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 4,
+ makeClickEvent({ shiftKey: true })
+ );
+ });
+
+ expect(result.current.selectedTableIds).toEqual(
+ expect.arrayContaining([2, 3, 4])
+ );
+ expect(result.current.selectedTableIds).toHaveLength(3);
+ });
+
+ it('shift+click preserves rows selected outside the shift-click range', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1, 2, 3, 4, 5], columns: [], data: [] })
+ );
+
+ // Pre-select row 1 (will be outside the upcoming range)
+ await act(async () => {
+ result.current.updateSelectedTableIds([1]);
+ });
+ // Ctrl+click row 5 to set lastClickedId=5 (also adds 5 to selection)
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 5,
+ makeClickEvent({ ctrlKey: true })
+ );
+ });
+ // Shift+click row 3 → range is [3, 4, 5]; row 1 is preserved
+ await act(async () => {
+ result.current.handleRowClickRef.current(
+ 3,
+ makeClickEvent({ shiftKey: true })
+ );
+ });
+
+ expect(result.current.selectedTableIds).toEqual(
+ expect.arrayContaining([1, 3, 4, 5])
+ );
+ });
+ });
+
+ // ── renderBodyCell ─────────────────────────────────────────────────────────
+
+ describe('renderBodyCell', () => {
+ describe('bodyCellRenderFns override', () => {
+ it('calls the custom render fn and renders its output for the matching column id', () => {
+ setupMocks();
+ const customRenderFn = vi.fn(
+ () =>
+ );
+ const { result } = renderHook(() =>
+ useTable({
+ allRowIds: [],
+ columns: [],
+ data: [],
+ bodyCellRenderFns: { 'my-col': customRenderFn },
+ })
+ );
+
+ const row = makeRow(1);
+ const cell = makeCell('my-col');
+ const { getByTestId } = render(
+ result.current.renderBodyCell({ row, cell })
+ );
+
+ expect(customRenderFn).toHaveBeenCalledWith({ row, cell });
+ expect(getByTestId('custom-cell')).toBeInTheDocument();
+ });
+ });
+
+ describe('select column', () => {
+ it('renders a Checkbox for the select column', () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1], columns: [], data: [] })
+ );
+
+ const { getByTestId } = render(
+ result.current.renderBodyCell({
+ row: makeRow(1),
+ cell: makeCell('select'),
+ })
+ );
+
+ expect(getByTestId('checkbox')).toBeInTheDocument();
+ });
+
+ it('checkbox is unchecked for an unselected row', () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1], columns: [], data: [] })
+ );
+
+ const { getByTestId } = render(
+ result.current.renderBodyCell({
+ row: makeRow(1),
+ cell: makeCell('select'),
+ })
+ );
+
+ expect(getByTestId('checkbox')).not.toBeChecked();
+ });
+
+ it('checkbox is checked when the row is pre-selected', async () => {
+ setupMocks();
+ const { result } = renderHook(() =>
+ useTable({ allRowIds: [1], columns: [], data: [] })
+ );
+
+ await act(async () => {
+ result.current.updateSelectedTableIds([1]);
+ });
+
+ const { getByTestId } = render(
+ result.current.renderBodyCell({
+ row: makeRow(1),
+ cell: makeCell('select'),
+ })
+ );
+
+ expect(getByTestId('checkbox')).toBeChecked();
+ });
+
+ it('checking the checkbox adds the row to selectedTableIds', async () => {
+ setupMocks();
+ const tableRef = { current: null };
+
+ function TestWrapper() {
+ const table = useTable({ allRowIds: [1, 2], columns: [], data: [] });
+ tableRef.current = table;
+ return table.renderBodyCell({ row: makeRow(1), cell: makeCell('select') });
+ }
+
+ const user = userEvent.setup();
+ const { getByTestId } = render(
+ {children}
+
+ )),
+ KeyboardSensor: vi.fn(),
+ MouseSensor: vi.fn(),
+ TouchSensor: vi.fn(),
+ useDraggable: vi.fn(() => ({
+ attributes: {},
+ listeners: {},
+ setNodeRef: vi.fn(),
+ })),
+ useSensor: vi.fn((sensor) => sensor),
+ useSensors: vi.fn((...sensors) => sensors),
+}));
+
+vi.mock('@dnd-kit/modifiers', () => ({
+ restrictToVerticalAxis: vi.fn(),
+}));
+
+vi.mock('@dnd-kit/sortable', () => ({
+ arrayMove: vi.fn((arr, from, to) => {
+ const next = [...arr];
+ const [item] = next.splice(from, 1);
+ next.splice(to, 0, item);
+ return next;
+ }),
+ SortableContext: ({ children }) => (
+ {children}
+ ),
+ useSortable: vi.fn(() => ({
+ transform: null,
+ transition: null,
+ setNodeRef: vi.fn(),
+ isDragging: false,
+ })),
+ verticalListSortingStrategy: vi.fn(),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+ CSS: { Transform: { toString: vi.fn(() => '') } },
+}));
+
+// ── zustand/shallow ────────────────────────────────────────────────────────────
+vi.mock('zustand/shallow', () => ({
+ shallow: (a, b) => a === b,
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, ...rest }) => (
+
+ ),
+ Badge: ({ children, color, onClick, style }) => (
+
+ {children}
+
+ ),
+ Box: ({ children, style, className, ...rest }) => (
+
+ {children}
+
+ ),
+ Button: ({ children, onClick, leftSection }) => (
+
+ ),
+ Center: ({ children }) => {children}
,
+ Collapse: ({ children, in: open }) =>
+ open ? {children}
: null,
+ Flex: ({ children, style }) => (
+ {children}
+ ),
+ Group: ({ children }) => {children}
,
+ Text: ({ children, size }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => {children}
,
+ useMantineTheme: vi.fn(() => ({
+ tailwind: { red: { 6: '#fa5252' } },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ChevronDown: () => ,
+ ChevronRight: () => ,
+ Eye: () => ,
+ GripHorizontal: () => ,
+ SquareMinus: ({ onClick, disabled, color }) => (
+
+ ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsTableStore from '../../../store/channelsTable';
+import usePlaylistsStore from '../../../store/playlists';
+import useVideoStore from '../../../store/useVideoStore';
+import useSettingsStore from '../../../store/settings';
+import useAuthStore from '../../../store/auth';
+import { buildLiveStreamUrl } from '../../../utils/components/FloatingVideoUtils.js';
+import * as ChannelTableStreamsUtils from '../../../utils/tables/ChannelTableStreamsUtils.js';
+import { copyToClipboard } from '../../../utils';
+import { DndContext } from '@dnd-kit/core';
+import { arrayMove } from '@dnd-kit/sortable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+
+const makeStream = (overrides = {}) => ({
+ id: 's-1',
+ name: 'Stream One',
+ m3u_account: 'acc-1',
+ url: 'http://example.com/stream',
+ stream_hash: 'hash-abc',
+ quality: '1080p',
+ stream_stats: null,
+ stream_stats_updated_at: null,
+ is_stale: false,
+ ...overrides,
+});
+
+const makeChannel = (streams = [makeStream()]) => ({
+ id: 'ch-1',
+ name: 'HBO',
+ streams,
+});
+
+const makePlaylists = () => [{ id: 'acc-1', name: 'My M3U' }];
+
+/** Wire all store mocks with sensible defaults */
+const setupMocks = ({
+ streams = [makeStream()],
+ playlists = makePlaylists(),
+ isAdmin = true,
+ isVideoVisible = false,
+ envMode = 'production',
+} = {}) => {
+ const mockPatchChannelStreamStats = vi.fn();
+
+ vi.mocked(useChannelsTableStore).mockImplementation((sel) => {
+ if (typeof sel === 'function') {
+ const storeState = {
+ getChannelStreams: () => streams,
+ patchChannelStreamStats: mockPatchChannelStreamStats,
+ };
+ return sel(storeState);
+ }
+ });
+
+ vi.mocked(usePlaylistsStore).mockImplementation((sel) => sel({ playlists }));
+
+ const mockShowVideo = vi.fn();
+ vi.mocked(useVideoStore).mockImplementation((sel) => {
+ const state = { showVideo: mockShowVideo, isVisible: isVideoVisible };
+ return sel(state);
+ });
+ // Also expose getState for the ref-based metadata read
+ useVideoStore.getState = vi.fn(() => ({ metadata: null }));
+
+ vi.mocked(useSettingsStore).mockImplementation((sel) =>
+ sel({ environment: { env_mode: envMode } })
+ );
+
+ vi.mocked(useAuthStore).mockImplementation((sel) =>
+ sel({ user: { user_level: isAdmin ? 10 : 1 } })
+ );
+
+ return { mockShowVideo, mockPatchChannelStreamStats };
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('ChannelStreams', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(ChannelTableStreamsUtils.getChannelStreamStats).mockResolvedValue(
+ []
+ );
+ vi.mocked(ChannelTableStreamsUtils.reorderChannelStreams).mockResolvedValue(
+ undefined
+ );
+ vi.mocked(ChannelTableStreamsUtils.categorizeStreamStats).mockReturnValue({
+ basic: {},
+ video: {},
+ audio: {},
+ technical: {},
+ other: {},
+ });
+ });
+
+ // ── Rendering ────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders stream name', () => {
+ setupMocks();
+ render({children}
;
+ });
+
+ render({children}
;
+ });
+
+ render({children}
;
+ });
+
+ render({children}
,
+ PointerSensor: class PointerSensor {},
+ closestCenter: vi.fn(),
+ useSensor: vi.fn(),
+ useSensors: vi.fn(() => []),
+}));
+
+vi.mock('@dnd-kit/sortable', () => ({
+ SortableContext: ({ children }) => {children}
,
+ verticalListSortingStrategy: vi.fn(),
+}));
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels', () => ({ default: vi.fn() }));
+vi.mock('../../../store/channelsTable', () => {
+ const mock = vi.fn();
+ mock.getState = vi.fn(() => ({ selectedChannelIds: [] }));
+ mock.setState = vi.fn();
+ return { default: mock };
+});
+vi.mock('../../../store/auth', () => ({ default: vi.fn() }));
+vi.mock('../../../store/epgs', () => ({ default: vi.fn() }));
+vi.mock('../../../store/settings', () => ({ default: vi.fn() }));
+vi.mock('../../../store/useVideoStore', () => ({ default: vi.fn() }));
+vi.mock('../../../store/outputProfiles', () => ({ default: vi.fn() }));
+vi.mock('../../../store/warnings', () => ({ default: vi.fn() }));
+
+// ── Hook mocks ─────────────────────────────────────────────────────────────────
+vi.mock('../../../hooks/useLocalStorage', () => ({
+ default: vi.fn(() => [{}, vi.fn()]),
+}));
+vi.mock('../../../hooks/useSmartLogos', () => ({
+ useChannelLogoSelection: vi.fn(() => ({ ensureLogosLoaded: vi.fn() })),
+}));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils', () => ({
+ copyToClipboard: vi.fn().mockResolvedValue(undefined),
+ useDebounce: vi.fn((val) => val),
+}));
+vi.mock('../../../utils/forms/ChannelUtils.js', () => ({
+ listOverriddenFields: vi.fn(() => []),
+ requeryChannels: vi.fn().mockResolvedValue(undefined),
+}));
+vi.mock('../../../utils/components/FloatingVideoUtils.js', () => ({
+ buildLiveStreamUrl: vi.fn((path) => path),
+}));
+vi.mock('../../../utils/cards/RecordingCardUtils.js', () => ({
+ getShowVideoUrl: vi.fn(() => '/proxy/ts/stream/uuid-1'),
+}));
+vi.mock('../../../utils/tables/ChannelsTableUtils.js', () => ({
+ buildEPGUrl: vi.fn(() => 'http://localhost/output/epg'),
+ buildFetchParams: vi.fn(() => new URLSearchParams()),
+ buildHDHRUrl: vi.fn(() => 'http://localhost/hdhr'),
+ buildM3UUrl: vi.fn(() => 'http://localhost/output/m3u'),
+ deleteChannel: vi.fn().mockResolvedValue(undefined),
+ deleteChannels: vi.fn().mockResolvedValue(undefined),
+ epgUrlBase: 'http://localhost/output/epg',
+ getAllChannelIds: vi.fn().mockResolvedValue([1, 2]),
+ hdhrUrlBase: 'http://localhost/hdhr',
+ m3uUrlBase: 'http://localhost/output/m3u',
+ queryChannels: vi.fn().mockResolvedValue(undefined),
+ reorderChannel: vi.fn().mockResolvedValue(undefined),
+ updateProfileChannel: vi.fn().mockResolvedValue(undefined),
+ updateProfileChannels: vi.fn().mockResolvedValue(undefined),
+}));
+
+// ── Child component mocks ──────────────────────────────────────────────────────
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+vi.mock('../ChannelsTable/ChannelsTableOnboarding', () => ({
+ default: ({ editChannel }) => (
+
+
+
+ ),
+}));
+vi.mock('../ChannelsTable/ChannelTableHeader', () => ({
+ default: ({
+ editChannel,
+ deleteChannels,
+ showDisabled,
+ setShowDisabled,
+ showOnlyStreamlessChannels,
+ setShowOnlyStreamlessChannels,
+ showOnlyStaleChannels,
+ setShowOnlyStaleChannels,
+ showOnlyOverriddenChannels,
+ setShowOnlyOverriddenChannels,
+ }) => (
+
+
+
+
+
+
+
+
+ ),
+}));
+vi.mock('../ChannelsTable/EditableCell', () => ({
+ EditableEPGCell: () => ,
+ EditableGroupCell: () => ,
+ EditableLogoCell: () => ,
+ EditableNumberCell: () => ,
+ EditableTextCell: () => ,
+}));
+vi.mock('../ChannelTableStreams', () => ({
+ default: () => ,
+}));
+vi.mock('../../forms/Channel', () => ({
+ default: ({ isOpen, onClose, channel }) =>
+ isOpen ? (
+
+ {channel?.name ?? 'new'}
+
+
+ ) : null,
+}));
+vi.mock('../../forms/ChannelBatch', () => ({
+ default: ({ isOpen, onClose }) =>
+ isOpen ? (
+
+
+
+ ) : null,
+}));
+vi.mock('../../forms/Recording', () => ({
+ default: ({ isOpen, onClose, channel }) =>
+ isOpen ? (
+
+ {channel?.name}
+
+
+ ) : null,
+}));
+vi.mock('../../ConfirmationDialog', () => ({
+ default: ({ opened, onClose, onConfirm, title, loading, confirmLabel, cancelLabel }) =>
+ opened ? (
+
+ {title}
+
+
+
+ ) : null,
+}));
+vi.mock('../../LazyLogo', () => ({
+ default: ({ alt }) =>
+ {children}
+
+ ),
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Center: ({ children, style }) => {children}
,
+ Flex: ({ children, style }) => {children}
,
+ Group: ({ children, style }) => {children}
,
+ Menu: Object.assign(
+ ({ children }) => {children}
,
+ {
+ Target: ({ children }) => {children}
,
+ Dropdown: ({ children }) => {children}
,
+ Label: ({ children }) => {children}
,
+ Item: ({ children, onClick, disabled, leftSection }) => (
+
+ ),
+ }
+ ),
+ MenuDropdown: ({ children }) => {children}
,
+ MenuItem: ({ children, onClick, disabled, leftSection }) => (
+
+ ),
+ MenuTarget: ({ children }) => {children}
,
+ MultiSelect: ({ value, data }) => (
+
+ ),
+ NativeSelect: ({ value, data, onChange }) => (
+
+ ),
+ NumberInput: ({ value, onChange }) => (
+ onChange(Number(e.target.value))} />
+ ),
+ Pagination: ({ total, value, onChange }) => (
+
+
+ {value}
+
+
+ ),
+ Paper: ({ children, style }) => {children}
,
+ Popover: Object.assign(
+ ({ children }) => {children}
,
+ {
+ Target: ({ children }) => {children}
,
+ Dropdown: ({ children }) => {children}
,
+ }
+ ),
+ PopoverDropdown: ({ children, onClick, onMouseDown }) => (
+
+ {children}
+
+ ),
+ PopoverTarget: ({ children }) => {children}
,
+ Select: ({ value, onChange, data, placeholder }) => (
+
+ ),
+ Stack: ({ children, style }) => {children}
,
+ Switch: ({ checked, onChange, label, disabled }) => (
+
+ ),
+ Text: ({ children, style }) => (
+ {children}
+ ),
+ TextInput: ({ value, placeholder, onChange, readOnly }) => (
+ {})}
+ readOnly={readOnly}
+ />
+ ),
+ Tooltip: ({ children, label }) => {children}
,
+ UnstyledButton: ({ children, onClick }) => (
+
+ ),
+ useMantineTheme: vi.fn(() => ({
+ tailwind: { yellow: { 3: '#fde047' }, red: { 6: '#dc2626' }, green: { 5: '#22c55e' } },
+ palette: {
+ custom: { greenMain: '#22c55e', indigoMain: '#6366f1', greyBorder: '#71717a' },
+ },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ArrowDownWideNarrow: () => ,
+ ArrowUpDown: () => ,
+ ArrowUpNarrowWide: () => ,
+ CirclePlay: () => ,
+ Copy: () => ,
+ EllipsisVertical: () => ,
+ EyeOff: () => ,
+ Pencil: () => ,
+ ScanEye: () => ,
+ ScreenShare: () => ,
+ Scroll: () => ,
+ Search: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ Tv2: () => ,
+}));
+
+// ── CSS import ─────────────────────────────────────────────────────────────────
+vi.mock('../table.css', () => ({}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useChannelsStore from '../../../store/channels';
+import useChannelsTableStore from '../../../store/channelsTable';
+import useAuthStore from '../../../store/auth';
+import useEPGsStore from '../../../store/epgs';
+import useSettingsStore from '../../../store/settings';
+import useVideoStore from '../../../store/useVideoStore';
+import useOutputProfilesStore from '../../../store/outputProfiles';
+import useWarningsStore from '../../../store/warnings';
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import { useTable } from '../CustomTable';
+import { deleteChannel, deleteChannels, queryChannels, getAllChannelIds } from '../../../utils/tables/ChannelsTableUtils.js';
+import { requeryChannels } from '../../../utils/forms/ChannelUtils.js';
+import { copyToClipboard } from '../../../utils';
+import { buildLiveStreamUrl } from '../../../utils/components/FloatingVideoUtils.js';
+import { USER_LEVELS } from '../../../constants';
+import ChannelsTable from '../ChannelsTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeChannel = (overrides = {}) => ({
+ id: 1,
+ uuid: 'uuid-1',
+ name: 'Test Channel',
+ channel_number: 101,
+ effective_channel_number: 101,
+ effective_name: 'Test Channel',
+ streams: [{ id: 10, is_stale: false }],
+ hidden_from_output: false,
+ channel_group_id: null,
+ logo_id: null,
+ epg_data_id: null,
+ ...overrides,
+});
+
+const makeAdminUser = () => ({ id: 99, user_level: USER_LEVELS.ADMIN });
+const makeStandardUser = () => ({ id: 88, user_level: USER_LEVELS.STANDARD });
+
+let capturedTableOptions = null;
+
+const makeDefaultTableInstance = (overrides = {}) => ({
+ getRowModel: vi.fn(() => ({ rows: [] })),
+ getHeaderGroups: vi.fn(() => []),
+ setSelectedTableIds: vi.fn(),
+ selectedTableIds: [],
+ ...overrides,
+});
+
+const setupMocks = ({
+ channels = [makeChannel()],
+ authUser = makeAdminUser(),
+ isWarningSuppressed = vi.fn(() => false),
+ suppressWarning = vi.fn(),
+ selectedProfileId = '0',
+ profiles = { 0: { name: 'Default', channels: new Set() } },
+ pageCount = 1,
+ totalCount = 1,
+ allQueryIds = [1],
+ channelGroups = {},
+ epgs = {},
+ hasUnassignedEPGChannels = false,
+ tableOverrides = {},
+} = {}) => {
+ vi.mocked(useChannelsTableStore).mockImplementation((sel) =>
+ sel({
+ channels,
+ pageCount,
+ totalCount,
+ allQueryIds,
+ pagination: { pageIndex: 0, pageSize: 25 },
+ sorting: [],
+ hasUnassignedEPGChannels,
+ setSelectedChannelIds: vi.fn(),
+ setExpandedChannelId: vi.fn(),
+ setPagination: vi.fn(),
+ setSorting: vi.fn(),
+ setAllQueryIds: vi.fn(),
+ })
+ );
+ vi.mocked(useChannelsTableStore).getState.mockReturnValue({
+ selectedChannelIds: [],
+ });
+
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({
+ channelIds: channels.map((c) => c.id),
+ profiles,
+ selectedProfileId,
+ channelGroups,
+ })
+ );
+
+ vi.mocked(useAuthStore).mockImplementation((sel) =>
+ sel({ user: authUser })
+ );
+
+ vi.mocked(useEPGsStore).mockImplementation((sel) =>
+ sel({ epgs, tvgsById: {}, tvgsLoaded: true })
+ );
+
+ vi.mocked(useSettingsStore).mockImplementation((sel) =>
+ sel({ environment: { env_mode: 'production' } })
+ );
+
+ vi.mocked(useVideoStore).mockImplementation((sel) =>
+ sel({ showVideo: vi.fn() })
+ );
+
+ vi.mocked(useOutputProfilesStore).mockImplementation((sel) =>
+ sel({ profiles: [] })
+ );
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ isWarningSuppressed, suppressWarning })
+ );
+
+ vi.mocked(useLocalStorage).mockReturnValue([{}, vi.fn()]);
+
+ const tableInstance = makeDefaultTableInstance(tableOverrides);
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return tableInstance;
+ });
+
+ return { tableInstance };
+};
+
+const getActionsCol = () =>
+ capturedTableOptions.columns.find((c) => c.id === 'actions');
+
+const getCol = (id) =>
+ capturedTableOptions.columns.find((c) => c.id === id);
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('ChannelsTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(deleteChannel).mockResolvedValue(undefined);
+ vi.mocked(deleteChannels).mockResolvedValue(undefined);
+ vi.mocked(queryChannels).mockResolvedValue(undefined);
+ vi.mocked(getAllChannelIds).mockResolvedValue([1]);
+ vi.mocked(requeryChannels).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders "Channels" heading', () => {
+ setupMocks();
+ render(
+ {epg?.name ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../../forms/DummyEPG', () => ({
+ default: ({ isOpen, onClose, epg }) =>
+ isOpen ? (
+
+ {epg?.name ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../../ConfirmationDialog', () => ({
+ default: ({
+ opened,
+ onClose,
+ onConfirm,
+ title,
+ message,
+ confirmLabel,
+ cancelLabel,
+ loading,
+ }) =>
+ opened ? (
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: ({ table }) => (
+ {title}
+
+ {typeof message === 'string' ? message : 'rich-message'}
+
+
+
+
+ {table?.getRowModel?.().rows.map((row) => (
+
+ ),
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Box: ({ children, style }) =>
+ {row.getVisibleCells().map((cell) => (
+
+ ))}
+
+ {cell.column.id === 'actions'
+ ? table.bodyCellRenderFns?.actions?.({ cell, row })
+ : cell.column.columnDef.cell
+ ? cell.column.columnDef.cell(cell.getContext())
+ : cell.getValue?.()}
+
+ ))}
+ {children}
,
+ Button: ({
+ children,
+ onClick,
+ leftSection,
+ rightSection,
+ disabled,
+ loading,
+ }) => (
+
+ ),
+ Checkbox: ({ checked, onChange, label, disabled }) => (
+
+ ),
+ Flex: ({ children, style }) => {children}
,
+ Menu: Object.assign(
+ ({ children }) => {children}
,
+ {
+ Target: ({ children }) => {children}
,
+ Dropdown: ({ children }) => (
+ {children}
+ ),
+ Item: ({ children, onClick }) => (
+
+ ),
+ }
+ ),
+ MenuDropdown: ({ children }) => (
+ {children}
+ ),
+ MenuItem: ({ children, onClick }) => (
+
+ ),
+ MenuTarget: ({ children }) => {children}
,
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
+ ) : null,
+ Paper: ({ children, style }) => {title}
+
+ {children}
+ {children}
,
+ Progress: ({ value }) => ,
+ Stack: ({ children }) => {children}
,
+ Switch: ({ checked, onChange, disabled }) => (
+
+ ),
+ Text: ({ children, size, c, style }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+ useMantineTheme: vi.fn(() => ({
+ palette: { background: { paper: '#1a1a1a' } },
+ colors: { red: { 6: '#fa5252' }, green: { 6: '#40c057' } },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ChevronDown: () => ,
+ RefreshCcw: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useEPGsStore from '../../../store/epgs';
+import useWarningsStore from '../../../store/warnings';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import * as EPGsTableUtils from '../../../utils/tables/EPGsTableUtils.js';
+import { useTable, CustomTable } from '../CustomTable';
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import { makeSortingChangeHandler } from '../M3uTableUtils.jsx';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeEpg = (overrides = {}) => ({
+ id: 'epg-1',
+ name: 'Test EPG',
+ source_type: 'xmltv',
+ url: 'http://example.com/epg.xml',
+ status: 'idle',
+ last_message: null,
+ is_active: true,
+ updated_at: '2024-01-01T12:00:00Z',
+ ...overrides,
+});
+
+const makeDummyEpg = (overrides = {}) =>
+ makeEpg({
+ id: 'epg-dummy',
+ name: 'Dummy EPG',
+ source_type: 'dummy',
+ ...overrides,
+ });
+
+// Captures the useTable options passed by EPGsTable so we can invoke
+// renderBodyCell and renderHeaderCell in tests.
+let capturedTableOptions = null;
+
+/** Wire stores and the useTable spy */
+const setupMocks = ({
+ epgs = { 'epg-1': makeEpg() },
+ refreshProgress = {},
+ isWarningSuppressed = vi.fn(() => false),
+ suppressWarning = vi.fn(),
+ tableSize = 'default',
+} = {}) => {
+ vi.mocked(useEPGsStore).mockImplementation((sel) =>
+ sel({ epgs, refreshProgress })
+ );
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ isWarningSuppressed, suppressWarning })
+ );
+
+ vi.mocked(useLocalStorage).mockReturnValue([tableSize, vi.fn()]);
+
+ // Capture the options EPGsTable passes to useTable so tests can call
+ // renderBodyCell / renderHeaderCell manually.
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ bodyCellRenderFns: opts.bodyCellRenderFns ?? {},
+ getHeaderGroups: () => [],
+ };
+ });
+};
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+/** Build a minimal row/cell pair like TanStack Table would provide */
+const makeRowContext = (epgObj) => {
+ const row = {
+ id: epgObj.id,
+ original: epgObj,
+ getIsSelected: vi.fn(() => false),
+ getVisibleCells: vi.fn(() => []),
+ };
+ const cell = {
+ column: { id: 'actions', columnDef: {} },
+ getValue: vi.fn(() => epgObj.is_active),
+ row,
+ getContext: vi.fn(() => ({})),
+ };
+ return { row, cell };
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('EPGsTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(EPGsTableUtils.deleteEpg).mockResolvedValue(undefined);
+ vi.mocked(EPGsTableUtils.refreshEpg).mockResolvedValue(undefined);
+ vi.mocked(EPGsTableUtils.updateEpg).mockResolvedValue(undefined);
+ vi.mocked(EPGsTableUtils.getSortedEpgs).mockImplementation((epgs) =>
+ Object.values(epgs)
+ );
+ });
+
+ // ── Header renders ─────────────────────────────────────────────────────────
+
+ describe('header / top toolbar', () => {
+ it('renders the "EPGs" heading', () => {
+ setupMocks();
+ render({msgCol.cell({ row })}
);
+ expect(container.firstChild).toBeEmptyDOMElement();
+ });
+
+ it('renders error message when status is error', () => {
+ const epg = makeEpg({ status: 'error', last_message: 'Something broke' });
+ setupMocks({ epgs: { 'epg-1': epg } });
+ render({getMsgCol().cell({ row })}
);
+ expect(container.firstChild).toBeEmptyDOMElement();
+ });
+
+ it('shows progress when progress.status is "in_progress" even at 100%', () => {
+ const epg = makeEpg();
+ vi.mocked(EPGsTableUtils.getProgressLabel).mockReturnValue('Processing');
+ setupMocks({
+ epgs: { 'epg-1': epg },
+ refreshProgress: {
+ 'epg-1': { action: 'processing', progress: 100, status: 'in_progress' },
+ },
+ });
+ render({getMsgCol().cell({ row })}
);
+ // condition fails (100 < 100=false, no in_progress, parsing_channels + idle=false)
+ // falls through to the idle-message branch; no last_message → returns null
+ expect(container.firstChild).toBeEmptyDOMElement();
+ });
+
+ it('renders nothing when there is no active progress and no status message', () => {
+ const epg = makeEpg({ status: 'idle', last_message: null });
+ setupMocks({ epgs: { 'epg-1': epg } });
+ render({getMsgCol().cell({ row })}
);
+ expect(container.firstChild).toBeEmptyDOMElement();
+ });
+ });
+
+ // ── Table structure ────────────────────────────────────────────────────────
+
+ describe('table structure', () => {
+ it('renders the CustomTable component', () => {
+ setupMocks();
+ render(
+ {logo?.name ?? 'new'}
+
+
+
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../ConfirmationDialog', () => ({
+ default: ({
+ opened,
+ onClose,
+ onConfirm,
+ title,
+ message,
+ confirmLabel,
+ cancelLabel,
+ loading,
+ showDeleteFileOption,
+ }) =>
+ opened ? (
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Badge: ({ children, color }) => (
+
+ {children}
+
+ ),
+ Box: ({ children, style }) => {title}
+
+ {typeof message === 'string' ? message : 'rich-message'}
+
+
+
+ {showDeleteFileOption && (
+
+ )}
+ {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading, color, variant }) => (
+
+ ),
+ Center: ({ children, style }) => {children}
,
+ Checkbox: ({ checked, onChange, label, disabled }) => (
+
+ ),
+ Group: ({ children, style }) => {children}
,
+ Image: ({ src, alt, fallbackSrc, style, onMouseEnter, onMouseLeave }) => (
+
+
+ {value}
+
+
+ ),
+ Paper: ({ children, style }) => {children}
,
+ Select: ({ value, onChange, data, style }) => (
+
+ ),
+ Stack: ({ children, style }) => {children}
,
+ Text: ({ children, size, c, style }) => (
+
+ {children}
+
+ ),
+ TextInput: ({ value, onChange, placeholder, style }) => (
+
+ ),
+ Tooltip: ({ children }) => {children}
,
+ useMantineTheme: vi.fn(() => ({
+ tailwind: {
+ yellow: { 3: '#fbbf24' },
+ red: { 6: '#dc2626' },
+ green: { 5: '#22c55e' },
+ },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ExternalLink: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+ Trash: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useLogosStore from '../../../store/logos';
+import useWarningsStore from '../../../store/warnings';
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import * as LogosTableUtils from '../../../utils/tables/LogosTableUtils.js';
+import { useTable } from '../CustomTable';
+import LogosTable from '../LogosTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeLogo = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Logo',
+ url: 'http://example.com/logo.png',
+ cache_url: '/cached/logo.png',
+ channel_count: 0,
+ channel_names: [],
+ is_used: false,
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ logos = { 1: makeLogo() },
+ storeLoading = false,
+ tableSize = 'default',
+} = {}) => {
+ const mockFetchAllLogos = vi.fn().mockResolvedValue(undefined);
+ const mockUpdateLogo = vi.fn();
+ const mockAddLogo = vi.fn();
+
+ vi.mocked(useLogosStore).mockImplementation((sel) => {
+ const state = {
+ logos,
+ fetchAllLogos: mockFetchAllLogos,
+ updateLogo: mockUpdateLogo,
+ addLogo: mockAddLogo,
+ isLoading: storeLoading,
+ };
+ return typeof sel === 'function' ? sel(state) : state;
+ });
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ suppressWarning: vi.fn(), isWarningSuppressed: vi.fn(() => false) })
+ );
+
+ vi.mocked(useLocalStorage).mockImplementation((key, defaultVal) => {
+ if (key === 'table-size') return [tableSize, vi.fn()];
+ if (key === 'logos-page-size') return [25, vi.fn()];
+ return [defaultVal, vi.fn()];
+ });
+
+ vi.mocked(LogosTableUtils.getFilteredLogos).mockReturnValue(Object.values(logos));
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ setSelectedTableIds: vi.fn(),
+ };
+ });
+
+ return { mockFetchAllLogos, mockUpdateLogo, mockAddLogo };
+};
+
+// ── Column helpers ─────────────────────────────────────────────────────────────
+const getActionsCell = (logo) => {
+ const col = capturedTableOptions.columns.find((c) => c.id === 'actions');
+ return col.cell({ row: { id: logo.id, original: logo } });
+};
+
+const getSelectCell = (logo) => {
+ const col = capturedTableOptions.columns.find((c) => c.id === 'select');
+ return col.cell({ row: { id: logo.id, original: logo } });
+};
+
+const getSelectHeader = () => {
+ const col = capturedTableOptions.columns.find((c) => c.id === 'select');
+ return col.header({ table: {} });
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('LogosTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(LogosTableUtils.deleteLogo).mockResolvedValue(undefined);
+ vi.mocked(LogosTableUtils.deleteLogos).mockResolvedValue(undefined);
+ vi.mocked(LogosTableUtils.cleanupUnusedLogos).mockResolvedValue({
+ deleted_count: 3,
+ local_files_deleted: 0,
+ });
+ window.open = vi.fn();
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the name filter input', () => {
+ setupMocks();
+ render(
+ {m3uAccount?.name ?? 'new'}
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../ServerGroupsManagerModal', () => ({
+ default: ({ isOpen, onClose }) =>
+ isOpen ? (
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../../components/ConfirmationDialog', () => ({
+ default: ({
+ opened,
+ onClose,
+ onConfirm,
+ title,
+ message,
+ confirmLabel,
+ cancelLabel,
+ loading,
+ }) =>
+ opened ? (
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Box: ({ children, style }) => {title}
+
+ {typeof message === 'string' ? message : 'rich-message'}
+
+
+
+ {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Flex: ({ children, style }) => {children}
,
+ Paper: ({ children, style }) => {children}
,
+ Switch: ({ checked, onChange }) => (
+
+ ),
+ Text: ({ children, size, c, fw, style }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+ useMantineTheme: vi.fn(() => ({
+ palette: { background: { paper: '#1a1a1a' } },
+ colors: { red: { 6: '#fa5252' }, green: { 6: '#40c057' } },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ // Icons used by M3UsTable
+ RefreshCcw: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+ // Icons required by src/config/navigation.js (pulled in via store/auth)
+ Blocks: () => ,
+ ChartLine: () => ,
+ Database: () => ,
+ Download: () => ,
+ FileImage: () => ,
+ LayoutGrid: () => ,
+ ListOrdered: () => ,
+ Logs: () => ,
+ MonitorCog: () => ,
+ Package: () => ,
+ Play: () => ,
+ PlugZap: () => ,
+ Settings: () => ,
+ User: () => ,
+ Video: () => ,
+ Webhook: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import usePlaylistsStore from '../../../store/playlists';
+import useWarningsStore from '../../../store/warnings';
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import * as M3UsTableUtils from '../../../utils/tables/M3UsTableUtils.js';
+import * as DateTimeUtils from '../../../utils/dateTimeUtils.js';
+import { useTable } from '../CustomTable';
+import M3UTable from '../M3UsTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makePlaylist = (overrides = {}) => ({
+ id: 1,
+ name: 'Test M3U',
+ account_type: 'M3U',
+ server_url: 'http://example.com/playlist.m3u',
+ file_path: null,
+ status: 'success',
+ last_message: 'Loaded 500 streams',
+ max_streams: 5,
+ profiles: [],
+ is_active: true,
+ locked: false,
+ updated_at: '2024-01-01T12:00:00Z',
+ earliest_expiration: '2024-12-01T00:00:00Z',
+ all_expirations: [],
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ playlists = [makePlaylist()],
+ refreshProgress = {},
+ editPlaylistId = null,
+ isWarningSuppressed = vi.fn(() => false),
+ suppressWarning = vi.fn(),
+ tableSize = 'default',
+} = {}) => {
+ const mockSetRefreshProgress = vi.fn();
+ const mockSetEditPlaylistId = vi.fn();
+
+ vi.mocked(usePlaylistsStore).mockImplementation((sel) =>
+ sel({
+ playlists,
+ refreshProgress,
+ setRefreshProgress: mockSetRefreshProgress,
+ editPlaylistId,
+ setEditPlaylistId: mockSetEditPlaylistId,
+ })
+ );
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ isWarningSuppressed, suppressWarning })
+ );
+
+ vi.mocked(useLocalStorage).mockReturnValue([tableSize, vi.fn()]);
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return { getRowModel: () => ({ rows: [] }), getHeaderGroups: () => [] };
+ });
+
+ return { mockSetRefreshProgress, mockSetEditPlaylistId };
+};
+
+const getCol = (keyOrId) =>
+ capturedTableOptions.columns.find(
+ (c) => c.accessorKey === keyOrId || c.id === keyOrId
+ );
+
+const makeRowCtx = (playlist) => ({
+ row: { id: String(playlist.id), original: playlist },
+ cell: { column: { id: 'actions', columnDef: {} }, getValue: vi.fn() },
+});
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('M3UTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(M3UsTableUtils.deletePlaylist).mockResolvedValue(undefined);
+ vi.mocked(M3UsTableUtils.refreshPlaylist).mockResolvedValue(undefined);
+ vi.mocked(M3UsTableUtils.updatePlaylist).mockResolvedValue(undefined);
+ vi.mocked(M3UsTableUtils.getPlaylistAutoCreatedChannelsCount).mockResolvedValue({
+ count: 0,
+ sample_names: [],
+ });
+ vi.mocked(M3UsTableUtils.getStatusContent).mockReturnValue({ type: 'default', label: 'Idle' });
+ vi.mocked(DateTimeUtils.format).mockImplementation((val) => `formatted:${val}`);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the "M3U Accounts" heading', () => {
+ setupMocks();
+ render(
+ {profile?.name ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Center: ({ children }) => {children}
,
+ Flex: ({ children }) => {children}
,
+ Paper: ({ children, style }) => {children}
,
+ Stack: ({ children, style }) => {children}
,
+ Switch: ({ checked, onChange, disabled }) => (
+
+ ),
+ Text: ({ children, size, style }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+ useMantineTheme: vi.fn(() => ({
+ palette: { background: { paper: '#1a1a1a' } },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ Eye: () => ,
+ EyeOff: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useOutputProfilesStore from '../../../store/outputProfiles';
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import * as OutputProfilesTableUtils from '../../../utils/tables/OutputProfilesTableUtils.js';
+import { useTable } from '../CustomTable';
+import OutputProfiles from '../OutputProfilesTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeProfile = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Profile',
+ command: 'ffmpeg',
+ parameters: '-c:v copy',
+ is_active: true,
+ locked: false,
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ profiles = [makeProfile()],
+ tableSize = 'default',
+} = {}) => {
+ vi.mocked(useOutputProfilesStore).mockImplementation((sel) =>
+ sel({ profiles })
+ );
+
+ vi.mocked(useLocalStorage).mockReturnValue([tableSize, vi.fn()]);
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ };
+ });
+};
+
+const getCol = (keyOrId) =>
+ capturedTableOptions.columns.find(
+ (c) => c.accessorKey === keyOrId || c.id === keyOrId
+ );
+
+const makeRowCtx = (profile) => ({
+ row: { id: String(profile.id), original: profile },
+ cell: { column: { id: 'actions', columnDef: {} }, getValue: vi.fn(() => undefined) },
+});
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('OutputProfiles', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(OutputProfilesTableUtils.deleteOutputProfile).mockResolvedValue(undefined);
+ vi.mocked(OutputProfilesTableUtils.updateOutputProfile).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the "Add Output Profile" button', () => {
+ setupMocks();
+ render(
+ {profile?.name ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Center: ({ children }) => {children}
,
+ Flex: ({ children }) => {children}
,
+ Paper: ({ children, style }) => {children}
,
+ Stack: ({ children, style }) => {children}
,
+ Switch: ({ checked, onChange, disabled }) => (
+
+ ),
+ Text: ({ children, name }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+ useMantineTheme: vi.fn(() => ({
+ palette: { background: { paper: '#1a1a1a' } },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ Eye: () => ,
+ EyeOff: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useStreamProfilesStore from '../../../store/streamProfiles';
+import useSettingsStore from '../../../store/settings';
+import { useTable } from '../CustomTable';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import { updateStreamProfile } from '../../../utils/forms/StreamProfileUtils.js';
+import API from '../../../api';
+import StreamProfiles from '../StreamProfilesTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeProfile = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Profile',
+ command: 'ffmpeg',
+ parameters: '-c copy',
+ is_active: true,
+ locked: false,
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ profiles = [makeProfile()],
+ defaultProfileId = 99,
+} = {}) => {
+ vi.mocked(useStreamProfilesStore).mockImplementation((sel) =>
+ sel({ profiles })
+ );
+
+ vi.mocked(useSettingsStore).mockImplementation((sel) =>
+ sel({ settings: { default_stream_profile: defaultProfileId } })
+ );
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ };
+ });
+};
+
+const getCol = (keyOrId) =>
+ capturedTableOptions.columns.find(
+ (c) => c.accessorKey === keyOrId || c.id === keyOrId
+ );
+
+const makeRowCtx = (profile) => ({
+ row: { id: String(profile.id), original: profile },
+ cell: {
+ column: { id: 'actions', columnDef: {} },
+ getValue: vi.fn(() => undefined),
+ },
+});
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('StreamProfiles', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(API.deleteStreamProfile).mockResolvedValue(undefined);
+ vi.mocked(updateStreamProfile).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the "Add Stream Profile" button', () => {
+ setupMocks();
+ render(
+ {stream?.name ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../../ConfirmationDialog', () => ({
+ default: ({ opened, onClose, onConfirm, title, message, confirmLabel, cancelLabel, loading }) =>
+ opened ? (
+
+ {title}
+ {typeof message === 'string' ? message : 'message'}
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../modals/CreateChannelModal', () => ({
+ default: ({ opened, onClose, onConfirm }) =>
+ opened ? (
+
+
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled }) => (
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Card: ({ children, style }) => (
+ {children}
+ ),
+ Center: ({ children, style }) => {children}
,
+ Divider: ({ label }) => , + Flex: ({ children, style }) => ( +
{children}
+ ),
+ Group: ({ children, style }) => {children}
,
+ LoadingOverlay: ({ visible }) => visible ? : null,
+ Menu: Object.assign(
+ ({ children }) => {children}
,
+ {
+ Target: ({ children }) => {children}
,
+ Dropdown: ({ children }) => {children}
,
+ Label: ({ children }) => {children}
,
+ Item: ({ children, onClick, leftSection }) => (
+
+ ),
+ Divider: () => , + } + ), + MenuDivider: () =>
, + MenuDropdown: ({ children }) =>
{children}
,
+ MenuItem: ({ children, onClick, leftSection }) => (
+
+ ),
+ MenuLabel: ({ children }) => {children}
,
+ MenuTarget: ({ children }) => {children}
,
+ MultiSelect: ({ onChange, value, data }) => (
+
+ ),
+ NativeSelect: ({ onChange, value, data }) => (
+
+ ),
+ Pagination: ({ total, value, onChange }) => (
+
+
+ {value}
+
+
+ ),
+ Paper: ({ children, style }) => {children}
,
+ Stack: ({ children, style }) => {children}
,
+ Text: ({ children, style }) => (
+ {children}
+ ),
+ TextInput: ({ onChange, value, placeholder }) => (
+
+ ),
+ Title: ({ children, style }) => {children}
, + Tooltip: ({ children, label }) => ( +{children}
+ ),
+ UnstyledButton: ({ children, onClick }) => (
+
+ ),
+ useMantineTheme: vi.fn(() => ({
+ tailwind: { blue: { 6: '#3b82f6' }, green: { 5: '#22c55e' }, yellow: { 3: '#fde047' } },
+ palette: { background: { paper: '#1a1a1a' } },
+ colors: {},
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ArrowDownWideNarrow: () => ,
+ ArrowUpDown: () => ,
+ ArrowUpNarrowWide: () => ,
+ Copy: () => ,
+ EllipsisVertical: () => ,
+ Eye: () => ,
+ EyeOff: () => ,
+ Filter: () => ,
+ ListPlus: () => ,
+ RotateCcw: () => ,
+ Search: () => ,
+ Square: () => ,
+ SquareCheck: () => ,
+ SquareMinus: () => ,
+ SquarePlus: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import usePlaylistsStore from '../../../store/playlists';
+import useChannelsStore from '../../../store/channels';
+import useSettingsStore from '../../../store/settings';
+import useVideoStore from '../../../store/useVideoStore';
+import useChannelsTableStore from '../../../store/channelsTable';
+import useWarningsStore from '../../../store/warnings';
+import useStreamsTableStore from '../../../store/streamsTable';
+import useLocalStorage from '../../../hooks/useLocalStorage';
+import { useNavigate } from 'react-router-dom';
+import { useTable } from '../CustomTable';
+import * as StreamsTableUtils from '../../../utils/tables/StreamsTableUtils.js';
+import StreamsTable from '../StreamsTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeStream = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Stream',
+ url: 'http://example.com/stream',
+ stream_hash: 'abc123',
+ channel_group: 'group-1',
+ m3u_account: 10,
+ tvg_id: 'tvg-1',
+ stream_stats: null,
+ is_custom: true,
+ is_stale: false,
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const DEFAULT_PAGINATION = { pageIndex: 0, pageSize: 50 };
+const DEFAULT_SORTING = [{ id: 'name', desc: false }];
+
+const setupMocks = ({
+ streams = [makeStream()],
+ pageCount = 1,
+ totalCount = 1,
+ allQueryIds = [1],
+ pagination = DEFAULT_PAGINATION,
+ sorting = DEFAULT_SORTING,
+ selectedStreamIds = [],
+ playlists = [{ id: 10, name: 'My M3U' }],
+ channelGroups = { 'group-1': { name: 'Sports' } },
+ expandedChannelId = null,
+ selectedChannelIds = [],
+ channelProfiles = {},
+ isWarningSuppressed = vi.fn(() => false),
+ suppressWarning = vi.fn(),
+ envMode = 'production',
+ showVideo = vi.fn(),
+ isVisible = false,
+ tableSize = null,
+} = {}) => {
+ vi.mocked(useStreamsTableStore).mockImplementation((sel) =>
+ sel({
+ streams,
+ pageCount,
+ totalCount,
+ allQueryIds,
+ pagination,
+ sorting,
+ selectedStreamIds,
+ setAllQueryIds: vi.fn(),
+ setPagination: vi.fn(),
+ setSorting: vi.fn(),
+ setSelectedStreamIds: vi.fn(),
+ })
+ );
+
+ vi.mocked(usePlaylistsStore).mockImplementation((sel) =>
+ sel({ playlists, fetchPlaylists: vi.fn(), isLoading: false })
+ );
+
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({
+ channelGroups,
+ fetchChannelGroups: vi.fn(),
+ profiles: channelProfiles,
+ selectedProfileId: '0',
+ })
+ );
+
+ vi.mocked(useSettingsStore).mockImplementation((sel) =>
+ sel({ environment: { env_mode: envMode } })
+ );
+
+ vi.mocked(useVideoStore).mockImplementation((sel) =>
+ sel({ showVideo, isVisible })
+ );
+
+ vi.mocked(useChannelsTableStore).mockImplementation((sel) =>
+ sel({
+ expandedChannelId,
+ selectedChannelIds,
+ channels: [],
+ })
+ );
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ suppressWarning, isWarningSuppressed })
+ );
+
+ // useLocalStorage: first call is column-sizing, second is column-visibility
+ vi.mocked(useLocalStorage)
+ .mockReturnValueOnce([{}, vi.fn()]) // streams-table-column-sizing
+ .mockReturnValueOnce([tableSize, vi.fn()]); // streams-table-column-visibility
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ setSelectedTableIds: vi.fn(),
+ tableSize: tableSize ?? 'default',
+ };
+ });
+};
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('StreamsTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+
+ vi.mocked(StreamsTableUtils.queryStreamsTable).mockResolvedValue({ count: 5, results: [] });
+ vi.mocked(StreamsTableUtils.getAllStreamIds).mockResolvedValue([]);
+ vi.mocked(StreamsTableUtils.getStreamFilterOptions).mockResolvedValue({
+ groups: [],
+ m3u_accounts: [],
+ });
+ vi.mocked(StreamsTableUtils.deleteStream).mockResolvedValue(undefined);
+ vi.mocked(StreamsTableUtils.deleteStreams).mockResolvedValue(undefined);
+ vi.mocked(StreamsTableUtils.addStreamsToChannel).mockResolvedValue(undefined);
+ vi.mocked(StreamsTableUtils.requeryStreams).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the "Streams" heading', () => {
+ setupMocks();
+ render(
+ {userAgent?.name ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Center: ({ children }) => {children}
,
+ Flex: ({ children }) => {children}
,
+ Paper: ({ children, style }) => {children}
,
+ Stack: ({ children, style }) => {children}
,
+ Text: ({ children, name }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ Check: ({ color }) => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+ X: ({ color }) => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useUserAgentsStore from '../../../store/userAgents';
+import useSettingsStore from '../../../store/settings';
+import { useTable } from '../CustomTable';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import API from '../../../api';
+import UserAgentsTable from '../UserAgentsTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeUA = (overrides = {}) => ({
+ id: 1,
+ name: 'Chrome Default',
+ user_agent: 'Mozilla/5.0 Chrome/120',
+ description: 'Standard Chrome UA',
+ is_active: true,
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ userAgents = [makeUA()],
+ defaultUserAgentId = 99,
+} = {}) => {
+ vi.mocked(useUserAgentsStore).mockImplementation((sel) =>
+ sel({ userAgents })
+ );
+
+ vi.mocked(useSettingsStore).mockImplementation((sel) =>
+ sel({ settings: { default_user_agent: defaultUserAgentId } })
+ );
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ };
+ });
+};
+
+const makeRowCtx = (ua) => ({
+ row: { id: String(ua.id), original: ua },
+ cell: {
+ column: { id: 'actions', columnDef: {} },
+ getValue: vi.fn(() => undefined),
+ },
+});
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('UserAgentsTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(API.deleteUserAgent).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the "Add User-Agent" button', () => {
+ setupMocks();
+ render(
+ {user?.username ?? 'new'}
+
+
+ ) : null,
+}));
+
+vi.mock('../../ConfirmationDialog', () => ({
+ default: ({ opened, onClose, onConfirm, title, loading, confirmLabel, cancelLabel }) =>
+ opened ? (
+
+ {title}
+
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Badge: ({ children, color }) => (
+
+ {children}
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Flex: ({ children, style }) => {children}
,
+ Group: ({ children, style }) => (
+ {children}
+ ),
+ LoadingOverlay: ({ visible }) => visible ? : null,
+ Paper: ({ children, style }) => {children}
,
+ Stack: ({ children, style }) => {children}
,
+ Text: ({ children, style, name }) => (
+
+ {children}
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+ useMantineTheme: vi.fn(() => ({
+ tailwind: {
+ yellow: { 3: '#fde047' },
+ red: { 6: '#dc2626' },
+ green: { 5: '#22c55e' },
+ },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ Eye: () => ,
+ EyeOff: () => ,
+ SquareMinus: () => ,
+ SquarePen: () => ,
+ SquarePlus: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useUsersStore from '../../../store/users';
+import useChannelsStore from '../../../store/channels';
+import useAuthStore from '../../../store/auth';
+import useWarningsStore from '../../../store/warnings';
+import { useDateTimeFormat, format } from '../../../utils/dateTimeUtils.js';
+import { useTable } from '../CustomTable';
+import API from '../../../api';
+import { USER_LEVELS, USER_LEVEL_LABELS } from '../../../constants';
+import UsersTable from '../UsersTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeUser = (overrides = {}) => ({
+ id: 1,
+ username: 'testuser',
+ first_name: 'Test',
+ last_name: 'User',
+ email: 'test@example.com',
+ user_level: USER_LEVELS.STANDARD,
+ date_joined: '2024-01-15T10:00:00Z',
+ last_login: '2024-06-01T12:00:00Z',
+ custom_properties: { xc_password: 'secret123' },
+ channel_profiles: [],
+ ...overrides,
+});
+
+const makeAdminUser = (overrides = {}) =>
+ makeUser({ id: 99, username: 'admin', user_level: USER_LEVELS.ADMIN, ...overrides });
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ users = [makeUser()],
+ authUser = makeAdminUser(),
+ profiles = { 10: { id: 10, name: 'HD Profile' } },
+ isWarningSuppressed = vi.fn(() => false),
+ suppressWarning = vi.fn(),
+} = {}) => {
+ vi.mocked(useUsersStore).mockImplementation((sel) =>
+ sel({ users })
+ );
+
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({ profiles })
+ );
+
+ vi.mocked(useAuthStore).mockImplementation((sel) =>
+ sel({ user: authUser })
+ );
+
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ isWarningSuppressed, suppressWarning })
+ );
+
+ vi.mocked(useDateTimeFormat).mockReturnValue({
+ fullDateFormat: 'MM/DD/YYYY',
+ fullDateTimeFormat: 'MM/DD/YYYY HH:mm',
+ });
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ };
+ });
+};
+
+const getActionsCell = () =>
+ capturedTableOptions.columns.find((c) => c.id === 'actions');
+
+const getCol = (key) =>
+ capturedTableOptions.columns.find(
+ (c) => c.accessorKey === key || c.id === key
+ );
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('UsersTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ vi.mocked(API.deleteUser).mockResolvedValue(undefined);
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the "Users" heading', () => {
+ setupMocks();
+ render(
+ {title}
+
+
+
+ ) : null,
+}));
+
+vi.mock('../CustomTable', () => ({
+ CustomTable: () => ,
+ useTable: vi.fn(),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Badge: ({ children, color }) => (
+
+ {children}
+
+ ),
+ Box: ({ children, style }) => {children}
,
+ Button: ({ children, onClick, leftSection, disabled, loading }) => (
+
+ ),
+ Center: ({ children, style }) => {children}
,
+ Checkbox: ({ checked, indeterminate, onChange }) => (
+
+ ),
+ Group: ({ children, style }) => (
+ {children}
+ ),
+ Image: ({ src, alt, fallbackSrc }) => (
+
+
+ {value}
+
+
+ ),
+ Paper: ({ children, style }) => {children}
,
+ Select: ({ value, onChange, data }) => (
+
+ ),
+ Stack: ({ children, style }) => {children}
,
+ Text: ({ children, style, name }) => (
+
+ {children}
+
+ ),
+ TextInput: ({ value, onChange, placeholder }) => (
+
+ ),
+ Tooltip: ({ children, label }) => (
+ {children}
+ ),
+ useMantineTheme: vi.fn(() => ({
+ tailwind: {
+ red: { 6: '#dc2626' },
+ },
+ })),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ ExternalLink: () => ,
+ SquareMinus: () => ,
+ Trash: () => ,
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useVODLogosStore from '../../../store/vodLogos';
+import { useTable } from '../CustomTable';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import VODLogosTable from '../VODLogosTable';
+
+// ── Factories ──────────────────────────────────────────────────────────────────
+const makeLogo = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Logo',
+ url: 'http://example.com/logo.png',
+ cache_url: '/cache/logo.png',
+ movie_count: 0,
+ series_count: 0,
+ item_names: [],
+ ...overrides,
+});
+
+let capturedTableOptions = null;
+
+const setupMocks = ({
+ logos = [makeLogo()],
+ totalCount = 1,
+ isLoading = false,
+ unusedCount = 0,
+} = {}) => {
+ const fetchVODLogos = vi.fn().mockResolvedValue(undefined);
+ const deleteVODLogo = vi.fn().mockResolvedValue(undefined);
+ const deleteVODLogos = vi.fn().mockResolvedValue(undefined);
+ const cleanupUnusedVODLogos = vi.fn().mockResolvedValue({ deleted_count: 3 });
+ const getUnusedLogosCount = vi.fn().mockResolvedValue(unusedCount);
+
+ vi.mocked(useVODLogosStore).mockReturnValue({
+ logos,
+ totalCount,
+ isLoading,
+ fetchVODLogos,
+ deleteVODLogo,
+ deleteVODLogos,
+ cleanupUnusedVODLogos,
+ getUnusedLogosCount,
+ });
+
+ vi.mocked(useTable).mockImplementation((opts) => {
+ capturedTableOptions = opts;
+ return {
+ getRowModel: () => ({ rows: [] }),
+ getHeaderGroups: () => [],
+ setSelectedTableIds: vi.fn(),
+ };
+ });
+
+ return {
+ fetchVODLogos,
+ deleteVODLogo,
+ deleteVODLogos,
+ cleanupUnusedVODLogos,
+ getUnusedLogosCount,
+ };
+};
+
+const getCol = (key) =>
+ capturedTableOptions.columns.find(
+ (c) => c.accessorKey === key || c.id === key
+ );
+
+// ══════════════════════════════════════════════════════════════════════════════
+// Tests
+// ══════════════════════════════════════════════════════════════════════════════
+
+describe('VODLogosTable', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ capturedTableOptions = null;
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the name filter input', () => {
+ setupMocks();
+ render(
-
@@ -99,7 +108,10 @@ vi.mock('../ChannelsTable/ChannelTableHeader', () => ({
setShowOnlyOverriddenChannels,
}) => (
-
@@ -175,7 +191,15 @@ vi.mock('../../forms/Recording', () => ({
) : null,
}));
vi.mock('../../ConfirmationDialog', () => ({
- default: ({ opened, onClose, onConfirm, title, loading, confirmLabel, cancelLabel }) =>
+ default: ({
+ opened,
+ onClose,
+ onConfirm,
+ title,
+ loading,
+ confirmLabel,
+ cancelLabel,
+ }) =>
opened ? (
{title}
@@ -205,7 +229,11 @@ vi.mock('@mantine/core', () => ({
),
Button: ({ children, onClick, leftSection, disabled, loading }) => (
-