React Component Testing for ImageCard and SideBar added

view_generator_serv/.babelrc

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

view_generator_serv/package.json

@@ -28,7 +28,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -48,5 +48,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@faker-js/faker": "^8.4.1",
+    "jest-mock-axios": "^4.7.3",
+    "react-test-renderer": "^18.3.1"
   }
 }

view_generator_serv/setup.js

@@ -0,0 +1,4 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';

view_generator_serv/src/components/Sidebar.jsx

@@ -27,7 +27,7 @@ function Sidebar(props) {
     }
 
     getStorageUsed();
-  }, [props.usedStorage]); 
+  }, [props.usedStorage]);
 
   const handleLogout = () => {
     logout();
@@ -69,7 +69,7 @@ function Sidebar(props) {
         <HStack w="100%">
           <Icon as={MdStorage} aria-label="Usage Monitoring" variant="ghost" color="white" m="3" />
           <Tooltip label={`${storageUsed / 1000000} MB used`} aria-label="A tooltip" placement="top">
-            <Progress colorScheme={progressBarColor} size='lg' value={storageUsed / totalStorage * 100} w="full" mr="3" borderRadius="10" />
+            <Progress aria-label='ProgressBar' colorScheme={progressBarColor} size='lg' value={storageUsed / totalStorage * 100} w="full" mr="3" borderRadius="10" />
           </Tooltip>
         </HStack>
         <Button leftIcon={<VscSignOut />} bg="white" color="gray.900" onClick={handleLogout} w="full">

view_generator_serv/src/components/__test__/ImageCard.test.jsx

@@ -0,0 +1,45 @@
+// ImageCard.test.jsx
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import ImageCard from '../ImageCard';
+
+const mockProps = {
+    id: '1',
+    imageName: 'Test Image',
+    imageUri: 'http://test.com/image.jpg',
+    imageSize: 1024,
+    onRename: jest.fn(),
+    onDownload: jest.fn(),
+    onDelete: jest.fn(),
+};
+
+describe('ImageCard', () => {
+    beforeEach(() => {
+        render(<ImageCard {...mockProps} />);
+    });
+
+    it('renders image name', () => {
+        expect(screen.getByText(mockProps.imageName)).toBeTruthy();
+    });
+
+    it('renders image size', () => {
+        expect(screen.getByText('1.00 KB')).toBeTruthy();
+    });
+
+    it('calls onRename when save is clicked', () => {
+        fireEvent.click(screen.getByText('Rename'));
+        fireEvent.change(screen.getByRole('textbox'), { target: { value: 'New Name' } });
+        fireEvent.click(screen.getByText('Save'));
+        expect(mockProps.onRename).toHaveBeenCalledWith(mockProps.id, 'New Name');
+    });
+
+    it('calls onDownload when download is clicked', () => {
+        fireEvent.click(screen.getByText('Download'));
+        expect(mockProps.onDownload).toHaveBeenCalledWith(mockProps.id);
+    });
+
+    it('calls onDelete when delete is clicked', () => {
+        fireEvent.click(screen.getByText('Delete'));
+        expect(mockProps.onDelete).toHaveBeenCalledWith(mockProps.id);
+    });
+});

view_generator_serv/src/components/__test__/Sidebar.test.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { useAuthContext } from '../../hooks/useAuthContext';
+import { useLogout } from '../../hooks/useLogout';
+import Sidebar from '../Sidebar';
+import axios from 'axios';
+
+jest.mock('../../hooks/useAuthContext');
+jest.mock('../../hooks/useLogout');
+jest.mock('axios');
+
+describe('Sidebar', () => {
+    beforeEach(() => {
+        useAuthContext.mockReturnValue({
+            user: {
+                _id: '123',
+                username: 'testuser',
+                email: '[email protected]'
+            }
+        });
+
+        useLogout.mockReturnValue({
+            logout: jest.fn()
+        });
+
+        axios.get.mockResolvedValue({
+            data: {
+                usedStorage: 5000000,
+                totalStorage: 10000000
+            }
+        });
+    });
+
+    it('renders user information correctly', async () => {
+        const { getByText } = render(<Router><Sidebar /></Router>);
+        await waitFor(() => expect(getByText('testuser')).toBeInTheDocument());
+        expect(getByText('[email protected]')).toBeInTheDocument();
+    });
+
+    it('renders storage usage correctly', async () => {
+        render(<Router><Sidebar /></Router>);
+
+        // Find the Progress component using its aria-label
+        const progressBar = screen.getByRole("progressbar");
+        expect(progressBar).toBeInTheDocument();
+
+        // Wait until the aria-valuenow attribute is "50"
+        await waitFor(() => {
+            expect(progressBar).toHaveAttribute('aria-valuenow', '50');
+        });
+    });
+
+    it('handles error when fetching storage data', async () => {
+        const error = new Error('Network Error');
+        axios.get.mockRejectedValue(error);
+        console.error = jest.fn();
+
+        render(<Router><Sidebar /></Router>);
+        await waitFor(() => expect(console.error).toHaveBeenCalledWith(error));
+    });
+
+    it('calls logout function when sign out button is clicked', async () => {
+        const { getByText } = render(<Router><Sidebar /></Router>);
+        fireEvent.click(getByText('Sign Out'));
+        expect(useLogout().logout).toHaveBeenCalled();
+    });
+});