Added configs for Jest library with typescript and written test cases…

… for DonorForm

client-app/jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  verbose: true,
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ["<rootDir>/src"],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy'
+  }
+};

client-app/package.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.13",
     "autoprefixer": "^10.4.17",
     "axios": "^1.6.7",
     "bcryptjs": "^2.4.3",
@@ -20,6 +21,8 @@
     "express": "^4.18.2",
     "express-validator": "^7.0.1",
     "html2canvas": "^1.4.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-localstorage-mock": "^2.4.26",
     "jsonwebtoken": "^9.0.2",
     "mdbreact": "^5.2.0",
@@ -34,14 +37,17 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.22.1",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
     "url": "^0.11.3",
     "util": "^0.12.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "concurrently \"react-scripts start\" \"cd backend && nodemon server\"",
     "build": "react-scripts build",
-    "test": "react-scripts test && ./node_modules/.bin/react-scripts test",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -68,7 +74,6 @@
     "@types/node": "^22.5.4",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "jest": "^27.5.1",
     "nodemon": "^3.0.3",
     "react-scripts": "^5.0.1",
     "supertest": "^6.3.4",

client-app/src/Components/DonorForm.tsx

@@ -181,7 +181,7 @@ const DonorForm: React.FC = () => {
                 {renderFormField('First Name', 'firstName')}
                 {renderFormField('Last Name', 'lastName')}
                 {renderFormField('Contact', 'contact')}
-                {renderFormField('Email', 'email', 'email')}
+                {renderFormField('Email ID', 'email', 'email')}
                 {renderFormField('Address Line 1', 'addressLine1')}
                 {renderFormField(
                     'Address Line 2',

client-app/src/__tests__/DonorForm.test.tsx

@@ -0,0 +1,132 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+import { act } from '@testing-library/react';
+import DonorForm from '../Components/DonorForm';
+
+jest.mock('axios');
+const mockedAxios = axios as jest.Mocked<typeof axios>;
+
+describe('DonorForm', () => {
+  beforeEach(() => {
+    // Reset mocks before each test
+    mockedAxios.post.mockReset();
+  });
+
+  it('renders correctly', () => {
+    render(<DonorForm />);
+    expect(screen.getByText(/Add Donor Details/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/First Name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Last Name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Contact/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Email ID/)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Address Line 1/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/State/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/City/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Zip Code/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Email Opt-in/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Add Donor/i })).toBeInTheDocument();
+  });
+
+  it('allows input to be entered', () => {
+    render(<DonorForm />);
+    const firstNameInput = screen.getByLabelText(/First Name/i);
+    act(() => {
+      userEvent.type(firstNameInput, 'John');
+    });
+
+    expect(firstNameInput).toHaveValue('John');
+  });
+
+  it('validates and submits the form data', async () => {
+    render(<DonorForm />);
+    const submitButton = screen.getByRole('button', { name: /Add Donor/i });
+    act(() => {
+      // Fill out the form
+      userEvent.type(screen.getByLabelText(/First Name/i), 'John');
+      userEvent.type(screen.getByLabelText(/Last Name/i), 'Doe');
+      userEvent.type(screen.getByLabelText(/Contact/i), '1234567890');
+      userEvent.type(screen.getByLabelText(/Email ID/), '[email protected]');
+      userEvent.type(screen.getByLabelText(/Address Line 1/i), '1234 Main St');
+      userEvent.type(screen.getByLabelText(/State/i), 'State');
+      userEvent.type(screen.getByLabelText(/City/i), 'City');
+      userEvent.type(screen.getByLabelText(/Zip Code/i), '12345');
+      userEvent.click(screen.getByLabelText(/Email Opt-in/i));
+    })
+
+    // Set up axios mock to simulate successful form submission
+    mockedAxios.post.mockResolvedValue({ status: 201 });
+
+    act(() => {
+      // Click submit
+      userEvent.click(submitButton);
+    })
+
+    await waitFor(() => {
+      expect(mockedAxios.post).toHaveBeenCalledWith(
+        `${process.env.REACT_APP_BACKEND_API_BASE_URL}donor`,
+        {
+          firstName: 'John',
+          lastName: 'Doe',
+          contact: '1234567890',
+          email: '[email protected]',
+          addressLine1: '1234 Main St',
+          addressLine2: '',
+          state: 'State',
+          city: 'City',
+          zipcode: '12345',
+          emailOptIn: true,
+        },
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText(/Donor added successfully!/i)).toBeInTheDocument();
+    });
+  });
+
+  it('displays an error message on submission failure', async () => {
+    render(<DonorForm />);
+    act(() => {
+      userEvent.type(screen.getByLabelText(/First Name/i), 'John');
+      userEvent.type(screen.getByLabelText(/Last Name/i), 'Doe');
+      userEvent.type(screen.getByLabelText(/Contact/i), '1234567890');
+      userEvent.type(screen.getByLabelText(/Email ID/), '[email protected]');
+      userEvent.type(screen.getByLabelText(/Address Line 1/i), '1234 Main St');
+      userEvent.type(screen.getByLabelText(/State/i), 'State');
+      userEvent.type(screen.getByLabelText(/City/i), 'City');
+      userEvent.type(screen.getByLabelText(/Zip Code/i), '12345');
+      userEvent.click(screen.getByLabelText(/Email Opt-in/i));
+    })
+
+    // Mock failure response
+    mockedAxios.post.mockRejectedValue({
+      response: {
+        data: {
+          message: 'Error adding donor'
+        }
+      }
+    });
+
+    act(() => {
+      userEvent.click(screen.getByRole('button', { name: /Add Donor/i }));
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/Error adding donor/i)).toBeInTheDocument();
+    });
+  });
+
+  it('shows validation errors when fields are incomplete', async () => {
+    render(<DonorForm />);
+    act(() => {
+      userEvent.click(screen.getByRole('button', { name: /Add Donor/i }));
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/First Name is required/i)).toBeInTheDocument();
+    });
+  });
+});
+

client-app/src/globals.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";