added test case for download button

client/babel.config.json

@@ -0,0 +1,5 @@
+{
+    "presets": [
+      "@babel/preset-env"
+    ]
+}

client/config.js

@@ -1,7 +1,16 @@
 
+let VITE_SERVER_URL;
+
+if (typeof import.meta !== 'undefined' && import.meta.env) {
+  VITE_SERVER_URL = import.meta.env.VITE_SERVER_URL;
+} else {
+  VITE_SERVER_URL = process.env.VITE_SERVER_URL || "http://localhost:5000";
+}
+
 const config = {
-    demoSiteUrl:"https://annotate-docs.dwaste.live/" 
+    DEMO_SITE_URL:"https://annotate-docs.dwaste.live/",
+    VITE_SERVER_URL
   };
 
-  export default config;
+export default config;
 

client/src/DemoSite/index.jsx

@@ -161,7 +161,7 @@ export default () => {
         const updatedIndex = (selectedImageIndex - 1 + imageNames.length) % imageNames.length
         changeSelectedImageIndex(isNaN(updatedIndex ) ? 0 : updatedIndex)
       }}
-      openDocs={() => window.open(config.demoSiteUrl, '_blank')}
+      openDocs={() => window.open(config.DEMO_SITE_URL, '_blank')}
       hideSettings={true}
       disabledNextAndPrev={settings.images.length <= 1}
       selectedImageIndex={selectedImageIndex}

client/src/SetupPage/SetupPage.test.js

@@ -11,6 +11,11 @@ jest.mock('react-i18next', () => ({
   }),
 }));
 
+jest.mock('../../config.js', () => ({
+  DEMO_SITE_URL: "https://annotate-docs.dwaste.live/",
+  VITE_SERVER_URL: "http://localhost:5000",
+}));
+
 // Mock useSettings hook
 jest.mock('../SettingsProvider', () => ({
   useSettings: jest.fn(),

client/src/SetupPage/index.jsx

@@ -111,7 +111,7 @@ export const SetupPage = ({setConfiguration, settings, setShowLabel}) => {
                   <NoteSection 
                   icon={Info} 
                   text={t("more_info")} 
-                  link={config.demoSiteUrl} 
+                  link={config.DEMO_SITE_URL} 
                 />
                   <Box display="flex" paddingTop="5rem" justifyContent="end">
                         <Button variant="contained" disabled={settings.taskDescription.trim().length <= 0} onClick={() => setTab("configure")} disableElevation>

client/src/utils/get-data-from-server.js

@@ -1,7 +1,8 @@
 import axios from 'axios'
+import config from '../../config'
 export const getImages = () => {
 
-    const promise = axios.get(`${import.meta.env.VITE_SERVER_URL}/imagesInfo`)
+    const promise = axios.get(`${config.VITE_SERVER_URL}/imagesInfo`)
 
     // using .then, create a new promise which extracts the data
     const dataPromise = promise.then((response) => response.data)
@@ -12,7 +13,7 @@ export const getImages = () => {
 
 export const getImageFile = (api, config) => {
     return new Promise((resolve, reject) => {
-      axios.post(`${import.meta.env.VITE_SERVER_URL}/${api}`, config, { responseType: 'blob' })
+      axios.post(`${config.VITE_SERVER_URL}/${api}`, config, { responseType: 'blob' })
         .then(response => {
             const url = window.URL.createObjectURL(new Blob([response.data]));
             resolve(url);
@@ -26,7 +27,7 @@ export const getImageFile = (api, config) => {
 
 export const clear_db = () => {
   return new Promise((resolve, reject) => {
-    axios.post(`${import.meta.env.VITE_SERVER_URL}/clearSession`)
+    axios.post(`${config.VITE_SERVER_URL}/clearSession`)
       .then(response => {
         resolve(response.data);
       })

client/src/workspace/DownloadButton/DownloadButton.test.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import DownloadButton from './index';
+import '@testing-library/jest-dom';
+
+// Mock the SnackbarContext
+jest.mock('../../SnackbarContext/index.jsx', () => ({
+  useSnackbar: () => ({
+    showSnackbar: jest.fn(),
+  }),
+}));
+
+jest.mock('../../../config.js', () => ({
+    DEMO_SITE_URL: "https://annotate-docs.dwaste.live/",
+    VITE_SERVER_URL: "http://localhost:5000",
+  }));
+
+
+// Mock the useTranslation hook with actual translations
+jest.mock('react-i18next', () => ({
+    useTranslation: () => ({
+        t: key => ({
+            "btn.download": "Download",
+            "download.configuration": "Download Configuration",
+            "download.image_mask": "Download Masked Image",
+        }[key]),
+    }),
+}));
+
+describe('DownloadButton', () => {
+  it('should handle download when clicked on menu items', async () => {
+    const mockHandleDownload = jest.fn();
+    const selectedImageName = 'example.png';
+    const classList = ['class1', 'class2', 'class3']; // Example class list
+
+    const getImageFileSpy = jest.spyOn(require('../../utils/get-data-from-server.js'), 'getImageFile');
+
+    const { getByText } = render(
+      <DownloadButton
+        selectedImageName={selectedImageName}
+        classList={classList}
+        hideHeaderText={false}
+        disabled={false}
+        handleDownload={mockHandleDownload}
+      />
+    );
+
+    fireEvent.click(getByText('Download')); // Open the menu
+
+    await waitFor(() => {
+      expect(getByText('Download Configuration')).toBeInTheDocument(); // Ensure menu is still open
+    });
+
+    // Click on the menu item for configuration download
+    fireEvent.click(getByText('Download Configuration'));
+    await waitFor(() => {
+      expect(getImageFileSpy).toBeCalledTimes(1)
+    });
+
+  });
+
+});
+
+