Unit test1

package.json

@@ -23,6 +23,7 @@
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.1.1",

src/App.jsx

@@ -1,5 +1,5 @@
 import { useAuthState } from './utilities/firebase';
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
+import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -45,7 +45,7 @@ const App = () => {
 
             <Navigationbar />
           </>
-        )}
+        )}        
       </div>
     </Router>
   );

src/App.test.jsx

@@ -1,19 +1,50 @@
-import {describe, expect, test} from 'vitest';
+import { describe, it, expect, vi,  test} from 'vitest';
 import {fireEvent, render, screen} from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import '@testing-library/jest-dom';  // Import jest-dom matchers
+
+import { BrowserRouter as Router } from 'react-router-dom';
 import App from './App';
+import RequestFormPage from './components/pages/RequestForm';
+import HomePage from './components/pages/HomePage';
 
-describe('counter tests', () => {
-
-  test("Counter should be 0 at the start", () => {
-    render(<App />);
-    expect(screen.getByText('count is: 0')).toBeDefined();
-  });
+describe('RequestFormPage', () => {
+  test('displays Meet Up textbox when Meet up option is selected', () => {
+    render(
+      <Router>
+        <RequestFormPage />
+      </Router>
+    );
+    const pickUpCheckbox = screen.getByTestId('checkbox-Meet up');
+    fireEvent.click(pickUpCheckbox);
+    expect(pickUpCheckbox.checked).toBe(true);
+    screen.getByLabelText('Meet-up Location:');
 
-  test("Counter should increment by one when clicked", async () => {
-    render(<App />);
-    const counter = screen.getByRole('button');
-    fireEvent.click(counter);
-    expect(await screen.getByText('count is: 1')).toBeDefined();
-  });
+    const input = screen.getByPlaceholderText(/Enter location/i)
+    expect(input).toBeInTheDocument();
+
+  })
+
+})
 
-});
+describe('send text from home page to request form', () => {
+  it('should send the text in the textbox to the textbox on the request form', () => {
+    render(
+      <MemoryRouter initialEntries={['/']}>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/requestform" element={<RequestFormPage />} />
+        </Routes>
+      </MemoryRouter>
+    );
+    const input = screen.getByPlaceholderText(/How can your neighbors help?/i);
+    fireEvent.change(input, { target: { value: 'I need a hammer!' } });
+
+    const submitButton = screen.getByText(/Submit/i);
+    fireEvent.click(submitButton);
+
+    expect(screen.getByText(/New Request/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Description/i)).toHaveValue('I need a hammer!');
+  });
+
+})

src/RequestForm.test.jsx

@@ -0,0 +1,87 @@
+import { describe, it, vi, beforeEach, afterEach, expect } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { RequestForm } from './components/Form.jsx';
+import '@testing-library/jest-dom';
+
+vi.mock('react-router-dom', async (importOriginal) => {
+  const actual = await importOriginal(); // Import the original module
+  return {
+    ...actual,
+    useNavigate: vi.fn(), // Mock only the useNavigate function
+  };
+});
+
+import { MemoryRouter, useNavigate } from 'react-router-dom'; // Import after the mock
+
+describe('RequestForm Component', () => {
+  let mockSetDescription, mockSetTimer, mockSetDeliveryPref, mockSetMeetUpLocation, mockOnClick, mockNavigate;
+
+  beforeEach(() => {
+    mockSetDescription = vi.fn();
+    mockSetTimer = vi.fn();
+    mockSetDeliveryPref = vi.fn();
+    mockSetMeetUpLocation = vi.fn();
+    mockOnClick = vi.fn();
+    mockNavigate = vi.fn();
+    useNavigate.mockReturnValue(mockNavigate); // Correctly mock the useNavigate hook
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  const renderComponent = (deliveryPref = [], meetUpLocation = '') => {
+    render(
+      <MemoryRouter>
+        <RequestForm
+          data={{ description: '', meet_up_loc: meetUpLocation }}
+          setDescription={mockSetDescription}
+          setTimer={mockSetTimer}
+          deliveryPref={deliveryPref}
+          setDeliveryPref={mockSetDeliveryPref}
+          setMeetUpLocation={mockSetMeetUpLocation}
+          onClick={mockOnClick}
+        />
+      </MemoryRouter>
+    );
+  };
+
+  it('renders description input', () => {
+    renderComponent();
+    expect(screen.getByPlaceholderText(/how can your neighbors help/i)).toBeInTheDocument();
+  });
+
+  it('renders post expiration section', () => {
+    renderComponent();
+    expect(screen.getByText(/post expiration/i)).toBeInTheDocument();
+  });
+
+  it('renders delivery preference section', () => {
+    renderComponent();
+    expect(screen.getByText(/delivery preference/i)).toBeInTheDocument();
+  });
+
+  it('shows Meet Up textbox when "Meet Up" option is selected', () => {
+    renderComponent(['Meet up']); // Pass 'Meet up' as a selected delivery option
+    expect(screen.getByLabelText(/Meet-up Location/i)).toBeInTheDocument();
+  });
+
+  it('does not show Meet Up textbox when "Meet Up" option is not selected', () => {
+    renderComponent(['Pick up']); // Pass a different option
+    expect(screen.queryByLabelText(/meet up location/i)).not.toBeInTheDocument();
+  });
+
+  it('triggers the Cancel button navigation', () => {
+    renderComponent();
+    const cancelButton = screen.getByText(/cancel/i);
+    fireEvent.click(cancelButton);
+    expect(mockNavigate).toHaveBeenCalledWith('/');
+  });
+
+  it('triggers the Submit button handler', () => {
+    renderComponent();
+    const submitButton = screen.getByText(/submit/i);
+    fireEvent.click(submitButton);
+    expect(mockOnClick).toHaveBeenCalled();
+  });
+});

src/components/Form.jsx

@@ -221,12 +221,14 @@ const MultiSelect = ({deliveryPref, setDeliveryPref, meetUp, setMeetUpLocation})
                     label={option}
                     checked={deliveryPref.includes(option)}
                     onChange={() => handleSelect(option)} // Handle checkbox change
+                    data-testid={`checkbox-${option}`}
                 />
             ))}
             {deliveryPref.includes('Meet up') && (
                 <Form.Group className="mt-3">
-                    <Form.Label>Meet-up Location:</Form.Label>
+                    <Form.Label htmlFor="meetUpLocation">Meet-up Location:</Form.Label>
                     <Form.Control
+                        id="meetUpLocation"
                         type="text"
                         placeholder="Enter location"
                         value={meetUp} // Updated to use meetUpLocation