From a09a0ec25125eb9025a9b2fd8c49af6779a8156f Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Tue, 11 Jun 2024 13:28:22 -0500
Subject: [PATCH 1/2] added test case for download button

---
 client/babel.config.json                      |  5 ++
 client/config.js                              |  5 +-
 client/src/DemoSite/index.jsx                 |  2 +-
 client/src/SetupPage/index.jsx                |  2 +-
 client/src/utils/get-data-from-server.js      |  7 ++-
 .../DownloadButton/DownloadButton.test.js     | 58 +++++++++++++++++++
 6 files changed, 72 insertions(+), 7 deletions(-)
 create mode 100644 client/babel.config.json
 create mode 100644 client/src/workspace/DownloadButton/DownloadButton.test.js

diff --git a/client/babel.config.json b/client/babel.config.json
new file mode 100644
index 0000000..38f5094
--- /dev/null
+++ b/client/babel.config.json
@@ -0,0 +1,5 @@
+{
+    "presets": [
+      "@babel/preset-env"
+    ]
+}
\ No newline at end of file
diff --git a/client/config.js b/client/config.js
index baaebd2..93c399a 100644
--- a/client/config.js
+++ b/client/config.js
@@ -1,7 +1,8 @@
 
 const config = {
-    demoSiteUrl:"https://annotate-docs.dwaste.live/" 
+    DEMO_SITE_URL:"https://annotate-docs.dwaste.live/",
+    VITE_SERVER_URL: "http://localhost:5000",
   };
   
-  export default config;
+export default config;
   
\ No newline at end of file
diff --git a/client/src/DemoSite/index.jsx b/client/src/DemoSite/index.jsx
index fec7db8..29767ec 100644
--- a/client/src/DemoSite/index.jsx
+++ b/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}
diff --git a/client/src/SetupPage/index.jsx b/client/src/SetupPage/index.jsx
index 87c425e..54f8dd3 100644
--- a/client/src/SetupPage/index.jsx
+++ b/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>
diff --git a/client/src/utils/get-data-from-server.js b/client/src/utils/get-data-from-server.js
index e988e1d..e7d3746 100644
--- a/client/src/utils/get-data-from-server.js
+++ b/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);
       })
diff --git a/client/src/workspace/DownloadButton/DownloadButton.test.js b/client/src/workspace/DownloadButton/DownloadButton.test.js
new file mode 100644
index 0000000..b4691aa
--- /dev/null
+++ b/client/src/workspace/DownloadButton/DownloadButton.test.js
@@ -0,0 +1,58 @@
+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(),
+  }),
+}));
+
+// 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)
+    });
+
+  });
+
+});
+
+

From 5c738b590c0ff13eded9ec615d47f1059229ae7b Mon Sep 17 00:00:00 2001
From: sumn2u <sumn2u@gmail.com>
Date: Tue, 11 Jun 2024 13:43:22 -0500
Subject: [PATCH 2/2] use environment or configuration endpoint

---
 client/config.js                                       | 10 +++++++++-
 client/src/SetupPage/SetupPage.test.js                 |  5 +++++
 .../workspace/DownloadButton/DownloadButton.test.js    |  6 ++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/client/config.js b/client/config.js
index 93c399a..a832314 100644
--- a/client/config.js
+++ b/client/config.js
@@ -1,7 +1,15 @@
 
+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 = {
     DEMO_SITE_URL:"https://annotate-docs.dwaste.live/",
-    VITE_SERVER_URL: "http://localhost:5000",
+    VITE_SERVER_URL
   };
   
 export default config;
diff --git a/client/src/SetupPage/SetupPage.test.js b/client/src/SetupPage/SetupPage.test.js
index aaa1382..08bda4f 100644
--- a/client/src/SetupPage/SetupPage.test.js
+++ b/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(),
diff --git a/client/src/workspace/DownloadButton/DownloadButton.test.js b/client/src/workspace/DownloadButton/DownloadButton.test.js
index b4691aa..9f67428 100644
--- a/client/src/workspace/DownloadButton/DownloadButton.test.js
+++ b/client/src/workspace/DownloadButton/DownloadButton.test.js
@@ -10,6 +10,12 @@ jest.mock('../../SnackbarContext/index.jsx', () => ({
   }),
 }));
 
+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: () => ({