add SourceMenu unit tests

camiloHimura · camiloHimura · commit fcd52f9e23a7 · 2025-10-30T12:25:49.000+01:00
Signed-off-by: Colorado, Camilo &lt;camilo.colorado@intel.com&gt;
diff --git a/application/ui/src/features/inspect/toolbar/sources/add-source/add-source.test.tsx b/application/ui/src/features/inspect/toolbar/sources/add-source/add-source.test.tsx
@@ -30,7 +30,7 @@ describe('add-source', () => {
 
     it('calls connectToPipelineMutation after successful submit', async () => {
         const mockOnSaved = vi.fn();
-        const mockSourceMutation = vi.fn().mockResolvedValue(newConfig);
+        const mockSourceMutation = vi.fn().mockResolvedValue(newConfig.id);
         const mockConnectToPipeline = vi.fn().mockResolvedValue(undefined);
 
         vi.mocked(useConnectSourceToPipeline).mockReturnValue(mockConnectToPipeline);
@@ -58,7 +58,7 @@ describe('add-source', () => {
 
         await waitFor(() => {
             expect(mockSourceMutation).toHaveBeenCalledWith(expect.objectContaining({ ...newConfig, id: '' }));
-            expect(mockConnectToPipeline).toHaveBeenCalledWith(newConfig);
+            expect(mockConnectToPipeline).toHaveBeenCalledWith(newConfig.id);
             expect(mockOnSaved).toHaveBeenCalled();
         });
     });
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-list/settings-list/settings-list.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-list/settings-list/settings-list.component.tsx
@@ -2,11 +2,11 @@ import { SourceConfig } from '../../util';
 
 import classes from './settings-list.module.scss';
 
-interface SettingsListPops {
+interface SettingsListProps {
     source: SourceConfig;
 }
 
-export const SettingsList = ({ source }: SettingsListPops) => {
+export const SettingsList = ({ source }: SettingsListProps) => {
     if (source.source_type === 'images_folder') {
         return (
             <ul className={classes.list}>
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-menu/source-menu.component.tsx b/application/ui/src/features/inspect/toolbar/sources/source-menu/source-menu.component.tsx
@@ -3,7 +3,7 @@ import { useProjectIdentifier } from '@geti-inspect/hooks';
 import { MoreMenu } from '@geti/ui/icons';
 import { ActionButton, Item, Key, Menu, MenuTrigger, toast } from 'packages/ui';
 
-interface SourceMenuProps {
+export interface SourceMenuProps {
     id: string;
     name: string;
     isConnected: boolean;
@@ -23,9 +23,7 @@ export const SourceMenu = ({ id, name, isConnected, onEdit }: SourceMenuProps) =
     });
 
     const removeSource = $api.useMutation('delete', '/api/sources/{source_id}', {
-        meta: {
-            invalidates: [['get', '/api/sources']],
-        },
+        meta: { invalidates: [['get', '/api/sources']] },
     });
 
     const handleOnAction = (option: Key) => {
@@ -43,36 +41,50 @@ export const SourceMenu = ({ id, name, isConnected, onEdit }: SourceMenuProps) =
     };
 
     const handleConnect = async () => {
-        await updatePipeline.mutateAsync({
-            params: { path: { project_id: projectId } },
-            body: { source_id: id },
-        });
-
-        toast({
-            type: 'success',
-            message: `Successfully connected to "${name}"`,
-        });
-    };
-
-    const handleDelete = async () => {
-        if (isConnected) {
+        try {
             await updatePipeline.mutateAsync({
                 params: { path: { project_id: projectId } },
-                body: { source_id: null },
+                body: { source_id: id },
+            });
+
+            toast({
+                type: 'success',
+                message: `Successfully connected to "${name}"`,
+            });
+        } catch (_error) {
+            toast({
+                type: 'error',
+                message: `Failed to connect to "${name}".`,
             });
         }
+    };
+
+    const handleDelete = async () => {
+        try {
+            if (isConnected) {
+                await updatePipeline.mutateAsync({
+                    params: { path: { project_id: projectId } },
+                    body: { source_id: null },
+                });
+            }
 
-        await removeSource.mutateAsync({ params: { path: { source_id: id } } });
+            await removeSource.mutateAsync({ params: { path: { source_id: id } } });
 
-        toast({
-            type: 'success',
-            message: `${name} has been removed successfully!`,
-        });
+            toast({
+                type: 'success',
+                message: `${name} has been removed successfully!`,
+            });
+        } catch (_error) {
+            toast({
+                type: 'error',
+                message: `Failed to remove "${name}".`,
+            });
+        }
     };
 
     return (
         <MenuTrigger>
-            <ActionButton isQuiet>
+            <ActionButton isQuiet aria-label='source menu'>
                 <MoreMenu />
             </ActionButton>
             <Menu onAction={handleOnAction}>
diff --git a/application/ui/src/features/inspect/toolbar/sources/source-menu/source-menu.test.tsx b/application/ui/src/features/inspect/toolbar/sources/source-menu/source-menu.test.tsx
@@ -0,0 +1,124 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { HttpResponse } from 'msw';
+import { http } from 'src/api/utils';
+import { server } from 'src/msw-node-setup';
+import { TestProviders } from 'src/providers';
+
+import { SourceMenu, SourceMenuProps } from './source-menu.component';
+
+vi.mock('@geti-inspect/hooks', () => ({ useProjectIdentifier: () => ({ projectId: '123' }) }));
+
+describe('SourceMenu', () => {
+    const renderApp = ({
+        id = 'id-test',
+        name = 'name test',
+        isConnected = false,
+        onEdit = vi.fn(),
+    }: Partial<SourceMenuProps>) => {
+        render(
+            <TestProviders>
+                <SourceMenu id={id} name={name} isConnected={isConnected} onEdit={onEdit} />
+            </TestProviders>
+        );
+    };
+
+    it('edit', async () => {
+        const mockedOnEdit = vi.fn();
+
+        renderApp({ onEdit: mockedOnEdit });
+
+        await userEvent.click(screen.getByRole('button', { name: /source menu/i }));
+        await userEvent.click(screen.getByRole('menuitem', { name: /Edit/i }));
+
+        expect(mockedOnEdit).toHaveBeenCalled();
+    });
+
+    describe('remove', () => {
+        const name = 'test-name';
+        const configRequests = (status = 200) => {
+            const pipelinePatchSpy = vi.fn();
+
+            server.use(
+                http.patch('/api/projects/{project_id}/pipeline', () => {
+                    pipelinePatchSpy();
+                    return HttpResponse.json({}, { status });
+                }),
+                http.delete('/api/sources/{source_id}', () => HttpResponse.json(null, { status: 204 }))
+            );
+
+            return pipelinePatchSpy;
+        };
+
+        it('success', async () => {
+            const pipelinePatchSpy = configRequests();
+
+            renderApp({ name, isConnected: false });
+
+            await userEvent.click(screen.getByRole('button', { name: /source menu/i }));
+            await userEvent.click(screen.getByRole('menuitem', { name: /Remove/i }));
+
+            await expect(await screen.findByLabelText('toast')).toHaveTextContent(
+                `${name} has been removed successfully!`
+            );
+            expect(pipelinePatchSpy).not.toHaveBeenCalled();
+        });
+
+        it('success with isConnected true - calls pipeline patch', async () => {
+            const pipelinePatchSpy = configRequests();
+
+            renderApp({ name, isConnected: true });
+
+            await userEvent.click(screen.getByRole('button', { name: /source menu/i }));
+            await userEvent.click(screen.getByRole('menuitem', { name: /Remove/i }));
+
+            await expect(await screen.findByLabelText('toast')).toHaveTextContent(
+                `${name} has been removed successfully!`
+            );
+
+            expect(pipelinePatchSpy).toHaveBeenCalled();
+        });
+
+        it('error', async () => {
+            configRequests(500);
+
+            renderApp({ name, isConnected: true });
+
+            await userEvent.click(screen.getByRole('button', { name: /source menu/i }));
+            await userEvent.click(screen.getByRole('menuitem', { name: /Remove/i }));
+
+            expect(await screen.findByLabelText('toast')).toHaveTextContent(`Failed to remove "${name}".`);
+        });
+    });
+
+    describe('connect', () => {
+        const name = 'test-name';
+        const configRequests = (status = 200) => {
+            server.use(http.patch('/api/projects/{project_id}/pipeline', () => HttpResponse.json({}, { status })));
+        };
+
+        it('success', async () => {
+            configRequests();
+
+            renderApp({ name });
+
+            await userEvent.click(screen.getByRole('button', { name: /source menu/i }));
+            await userEvent.click(screen.getByRole('menuitem', { name: /Connect/i }));
+
+            await expect(await screen.findByLabelText('toast')).toHaveTextContent(
+                `Successfully connected to "${name}"`
+            );
+        });
+
+        it('error', async () => {
+            configRequests(500);
+
+            renderApp({ name });
+
+            await userEvent.click(screen.getByRole('button', { name: /source menu/i }));
+            await userEvent.click(screen.getByRole('menuitem', { name: /Connect/i }));
+
+            await expect(await screen.findByLabelText('toast')).toHaveTextContent(`Failed to connect to "${name}"`);
+        });
+    });
+});
diff --git a/application/ui/src/features/inspect/train-model/train-model-dialog.component.tsx b/application/ui/src/features/inspect/train-model/train-model-dialog.component.tsx
@@ -24,7 +24,11 @@ export const TrainModelDialog = ({ close }: { close: () => void }) => {
         }
 
         await startTrainingMutation.mutateAsync({
-            body: { project_id: projectId, model_name: selectedModel },
+            body: {
+                project_id: projectId,
+                model_name: selectedModel,
+                device: null,
+            },
         });
 
         close();
diff --git a/application/ui/src/providers.tsx b/application/ui/src/providers.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 
+import { Toast } from '@geti/ui';
 import { ThemeProvider } from '@geti/ui/theme';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { MemoryRouterProps, RouterProvider } from 'react-router';
@@ -31,6 +32,7 @@ export const TestProviders = ({ children, routerProps }: { children: ReactNode;
                 <Router {...routerProps}>
                     <WebRTCConnectionProvider>{children}</WebRTCConnectionProvider>
                 </Router>
+                <Toast />
             </ThemeProvider>
         </QueryClientProvider>
     );
