added test cases

src/containers/Assistants/AssistantOptions/AssistantOptions.tsx

@@ -49,7 +49,7 @@ export const AssistantOptions = ({ currentId, options, setOptions }: AssistantOp
   const handleFileChange = (event: any) => {
     if (event.target.files.length === 0) return;
 
-    if (event.target.files[0].size / (1024 * 1024) > 20) {
+    if (event.target.files[0]?.size / (1024 * 1024) > 20) {
       setNotification('File size should be less than 20MB', 'error');
       return;
     }
@@ -212,6 +212,7 @@ export const AssistantOptions = ({ currentId, options, setOptions }: AssistantOp
 
         <div className={styles.Slider}>
           <Slider
+            name="slider"
             onChange={(_, value) => {
               setOptions({
                 ...options,
@@ -223,6 +224,10 @@ export const AssistantOptions = ({ currentId, options, setOptions }: AssistantOp
             max={2}
           />
           <input
+            role="sliderDisplay"
+            name="sliderDisplay"
+            type="number"
+            step={0.1}
             value={options.temperature}
             onChange={(event) => {
               setOptions({

src/containers/Assistants/Assistants.test.tsx

@@ -2,7 +2,7 @@ import { MockedProvider } from '@apollo/client/testing';
 import { MemoryRouter, Route, Routes } from 'react-router';
 import Assistants from './Assistants';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { MOCKS } from 'mocks/Assistants';
+import { MOCKS, emptyMocks, loadMoreMocks } from 'mocks/Assistants';
 import * as Notification from 'common/notification';
 
 const notificationSpy = vi.spyOn(Notification, 'setNotification');
@@ -12,9 +12,9 @@ vi.mock('react-router-dom', async () => ({
   useNavigate: () => mockedUsedNavigate,
 }));
 
-const assistantsComponent = (
-  <MockedProvider mocks={MOCKS}>
-    <MemoryRouter initialEntries={['/assistants', '/assistants/2']}>
+const assistantsComponent = (mocks: any = MOCKS) => (
+  <MockedProvider mocks={mocks}>
+    <MemoryRouter initialEntries={['/assistants']}>
       <Routes>
         <Route path="/assistants" element={<Assistants />} />
         <Route path="/assistants/:assistantId" element={<Assistants />} />
@@ -23,12 +23,21 @@ const assistantsComponent = (
   </MockedProvider>
 );
 
+test('should show empty text when no assistants are found', async () => {
+  render(assistantsComponent(emptyMocks));
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('No assistants found!')).toBeInTheDocument;
+  });
+});
+
 test('it renders the list properly and switches between items', async () => {
-  render(assistantsComponent);
+  render(assistantsComponent());
 
   await waitFor(() => {
     expect(screen.getByText('Assistants')).toBeInTheDocument();
-    expect(screen.getByText('Assistant-405db438')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
   });
 
   await waitFor(() => {
@@ -43,11 +52,11 @@ test('it renders the list properly and switches between items', async () => {
 });
 
 test('it creates an assistant', async () => {
-  render(assistantsComponent);
+  render(assistantsComponent());
 
   await waitFor(() => {
     expect(screen.getByText('Assistants')).toBeInTheDocument();
-    expect(screen.getByText('Assistant-405db438')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
   });
 
   fireEvent.click(screen.getByTestId('headingButton'));
@@ -56,3 +65,124 @@ test('it creates an assistant', async () => {
     expect(notificationSpy).toHaveBeenCalled();
   });
 });
+
+test('it loads more assistants', async () => {
+  render(assistantsComponent(loadMoreMocks));
+
+  await waitFor(() => {
+    expect(screen.getAllByTestId('listItem')).toHaveLength(25);
+  });
+
+  fireEvent.click(screen.getByTestId('loadmore'));
+
+  await waitFor(() => {
+    expect(screen.getAllByTestId('listItem')).toHaveLength(25);
+  });
+});
+
+test('it searchs for an assistant', async () => {
+  render(assistantsComponent());
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
+  });
+
+  fireEvent.change(screen.getByPlaceholderText('Search'), { target: { value: 'testAssistant' } });
+  fireEvent.click(screen.getByTestId('CloseIcon'));
+
+  fireEvent.change(screen.getByPlaceholderText('Search'), { target: { value: 'testAssistant' } });
+
+  await waitFor(() => {
+    expect(screen.getByText('testAssistant')).toBeInTheDocument();
+  });
+
+  fireEvent.click(screen.getByTestId('copyItemId'));
+
+  await waitFor(() => {
+    expect(notificationSpy).toHaveBeenCalled();
+  });
+});
+
+test('it uploads files to assistant', async () => {
+  render(assistantsComponent());
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
+    expect(screen.getByTestId('addFiles'));
+  });
+
+  fireEvent.click(screen.getByTestId('addFiles'));
+  fireEvent.click(screen.getByTestId('cancel-button'));
+
+  fireEvent.click(screen.getByTestId('addFiles'));
+  await waitFor(() => {
+    expect(screen.getByText('Add files to file search')).toBeInTheDocument();
+  });
+
+  const mockFile = new File(['file content'], 'testFile.txt', { type: 'text/plain' });
+  const mockFileContent = new Blob([new Array(28000000).fill('a').join('')], {
+    type: 'text/plain',
+  });
+
+  const mockFileBiggerThan20MB = new File([mockFileContent], 'testFile2.txt', {
+    type: 'text/plain',
+  });
+
+  const fileInput = screen.getByTestId('uploadFile');
+  fireEvent.change(fileInput, { target: { files: [] } });
+  fireEvent.change(fileInput, { target: { files: [mockFile] } });
+  fireEvent.click(screen.getAllByTestId('deleteFile')[0]);
+
+  fireEvent.change(fileInput, { target: { files: [mockFileBiggerThan20MB] } });
+
+  //shows error message for larger files
+  await waitFor(() => {
+    expect(notificationSpy).toHaveBeenCalled();
+  });
+
+  fireEvent.change(fileInput, { target: { files: [mockFile] } });
+  fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+  await waitFor(() => {
+    expect(screen.getAllByTestId('fileItem')).toHaveLength(2);
+  });
+
+  fireEvent.click(screen.getByTestId('ok-button'));
+
+  await waitFor(() => {
+    expect(notificationSpy).toHaveBeenCalled();
+  });
+});
+
+test('it updates the assistant', async () => {
+  render(assistantsComponent());
+
+  await waitFor(() => {
+    expect(screen.getByText('Assistants')).toBeInTheDocument();
+    expect(screen.getByText('Assistant-1')).toBeInTheDocument();
+  });
+
+  await waitFor(() => {
+    expect(screen.getByText('Instructions')).toBeInTheDocument();
+  });
+
+  const autocompletes = screen.getAllByTestId('AutocompleteInput');
+  const inputs = screen.getAllByRole('textbox');
+
+  autocompletes[0].focus();
+  fireEvent.keyDown(autocompletes[0], { key: 'ArrowDown' });
+
+  fireEvent.click(screen.getByText('chatgpt-4o-latest'), { key: 'Enter' });
+
+  fireEvent.change(inputs[1], { target: { value: 'test name' } });
+  fireEvent.change(inputs[2], { target: { value: 'test instructions' } });
+  fireEvent.change(screen.getByRole('sliderDisplay'), { target: { value: 1.5 } });
+
+  fireEvent.click(screen.getByTestId('submitAction'));
+
+  await waitFor(() => {
+    expect(notificationSpy).toHaveBeenCalled();
+  });
+});

src/containers/Assistants/CreateAssistant/CreateAssistant.tsx

@@ -71,7 +71,7 @@ export const CreateAssistant = ({
         variables: { assistantId: currentId },
         onCompleted: ({ assistant }) => {
           setAssistantId(assistant?.assistant?.assistantId);
-          setName(assistant?.assistant?.name || '');
+          setName(assistant?.assistant?.name);
           let modelValue = modelOptions?.find(
             (item: any) => item.label === assistant?.assistant?.model
           );
@@ -235,10 +235,20 @@ export const CreateAssistant = ({
             ))}
           </div>
           <div className={styles.Buttons}>
-            <Button loading={savingChanges} onClick={handleCreate} variant="contained">
+            <Button
+              loading={savingChanges}
+              onClick={handleCreate}
+              variant="contained"
+              data-testid="submitAction"
+            >
               Save Changes
             </Button>
-            <Button onClick={() => setShowConfirmation(true)} variant="outlined" color="error">
+            <Button
+              onClick={() => setShowConfirmation(true)}
+              variant="outlined"
+              color="error"
+              data-testid="cancelAction"
+            >
               Remove
             </Button>
           </div>

src/containers/Assistants/ListItems/List.tsx

@@ -12,7 +12,6 @@ import styles from './List.module.css';
 import { useNavigate } from 'react-router';
 
 interface ListProps {
-  icon?: any;
   getItemsQuery: DocumentNode;
   listItemName: string;
   currentId?: any;
@@ -21,7 +20,6 @@ interface ListProps {
 }
 
 export const List = ({
-  icon,
   getItemsQuery,
   listItemName,
   refreshList,
@@ -109,7 +107,6 @@ export const List = ({
                 onClick={() => navigate(`/assistants/${item.id}`)}
                 data-testid="listItem"
               >
-                {icon && <div>{icon}</div>}
                 <div className={styles.Itemm}>
                   <div className={styles.Header}>
                     <span className={styles.Title}>{item.name}</span>