added sidbar elements tests

client/src/ClassSelectionMenu/ClassSelectionMenu.test.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, fireEvent , screen} from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ClassSelectionMenu from './index';
+
+// Mock regions data
+const mockRegionClsList = ['class1', 'class2', 'class3'];
+const mockRegionColorList = ['#ff0000', '#00ff00', '#0000ff'];
+const mockRegions = undefined
+const mockOnSelectCls = jest.fn();
+
+// Mock the useTranslation hook
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: key => ({
+            "menu.classifications": "Labels",
+        }[key]),
+    }),
+}));
+
+
+describe('ClassSelectionMenu', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <ClassSelectionMenu
+        selectedCls={'class1'}
+        regionClsList={mockRegionClsList}
+        regionColorList={mockRegionColorList}
+        onSelectCls={mockOnSelectCls}
+        regions={mockRegions} 
+        expandedByDefault={true}
+      />
+    );
+
+    // Check if the component exists
+    expect(getByText('Class1')).toBeInTheDocument();
+    expect(getByText('Class2')).toBeInTheDocument();
+    expect(getByText('Class3')).toBeInTheDocument();
+
+  });
+
+  it('calls onSelectCls with the correct class when a label is clicked', () => {
+    const { getByText } = render(
+      <ClassSelectionMenu
+        selectedCls={'class1'}
+        regionClsList={mockRegionClsList}
+        regionColorList={mockRegionColorList}
+        onSelectCls={mockOnSelectCls}
+        regions={mockRegions}
+      />
+    );
+
+    fireEvent.click(getByText('Class2'));
+
+    expect(mockOnSelectCls).toHaveBeenCalledWith('class2');
+  });
+
+  it('selects the first class if no class is selected initially', () => {
+    render(
+      <ClassSelectionMenu
+        selectedCls={null}
+        regionClsList={mockRegionClsList}
+        regionColorList={mockRegionColorList}
+        onSelectCls={mockOnSelectCls}
+        regions={mockRegions}
+      />
+    );
+    expect(mockOnSelectCls).toHaveBeenCalledWith('class1');
+  });
+});

client/src/FilesListMenu/FilesListMenu.test.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import FilesListMenu from './index';
+import '@testing-library/jest-dom';
+
+// Mock images data
+const mockAllImages = [
+  { name: 'Image1', processed: false },
+  { name: 'Image2', processed: true },
+  { name: 'Image3', processed: false }
+];
+
+// Mock the useTranslation hook
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: key => ({
+      "menu.images": "Images",
+    }[key]),
+  }),
+}));
+
+describe('FilesListMenu', () => {
+  const state = {
+    "annotationType": "image",
+    "showTags": true,
+    "selectedTool": "create-polygon",
+    "mode": null,
+    "taskDescription": "dgdg",
+    "settings": {
+        "taskDescription": "dgdg",
+        "taskChoice": "image_segmentation",
+        "images": [
+            {
+                "src": "http://127.0.0.1:5000/uploads/clothes.jpeg",
+                "name": "clothes",
+                "selectedClsList": "",
+                "comment": "",
+                "processed": false
+            }
+        ],
+        "dataTask": null,
+        "configuration": {
+            "labels": [
+                {
+                    "id": "dfgd"
+                },
+                {
+                    "id": "dfg"
+                }
+            ],
+            "multipleRegions": true,
+            "multipleRegionLabels": true,
+            "regionTypesAllowed": [
+                "polygon",
+                "bounding-box",
+                "circle"
+            ]
+        }
+    },
+    "labelImages": false,
+    "regionClsList": [
+        "dfgd",
+        "dfg"
+    ],
+    "regionColorList": [],
+    "preselectCls": null,
+    "regionTagList": [],
+    "imageClsList": [],
+    "imageTagList": [],
+    "currentVideoTime": 0,
+    "enabledTools": [
+        "create-box",
+        "create-polygon",
+        "create-circle"
+    ],
+    "history": [],
+    "enabledRegionProps": [
+        "class",
+        "comment"
+    ],
+    "selectedImage": 0,
+    "images": [
+        {
+            "src": "http://127.0.0.1:5000/uploads/clothes.jpeg",
+            "name": "clothes",
+            "selectedClsList": [
+                "dfgd"
+            ],
+            "comment": "",
+            "processed": false
+        }
+    ],
+    "lastAction": {
+        "type": "SELECT_IMAGE",
+        "imageIndex": 0,
+        "image": {
+            "src": "http://127.0.0.1:5000/uploads/clothes.jpeg",
+            "name": "clothes",
+            "selectedClsList": [
+                "dfgd"
+            ],
+            "comment": "",
+            "processed": false
+        }
+    },
+    "selectedCls": "dfgd",
+    "lastMouseMoveCall": 1718142223586
+}
+  it('renders correctly', () => {
+    const onSelectJumpMock = jest.fn();
+    const saveActiveImageMock = jest.fn();
+    const onClickMock = jest.fn();
+
+    const { getByText, getAllByTestId } = render(
+      <FilesListMenu
+        state={state}
+        selectedImage={'image1'}
+        allImages={mockAllImages}
+        onSelectJump={onSelectJumpMock}
+        saveActiveImage={saveActiveImageMock}
+        onClick={onClickMock}
+      />
+    );
+
+    // Check if the component title is rendered
+    expect(getByText(/Images \[3\]/)).toBeInTheDocument();
+
+    // Check if each image name is rendered
+    mockAllImages.forEach(image => {
+      expect(getByText(image.name)).toBeInTheDocument();
+    });
+
+    // Check if checkboxes are rendered for each image
+    const checkboxes = getAllByTestId('checkbox');
+    expect(checkboxes).toHaveLength(mockAllImages.length);
+
+    // Simulate click on an image
+    fireEvent.click(getByText('Image1'));
+
+    // Check if the onClick callback is called with the correct arguments
+    expect(onClickMock).toHaveBeenCalledWith({"activeImage": {"comment": "", "name": "clothes", "processed": false, "selectedClsList": ["dfgd"], "src": "http://127.0.0.1:5000/uploads/clothes.jpeg"}, "currentImageIndex": 0, "pathToActiveImage": ["images", 0]});
+
+    // Check if the onSelectJump and saveActiveImage callbacks are called with the correct arguments
+    expect(onSelectJumpMock).toHaveBeenCalledWith('Image1');
+    expect(saveActiveImageMock).toHaveBeenCalledWith({"comment": "", "name": "clothes", "processed": false, "selectedClsList": ["dfgd"], "src": "http://127.0.0.1:5000/uploads/clothes.jpeg"});
+  });
+});

