ECE/CSC 517 Spring 2025 Group E2534 Final Project: UI for Assign Reviewers

README.md

@@ -44,3 +44,7 @@ You don’t have to ever use `eject`. The curated feature set is suitable for sm
 You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
+
+## 📋 Documentation
+- [Unit Test Plan](./UnitTestPlan.md)
+

UnitTestPlan.md

@@ -0,0 +1,10 @@
+# Unit Tests
+
+Unit testing for TS/front end projects is most applicable for logic-heavy components, which in the case of our project includes the button functionality. The following test cases were included:
+
+- Validating that the "Add Reviewer" button adds a new reviewer with a status of "Pending".
+- Validating that the "Delete outstanding Reviewers" button removes the reviewer's association from the topic.
+- Ensure that all table columns — "Topic Selected," "Contributor," and "Reviewed By" — display accurate and consistent data for each assignment.
+- Verify that any modifications to reviewers (adding, deleting, or unassigning) are properly reflected in the user interface.
+- Confirm that unsubmitting a review does not remove the reviewer, only changes their status to (Pending).
+-Validate that the "Add Reviewer" button is not rendered once the maximum number of reviewers (3) has been reached for a topic.

package.json

@@ -13,14 +13,13 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.29",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.1.1",
-    "recharts": "^2.0.0",
     "formik": "^2.2.9",
     "jquery": "^3.7.1",
     "jwt-decode": "^3.1.2",
@@ -34,6 +33,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.11.1",
     "react-scripts": "^5.0.1",
+    "recharts": "^2.0.0",
     "redux-persist": "^6.0.0",
     "sass": "^1.62.1",
     "save": "^2.9.0",

src/AddReviewer.test.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import AddReviewer from 'pages/Assignments/AddReviewer';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { TopicWithReviewers } from 'utils/interfaces';
+
+// Mock useNavigate and useReviewerContext
+const mockNavigate = jest.fn();
+const mockAddReviewerToTopic = jest.fn();
+
+const mockTopics: TopicWithReviewers[] = [
+  {
+    topic_identifier: 'topic-123',
+    topic_name: 'Cool Topic',
+    contributors: [{
+        name: 'Alice',
+        id: 0,
+        type: 'AssignmentTeam',
+        users: [],
+        reviewMappings: []
+    }],
+    reviewers: [],
+  },
+];
+
+// Mock the ReviewerContext
+jest.mock('context/ReviewerContext', () => ({
+  useReviewerContext: () => ({
+    topics: mockTopics,
+    addReviewerToTopic: mockAddReviewerToTopic,
+  }),
+}));
+
+// Mock react-router-dom
+jest.mock('react-router-dom', () => {
+  const actual = jest.requireActual('react-router-dom');
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+    useParams: () => ({ id: '999' }),
+  };
+});
+
+// Utility to render component with query params
+const renderWithSearchParams = (params: Record<string, string>) => {
+  const queryString = new URLSearchParams(params).toString();
+  const path = `/assignments/edit/999/add-reviewer?${queryString}`;
+
+  return render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path="/assignments/edit/:id/add-reviewer" element={<AddReviewer />} />
+      </Routes>
+    </MemoryRouter>
+  );
+};
+
+describe('AddReviewer Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders contributor and assignment from query params', () => {
+    renderWithSearchParams({
+      contributor: 'Alice',
+      assignment: 'Math Assignment',
+      topic: 'Cool Topic',
+      contributor_id: '42',
+    });
+
+    expect(screen.getByText('Contributor: Alice')).toBeInTheDocument();
+    expect(screen.getByText('Assignment: Math Assignment')).toBeInTheDocument();
+  });
+
+  test('adds a reviewer and calls context + navigation', () => {
+    renderWithSearchParams({
+      contributor: 'Alice',
+      assignment: 'Math Assignment',
+      topic: 'Cool Topic',
+      contributor_id: '42',
+    });
+
+    fireEvent.change(screen.getByLabelText(/user login/i), {
+      target: { value: 'newuser' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /add reviewer/i }));
+
+    expect(mockAddReviewerToTopic).toHaveBeenCalledWith('Cool Topic', expect.objectContaining({
+      reviewer: expect.objectContaining({ name: 'newuser' }),
+      review_status: 'Pending',
+    }));
+
+    expect(mockNavigate).toHaveBeenCalledWith('/assignments/edit/999/assignreviewer');
+  });
+
+  test('does not submit if topic is missing', () => {
+    renderWithSearchParams({
+      contributor: 'Alice',
+      assignment: 'Math Assignment',
+      contributor_id: '42',
+      // topic is intentionally missing
+    });
+
+    fireEvent.change(screen.getByLabelText(/user login/i), {
+      target: { value: 'userX' },
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: /add reviewer/i }));
+
+    expect(mockAddReviewerToTopic).not.toHaveBeenCalled();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+});

src/App.tsx

@@ -36,10 +36,14 @@ import Reviews from "pages/Reviews/reviews";
 import Email_the_author from "./pages/Email_the_author/email_the_author";
 import CreateTeams from "pages/Assignments/CreateTeams";
 import AssignReviewer from "pages/Assignments/AssignReviewer";
+import AddReviewer from "pages/Assignments/AddReviewer";
+import ReviewerContextWrapper from "./context/ReviewerContextWrapper";
 import ViewSubmissions from "pages/Assignments/ViewSubmissions";
 import ViewScores from "pages/Assignments/ViewScores";
 import ViewReports from "pages/Assignments/ViewReports";
 import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+import { ReviewerProvider } from './context/ReviewerContext';
+
 function App() {
   const router = createBrowserRouter([
     {
@@ -67,9 +71,19 @@ function App() {
 
         {
           path: "assignments/edit/:id/assignreviewer",
-          element: <AssignReviewer />,
-          loader: loadAssignment,
+          element: (  
+              <AssignReviewer />
+          ), 
+            loader: loadAssignment,
+        },
+
+        {
+            path:"assignments/edit/:id/add-reviewer",
+            element: (
+                <AddReviewer />
+            ),
         },
+
         {
           path: "assignments/edit/:id/viewsubmissions",
           element: <ViewSubmissions />,
@@ -294,7 +308,11 @@ function App() {
     },
   ]);
 
-  return <RouterProvider router={router} />;
+    return (
+        <ReviewerProvider>
+            <RouterProvider router={router} />
+        </ReviewerProvider>
+    );
 }
 
 export default App;