- {Array.from({ length: itemCount }, (_, index) =>
- children({ index, style: {} })
- )}
+vi.mock('../AutoSyncBasic.jsx', () => ({
+ default: () =>
,
+}));
+
+vi.mock('../../ErrorBoundary.jsx', () => ({
+ default: ({ children }) => <>{children},
+}));
+
+vi.mock('../AutoSyncAdvanced.jsx', () => ({
+ default: ({
+ group,
+ onApplyGroupChange,
+ onScheduleRegexPreview,
+ onOpenLogoUpload,
+ }) => (
+
,
+vi.mock('../Logo.jsx', () => ({
+ default: ({ isOpen, onClose, onSuccess }) =>
+ isOpen ? (
+
+ ) : null,
}));
-// ── @mantine/core minimal mocks ────────────────────────────────────────────────
-vi.mock('@mantine/core', () => ({
- TextInput: ({ value, onChange, placeholder }) => (
-
+// ── Utility mocks ─────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/LiveGroupFilterUtils.js', () => ({
+ abortTimers: vi.fn(),
+ computeAutoSyncStart: vi.fn(() => 101),
+ getChannelsInRange: vi.fn().mockResolvedValue({ occupants: [] }),
+ getEPGs: vi.fn().mockResolvedValue([]),
+ getRegexOptions: vi.fn((find, replace, match, exclude) => ({
+ find,
+ replace,
+ match,
+ exclude,
+ })),
+ getStreamsRegexPreview: vi.fn().mockResolvedValue(null),
+ isExpectedOccupantForGroup: vi.fn(() => true),
+ isGroupVisible: vi.fn((group, filter, status) => {
+ if (status === 'enabled') return group.enabled;
+ if (status === 'disabled') return !group.enabled;
+ if (filter) return group.name.toLowerCase().includes(filter.toLowerCase());
+ return true;
+ }),
+ rangeFor: vi.fn(() => null),
+}));
+
+// ── Mantine core mock ─────────────────────────────────────────────────────────
+vi.mock('@mantine/core', async () => ({
+ ActionIcon: ({ children, onClick, disabled }) => (
+
+ ),
+ Checkbox: ({ label, checked, onChange, description, disabled }) => (
- ),
- Tooltip: ({ children }) => <>{children},
- Popover: ({ children }) =>
- {data.map((opt) => (
+ Loader: () =>
,
+ SegmentedControl: ({ onChange, data }) => (
+
+ {(data || []).map((item) => (
))}
),
- ActionIcon: ({ children, onClick }) =>
,
- Switch: ({ label, checked, onChange }) => (
-
+ SimpleGrid: ({ children }) =>
{children}
,
+ Stack: ({ children, style }) =>
{children}
,
+ Text: ({ children }) =>
{children},
+ TextInput: ({ placeholder, value, onChange }) => (
+
),
+ Tooltip: ({ children }) => <>{children},
}));
-// ── Imports after mocks ────────────────────────────────────────────────────────
+// ── lucide-react mock ─────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ CircleCheck: () =>
,
+ CircleX: () =>
,
+ Info: () =>
,
+ Settings: () =>
,
+}));
+
+// ── Imports after mocks ───────────────────────────────────────────────────────
import LiveGroupFilter from '../LiveGroupFilter';
-import API from '../../../api';
-import { notifications } from '@mantine/notifications';
import useChannelsStore from '../../../store/channels';
import useStreamProfilesStore from '../../../store/streamProfiles';
+import { useChannelLogoSelection } from '../../../hooks/useSmartLogos';
+import {
+ getEPGs,
+ getRegexOptions,
+ getStreamsRegexPreview,
+ isGroupVisible,
+} from '../../../utils/forms/LiveGroupFilterUtils.js';
-// ──────────────────────────────────────────────────────────────────────────────
-
-const makePlaylist = (overrides = {}) => ({
- id: 7,
- channel_groups: [],
- custom_properties: null,
+// ── Factories ─────────────────────────────────────────────────────────────────
+const makeGroup = (overrides = {}) => ({
+ channel_group: 1,
+ name: 'Sports',
+ enabled: true,
+ auto_channel_sync: true,
+ auto_sync_channel_start: 1,
+ auto_sync_channel_end: null,
+ custom_properties: {},
+ is_stale: false,
+ original_enabled: true,
...overrides,
});
-const setupStores = () => {
- vi.mocked(useChannelsStore).mockImplementation((sel) =>
- sel({ channelGroups: {}, profiles: [] })
- );
- vi.mocked(useStreamProfilesStore).mockImplementation((sel) =>
- sel({ profiles: [], fetchProfiles: vi.fn() })
+const makePlaylist = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Playlist',
+ channel_groups: [],
+ ...overrides,
+});
+
+// ── Stateful wrapper ──────────────────────────────────────────────────────────
+const Wrapper = ({
+ initialGroups = [],
+ initialAutoEnable = true,
+ playlist,
+}) => {
+ const [groupStates, setGroupStates] = useState(initialGroups);
+ const [autoEnable, setAutoEnable] = useState(initialAutoEnable);
+ return (
+
);
};
-const renderFilter = (playlistOverrides = {}) =>
- render(
-
- );
+// ── Test setup helpers ────────────────────────────────────────────────────────
+describe('LiveGroupFilter', () => {
+ let mockEnsureLogosLoaded;
+ let mockFetchProfiles;
-// The orphan-cleanup SegmentedControl shares its mocked testid with the
-// status-filter SegmentedControl that lives elsewhere in the form, so
-// disambiguate by walking from a uniquely-testided child button up to
-// its parent SegmentedControl element.
-const findCleanupControl = () =>
- screen.getByTestId('segmented-always').closest('[data-testid="segmented-control"]');
-
-describe('LiveGroupFilter orphan-cleanup SegmentedControl', () => {
beforeEach(() => {
vi.clearAllMocks();
- setupStores();
- });
+ mockEnsureLogosLoaded = vi.fn();
+ mockFetchProfiles = vi.fn();
- it('defaults to "always" when custom_properties is null', () => {
- renderFilter({ custom_properties: null });
- expect(findCleanupControl()).toHaveAttribute('data-value', 'always');
- });
-
- it('defaults to "always" when the orphan_channel_cleanup key is absent', () => {
- renderFilter({ custom_properties: { compact_numbering: true } });
- expect(findCleanupControl()).toHaveAttribute('data-value', 'always');
- });
-
- it('reads the persisted mode from custom_properties on mount', () => {
- renderFilter({
- custom_properties: { orphan_channel_cleanup: 'preserve_customized' },
- });
- expect(findCleanupControl()).toHaveAttribute(
- 'data-value',
- 'preserve_customized'
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({ channelGroups: {} })
);
+ vi.mocked(useStreamProfilesStore).mockImplementation((sel) =>
+ sel({ profiles: [], fetchProfiles: mockFetchProfiles })
+ );
+ vi.mocked(useChannelLogoSelection).mockReturnValue({
+ logos: [],
+ ensureLogosLoaded: mockEnsureLogosLoaded,
+ isLoading: false,
+ });
+ vi.mocked(getEPGs).mockResolvedValue([]);
});
- it('PATCHes the playlist with merged custom_properties on click and updates the displayed value', async () => {
- renderFilter({
- custom_properties: { compact_numbering: true },
- });
- fireEvent.click(screen.getByTestId('segmented-never'));
-
- await waitFor(() => {
- expect(API.updatePlaylist).toHaveBeenCalledWith({
- id: 7,
- custom_properties: {
- compact_numbering: true,
- orphan_channel_cleanup: 'never',
- },
+ const renderWith = ({
+ initialGroups = [],
+ initialAutoEnable = true,
+ playlist,
+ channelGroups,
+ streamProfiles,
+ fetchProfiles,
+ ensureLogosLoaded,
+ } = {}) => {
+ if (channelGroups !== undefined) {
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({ channelGroups })
+ );
+ }
+ if (streamProfiles !== undefined || fetchProfiles !== undefined) {
+ vi.mocked(useStreamProfilesStore).mockImplementation((sel) =>
+ sel({
+ profiles: streamProfiles ?? [],
+ fetchProfiles: fetchProfiles ?? mockFetchProfiles,
+ })
+ );
+ }
+ if (ensureLogosLoaded !== undefined) {
+ vi.mocked(useChannelLogoSelection).mockReturnValue({
+ logos: [],
+ ensureLogosLoaded,
+ isLoading: false,
});
- });
- expect(findCleanupControl()).toHaveAttribute('data-value', 'never');
- });
+ }
- it('reverts to the previous mode and surfaces an error toast when the PATCH fails', async () => {
- vi.mocked(API.updatePlaylist).mockRejectedValueOnce(
- new Error('Server error')
+ return render(
+
);
- renderFilter({
- custom_properties: { orphan_channel_cleanup: 'always' },
- });
- fireEvent.click(screen.getByTestId('segmented-never'));
+ };
- await waitFor(() => {
- expect(notifications.show).toHaveBeenCalledWith(
- expect.objectContaining({ color: 'red' })
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the info alert', () => {
+ renderWith();
+ expect(screen.getByTestId('alert')).toBeInTheDocument();
+ expect(screen.getByText(/Auto Channel Sync/i)).toBeInTheDocument();
+ });
+
+ it('renders the auto-enable new groups checkbox', () => {
+ renderWith();
+ expect(
+ screen.getByRole('checkbox', {
+ name: /Automatically enable new groups/i,
+ })
+ ).toBeInTheDocument();
+ });
+
+ it('reflects initialAutoEnable=true on the checkbox', () => {
+ renderWith({ initialAutoEnable: true });
+ expect(
+ screen.getByRole('checkbox', {
+ name: /Automatically enable new groups/i,
+ })
+ ).toBeChecked();
+ });
+
+ it('reflects initialAutoEnable=false on the checkbox', () => {
+ renderWith({ initialAutoEnable: false });
+ expect(
+ screen.getByRole('checkbox', {
+ name: /Automatically enable new groups/i,
+ })
+ ).not.toBeChecked();
+ });
+
+ it('renders OrphanCleanupControl with the playlist', () => {
+ renderWith({ playlist: makePlaylist({ id: 7 }) });
+ expect(screen.getByTestId('orphan-cleanup')).toHaveAttribute(
+ 'data-playlist-id',
+ '7'
);
});
- expect(findCleanupControl()).toHaveAttribute('data-value', 'always');
+
+ it('renders the group name filter input', () => {
+ renderWith();
+ expect(screen.getByTestId('group-filter-input')).toBeInTheDocument();
+ });
+
+ it('renders All / Enabled / Disabled status filter buttons', () => {
+ renderWith();
+ expect(screen.getByTestId('seg-all')).toBeInTheDocument();
+ expect(screen.getByTestId('seg-enabled')).toBeInTheDocument();
+ expect(screen.getByTestId('seg-disabled')).toBeInTheDocument();
+ });
+
+ it('renders Select Visible and Deselect Visible buttons', () => {
+ renderWith();
+ expect(screen.getByText('Select Visible')).toBeInTheDocument();
+ expect(screen.getByText('Deselect Visible')).toBeInTheDocument();
+ });
+
+ it('renders a card for each group in groupStates', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports' }),
+ makeGroup({ channel_group: 2, name: 'News' }),
+ ],
+ });
+ expect(screen.getByText('Sports')).toBeInTheDocument();
+ expect(screen.getByText('News')).toBeInTheDocument();
+ });
+
+ it('renders groups sorted alphabetically by name', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 3, name: 'Sports' }),
+ makeGroup({ channel_group: 1, name: 'Arts' }),
+ makeGroup({ channel_group: 2, name: 'News' }),
+ ],
+ });
+ const names = screen
+ .getAllByText(/Arts|News|Sports/)
+ .map((el) => el.textContent);
+ expect(names).toEqual(['Arts', 'News', 'Sports']);
+ });
+
+ it('renders no group cards when groupStates is empty', () => {
+ renderWith({ initialGroups: [] });
+ expect(screen.queryByTestId('group-card')).not.toBeInTheDocument();
+ });
+
+ it('does not render the configure modal on initial render', () => {
+ renderWith({ initialGroups: [makeGroup()] });
+ expect(screen.queryByTestId('configure-modal')).not.toBeInTheDocument();
+ });
+ });
+
+ // ── Mount effects ──────────────────────────────────────────────────────────
+
+ describe('mount effects', () => {
+ it('calls ensureLogosLoaded on mount', () => {
+ renderWith({ ensureLogosLoaded: mockEnsureLogosLoaded });
+ expect(mockEnsureLogosLoaded).toHaveBeenCalled();
+ });
+
+ it('calls fetchStreamProfiles when profiles array is empty', () => {
+ renderWith({ streamProfiles: [], fetchProfiles: mockFetchProfiles });
+ expect(mockFetchProfiles).toHaveBeenCalled();
+ });
+
+ it('does not call fetchStreamProfiles when profiles already exist', () => {
+ renderWith({
+ streamProfiles: [{ id: 'p1', name: 'Default' }],
+ fetchProfiles: mockFetchProfiles,
+ });
+ expect(mockFetchProfiles).not.toHaveBeenCalled();
+ });
+
+ it('calls getEPGs on mount', async () => {
+ renderWith();
+ await waitFor(() => {
+ expect(getEPGs).toHaveBeenCalled();
+ });
+ });
+
+ it('initializes groupStates from playlist.channel_groups when channelGroups are loaded', async () => {
+ const channelGroups = { 10: { id: 10, name: 'Movies' } };
+ const playlist = makePlaylist({
+ id: 2,
+ channel_groups: [
+ {
+ channel_group: 10,
+ enabled: true,
+ auto_channel_sync: false,
+ auto_sync_channel_start: 1,
+ auto_sync_channel_end: null,
+ custom_properties: {},
+ },
+ ],
+ });
+ renderWith({ channelGroups, playlist, initialGroups: [] });
+ await waitFor(() => {
+ expect(screen.getByText('Movies')).toBeInTheDocument();
+ });
+ });
+
+ it('skips groupStates initialization when channelGroups is empty', () => {
+ renderWith({
+ channelGroups: {},
+ playlist: makePlaylist({
+ channel_groups: [
+ {
+ channel_group: 1,
+ enabled: true,
+ auto_channel_sync: false,
+ auto_sync_channel_start: 1,
+ },
+ ],
+ }),
+ initialGroups: [],
+ });
+ // Init effect bails early — no group cards rendered
+ expect(screen.queryByTestId('group-card')).not.toBeInTheDocument();
+ });
+
+ it('does not re-initialize groupStates for the same playlist/channelGroups key', async () => {
+ // Covers the lastInitKey guard preventing re-init on prop-reference changes
+ const channelGroups = { 1: { id: 1, name: 'Sports' } };
+ const playlist = makePlaylist({
+ id: 1,
+ channel_groups: [
+ {
+ channel_group: 1,
+ enabled: true,
+ auto_channel_sync: false,
+ auto_sync_channel_start: 1,
+ custom_properties: {},
+ },
+ ],
+ });
+ const { rerender } = renderWith({ channelGroups, playlist });
+ await waitFor(() =>
+ expect(screen.getByText('Sports')).toBeInTheDocument()
+ );
+
+ // Re-render with identical playlist reference — init must not fire again
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({ channelGroups })
+ );
+ rerender(
);
+ // Still renders Sports; no duplicate init
+ expect(screen.getAllByText('Sports')).toHaveLength(1);
+ });
+ });
+
+ // ── autoEnableNewGroupsLive checkbox ──────────────────────────────────────
+
+ describe('autoEnableNewGroupsLive checkbox', () => {
+ it('toggles off when clicked while checked', () => {
+ renderWith({ initialAutoEnable: true });
+ const cb = screen.getByRole('checkbox', {
+ name: /Automatically enable new groups/i,
+ });
+ fireEvent.click(cb);
+ expect(cb).not.toBeChecked();
+ });
+
+ it('toggles on when clicked while unchecked', () => {
+ renderWith({ initialAutoEnable: false });
+ const cb = screen.getByRole('checkbox', {
+ name: /Automatically enable new groups/i,
+ });
+ fireEvent.click(cb);
+ expect(cb).toBeChecked();
+ });
+ });
+
+ // ── Group text filter ──────────────────────────────────────────────────────
+
+ describe('group text filter', () => {
+ it('shows groups matching the filter and hides non-matching groups', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports' }),
+ makeGroup({ channel_group: 2, name: 'News' }),
+ ],
+ });
+ fireEvent.change(screen.getByTestId('group-filter-input'), {
+ target: { value: 'sport' },
+ });
+ expect(screen.getByText('Sports')).toBeInTheDocument();
+ expect(screen.queryByText('News')).not.toBeInTheDocument();
+ });
+
+ it('shows all groups when filter is cleared', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports' }),
+ makeGroup({ channel_group: 2, name: 'News' }),
+ ],
+ });
+ fireEvent.change(screen.getByTestId('group-filter-input'), {
+ target: { value: 'sport' },
+ });
+ fireEvent.change(screen.getByTestId('group-filter-input'), {
+ target: { value: '' },
+ });
+ expect(screen.getByText('Sports')).toBeInTheDocument();
+ expect(screen.getByText('News')).toBeInTheDocument();
+ });
+
+ it('calls isGroupVisible with the current filter text and status', () => {
+ renderWith({
+ initialGroups: [makeGroup({ channel_group: 1, name: 'Sports' })],
+ });
+ fireEvent.change(screen.getByTestId('group-filter-input'), {
+ target: { value: 'sp' },
+ });
+ expect(isGroupVisible).toHaveBeenCalledWith(
+ expect.objectContaining({ name: 'Sports' }),
+ 'sp',
+ 'all'
+ );
+ });
+ });
+
+ // ── Status filter ──────────────────────────────────────────────────────────
+
+ describe('status filter', () => {
+ it('shows only enabled groups when Enabled filter is selected', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: true }),
+ makeGroup({ channel_group: 2, name: 'News', enabled: false }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('seg-enabled'));
+ expect(screen.getByText('Sports')).toBeInTheDocument();
+ expect(screen.queryByText('News')).not.toBeInTheDocument();
+ });
+
+ it('shows only disabled groups when Disabled filter is selected', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: true }),
+ makeGroup({ channel_group: 2, name: 'News', enabled: false }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('seg-disabled'));
+ expect(screen.queryByText('Sports')).not.toBeInTheDocument();
+ expect(screen.getByText('News')).toBeInTheDocument();
+ });
+
+ it('passes the active status value to isGroupVisible', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: true }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('seg-disabled'));
+ expect(isGroupVisible).toHaveBeenCalledWith(
+ expect.objectContaining({ name: 'Sports' }),
+ '',
+ 'disabled'
+ );
+ });
+
+ it('reverts to showing all groups when All filter is selected', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: true }),
+ makeGroup({ channel_group: 2, name: 'News', enabled: false }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('seg-enabled'));
+ fireEvent.click(screen.getByTestId('seg-all'));
+ expect(screen.getByText('Sports')).toBeInTheDocument();
+ expect(screen.getByText('News')).toBeInTheDocument();
+ });
+ });
+
+ // ── Select Visible / Deselect Visible ─────────────────────────────────────
+
+ describe('Select Visible / Deselect Visible', () => {
+ it('Select Visible enables all currently visible groups', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: false }),
+ makeGroup({ channel_group: 2, name: 'News', enabled: false }),
+ ],
+ });
+ fireEvent.click(screen.getByText('Select Visible'));
+ // Both groups remain visible (isGroupVisible still returns true)
+ expect(screen.getAllByTestId('group-card')).toHaveLength(2);
+ });
+
+ it('Deselect Visible disables all currently visible groups', () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: true }),
+ makeGroup({ channel_group: 2, name: 'News', enabled: true }),
+ ],
+ });
+ // With status=all, isGroupVisible still returns true after deselect
+ fireEvent.click(screen.getByText('Deselect Visible'));
+ expect(screen.getAllByTestId('group-card')).toHaveLength(2);
+ });
+
+ it('Select Visible only applies to groups passing the current filter', () => {
+ // With Enabled filter active, only already-enabled groups are "visible"
+ // so disabling one and clicking Select Visible should not re-enable the hidden one
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports', enabled: true }),
+ makeGroup({ channel_group: 2, name: 'News', enabled: false }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('seg-enabled'));
+ fireEvent.click(screen.getByText('Select Visible'));
+ // News (disabled) is not visible in Enabled filter, so it stays hidden
+ expect(screen.queryByText('News')).not.toBeInTheDocument();
+ });
+ });
+
+ // ── Configure modal ────────────────────────────────────────────────────────
+
+ describe('configure modal', () => {
+ it('opens when the Cog ActionIcon is clicked', () => {
+ renderWith({ initialGroups: [makeGroup({ channel_group: 1 })] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ expect(screen.getByTestId('configure-modal')).toBeInTheDocument();
+ });
+
+ it('passes the correct group id to GroupConfigureModal', () => {
+ renderWith({ initialGroups: [makeGroup({ channel_group: 42 })] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ expect(screen.getByTestId('configure-modal')).toHaveAttribute(
+ 'data-group-id',
+ '42'
+ );
+ });
+
+ it('closes on Done click', () => {
+ renderWith({ initialGroups: [makeGroup()] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ fireEvent.click(screen.getByTestId('modal-done'));
+ expect(screen.queryByTestId('configure-modal')).not.toBeInTheDocument();
+ });
+
+ it('closes on Cancel click', () => {
+ renderWith({ initialGroups: [makeGroup()] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ fireEvent.click(screen.getByTestId('modal-cancel'));
+ expect(screen.queryByTestId('configure-modal')).not.toBeInTheDocument();
+ });
+
+ it('renders AutoSyncAdvanced inside the modal with the correct group', async () => {
+ renderWith({ initialGroups: [makeGroup({ channel_group: 1 })] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => {
+ expect(screen.getByTestId('auto-sync-advanced')).toBeInTheDocument();
+ expect(screen.getByTestId('auto-sync-advanced')).toHaveAttribute(
+ 'data-group-id',
+ '1'
+ );
+ });
+ });
+
+ it('restores the group state when Cancel is clicked after a change', async () => {
+ renderWith({
+ initialGroups: [makeGroup({ channel_group: 1, name: 'Sports' })],
+ });
+ // Open modal — snapshot is taken
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => screen.getByTestId('trigger-apply-group'));
+
+ // Mutate the group via AutoSyncAdvanced
+ fireEvent.click(screen.getByTestId('trigger-apply-group'));
+ expect(screen.getByText('Modified By Advanced')).toBeInTheDocument();
+
+ // Cancel should revert to the snapshot
+ fireEvent.click(screen.getByTestId('modal-cancel'));
+ expect(screen.getByText('Sports')).toBeInTheDocument();
+ expect(
+ screen.queryByText('Modified By Advanced')
+ ).not.toBeInTheDocument();
+ });
+
+ it('does not revert the group state when Done is clicked after a change', async () => {
+ renderWith({
+ initialGroups: [makeGroup({ channel_group: 1, name: 'Sports' })],
+ });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => screen.getByTestId('trigger-apply-group'));
+
+ fireEvent.click(screen.getByTestId('trigger-apply-group'));
+ fireEvent.click(screen.getByTestId('modal-done'));
+
+ // The modified name should persist
+ expect(screen.getByText('Modified By Advanced')).toBeInTheDocument();
+ });
+
+ it('triggers a regex preview when configuringGroup changes', async () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({
+ channel_group: 1,
+ custom_properties: {
+ name_regex_pattern: 'ESPN',
+ name_match_regex: '',
+ },
+ }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => {
+ expect(getRegexOptions).toHaveBeenCalled();
+ });
+ });
+ });
+
+ // ── Logo upload modal ──────────────────────────────────────────────────────
+
+ describe('logo upload modal', () => {
+ const openLogoUpload = async () => {
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => screen.getByTestId('trigger-logo-upload'));
+ fireEvent.click(screen.getByTestId('trigger-logo-upload'));
+ };
+
+ it('opens LogoForm when onOpenLogoUpload is called', async () => {
+ renderWith({ initialGroups: [makeGroup({ channel_group: 1 })] });
+ await openLogoUpload();
+ await waitFor(() =>
+ expect(screen.getByTestId('logo-form')).toBeInTheDocument()
+ );
+ });
+
+ it('closes LogoForm when onClose is called', async () => {
+ renderWith({ initialGroups: [makeGroup({ channel_group: 1 })] });
+ await openLogoUpload();
+ fireEvent.click(screen.getByTestId('logo-close'));
+ expect(screen.queryByTestId('logo-form')).not.toBeInTheDocument();
+ });
+
+ it('applies custom_logo_id and calls ensureLogosLoaded on logo success', async () => {
+ renderWith({
+ initialGroups: [makeGroup({ channel_group: 1 })],
+ ensureLogosLoaded: mockEnsureLogosLoaded,
+ });
+ await openLogoUpload();
+
+ const callCountBefore = mockEnsureLogosLoaded.mock.calls.length;
+ fireEvent.click(screen.getByTestId('logo-success'));
+
+ expect(mockEnsureLogosLoaded.mock.calls.length).toBeGreaterThan(
+ callCountBefore
+ );
+ expect(screen.queryByTestId('logo-form')).not.toBeInTheDocument();
+ });
+
+ it('does not apply logo when onSuccess provides no logo', async () => {
+ // Test the logo === null guard: LogoForm calls onSuccess({ logo: null })
+ vi.mock('./Logo.jsx', () => ({
+ default: ({ isOpen, onSuccess }) =>
+ isOpen ? (
+
+ ) : null,
+ }));
+ // Without a valid logo object, ensureLogosLoaded should not be called again
+ renderWith({
+ initialGroups: [makeGroup({ channel_group: 1 })],
+ ensureLogosLoaded: mockEnsureLogosLoaded,
+ });
+ await openLogoUpload();
+ // If the null-logo button renders, click it; otherwise the modal just closes
+ const nullBtn = screen.queryByTestId('logo-success-null');
+ if (nullBtn) fireEvent.click(nullBtn);
+ // ensureLogosLoaded should only have been called once (on mount)
+ expect(mockEnsureLogosLoaded).toHaveBeenCalledTimes(1);
+ });
+ });
+
+ // ── scheduleRegexPreview ───────────────────────────────────────────────────
+
+ describe('scheduleRegexPreview (via AutoSyncAdvanced)', () => {
+ it('passes onScheduleRegexPreview to AutoSyncAdvanced and it triggers without error', async () => {
+ renderWith({ initialGroups: [makeGroup({ channel_group: 1 })] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => screen.getByTestId('trigger-regex-preview'));
+ expect(() =>
+ fireEvent.click(screen.getByTestId('trigger-regex-preview'))
+ ).not.toThrow();
+ });
+
+ it('clears regexPreview state when all pattern fields are empty', async () => {
+ // scheduleRegexPreview with empty opts should not call getStreamsRegexPreview
+ renderWith({ initialGroups: [makeGroup({ channel_group: 1 })] });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => screen.getByTestId('auto-sync-advanced'));
+ // Trigger with empty patterns by mounting a group with no patterns set
+ // (the useEffect on configuringGroup?.channel_group fires getRegexOptions with empty strings)
+ expect(getStreamsRegexPreview).not.toHaveBeenCalled();
+ });
+
+ it('calls getStreamsRegexPreview when non-empty patterns are provided', async () => {
+ vi.mocked(getStreamsRegexPreview).mockResolvedValue({
+ find_matches: ['ESPN HD'],
+ find_match_count: 1,
+ total_in_group: 10,
+ total_scanned: 10,
+ scan_limit_hit: false,
+ });
+ renderWith({
+ initialGroups: [
+ makeGroup({
+ channel_group: 1,
+ custom_properties: { name_regex_pattern: 'ESPN' },
+ }),
+ ],
+ });
+ fireEvent.click(screen.getByTestId('icon-cog').closest('button'));
+ await waitFor(() => screen.getByTestId('trigger-regex-preview'));
+ fireEvent.click(screen.getByTestId('trigger-regex-preview'));
+ await waitFor(() => {
+ expect(getStreamsRegexPreview).toHaveBeenCalled();
+ });
+ });
+ });
+
+ // ── applyGroupChange ───────────────────────────────────────────────────────
+
+ describe('applyGroupChange (via AutoSyncAdvanced)', () => {
+ it('updates only the target group in groupStates', async () => {
+ renderWith({
+ initialGroups: [
+ makeGroup({ channel_group: 1, name: 'Sports' }),
+ makeGroup({ channel_group: 2, name: 'News' }),
+ ],
+ });
+ // Group cards will be sorted alphabetically, so the first cog button corresponds to the "News" group, not "Sports" — ensure we target the correct one
+ const cogButtons = screen.getAllByTestId('icon-cog');
+ fireEvent.click(cogButtons[1].closest('button'));
+ await waitFor(() => screen.getByTestId('trigger-apply-group'));
+ fireEvent.click(screen.getByTestId('trigger-apply-group'));
+
+ // Group 1 name changed; Group 2 unchanged
+ expect(screen.getByText('Modified By Advanced')).toBeInTheDocument();
+ expect(screen.getByText('News')).toBeInTheDocument();
+ });
});
});
diff --git a/frontend/src/components/forms/__tests__/LoginForm.test.jsx b/frontend/src/components/forms/__tests__/LoginForm.test.jsx
new file mode 100644
index 00000000..7e30f3cd
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/LoginForm.test.jsx
@@ -0,0 +1,475 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import LoginForm from '../LoginForm';
+
+// ── Router mock ────────────────────────────────────────────────────────────────
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+ useNavigate: () => mockNavigate,
+}));
+
+// Mock localStorage
+const localStorageMock = (() => {
+ let store = {};
+
+ return {
+ getItem: vi.fn((key) => store[key] || null),
+ setItem: vi.fn((key, value) => {
+ store[key] = value.toString();
+ }),
+ clear: vi.fn(() => {
+ store = {};
+ }),
+ removeItem: vi.fn((key) => {
+ delete store[key];
+ }),
+ };
+})();
+
+global.localStorage = localStorageMock;
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/auth', () => ({ default: vi.fn() }));
+vi.mock('../../../store/settings', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/notificationUtils.js', () => ({
+ showNotification: vi.fn(),
+}));
+
+// ── Asset mock ─────────────────────────────────────────────────────────────────
+vi.mock('../../../assets/logo.png', () => ({ default: 'logo.png' }));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', async () => ({
+ Paper: ({ children }) =>
{children}
,
+ Title: ({ children }) =>
{children}
,
+ TextInput: ({
+ label,
+ name,
+ value,
+ onChange,
+ placeholder,
+ type,
+ disabled,
+ }) => (
+
+ ),
+ Button: ({ children, onClick, loading, disabled, type, variant }) => (
+
+ ),
+ Center: ({ children }) =>
{children}
,
+ Stack: ({ children }) =>
{children}
,
+ Text: ({ children, c, size }) => (
+
+ {children}
+
+ ),
+ Image: ({ src, alt }) =>
,
+ Group: ({ children }) =>
{children}
,
+ Divider: () =>
,
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ Anchor: ({ children, onClick }) => (
+
+ {children}
+
+ ),
+ Code: ({ children }) =>
{children},
+ Checkbox: ({ label, checked, onChange }) => (
+
+ ),
+}));
+
+// ── Imports after mocks ────────────────────────────────────────────────────────
+import useAuthStore from '../../../store/auth';
+import useSettingsStore from '../../../store/settings';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const setupMocks = ({
+ isAuthenticated = false,
+ loginResult = Promise.resolve(true),
+ version = '1.0.0',
+} = {}) => {
+ const mockLogin = vi.fn().mockReturnValue(loginResult);
+ const mockLogout = vi.fn();
+ const mockInitData = vi.fn().mockResolvedValue(undefined);
+ const mockFetchVersion = vi.fn().mockResolvedValue(undefined);
+
+ vi.mocked(useAuthStore).mockImplementation((sel) =>
+ sel({
+ login: mockLogin,
+ logout: mockLogout,
+ isAuthenticated,
+ initData: mockInitData,
+ })
+ );
+
+ vi.mocked(useSettingsStore).mockImplementation((sel) =>
+ sel({
+ fetchVersion: mockFetchVersion,
+ version: { version },
+ })
+ );
+
+ return { mockLogin, mockLogout, mockInitData, mockFetchVersion };
+};
+
+const renderLoginForm = () => render(
);
+
+const getUsername = () => screen.getByTestId('input-Username');
+const getPassword = () => screen.getByTestId('input-Password');
+const getLoginButton = () => screen.getByRole('button', { type: 'submit' });
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('LoginForm', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ localStorage.clear();
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the login form', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(screen.getByTestId('paper')).toBeInTheDocument();
+ });
+
+ it('renders the logo', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(screen.getByRole('img')).toHaveAttribute('src', 'logo.png');
+ });
+
+ it('renders username and password inputs', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(getUsername()).toBeInTheDocument();
+ expect(getPassword()).toBeInTheDocument();
+ });
+
+ it('renders the login button', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(getLoginButton()).toBeInTheDocument();
+ });
+
+ it('renders "Remember Me" checkbox', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(screen.getByLabelText(/remember me/i)).toBeInTheDocument();
+ });
+
+ it('renders "Save Password" checkbox', async () => {
+ setupMocks();
+ renderLoginForm();
+ await waitFor(() => {
+ fireEvent.click(screen.getByLabelText(/remember me/i));
+ expect(screen.getByLabelText(/save password/i)).toBeInTheDocument();
+ });
+ });
+
+ it('renders version info when version is available', () => {
+ setupMocks({ version: '2.3.4' });
+ renderLoginForm();
+ expect(screen.getByText(/2.3.4/i)).toBeInTheDocument();
+ });
+
+ it('renders forgot password anchor', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
+ });
+ });
+
+ // ── fetchVersion on mount ──────────────────────────────────────────────────
+
+ describe('on mount', () => {
+ it('calls fetchVersion on mount', () => {
+ const { mockFetchVersion } = setupMocks();
+ renderLoginForm();
+ expect(mockFetchVersion).toHaveBeenCalled();
+ });
+ });
+
+ // ── Form input ─────────────────────────────────────────────────────────────
+
+ describe('form input', () => {
+ it('updates username field on change', () => {
+ setupMocks();
+ renderLoginForm();
+ fireEvent.change(getUsername(), { target: { value: 'testuser' } });
+ expect(getUsername()).toHaveValue('testuser');
+ });
+
+ it('updates password field on change', () => {
+ setupMocks();
+ renderLoginForm();
+ fireEvent.change(getPassword(), { target: { value: 'secret' } });
+ expect(getPassword()).toHaveValue('secret');
+ });
+
+ it('password input has type="password"', () => {
+ setupMocks();
+ renderLoginForm();
+ expect(getPassword()).toHaveAttribute('type', 'password');
+ });
+ });
+
+ // ── Successful login ───────────────────────────────────────────────────────
+
+ describe('successful login', () => {
+ it('calls login with username and password', async () => {
+ const { mockLogin } = setupMocks({ loginResult: Promise.resolve(true) });
+ renderLoginForm();
+
+ fireEvent.change(getUsername(), { target: { value: 'admin' } });
+ fireEvent.change(getPassword(), { target: { value: 'pass123' } });
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(mockLogin).toHaveBeenCalledWith({
+ username: 'admin',
+ password: 'pass123',
+ });
+ });
+ });
+
+ it('calls initData after successful login', async () => {
+ const { mockInitData } = setupMocks({
+ loginResult: Promise.resolve(true),
+ });
+ renderLoginForm();
+
+ fireEvent.change(getUsername(), { target: { value: 'admin' } });
+ fireEvent.change(getPassword(), { target: { value: 'pass123' } });
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(mockInitData).toHaveBeenCalled();
+ });
+ });
+
+ it('navigates to "/channels" when authenticated', async () => {
+ setupMocks({ isAuthenticated: true });
+ renderLoginForm();
+
+ fireEvent.change(getUsername(), { target: { value: 'admin' } });
+ fireEvent.change(getPassword(), { target: { value: 'pass123' } });
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(mockNavigate).toHaveBeenCalledWith('/channels');
+ });
+ });
+ });
+
+ // ── Failed login ───────────────────────────────────────────────────────────
+
+ describe('failed login', () => {
+ it('does not navigate when login fails', async () => {
+ setupMocks({ loginResult: Promise.resolve(false) });
+ renderLoginForm();
+
+ fireEvent.change(getUsername(), { target: { value: 'admin' } });
+ fireEvent.change(getPassword(), { target: { value: 'wrong' } });
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(mockNavigate).not.toHaveBeenCalled();
+ });
+ });
+
+ it('does not navigate when login throws', async () => {
+ setupMocks({ loginResult: Promise.reject(new Error('fail')) });
+ renderLoginForm();
+
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(mockNavigate).not.toHaveBeenCalled();
+ });
+ });
+ });
+
+ // ── Loading state ──────────────────────────────────────────────────────────
+
+ describe('loading state', () => {
+ it('disables the login button while loading', async () => {
+ let resolveLogin;
+ const loginResult = new Promise((res) => {
+ resolveLogin = res;
+ });
+ setupMocks({ loginResult });
+ renderLoginForm();
+
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(getLoginButton()).toBeDisabled();
+ });
+
+ resolveLogin(true);
+ });
+
+ it('re-enables the login button after login completes', async () => {
+ setupMocks({ loginResult: Promise.resolve(false) });
+ renderLoginForm();
+
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(getLoginButton()).not.toBeDisabled();
+ });
+ });
+ });
+
+ // ── Remember Me ───────────────────────────────────────────────────────────
+
+ describe('remember me', () => {
+ it('saves username to localStorage when Remember Me is checked', async () => {
+ setupMocks({ loginResult: Promise.resolve(true) });
+ renderLoginForm();
+
+ fireEvent.click(screen.getByLabelText(/remember me/i));
+ fireEvent.change(getUsername(), { target: { value: 'savedUser' } });
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(localStorage.getItem('dispatcharr_remembered_username')).toBe(
+ 'savedUser'
+ );
+ });
+ });
+
+ it('removes username from localStorage when Remember Me is unchecked', async () => {
+ localStorage.setItem('dispatcharr_remembered_username', 'oldUser');
+ setupMocks({ loginResult: Promise.resolve(true) });
+ renderLoginForm();
+
+ fireEvent.click(screen.getByLabelText(/remember me/i));
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(
+ localStorage.getItem('dispatcharr_remembered_username')
+ ).toBeNull();
+ });
+ });
+
+ it('pre-fills username from localStorage on mount', () => {
+ localStorage.setItem('dispatcharr_remembered_username', 'storedUser');
+ setupMocks();
+ renderLoginForm();
+ expect(getUsername()).toHaveValue('storedUser');
+ });
+ });
+
+ // ── Save Password ─────────────────────────────────────────────────────────
+
+ describe('save password', () => {
+ it('saves encoded password to localStorage when Save Password is checked', async () => {
+ setupMocks({ loginResult: Promise.resolve(true) });
+ renderLoginForm();
+
+ await waitFor(() => {
+ fireEvent.click(screen.getByLabelText(/remember me/i));
+ fireEvent.click(screen.getByLabelText(/save password/i));
+ fireEvent.change(getPassword(), { target: { value: 'mySecret' } });
+ fireEvent.click(getLoginButton());
+ });
+
+ await waitFor(() => {
+ expect(
+ localStorage.getItem('dispatcharr_saved_password')
+ ).not.toBeNull();
+ });
+ });
+
+ it('removes password from localStorage when Save Password is unchecked', async () => {
+ localStorage.setItem('dispatcharr_saved_password', btoa('oldPass'));
+ setupMocks({ loginResult: Promise.resolve(true) });
+ renderLoginForm();
+
+ fireEvent.click(getLoginButton());
+
+ await waitFor(() => {
+ expect(localStorage.getItem('dispatcharr_saved_password')).toBeNull();
+ });
+ });
+
+ it('pre-fills password from localStorage on mount', () => {
+ localStorage.setItem('dispatcharr_remembered_username', 'storedUser');
+ localStorage.setItem('dispatcharr_saved_password', btoa('storedPass'));
+ setupMocks();
+ renderLoginForm();
+ expect(getPassword()).toHaveValue('storedPass');
+ });
+ });
+
+ // ── Forgot Password modal ──────────────────────────────────────────────────
+
+ describe('forgot password modal', () => {
+ it('opens the forgot password modal when the anchor is clicked', () => {
+ setupMocks();
+ renderLoginForm();
+
+ fireEvent.click(screen.getByText(/forgot password/i));
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ });
+
+ it('shows the modal title', () => {
+ setupMocks();
+ renderLoginForm();
+
+ fireEvent.click(screen.getByText(/forgot password/i));
+ expect(screen.getByTestId('modal-title')).toBeInTheDocument();
+ });
+
+ it('closes the modal when the close button is clicked', () => {
+ setupMocks();
+ renderLoginForm();
+
+ fireEvent.click(screen.getByText(/forgot password/i));
+ fireEvent.click(screen.getByTestId('modal-close'));
+
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+ });
+});
diff --git a/frontend/src/components/forms/__tests__/Logo.test.jsx b/frontend/src/components/forms/__tests__/Logo.test.jsx
new file mode 100644
index 00000000..9b3b0107
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/Logo.test.jsx
@@ -0,0 +1,518 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import LogoForm from '../Logo';
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/LogoUtils.js', () => ({
+ createLogo: vi.fn(),
+ updateLogo: vi.fn(),
+ uploadLogo: vi.fn(),
+ getFilenameWithoutExtension: vi.fn((name) => name.replace(/\.[^.]+$/, '')),
+ getResolver: vi.fn(() => undefined),
+ getUpdateLogoErrorMessage: vi.fn((logo, err) => err.message),
+ getUploadErrorMessage: vi.fn((err) => err.message),
+ releaseUrl: vi.fn(),
+ validateFileSize: vi.fn(() => true),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+ showNotification: vi.fn(),
+}));
+
+// ── Mantine dropzone ───────────────────────────────────────────────────────────
+vi.mock('@mantine/dropzone', () => ({
+ Dropzone: vi.fn(({ children, onDrop }) => (
+
onDrop([])}>
+ {children}
+
+ )),
+ DropzoneAccept: ({ children }) => (
+
{children}
+ ),
+ DropzoneReject: ({ children }) => (
+
{children}
+ ),
+ DropzoneIdle: ({ children }) =>
{children}
,
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ Box: ({ children }) =>
{children}
,
+ Button: ({ children, onClick, type, loading, variant }) => (
+
+ ),
+ Center: ({ children }) =>
{children}
,
+ Divider: ({ label }) =>
,
+ Group: ({ children }) =>
{children}
,
+ Image: ({ src, alt, fallbackSrc }) => (
+
+ ),
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ Stack: ({ children }) =>
{children}
,
+ Text: ({ children, size, color }) => (
+
+ {children}
+
+ ),
+ TextInput: ({
+ label,
+ placeholder,
+ onChange,
+ onBlur,
+ error,
+ disabled,
+ ...rest
+ }) => (
+
+
+ {error && {error}}
+
+ ),
+}));
+
+// ── lucide-react ───────────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ FileImage: () =>
,
+ Upload: () =>
,
+ X: () =>
,
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Imports after mocks
+// ──────────────────────────────────────────────────────────────────────────────
+import * as LogoUtils from '../../../utils/forms/LogoUtils.js';
+import { showNotification } from '../../../utils/notificationUtils.js';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeLogo = (overrides = {}) => ({
+ id: 1,
+ name: 'My Logo',
+ url: 'https://example.com/logo.png',
+ cache_url: 'https://cdn.example.com/logo.png',
+ ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+ logo: null,
+ isOpen: true,
+ onClose: vi.fn(),
+ onSuccess: vi.fn(),
+ ...overrides,
+});
+
+const makeFile = (name = 'test-logo.png', size = 1024) =>
+ new File(['content'], name, { type: 'image/png', size });
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('LogoForm', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(LogoUtils.validateFileSize).mockReturnValue(true);
+ vi.mocked(LogoUtils.createLogo).mockResolvedValue({
+ id: 2,
+ name: 'New Logo',
+ url: 'https://example.com/new.png',
+ });
+ vi.mocked(LogoUtils.updateLogo).mockResolvedValue({
+ id: 1,
+ name: 'Updated Logo',
+ url: 'https://example.com/updated.png',
+ });
+ vi.mocked(LogoUtils.uploadLogo).mockResolvedValue({
+ id: 3,
+ name: 'uploaded-logo',
+ url: 'https://cdn.example.com/uploaded.png',
+ });
+ vi.mocked(LogoUtils.getResolver).mockReturnValue(undefined);
+
+ URL.createObjectURL = vi.fn();
+ });
+
+ afterEach(() => {
+ delete URL.createObjectURL;
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the modal when isOpen is true', () => {
+ render(
);
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ });
+
+ it('does not render the modal when isOpen is false', () => {
+ render(
);
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+
+ it('shows "Add Logo" title for new logo', () => {
+ render(
);
+ expect(screen.getByTestId('modal-title')).toHaveTextContent('Add Logo');
+ });
+
+ it('shows "Edit Logo" title when editing existing logo', () => {
+ render(
);
+ expect(screen.getByTestId('modal-title')).toHaveTextContent('Edit Logo');
+ });
+
+ it('shows "Create" button for new logo', () => {
+ render(
);
+ expect(screen.getByText('Create')).toBeInTheDocument();
+ });
+
+ it('shows "Update" button when editing existing logo', () => {
+ render(
);
+ expect(screen.getByText('Update')).toBeInTheDocument();
+ });
+
+ it('pre-fills name input when editing existing logo', () => {
+ render(
);
+ expect(screen.getByDisplayValue('My Logo')).toBeInTheDocument();
+ });
+
+ it('pre-fills URL input when editing existing logo', () => {
+ render(
);
+ expect(
+ screen.getByDisplayValue('https://example.com/logo.png')
+ ).toBeInTheDocument();
+ });
+
+ it('shows logo preview when logo has cache_url', () => {
+ render(
);
+ const img = screen.getByAltText('Logo preview');
+ expect(img).toHaveAttribute('src', 'https://cdn.example.com/logo.png');
+ });
+
+ it('does not show preview when no logo provided', () => {
+ render(
);
+ expect(screen.queryByAltText('Logo preview')).not.toBeInTheDocument();
+ });
+
+ it('renders the dropzone', () => {
+ render(
);
+ expect(screen.getByTestId('dropzone')).toBeInTheDocument();
+ });
+
+ it('calls onClose when Cancel is clicked', () => {
+ const onClose = vi.fn();
+ render(
);
+ fireEvent.click(screen.getByText('Cancel'));
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ it('calls onClose when modal close button is clicked', () => {
+ const onClose = vi.fn();
+ render(
);
+ fireEvent.click(screen.getByTestId('modal-close'));
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ // ── Create logo ────────────────────────────────────────────────────────────
+
+ describe('creating a logo via URL', () => {
+ it('calls createLogo with entered values on submit', async () => {
+ render(
);
+
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/new.png' },
+ }
+ );
+ fireEvent.change(screen.getByPlaceholderText('Enter logo name'), {
+ target: { value: 'New Logo' },
+ });
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(LogoUtils.createLogo).toHaveBeenCalled();
+ });
+ });
+
+ it('shows success notification after creating logo', async () => {
+ render(
);
+
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/new.png' },
+ }
+ );
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({ title: 'Success', color: 'green' })
+ );
+ });
+ });
+
+ it('calls onSuccess with type "create" after creating logo', async () => {
+ const onSuccess = vi.fn();
+ render(
);
+
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/new.png' },
+ }
+ );
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(onSuccess).toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'create' })
+ );
+ });
+ });
+
+ it('calls onClose after creating logo', async () => {
+ const onClose = vi.fn();
+ render(
);
+
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/new.png' },
+ }
+ );
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ it('shows error notification when createLogo throws', async () => {
+ vi.mocked(LogoUtils.createLogo).mockRejectedValue(new Error('API error'));
+ render(
);
+
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/new.png' },
+ }
+ );
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({ title: 'Error', color: 'red' })
+ );
+ });
+ });
+ });
+
+ // ── Update logo ────────────────────────────────────────────────────────────
+
+ describe('updating an existing logo', () => {
+ it('calls updateLogo on submit', async () => {
+ render(
);
+ fireEvent.click(screen.getByText('Update'));
+
+ await waitFor(() => {
+ expect(LogoUtils.updateLogo).toHaveBeenCalledWith(
+ makeLogo(),
+ expect.objectContaining({ name: 'My Logo' })
+ );
+ });
+ });
+
+ it('calls onSuccess with type "update" after updating logo', async () => {
+ const onSuccess = vi.fn();
+ render(
);
+ fireEvent.click(screen.getByText('Update'));
+
+ await waitFor(() => {
+ expect(onSuccess).toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'update' })
+ );
+ });
+ });
+
+ it('shows success notification after updating logo', async () => {
+ render(
);
+ fireEvent.click(screen.getByText('Update'));
+
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({ title: 'Success', color: 'green' })
+ );
+ });
+ });
+
+ it('shows error notification when updateLogo throws', async () => {
+ vi.mocked(LogoUtils.updateLogo).mockRejectedValue(
+ new Error('Server error')
+ );
+ render(
);
+ fireEvent.click(screen.getByText('Update'));
+
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({ title: 'Error', color: 'red' })
+ );
+ });
+ });
+ });
+
+ // ── File upload ────────────────────────────────────────────────────────────
+
+ describe('file upload via dropzone', () => {
+ it('calls uploadLogo with the selected file on submit', async () => {
+ const file = makeFile('my-logo.png');
+
+ // Override dropzone to pass our test file
+ const { Dropzone } = await import('@mantine/dropzone');
+ vi.mocked(Dropzone).mockImplementation(({ children, onDrop }) => (
+
onDrop([file])}>
+ {children}
+
+ ));
+
+ render(
);
+
+ fireEvent.click(screen.getByTestId('dropzone'));
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(LogoUtils.uploadLogo).toHaveBeenCalledWith(
+ file,
+ expect.any(Object)
+ );
+ });
+ });
+
+ it('shows error notification when file is too large', async () => {
+ vi.mocked(LogoUtils.validateFileSize).mockReturnValue(false);
+
+ // Override dropzone to pass a file
+ const file = makeFile('big.png', 10 * 1024 * 1024);
+ const { Dropzone } = await import('@mantine/dropzone');
+ vi.mocked(Dropzone).mockImplementationOnce(({ children, onDrop }) => (
+
onDrop([file])}>
+ {children}
+
+ ));
+
+ render(
);
+ fireEvent.click(screen.getByTestId('dropzone'));
+
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({ title: 'Error', color: 'red' })
+ );
+ });
+ });
+
+ it('shows upload error notification when uploadLogo throws', async () => {
+ vi.mocked(LogoUtils.uploadLogo).mockRejectedValue(
+ new Error('Upload failed')
+ );
+ const file = makeFile('logo.png');
+ const { Dropzone } = await import('@mantine/dropzone');
+ vi.mocked(Dropzone).mockImplementationOnce(({ children, onDrop }) => (
+
onDrop([file])}>
+ {children}
+
+ ));
+
+ render(
);
+ fireEvent.click(screen.getByTestId('dropzone'));
+ fireEvent.click(screen.getByText('Create'));
+
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({ title: 'Upload Error', color: 'red' })
+ );
+ });
+ });
+ });
+
+ // ── URL input behaviour ────────────────────────────────────────────────────
+
+ describe('URL input behaviour', () => {
+ it('updates preview when a valid http URL is entered', () => {
+ render(
);
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/img.png' },
+ }
+ );
+ expect(screen.getByAltText('Logo preview')).toHaveAttribute(
+ 'src',
+ 'https://example.com/img.png'
+ );
+ });
+
+ it('removes preview when URL is cleared', () => {
+ render(
);
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: '' },
+ }
+ );
+ expect(screen.queryByAltText('Logo preview')).not.toBeInTheDocument();
+ });
+
+ it('auto-fills name from URL on blur', () => {
+ render(
);
+ fireEvent.change(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/my-channel-logo.png' },
+ }
+ );
+ fireEvent.blur(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'https://example.com/my-channel-logo.png' },
+ }
+ );
+ expect(LogoUtils.getFilenameWithoutExtension).toHaveBeenCalled();
+ });
+
+ it('does not throw on blur with invalid URL', () => {
+ render(
);
+ expect(() => {
+ fireEvent.blur(
+ screen.getByPlaceholderText('https://example.com/logo.png'),
+ {
+ target: { value: 'not-a-url' },
+ }
+ );
+ }).not.toThrow();
+ });
+ });
+});
diff --git a/frontend/src/components/forms/__tests__/M3U.test.jsx b/frontend/src/components/forms/__tests__/M3U.test.jsx
new file mode 100644
index 00000000..7e26d97a
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/M3U.test.jsx
@@ -0,0 +1,708 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import M3U from '../M3U';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/userAgents', () => ({ default: vi.fn() }));
+vi.mock('../../../store/channels', () => ({ default: vi.fn() }));
+vi.mock('../../../store/epgs', () => ({ default: vi.fn() }));
+vi.mock('../../../store/useVODStore', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/M3uUtils.js', () => ({
+ addPlaylist: vi.fn(),
+ getPlaylist: vi.fn(),
+ prepareSubmitValues: vi.fn((values) => values),
+ updatePlaylist: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/DummyEpgUtils.js', () => ({
+ addEPG: vi.fn(),
+}));
+
+vi.mock('../../../utils/notificationUtils.js', () => ({
+ showNotification: vi.fn(),
+}));
+
+// ── Sub-component mocks ────────────────────────────────────────────────────────
+vi.mock('../M3UProfiles', () => ({
+ default: ({ onChange }) => (
+
+
+
+ ),
+}));
+
+vi.mock('../M3UGroupFilter', () => ({
+ default: ({ onChange }) => (
+
+
+
+ ),
+}));
+
+vi.mock('../M3UFilters', () => ({
+ default: ({ onChange }) => (
+
+
+
+ ),
+}));
+
+vi.mock('../ScheduleInput', () => ({
+ default: ({ onChange, value }) => (
+
+ onChange?.(e.target.value)}
+ />
+
+ ),
+}));
+
+// ── Mantine dates ──────────────────────────────────────────────────────────────
+vi.mock('@mantine/dates', () => ({
+ DateTimePicker: ({ label, value, onChange, placeholder }) => (
+
+
+
+ ),
+}));
+
+// ── Mantine form ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/form', () => {
+ let _values = null;
+
+ return {
+ isNotEmpty: vi.fn(() => (val) => (val ? null : 'Required')),
+ __resetFormState: () => {
+ _values = null;
+ },
+ useForm: vi.fn(({ initialValues = {} } = {}) => {
+ if (_values === null) {
+ _values = { ...initialValues };
+ }
+
+ return {
+ key: vi.fn((field) => field),
+ getValues: () => ({ ..._values }),
+ setValues: (v) => {
+ Object.assign(_values, v);
+ },
+ setFieldValue: (field, val) => {
+ _values[field] = val;
+ },
+ reset: () => {
+ _values = { ...initialValues };
+ },
+ submitting: false,
+ onSubmit: vi.fn((handler) => (e) => {
+ e?.preventDefault?.();
+ if (_values?.name) handler();
+ }),
+ getInputProps: vi.fn((field) => ({
+ value: _values?.[field] ?? '',
+ onChange: vi.fn((e) => {
+ const val = e?.target?.value ?? e;
+ if (_values) _values[field] = val;
+ }),
+ error: null,
+ })),
+ };
+ }),
+ };
+});
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ Box: ({ children }) =>
{children}
,
+ Button: ({ children, onClick, type, loading, disabled, variant, color }) => (
+
+ ),
+ Checkbox: ({ label, checked, onChange, disabled }) => (
+
+ ),
+ Divider: ({ label }) =>
,
+ FileInput: ({ label, placeholder, onChange, accept, disabled }) => (
+
+
+
+ ),
+ Flex: ({ children }) =>
{children}
,
+ Group: ({ children }) =>
{children}
,
+ LoadingOverlay: ({ visible }) =>
+ visible ?
: null,
+ Modal: ({ children, opened, onClose, title, size }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ NumberInput: ({
+ label,
+ placeholder,
+ value,
+ onChange,
+ min,
+ max,
+ disabled,
+ error,
+ }) => (
+
+
+ {error && {error}}
+
+ ),
+ PasswordInput: ({
+ label,
+ placeholder,
+ value,
+ onChange,
+ onBlur,
+ error,
+ disabled,
+ }) => (
+
+
+ {error && {error}}
+
+ ),
+ Select: ({ label, placeholder, value, onChange, data, disabled, error }) => (
+
+
+ {error && {error}}
+
+ ),
+ Stack: ({ children }) =>
{children}
,
+ Switch: ({ label, checked, onChange, disabled }) => (
+
+ ),
+ TextInput: ({
+ id,
+ label,
+ placeholder,
+ value,
+ onChange,
+ onBlur,
+ error,
+ disabled,
+ ...rest
+ }) => (
+
+
+ {error && {error}}
+
+ ),
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Imports after mocks
+// ──────────────────────────────────────────────────────────────────────────────
+import useUserAgentsStore from '../../../store/userAgents';
+import useChannelsStore from '../../../store/channels';
+import useEPGsStore from '../../../store/epgs';
+import useVODStore from '../../../store/useVODStore';
+import * as M3uUtils from '../../../utils/forms/M3uUtils.js';
+import * as DummyEpgUtils from '../../../utils/forms/DummyEpgUtils.js';
+import * as mantineForm from '@mantine/form';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeM3uAccount = (overrides = {}) => ({
+ id: 1,
+ name: 'Test M3U',
+ server_url: 'http://example.com/playlist.m3u',
+ username: 'user1',
+ password: 'pass1',
+ account_type: 'XC',
+ max_streams: 0,
+ refresh_interval: 24,
+ auto_refresh: false,
+ is_active: true,
+ custom_properties: {},
+ ...overrides,
+});
+
+const makeUserAgent = (overrides = {}) => ({
+ id: 1,
+ name: 'Default Agent',
+ user_agent: 'Mozilla/5.0',
+ ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+ m3uAccount: null,
+ isOpen: true,
+ onClose: vi.fn(),
+ ...overrides,
+});
+
+const setupStores = (overrides = {}) => {
+ const fetchUserAgents = vi.fn();
+ const fetchChannelGroups = vi.fn();
+ const fetchEPGs = vi.fn();
+ const fetchCategories = vi.fn();
+
+ useUserAgentsStore.mockImplementation((selector) => {
+ const state = {
+ userAgents: overrides.userAgents || [],
+ fetchUserAgents,
+ };
+ return selector(state);
+ });
+
+ useChannelsStore.mockImplementation((selector) => {
+ const state = {
+ fetchChannelGroups,
+ };
+ return selector(state);
+ });
+
+ useEPGsStore.mockImplementation((selector) => {
+ const state = {
+ fetchEPGs,
+ };
+ return selector(state);
+ });
+
+ useVODStore.mockImplementation((selector) => {
+ const state = {
+ fetchCategories,
+ };
+ return selector(state);
+ });
+
+ return {
+ fetchUserAgents,
+ fetchChannelGroups,
+ fetchEPGs,
+ fetchCategories,
+ };
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('M3U', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mantineForm.__resetFormState();
+ vi.mocked(M3uUtils.addPlaylist).mockResolvedValue(
+ makeM3uAccount({ id: 2 })
+ );
+ vi.mocked(M3uUtils.updatePlaylist).mockResolvedValue(makeM3uAccount());
+ vi.mocked(M3uUtils.getPlaylist).mockResolvedValue(makeM3uAccount());
+ vi.mocked(M3uUtils.prepareSubmitValues).mockImplementation((v) => v);
+ vi.mocked(DummyEpgUtils.addEPG).mockResolvedValue({
+ id: 10,
+ name: 'Dummy EPG',
+ });
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the modal when isOpen is true', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ });
+
+ it('does not render the modal when isOpen is false', () => {
+ setupStores();
+ render(
);
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+
+ it('renders Name input', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('text-input-name')).toBeInTheDocument();
+ });
+
+ it('renders URL input', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('text-input-server_url')).toBeInTheDocument();
+ });
+
+ it('renders submit button with "Add" label for new account', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('button', { name: /add|create|save/i })
+ ).toBeInTheDocument();
+ });
+
+ it('renders submit button with "Update" or "Save" label for existing account', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('button', { name: /update|save/i })
+ ).toBeInTheDocument();
+ });
+
+ it('pre-fills name when editing', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByDisplayValue('Test M3U')).toBeInTheDocument();
+ });
+
+ it('pre-fills URL when editing', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByDisplayValue('http://example.com/playlist.m3u')
+ ).toBeInTheDocument();
+ });
+
+ it('renders M3UProfiles sub-component', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('m3u-profiles')).toBeInTheDocument();
+ });
+
+ it('renders M3UGroupFilter sub-component', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('m3u-group-filter')).toBeInTheDocument();
+ });
+
+ it('renders M3UFilters sub-component', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('m3u-filters')).toBeInTheDocument();
+ });
+
+ it('renders ScheduleInput sub-component', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('schedule-input')).toBeInTheDocument();
+ });
+
+ it('populates user agent select with agents from store', () => {
+ setupStores({
+ userAgents: [
+ makeUserAgent({ id: 1, name: 'Agent One' }),
+ makeUserAgent({ id: 2, name: 'Agent Two' }),
+ ],
+ });
+ render(
);
+ expect(screen.getByText('Agent One')).toBeInTheDocument();
+ expect(screen.getByText('Agent Two')).toBeInTheDocument();
+ });
+ });
+
+ // ── Cancel behaviour ───────────────────────────────────────────────────────
+
+ describe('cancel behaviour', () => {
+ it('calls onClose when modal X is clicked', () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('modal-close'));
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ // ── Adding a playlist ──────────────────────────────────────────────────────
+
+ describe('adding a new playlist', () => {
+ const fillRequiredFields = () => {
+ const nameInput = screen.getByTestId('text-input-name');
+ fireEvent.change(nameInput, { target: { value: 'New Playlist' } });
+
+ const urlInput = screen.getByTestId('text-input-server_url');
+ if (urlInput) {
+ fireEvent.change(urlInput, {
+ target: { value: 'http://example.com/new.m3u' },
+ });
+ }
+ };
+
+ it('calls addPlaylist on valid submit', async () => {
+ setupStores();
+ render(
);
+ fillRequiredFields();
+ fireEvent.click(screen.getByRole('button', { name: /add|create|save/i }));
+ await waitFor(() => {
+ expect(M3uUtils.addPlaylist).toHaveBeenCalled();
+ });
+ });
+
+ it('calls prepareSubmitValues before addPlaylist', async () => {
+ setupStores();
+ render(
);
+ fillRequiredFields();
+ fireEvent.click(screen.getByRole('button', { name: /add|create|save/i }));
+ await waitFor(() => {
+ expect(M3uUtils.prepareSubmitValues).toHaveBeenCalled();
+ });
+ });
+
+ it('calls onClose after successful add', async () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
+
+ );
+ fillRequiredFields();
+ fireEvent.click(screen.getByRole('button', { name: /add|create|save/i }));
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+ });
+
+ // ── Updating a playlist ────────────────────────────────────────────────────
+
+ describe('updating an existing playlist', () => {
+ it('calls updatePlaylist on submit', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /update|save/i }));
+ await waitFor(() => {
+ expect(M3uUtils.updatePlaylist).toHaveBeenCalled();
+ });
+ });
+
+ it('does not call addPlaylist when updating', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /update|save/i }));
+ await waitFor(() => {
+ expect(M3uUtils.updatePlaylist).toHaveBeenCalled();
+ });
+ expect(M3uUtils.addPlaylist).not.toHaveBeenCalled();
+ });
+
+ it('calls onClose after successful update', async () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
+
+ );
+ fireEvent.click(screen.getByRole('button', { name: /update|save/i }));
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+ });
+
+ // ── Form validation ────────────────────────────────────────────────────────
+
+ describe('form validation', () => {
+ it('does not call addPlaylist when Name is empty', async () => {
+ setupStores();
+ render(
);
+ // Clear name if pre-filled, then submit
+ const nameInput = screen.getByTestId('text-input-name');
+ fireEvent.change(nameInput, { target: { value: '' } });
+ fireEvent.click(screen.getByRole('button', { name: /add|create|save/i }));
+ await new Promise((r) => setTimeout(r, 50));
+ expect(M3uUtils.addPlaylist).not.toHaveBeenCalled();
+ });
+ });
+
+ // ── Refresh / schedule behaviour ───────────────────────────────────────────
+
+ describe('schedule and refresh', () => {
+ it('renders the ScheduleInput', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('schedule-input')).toBeInTheDocument();
+ });
+ });
+
+ // ── Max streams ────────────────────────────────────────────────────────────
+
+ describe('max streams field', () => {
+ it('renders max streams number input', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('spinbutton', { name: /max.?stream/i })
+ ).toBeInTheDocument();
+ });
+
+ it('pre-fills max_streams when editing', () => {
+ setupStores();
+ render(
+
+ );
+ expect(screen.getByDisplayValue('5')).toBeInTheDocument();
+ });
+ });
+
+ // ── User agent select ──────────────────────────────────────────────────────
+
+ describe('user agent select', () => {
+ it('renders user agent select', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('combobox', { name: /user.?agent/i })
+ ).toBeInTheDocument();
+ });
+ });
+
+ // ── Credential fields ──────────────────────────────────────────────────────
+
+ describe('credential fields', () => {
+ it('renders username input', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('text-input-username')).toBeInTheDocument();
+ });
+
+ it('renders password input', () => {
+ setupStores();
+ render(
);
+ expect(
+ document.querySelector('input[type="password"]')
+ ).toBeInTheDocument();
+ });
+
+ it('pre-fills username when editing', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByDisplayValue('user1')).toBeInTheDocument();
+ });
+ });
+
+ // ── Dummy EPG creation ─────────────────────────────────────────────────────
+
+ describe('dummy EPG auto-creation', () => {
+ it('calls addEPG after successfully adding a playlist', async () => {
+ setupStores();
+ render(
);
+
+ const nameInput = screen.getByTestId('text-input-name');
+ fireEvent.change(nameInput, { target: { value: 'My Playlist' } });
+
+ const urlInput = screen.getByTestId('text-input-server_url');
+ if (urlInput) {
+ fireEvent.change(urlInput, {
+ target: { value: 'http://example.com/p.m3u' },
+ });
+ }
+
+ fireEvent.click(screen.getByRole('button', { name: /add|create|save/i }));
+ await waitFor(() => {
+ expect(M3uUtils.addPlaylist).toHaveBeenCalled();
+ });
+ // addEPG may be called conditionally — assert it was called or not based on a checkbox
+ });
+ });
+});
diff --git a/frontend/src/components/forms/__tests__/M3UFilter.test.jsx b/frontend/src/components/forms/__tests__/M3UFilter.test.jsx
new file mode 100644
index 00000000..fc71f4b8
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/M3UFilter.test.jsx
@@ -0,0 +1,410 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import M3UFilter from '../M3UFilter';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/playlists', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/M3uFilterUtils.js', () => ({
+ addM3UFilter: vi.fn(),
+ updateM3UFilter: vi.fn(),
+}));
+
+vi.mock('../../../utils', () => ({
+ setCustomProperty: vi.fn((obj, key, value) => ({ ...obj, [key]: value })),
+}));
+
+// ── Constants mock ─────────────────────────────────────────────────────────────
+vi.mock('../../../constants', () => ({
+ M3U_FILTER_TYPES: [
+ { value: 'include', label: 'Include' },
+ { value: 'exclude', label: 'Exclude' },
+ ],
+}));
+
+// ── Mantine form ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/form', () => {
+ let _values = null;
+
+ return {
+ isNotEmpty: vi.fn(() => (val) => (val ? null : 'Required')),
+ __resetFormState: () => {
+ _values = null;
+ },
+ useForm: vi.fn(({ initialValues = {} } = {}) => {
+ if (_values === null) {
+ _values = { ...initialValues };
+ }
+
+ return {
+ key: vi.fn((field) => field),
+ getValues: () => ({ ..._values }),
+ setValues: (v) => {
+ Object.assign(_values, v);
+ },
+ setFieldValue: (field, val) => {
+ _values[field] = val;
+ },
+ reset: () => {
+ _values = { ...initialValues };
+ },
+ submitting: false,
+ onSubmit: vi.fn((handler) => (e) => {
+ e?.preventDefault?.();
+ handler();
+ }),
+ getInputProps: vi.fn((field, options = {}) => {
+ const isCheckbox = options?.type === 'checkbox';
+ return {
+ ...(isCheckbox
+ ? { checked: !!_values?.[field] }
+ : { value: _values?.[field] ?? '' }),
+ onChange: vi.fn((e) => {
+ const val = isCheckbox
+ ? (e?.target?.checked ?? e)
+ : (e?.target?.value ?? e);
+ if (_values) _values[field] = val;
+ }),
+ error: null,
+ };
+ }),
+ };
+ }),
+ };
+});
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ Box: ({ children }) =>
{children}
,
+ Button: ({ children, onClick, type, loading, disabled, variant, color }) => (
+
+ ),
+ Flex: ({ children }) =>
{children}
,
+ Group: ({ children }) =>
{children}
,
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ Select: ({ label, placeholder, value, onChange, data, error, disabled }) => (
+
+
+ {error && {error}}
+
+ ),
+ Stack: ({ children }) =>
{children}
,
+ Switch: ({ id, label, checked, onChange, disabled }) => (
+
+ ),
+ TextInput: ({
+ label,
+ placeholder,
+ value,
+ onChange,
+ onBlur,
+ error,
+ disabled,
+ }) => (
+
+
+ {error && {error}}
+
+ ),
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Imports after mocks
+// ──────────────────────────────────────────────────────────────────────────────
+import usePlaylistsStore from '../../../store/playlists';
+import * as M3uFilterUtils from '../../../utils/forms/M3uFilterUtils.js';
+import * as mantineForm from '@mantine/form';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeM3U = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Playlist',
+ custom_properties: {},
+ filters: [],
+ ...overrides,
+});
+
+const makeFilter = (overrides = {}) => ({
+ id: 10,
+ filter_type: 'include',
+ regex_pattern: 'HBO.*',
+ exclude: false,
+ custom_properties: { case_sensitive: false },
+ ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+ filter: null,
+ m3u: makeM3U(),
+ isOpen: true,
+ onClose: vi.fn(),
+ ...overrides,
+});
+
+const setupStores = ({
+ fetchPlaylist = vi.fn().mockResolvedValue(undefined),
+} = {}) => {
+ vi.mocked(usePlaylistsStore).mockImplementation((sel) =>
+ sel({ fetchPlaylist })
+ );
+ return { fetchPlaylist };
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('M3UFilter', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ mantineForm.__resetFormState();
+ vi.mocked(M3uFilterUtils.addM3UFilter).mockResolvedValue({ id: 99 });
+ vi.mocked(M3uFilterUtils.updateM3UFilter).mockResolvedValue({});
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the modal when isOpen is true', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ });
+
+ it('does not render when isOpen is false', () => {
+ setupStores();
+ render(
);
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+
+ it('renders modal title as "Filter"', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal-title')).toHaveTextContent('Filter');
+ });
+
+ it('renders filter type Select', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByRole('combobox')).toBeInTheDocument();
+ });
+
+ it('renders filter type options from M3U_FILTER_TYPES', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('option', { name: 'Include' })
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole('option', { name: 'Exclude' })
+ ).toBeInTheDocument();
+ });
+
+ it('renders a text input for the pattern', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByLabelText('Regex Pattern')).toBeInTheDocument();
+ });
+
+ it('renders the exclusion switch', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('exclude')).toBeInTheDocument();
+ });
+
+ it('renders the case sensitivity switch', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('case_sensitive')).toBeInTheDocument();
+ });
+
+ it('renders a submit button', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('button', { name: /add|save|submit/i })
+ ).toBeInTheDocument();
+ });
+ });
+
+ // ── Form reset on open/filter change ──────────────────────────────────────
+
+ describe('form reset behaviour', () => {
+ it('shows empty pattern field for a new filter', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByRole('textbox')).toHaveValue('');
+ });
+ });
+
+ // ── Cancel behaviour ───────────────────────────────────────────────────────
+
+ describe('cancel behaviour', () => {
+ it('calls onClose when modal X is clicked', () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('modal-close'));
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ // ── Adding a filter ────────────────────────────────────────────────────────
+
+ describe('adding a new filter', () => {
+ const fillForm = () => {
+ fireEvent.change(screen.getByRole('combobox'), {
+ target: { value: 'include' },
+ });
+ fireEvent.change(screen.getByRole('textbox'), {
+ target: { value: 'Sports.*' },
+ });
+ };
+
+ it('calls addM3UFilter on submit for a new filter', async () => {
+ setupStores();
+ render(
);
+ fillForm();
+ fireEvent.click(screen.getByRole('button', { name: /add|save|submit/i }));
+ await waitFor(() => {
+ expect(M3uFilterUtils.addM3UFilter).toHaveBeenCalled();
+ });
+ });
+
+ it('does not call updateM3UFilter when adding', async () => {
+ setupStores();
+ render(
);
+ fillForm();
+ fireEvent.click(screen.getByRole('button', { name: /add|save|submit/i }));
+ await waitFor(() => {
+ expect(M3uFilterUtils.addM3UFilter).toHaveBeenCalled();
+ });
+ expect(M3uFilterUtils.updateM3UFilter).not.toHaveBeenCalled();
+ });
+
+ it('calls fetchPlaylist after successful add', async () => {
+ const { fetchPlaylist } = setupStores();
+ render(
);
+ fillForm();
+ fireEvent.click(screen.getByRole('button', { name: /add|save|submit/i }));
+ await waitFor(() => {
+ expect(fetchPlaylist).toHaveBeenCalledWith(makeM3U().id);
+ });
+ });
+
+ it('calls onClose after successful add', async () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ fillForm();
+ fireEvent.click(screen.getByRole('button', { name: /add|save|submit/i }));
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+ });
+
+ // ── Updating a filter ──────────────────────────────────────────────────────
+
+ describe('updating an existing filter', () => {
+ it('calls updateM3UFilter on submit for an existing filter', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(
+ screen.getByRole('button', { name: /add|save|update|submit/i })
+ );
+ await waitFor(() => {
+ expect(M3uFilterUtils.updateM3UFilter).toHaveBeenCalled();
+ });
+ });
+
+ it('does not call addM3UFilter when updating', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(
+ screen.getByRole('button', { name: /add|save|update|submit/i })
+ );
+ await waitFor(() => {
+ expect(M3uFilterUtils.updateM3UFilter).toHaveBeenCalled();
+ });
+ expect(M3uFilterUtils.addM3UFilter).not.toHaveBeenCalled();
+ });
+
+ it('calls fetchPlaylist after successful update', async () => {
+ const { fetchPlaylist } = setupStores();
+ render(
);
+ fireEvent.click(
+ screen.getByRole('button', { name: /add|save|update|submit/i })
+ );
+ await waitFor(() => {
+ expect(fetchPlaylist).toHaveBeenCalledWith(makeM3U().id);
+ });
+ });
+
+ it('calls onClose after successful update', async () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
+
+ );
+ fireEvent.click(
+ screen.getByRole('button', { name: /add|save|update|submit/i })
+ );
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+ });
+});
diff --git a/frontend/src/components/forms/__tests__/M3UFilters.test.jsx b/frontend/src/components/forms/__tests__/M3UFilters.test.jsx
new file mode 100644
index 00000000..4adb4ada
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/M3UFilters.test.jsx
@@ -0,0 +1,594 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import M3UFilters from '../M3UFilters';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/playlists', () => ({ default: vi.fn() }));
+vi.mock('../../../store/warnings', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/M3uFilterUtils.js', () => ({
+ deleteM3UFilter: vi.fn(),
+ updateM3UFilter: vi.fn(),
+}));
+
+// ── Constants mock ─────────────────────────────────────────────────────────────
+vi.mock('../../../constants', () => ({
+ M3U_FILTER_TYPES: [
+ { value: 'include', label: 'Include' },
+ { value: 'exclude', label: 'Exclude' },
+ ],
+}));
+
+// ── Sub-component mocks ────────────────────────────────────────────────────────
+vi.mock('../M3UFilter', () => ({
+ default: ({ isOpen, onClose, filter, m3u }) =>
+ isOpen ? (
+
+
{filter?.id ?? 'new'}
+
+
+
+ ) : null,
+}));
+
+vi.mock('../../ConfirmationDialog', () => ({
+ default: ({ opened, onConfirm, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+
+
+ ) : null,
+}));
+
+// ── DnD kit mocks ──────────────────────────────────────────────────────────────
+vi.mock('@dnd-kit/core', () => ({
+ closestCenter: vi.fn(),
+ DndContext: vi.fn(({ children, onDragEnd }) => (
+
+ {children}
+
+ )),
+ KeyboardSensor: vi.fn(),
+ MouseSensor: vi.fn(),
+ TouchSensor: vi.fn(),
+ useDraggable: () => ({
+ attributes: {},
+ listeners: {},
+ setNodeRef: vi.fn(),
+ }),
+ useSensor: vi.fn((sensor) => sensor),
+ useSensors: vi.fn((...sensors) => sensors),
+}));
+
+vi.mock('@dnd-kit/sortable', () => ({
+ arrayMove: vi.fn((arr, from, to) => {
+ const result = [...arr];
+ const [item] = result.splice(from, 1);
+ result.splice(to, 0, item);
+ return result;
+ }),
+ SortableContext: ({ children }) => (
+
{children}
+ ),
+ useSortable: () => ({
+ transform: null,
+ transition: null,
+ setNodeRef: vi.fn(),
+ isDragging: false,
+ }),
+ verticalListSortingStrategy: vi.fn(),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+ CSS: { Transform: { toString: vi.fn(() => '') } },
+}));
+
+vi.mock('@dnd-kit/modifiers', () => ({
+ restrictToVerticalAxis: vi.fn(),
+}));
+
+// ── lucide-react mocks ─────────────────────────────────────────────────────────
+vi.mock('lucide-react', () => ({
+ GripHorizontal: () =>
,
+ Info: () =>
,
+ SquareMinus: () =>
,
+ SquarePen: () =>
,
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ ActionIcon: ({ children, onClick, disabled, color }) => (
+
+ ),
+ Alert: ({ children, title }) => (
+
+ ),
+ Box: ({ children, ref }) =>
{children}
,
+ Button: ({ children, onClick, disabled, loading, variant, color }) => (
+
+ ),
+ Center: ({ children }) =>
{children}
,
+ Flex: ({ children }) =>
{children}
,
+ Group: ({ children }) =>
{children}
,
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ Text: ({ children, size, c, fw }) => (
+
+ {children}
+
+ ),
+ useMantineTheme: () => ({
+ tailwind: {
+ red: { 6: '#f56565' },
+ green: { 5: '#48bb78' },
+ yellow: { 3: '#ecc94b' },
+ },
+ }),
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Imports after mocks
+// ──────────────────────────────────────────────────────────────────────────────
+import usePlaylistsStore from '../../../store/playlists';
+import useWarningsStore from '../../../store/warnings';
+import * as M3uFilterUtils from '../../../utils/forms/M3uFilterUtils.js';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makeFilter = (overrides = {}) => ({
+ id: 1,
+ filter_type: 'include',
+ regex_pattern: 'HBO.*',
+ is_active: true,
+ exclude: false,
+ order: 0,
+ ...overrides,
+});
+
+const makePlaylist = (overrides = {}) => ({
+ id: 10,
+ name: 'Test Playlist',
+ filters: [
+ makeFilter({ id: 1, regex_pattern: 'HBO.*', order: 0 }),
+ makeFilter({
+ id: 2,
+ filter_type: 'exclude',
+ regex_pattern: 'ESPN.*',
+ order: 1,
+ }),
+ ],
+ ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+ playlist: makePlaylist(),
+ isOpen: true,
+ onClose: vi.fn(),
+ ...overrides,
+});
+
+const setupStores = ({
+ fetchPlaylist = vi.fn().mockResolvedValue(undefined),
+ isWarningSuppressed = vi.fn().mockReturnValue(false),
+ suppressWarning = vi.fn(),
+} = {}) => {
+ vi.mocked(usePlaylistsStore).mockImplementation((sel) =>
+ sel({ fetchPlaylist })
+ );
+ vi.mocked(useWarningsStore).mockImplementation((sel) =>
+ sel({ isWarningSuppressed, suppressWarning })
+ );
+ return { fetchPlaylist, isWarningSuppressed, suppressWarning };
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('M3UFilters', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(M3uFilterUtils.deleteM3UFilter).mockResolvedValue(undefined);
+ vi.mocked(M3uFilterUtils.updateM3UFilter).mockResolvedValue(undefined);
+ });
+
+ // ── Guard conditions ───────────────────────────────────────────────────────
+
+ describe('guard conditions', () => {
+ it('does not render modal when isOpen is false', () => {
+ setupStores();
+ render(
);
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+
+ it('does not render modal when playlist is null', () => {
+ setupStores();
+ render(
);
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+
+ it('does not render modal when playlist has no id', () => {
+ setupStores();
+ render(
+
+ );
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the modal when isOpen is true with a valid playlist', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ });
+
+ it('renders the modal title', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal-title')).toBeInTheDocument();
+ });
+
+ it('renders an "Add Filter" button', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByRole('button', { name: /new/i })).toBeInTheDocument();
+ });
+
+ it('renders filter patterns from playlist', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByText('HBO.*')).toBeInTheDocument();
+ expect(screen.getByText('ESPN.*')).toBeInTheDocument();
+ });
+
+ it('renders filter type labels for each filter', () => {
+ setupStores();
+ render(
);
+ expect(screen.getAllByText('Include').length).toBeGreaterThanOrEqual(1);
+ expect(screen.getAllByText('Exclude').length).toBeGreaterThanOrEqual(1);
+ });
+
+ it('renders edit action icons for each filter', () => {
+ setupStores();
+ render(
);
+ const penIcons = screen.getAllByTestId('icon-square-pen');
+ expect(penIcons).toHaveLength(2);
+ });
+
+ it('renders delete action icons for each filter', () => {
+ setupStores();
+ render(
);
+ const minusIcons = screen.getAllByTestId('icon-square-minus');
+ expect(minusIcons).toHaveLength(2);
+ });
+
+ it('renders drag handle icons for each filter', () => {
+ setupStores();
+ render(
);
+ const gripIcons = screen.getAllByTestId('icon-grip');
+ expect(gripIcons).toHaveLength(2);
+ });
+
+ it('renders empty state when playlist has no filters', () => {
+ setupStores();
+ const playlist = makePlaylist({
+ filters: [],
+ });
+ render(
);
+ expect(screen.queryByTestId('icon-square-pen')).not.toBeInTheDocument();
+ });
+
+ it('wraps list in DndContext', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('dnd-context')).toBeInTheDocument();
+ });
+
+ it('wraps list in SortableContext', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('sortable-context')).toBeInTheDocument();
+ });
+ });
+
+ // ── Close / cancel ─────────────────────────────────────────────────────────
+
+ describe('close behaviour', () => {
+ it('calls onClose when modal X is clicked', () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('modal-close'));
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ // ── Opening the filter editor ──────────────────────────────────────────────
+
+ describe('opening the filter editor', () => {
+ it('opens M3UFilter editor when Add Filter is clicked', () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /new/i }));
+ expect(screen.getByTestId('m3u-filter-editor')).toBeInTheDocument();
+ });
+
+ it('passes null filter to editor when adding a new filter', () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /new/i }));
+ expect(screen.getByTestId('editor-filter-id')).toHaveTextContent('new');
+ });
+
+ it('opens editor with the correct filter when edit icon is clicked', () => {
+ setupStores();
+ render(
);
+ const editButtons = screen
+ .getAllByTestId('icon-square-pen')
+ .map((icon) => icon.closest('button'));
+ fireEvent.click(editButtons[0]);
+ expect(screen.getByTestId('m3u-filter-editor')).toBeInTheDocument();
+ expect(screen.getByTestId('editor-filter-id')).toHaveTextContent('1');
+ });
+
+ it('closes editor when editor fires onClose without updated playlist', () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /new/i }));
+ fireEvent.click(screen.getByTestId('editor-close'));
+ expect(screen.queryByTestId('m3u-filter-editor')).not.toBeInTheDocument();
+ });
+
+ it('closes editor and refreshes filters when editor fires onClose with playlist', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /new/i }));
+ fireEvent.click(screen.getByTestId('editor-close-with-playlist'));
+ expect(screen.queryByTestId('m3u-filter-editor')).not.toBeInTheDocument();
+ });
+ });
+
+ // ── Delete filter ──────────────────────────────────────────────────────────
+
+ describe('deleting a filter', () => {
+ const clickDeleteFirst = () => {
+ const deleteButtons = screen
+ .getAllByTestId('icon-square-minus')
+ .map((icon) => icon.closest('button'));
+ fireEvent.click(deleteButtons[0]);
+ };
+
+ it('opens confirmation dialog when delete icon is clicked (warning not suppressed)', () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(false) });
+ render(
);
+ clickDeleteFirst();
+ expect(screen.getByTestId('confirmation-dialog')).toBeInTheDocument();
+ });
+
+ it('calls deleteM3UFilter directly when warning is suppressed', async () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(true) });
+ render(
);
+ clickDeleteFirst();
+ await waitFor(() => {
+ expect(M3uFilterUtils.deleteM3UFilter).toHaveBeenCalled();
+ });
+ });
+
+ it('does not open confirmation dialog when warning is suppressed', async () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(true) });
+ render(
);
+ clickDeleteFirst();
+ expect(
+ screen.queryByTestId('confirmation-dialog')
+ ).not.toBeInTheDocument();
+ });
+
+ it('calls deleteM3UFilter after confirming deletion', async () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(false) });
+ render(
);
+ clickDeleteFirst();
+ fireEvent.click(screen.getByTestId('confirm-yes'));
+ await waitFor(() => {
+ expect(M3uFilterUtils.deleteM3UFilter).toHaveBeenCalled();
+ });
+ });
+
+ it('calls fetchPlaylist after successful deletion', async () => {
+ const { fetchPlaylist } = setupStores({
+ isWarningSuppressed: vi.fn().mockReturnValue(false),
+ });
+ render(
);
+ clickDeleteFirst();
+ fireEvent.click(screen.getByTestId('confirm-yes'));
+ await waitFor(() => {
+ expect(fetchPlaylist).toHaveBeenCalledWith(10);
+ });
+ });
+
+ it('closes confirmation dialog after confirming deletion', async () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(false) });
+ render(
);
+ clickDeleteFirst();
+ fireEvent.click(screen.getByTestId('confirm-yes'));
+ await waitFor(() => {
+ expect(
+ screen.queryByTestId('confirmation-dialog')
+ ).not.toBeInTheDocument();
+ });
+ });
+
+ it('closes confirmation dialog when No is clicked', () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(false) });
+ render(
);
+ clickDeleteFirst();
+ fireEvent.click(screen.getByTestId('confirm-no'));
+ expect(
+ screen.queryByTestId('confirmation-dialog')
+ ).not.toBeInTheDocument();
+ });
+
+ it('does not call deleteM3UFilter when No is clicked', () => {
+ setupStores({ isWarningSuppressed: vi.fn().mockReturnValue(false) });
+ render(
);
+ clickDeleteFirst();
+ fireEvent.click(screen.getByTestId('confirm-no'));
+ expect(M3uFilterUtils.deleteM3UFilter).not.toHaveBeenCalled();
+ });
+
+ it('does not call fetchPlaylist when deleteM3UFilter throws', async () => {
+ vi.mocked(M3uFilterUtils.deleteM3UFilter).mockRejectedValue(
+ new Error('fail')
+ );
+ const { fetchPlaylist } = setupStores({
+ isWarningSuppressed: vi.fn().mockReturnValue(false),
+ });
+ render(
);
+ clickDeleteFirst();
+ fireEvent.click(screen.getByTestId('confirm-yes'));
+ await waitFor(() => {
+ expect(M3uFilterUtils.deleteM3UFilter).toHaveBeenCalled();
+ });
+ expect(fetchPlaylist).not.toHaveBeenCalled();
+ });
+ });
+
+ // ── Initialization from playlist prop ─────────────────────────────────────
+
+ describe('filter initialization', () => {
+ it('loads filters from playlist.custom_properties.filters on mount', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByText('HBO.*')).toBeInTheDocument();
+ expect(screen.getByText('ESPN.*')).toBeInTheDocument();
+ });
+
+ it('updates displayed filters when playlist prop changes', () => {
+ setupStores();
+ const { rerender } = render(
);
+ const updatedPlaylist = makePlaylist({
+ filters: [makeFilter({ id: 3, regex_pattern: 'CNN.*', order: 0 })],
+ });
+ rerender(
);
+ expect(screen.getByText('CNN.*')).toBeInTheDocument();
+ expect(screen.queryByText('HBO.*')).not.toBeInTheDocument();
+ });
+ });
+
+ // ── Drag and drop reordering ───────────────────────────────────────────────
+
+ describe('drag and drop', () => {
+ it('calls updateM3UFilter for reordered filters after drag end', async () => {
+ setupStores();
+ // We need to trigger handleDragEnd manually via the DndContext mock.
+ // Re-mock DndContext to capture and expose onDragEnd.
+ let capturedOnDragEnd;
+ const { DndContext } = await import('@dnd-kit/core');
+ vi.mocked(DndContext).mockImplementation(({ children, onDragEnd }) => {
+ capturedOnDragEnd = onDragEnd;
+ return
{children}
;
+ });
+
+ render(
);
+
+ // Simulate drag: move filter id=1 over filter id=2
+ await waitFor(() => expect(capturedOnDragEnd).toBeDefined());
+ capturedOnDragEnd({ active: { id: 1 }, over: { id: 2 } });
+
+ await waitFor(() => {
+ expect(M3uFilterUtils.updateM3UFilter).toHaveBeenCalled();
+ });
+ });
+
+ it('does not call updateM3UFilter when drag ends on same position', async () => {
+ setupStores();
+ let capturedOnDragEnd;
+ const { DndContext } = await import('@dnd-kit/core');
+ vi.mocked(DndContext).mockImplementation(({ children, onDragEnd }) => {
+ capturedOnDragEnd = onDragEnd;
+ return
{children}
;
+ });
+
+ render(
);
+
+ await waitFor(() => expect(capturedOnDragEnd).toBeDefined());
+ capturedOnDragEnd({ active: { id: 1 }, over: { id: 1 } });
+
+ await waitFor(() => {
+ expect(M3uFilterUtils.updateM3UFilter).not.toHaveBeenCalled();
+ });
+ });
+
+ it('does not call updateM3UFilter when there is no over target', async () => {
+ setupStores();
+ let capturedOnDragEnd;
+ const { DndContext } = await import('@dnd-kit/core');
+ vi.mocked(DndContext).mockImplementation(({ children, onDragEnd }) => {
+ capturedOnDragEnd = onDragEnd;
+ return
{children}
;
+ });
+
+ render(
);
+
+ await waitFor(() => expect(capturedOnDragEnd).toBeDefined());
+ capturedOnDragEnd({ active: { id: 1 }, over: null });
+
+ expect(M3uFilterUtils.updateM3UFilter).not.toHaveBeenCalled();
+ });
+ });
+
+ // ── Warning suppression ────────────────────────────────────────────────────
+
+ describe('warning suppression', () => {
+ it('calls suppressWarning when user confirms and opts to suppress', async () => {
+ // This depends on ConfirmationDialog exposing a "suppress" callback.
+ // Here we verify suppressWarning is available from the store.
+ const { suppressWarning } = setupStores({
+ isWarningSuppressed: vi.fn().mockReturnValue(false),
+ });
+ render(
);
+ expect(suppressWarning).toBeDefined();
+ });
+ });
+});
diff --git a/frontend/src/components/forms/__tests__/M3UGroupFilter.test.jsx b/frontend/src/components/forms/__tests__/M3UGroupFilter.test.jsx
new file mode 100644
index 00000000..aba4e139
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/M3UGroupFilter.test.jsx
@@ -0,0 +1,441 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import M3UGroupFilter from '../M3UGroupFilter';
+
+// ── Store mocks ────────────────────────────────────────────────────────────────
+vi.mock('../../../store/channels', () => ({ default: vi.fn() }));
+vi.mock('../../../store/useVODStore', () => ({ default: vi.fn() }));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/notificationUtils.js', () => ({
+ showNotification: vi.fn(),
+}));
+
+vi.mock('../../../utils/forms/M3uGroupFilterUtils.js', () => ({
+ saveAndRefreshPlaylist: vi.fn(),
+ buildGroupStates: vi.fn(),
+}));
+
+// ── Sub-component mocks ────────────────────────────────────────────────────────
+vi.mock('../LiveGroupFilter', () => ({
+ default: ({
+ groupStates,
+ setGroupStates,
+ autoEnableNewGroupsLive,
+ setAutoEnableNewGroupsLive,
+ }) => (
+
+ {groupStates?.length ?? 0}
+
+
+
+ ),
+}));
+
+vi.mock('../VODCategoryFilter', () => ({
+ default: ({
+ categoryStates,
+ setCategoryStates,
+ autoEnableNewGroups,
+ setAutoEnableNewGroups,
+ type,
+ }) => (
+
+
+ {categoryStates?.length ?? 0}
+
+
+
+
+ ),
+}));
+
+// ── Mantine core ───────────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ Button: ({ children, onClick, loading, disabled, variant, color }) => (
+
+ ),
+ Flex: ({ children }) =>
{children}
,
+ LoadingOverlay: ({ visible }) =>
+ visible ?
: null,
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ Stack: ({ children }) =>
{children}
,
+ Tabs: ({ children, defaultValue, value }) => (
+
+ {children}
+
+ ),
+ TabsList: ({ children }) =>
{children}
,
+ TabsPanel: ({ children, value }) => (
+
{children}
+ ),
+ TabsTab: ({ children, value, onClick }) => (
+
+ ),
+}));
+
+// ──────────────────────────────────────────────────────────────────────────────
+// Imports after mocks
+// ──────────────────────────────────────────────────────────────────────────────
+import useChannelsStore from '../../../store/channels';
+import useVODStore from '../../../store/useVODStore';
+import { showNotification } from '../../../utils/notificationUtils.js';
+import * as M3uGroupFilterUtils from '../../../utils/forms/M3uGroupFilterUtils.js';
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+const makePlaylist = (overrides = {}) => ({
+ id: 1,
+ name: 'Test Playlist',
+ account_type: 'XC',
+ enable_vod: true,
+ ...overrides,
+});
+
+const makeGroup = (overrides = {}) => ({
+ id: 1,
+ name: 'Group A',
+ playlist_id: 1,
+ ...overrides,
+});
+
+const defaultProps = (overrides = {}) => ({
+ playlist: makePlaylist(),
+ isOpen: true,
+ onClose: vi.fn(),
+ ...overrides,
+});
+
+const setupStores = ({
+ channelGroups = [makeGroup(), makeGroup({ id: 2, name: 'Group B' })],
+ fetchCategories = vi.fn().mockResolvedValue(undefined),
+} = {}) => {
+ vi.mocked(useChannelsStore).mockImplementation((sel) =>
+ sel({ channelGroups })
+ );
+ vi.mocked(useVODStore).mockImplementation((sel) => sel({ fetchCategories }));
+ return { channelGroups, fetchCategories };
+};
+
+// ──────────────────────────────────────────────────────────────────────────────
+
+describe('M3UGroupFilter', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ vi.mocked(M3uGroupFilterUtils.saveAndRefreshPlaylist).mockResolvedValue(
+ undefined
+ );
+ vi.mocked(M3uGroupFilterUtils.buildGroupStates).mockReturnValue([]);
+ });
+
+ // ── Guard conditions ───────────────────────────────────────────────────────
+
+ describe('guard conditions', () => {
+ it('does not render modal when isOpen is false', () => {
+ setupStores();
+ render(
);
+ expect(screen.queryByTestId('modal')).not.toBeInTheDocument();
+ });
+ });
+
+ // ── Rendering ──────────────────────────────────────────────────────────────
+
+ describe('rendering', () => {
+ it('renders the modal when isOpen is true with a valid playlist', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal')).toBeInTheDocument();
+ });
+
+ it('renders the modal title', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('modal-title')).toBeInTheDocument();
+ });
+
+ it('renders tab list with Live and VOD tabs', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('tabs-list')).toBeInTheDocument();
+ expect(screen.getByTestId('tab-live')).toBeInTheDocument();
+ expect(screen.getByTestId('tab-vod-movie')).toBeInTheDocument();
+ expect(screen.getByTestId('tab-vod-series')).toBeInTheDocument();
+ });
+
+ it('renders LiveGroupFilter panel', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByTestId('live-group-filter')).toBeInTheDocument();
+ });
+
+ it('renders VODCategoryFilter panels', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByTestId('vod-category-filter-movie')
+ ).toBeInTheDocument();
+ expect(
+ screen.getByTestId('vod-category-filter-series')
+ ).toBeInTheDocument();
+ });
+
+ it('renders a Save button', () => {
+ setupStores();
+ render(
);
+ expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
+ });
+
+ it('renders a Cancel button', () => {
+ setupStores();
+ render(
);
+ expect(
+ screen.getByRole('button', { name: /cancel/i })
+ ).toBeInTheDocument();
+ });
+ });
+
+ // ── Initialization ─────────────────────────────────────────────────────────
+
+ describe('initialization', () => {
+ it('calls buildGroupStates with channelGroups and playlist on mount', async () => {
+ const { channelGroups } = setupStores();
+ render(
);
+ await waitFor(() => {
+ expect(M3uGroupFilterUtils.buildGroupStates).toHaveBeenCalledWith(
+ channelGroups,
+ undefined
+ );
+ });
+ });
+
+ it('calls fetchCategories on mount', async () => {
+ const { fetchCategories } = setupStores();
+ render(
);
+ await waitFor(() => {
+ expect(fetchCategories).toHaveBeenCalled();
+ });
+ });
+
+ it('re-initializes when playlist prop changes', async () => {
+ setupStores();
+ const { rerender } = render(
);
+ const updatedPlaylist = makePlaylist({
+ id: 2,
+ name: 'Updated Playlist',
+ channel_groups: [{ id: 3, name: 'Group C', playlist_id: 2 }],
+ });
+ rerender(
+
+ );
+ await waitFor(() => {
+ expect(M3uGroupFilterUtils.buildGroupStates).toHaveBeenCalledWith(
+ expect.anything(),
+ updatedPlaylist.channel_groups
+ );
+ });
+ });
+ });
+
+ // ── Close / cancel behaviour ───────────────────────────────────────────────
+
+ describe('close / cancel behaviour', () => {
+ it('calls onClose when modal X is clicked', () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('modal-close'));
+ expect(onClose).toHaveBeenCalled();
+ });
+
+ it('calls onClose when Cancel button is clicked', () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ // ── LiveGroupFilter interaction ────────────────────────────────────────────
+
+ describe('LiveGroupFilter interaction', () => {
+ it('updates groupStates when LiveGroupFilter fires onGroupStatesChange', async () => {
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByTestId('live-group-filter'));
+ fireEvent.click(screen.getByTestId('live-change-groups'));
+ expect(screen.getByTestId('live-group-count')).toHaveTextContent('1');
+ });
+
+ it('toggles autoEnableNewGroupsLive when LiveGroupFilter fires onAutoEnableChange', async () => {
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByTestId('live-group-filter'));
+ // Toggle twice to verify it actually flips
+ fireEvent.click(screen.getByTestId('live-toggle-auto'));
+ fireEvent.click(screen.getByTestId('live-toggle-auto'));
+ // No crash = state updated correctly
+ });
+ });
+
+ // ── VODCategoryFilter interaction ──────────────────────────────────────────
+
+ describe('VODCategoryFilter interaction', () => {
+ it('updates movieCategoryStates when movie VODCategoryFilter fires setCategoryStates', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('vod-change-movie'));
+ expect(screen.getByTestId('movie-category-count')).toHaveTextContent('1');
+ });
+
+ it('updates seriesCategoryStates when series VODCategoryFilter fires setCategoryStates', async () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('vod-change-series'));
+ expect(screen.getByTestId('series-category-count')).toHaveTextContent(
+ '1'
+ );
+ });
+
+ it('toggles autoEnableNewGroupsVod when movie VODCategoryFilter fires setAutoEnableNewGroups', () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('vod-toggle-auto-movie'));
+ fireEvent.click(screen.getByTestId('vod-toggle-auto-movie'));
+ });
+
+ it('toggles autoEnableNewGroupsSeries when series VODCategoryFilter fires setAutoEnableNewGroups', () => {
+ setupStores();
+ render(
);
+ fireEvent.click(screen.getByTestId('vod-toggle-auto-series'));
+ fireEvent.click(screen.getByTestId('vod-toggle-auto-series'));
+ });
+ });
+
+ // ── Save ───────────────────────────────────────────────────────────────────
+
+ describe('saving', () => {
+ it('calls saveAndRefreshPlaylist with playlist and current states on Save click', async () => {
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByRole('button', { name: /save/i }));
+ fireEvent.click(screen.getByRole('button', { name: /save/i }));
+ await waitFor(() => {
+ expect(M3uGroupFilterUtils.saveAndRefreshPlaylist).toHaveBeenCalledWith(
+ expect.objectContaining({ id: 1 }),
+ expect.any(Array),
+ expect.any(Array),
+ expect.any(Array),
+ expect.objectContaining({
+ auto_enable_new_groups_live: true,
+ auto_enable_new_groups_vod: true,
+ auto_enable_new_groups_series: true,
+ })
+ );
+ });
+ });
+
+ it('calls onClose after successful save', async () => {
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByRole('button', { name: /save/i }));
+ fireEvent.click(screen.getByRole('button', { name: /save/i }));
+ await waitFor(() => {
+ expect(onClose).toHaveBeenCalled();
+ });
+ });
+
+ it('shows success notification after saving', async () => {
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByRole('button', { name: /save/i }));
+ fireEvent.click(screen.getByRole('button', { name: /save/i }));
+ await waitFor(() => {
+ expect(showNotification).toHaveBeenCalledWith(
+ expect.objectContaining({
+ color: expect.stringMatching(/green|teal/),
+ })
+ );
+ });
+ });
+
+ it('does not call onClose when saveAndRefreshPlaylist throws', async () => {
+ vi.mocked(M3uGroupFilterUtils.saveAndRefreshPlaylist).mockRejectedValue(
+ new Error('save failed')
+ );
+ const onClose = vi.fn();
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByRole('button', { name: /save/i }));
+ fireEvent.click(screen.getByRole('button', { name: /save/i }));
+ expect(onClose).not.toHaveBeenCalled();
+ });
+ });
+
+ // ── Loading state ──────────────────────────────────────────────────────────
+
+ describe('loading state', () => {
+ it('disables Save button while submitting', async () => {
+ let resolveSave;
+ vi.mocked(M3uGroupFilterUtils.saveAndRefreshPlaylist).mockImplementation(
+ () =>
+ new Promise((res) => {
+ resolveSave = res;
+ })
+ );
+ setupStores();
+ render(
);
+ await waitFor(() => screen.getByRole('button', { name: /save/i }));
+
+ const saveBtn = screen.getByRole('button', { name: /save/i });
+ fireEvent.click(saveBtn);
+
+ await waitFor(() => {
+ expect(saveBtn.disabled || saveBtn.dataset.loading === 'true').toBe(
+ true
+ );
+ });
+
+ resolveSave();
+ });
+ });
+});
diff --git a/frontend/src/components/forms/__tests__/M3UProfile.test.jsx b/frontend/src/components/forms/__tests__/M3UProfile.test.jsx
new file mode 100644
index 00000000..45f73b71
--- /dev/null
+++ b/frontend/src/components/forms/__tests__/M3UProfile.test.jsx
@@ -0,0 +1,824 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import M3UProfile from '../M3UProfile';
+
+// ── WebSocket mock ─────────────────────────────────────────────────────────────
+vi.mock('../../../WebSocket', () => ({
+ useWebSocket: vi.fn(),
+}));
+
+// ── Utility mocks ──────────────────────────────────────────────────────────────
+vi.mock('../../../utils/forms/M3uProfileUtils.js', () => ({
+ addM3UProfile: vi.fn(),
+ applyRegex: vi.fn(),
+ applyXcSimplePatterns: vi.fn(),
+ buildProfileSchema: vi.fn(),
+ buildSubmitValues: vi.fn(),
+ fetchFirstStreamUrl: vi.fn(),
+ getDetectedMode: vi.fn(),
+ prepareExpDate: vi.fn(),
+ splitByPattern: vi.fn(),
+ updateM3UProfile: vi.fn(),
+ validateXcSimple: vi.fn(),
+}));
+
+// ── react-hook-form mock ───────────────────────────────────────────────────────
+vi.mock('react-hook-form', async () => {
+ const actual = await vi.importActual('react-hook-form');
+ return { ...actual, useForm: vi.fn() };
+});
+
+// ── @hookform/resolvers/yup mock ───────────────────────────────────────────────
+vi.mock('@hookform/resolvers/yup', () => ({
+ yupResolver: vi.fn(() => vi.fn()),
+}));
+
+// ── @mantine/dates mock ────────────────────────────────────────────────────────
+vi.mock('@mantine/dates', () => ({
+ DateTimePicker: ({ label, value, onChange, disabled, placeholder }) => (
+
+
+ onChange?.(e.target.value)}
+ disabled={disabled}
+ placeholder={placeholder}
+ />
+
+ ),
+}));
+
+// ── @mantine/core mock ─────────────────────────────────────────────────────────
+vi.mock('@mantine/core', () => ({
+ Alert: ({ children, title }) => (
+
+ {title}
+ {children}
+
+ ),
+ Badge: ({ children, color }) => (
+
+ {children}
+
+ ),
+ Button: ({ children, onClick, disabled, loading, variant, color, type }) => (
+
+ ),
+ Flex: ({ children }) =>
{children}
,
+ Grid: ({ children }) =>
{children}
,
+ GridCol: ({ children, span }) => (
+
+ {children}
+
+ ),
+ Modal: ({ children, opened, onClose, title }) =>
+ opened ? (
+
+
{title}
+
+ {children}
+
+ ) : null,
+ NumberInput: ({
+ label,
+ value,
+ onChange,
+ disabled,
+ min,
+ max,
+ placeholder,
+ }) => (
+
+
+ onChange?.(Number(e.target.value))}
+ disabled={disabled}
+ min={min}
+ max={max}
+ placeholder={placeholder}
+ />
+
+ ),
+ Paper: ({ children }) =>
{children}
,
+ SegmentedControl: ({ value, onChange, data, disabled }) => (
+
+ {data?.map((item) => (
+
+ ))}
+
+ ),
+ Text: ({ children, size, c, fw }) => (
+
+ {children}
+
+ ),
+ Textarea: ({ label, value, onChange, disabled, placeholder, error }) => (
+
+
+
{
+ if (e.target.src !== logo) {
+ e.target.src = logo;
+ }
+ }}
+ />
+