client/src/FilesListMenu/index.jsx

@@ -97,6 +97,7 @@ export const FilesListMenu = ({
                 color: image.processed ? 'green' : '', // Set color conditionally
               },
             }}
+            data-testid="checkbox"
           />
             <span style={index === selectedImage? {backgroundColor: "rgba(255, 124, 120, 0.5)"} : {}}>
               <Label className={classnames({ selected: image.name === selectedImage })} style={ { backgroundColor: "withe" }}>

client/src/HistorySidebarBox/HistorySidebarBox.test.js

@@ -0,0 +1,68 @@
+import React from "react"
+import { render, fireEvent, screen } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import { HistorySidebarBox } from "./index"
+
+
+// Mock the useTranslation hook
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({
+      t: key => ({
+        "menu.history": "History",
+        "no.history": "No History Yet",
+      }[key]),
+    }),
+  }));
+
+describe("HistorySidebarBox", () => {
+  const history = [
+    { name: "History 1", time: new Date("2022-06-15T12:00:00Z") },
+    { name: "History 2", time: new Date("2022-06-16T12:00:00Z") },
+  ]
+
+  it("renders empty text when there is no history", () => {
+    const { getByText } = render(<HistorySidebarBox history={[]} />)
+    expect(getByText("No History Yet")).toBeInTheDocument()
+  })
+
+  it("renders each history item correctly", () => {
+    const mockHistory = [
+        { name: "History 1", time: new Date("2021-08-01T12:00:00Z") },
+        { name: "History 2", time: new Date("2021-08-01T12:00:00Z") },
+      ];
+
+    render(
+      <HistorySidebarBox
+        history={mockHistory}
+        onRestoreHistory={() => {}}
+      />
+    );
+
+    // Check if each history item name is rendered
+    mockHistory.forEach((item) => {
+      expect(screen.getByText(item.name)).toBeInTheDocument();
+    });
+
+    // Check if each history item time is rendered using a more direct query
+    mockHistory.forEach((item) => {
+        const formattedTime = item.time.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+
+        // Find all p elements and check if their textContent matches the formatted time
+        const timeElements = screen.getAllByRole('listitem').map(listItem => listItem.querySelector('p'));
+        const hasFormattedTime = timeElements.some(p => p.textContent === formattedTime);
+        expect(hasFormattedTime).toBe(true);
+      });
+
+    // Check if the undo icon is rendered
+    expect(screen.getByTestId("undo-icon")).toBeInTheDocument();
+  });
+
+  it("calls onRestoreHistory when undo icon is clicked for the first history item", () => {
+    const onRestoreHistoryMock = jest.fn()
+    const { getByTestId } = render(
+      <HistorySidebarBox history={history} onRestoreHistory={onRestoreHistoryMock} />
+    )
+    fireEvent.click(getByTestId("undo-icon"))
+    expect(onRestoreHistoryMock).toHaveBeenCalledTimes(2)
+  })
+})

client/src/HistorySidebarBox/index.jsx

@@ -57,7 +57,7 @@ export const HistorySidebarBox = ({
               {i === 0 && (
                 <ListItemSecondaryAction onClick={() => onRestoreHistory()}>
                   <Grid item xs={1}  onClick={() => onRestoreHistory()}>
-                    <UndoIcon sx={{ fontSize: 14 }} />
+                    <UndoIcon sx={{ fontSize: 14 }}  data-testid="undo-icon"/>
                   </Grid>
                 </ListItemSecondaryAction>
               )}