E2612 - course based reports

src/App.tsx

@@ -16,6 +16,7 @@ import Login from "./pages/Authentication/Login";
 import Logout from "./pages/Authentication/Logout";
 import Courses from "./pages/Courses/Course";
 import CourseEditor from "./pages/Courses/CourseEditor";
+import CourseReport from "./pages/Courses/CourseReport";
 import { loadCourseInstructorDataAndInstitutions } from "./pages/Courses/CourseUtil";
 import Questionnaire from "./pages/Questionnaires/Questionnaire";
 import QuestionnaireEditor from "./pages/Questionnaires/QuestionnaireEditor";
@@ -341,6 +342,10 @@ function App() {
                 },
               ],
             },
+            {
+              path: ":courseId/class_assignment_overview",
+              element: <ProtectedRoute element={<CourseReport />} leastPrivilegeRole={ROLE.TA} />,
+            },
           ],
         },
 

src/components/Table/Table.tsx

@@ -24,9 +24,11 @@ interface TableProps {
   data: Record<string, any>[];
   columns: ColumnDef<any, any>[];
   disableGlobalFilter?: boolean;
+  disablePaginationRowModel?: boolean;
   showGlobalFilter?: boolean;
   showColumnFilter?: boolean;
   showPagination?: boolean;
+  disablePaginationRowModel?: boolean;
   tableSize?: { span: number; offset: number };
   columnVisibility?: Record<string, boolean>;
   onSelectionChange?: (selectedData: Record<any, any>[]) => void;
@@ -42,6 +44,7 @@ const Table: React.FC<TableProps> = ({
   showGlobalFilter = false,
   showColumnFilter = true,
   showPagination = true,
+  disablePaginationRowModel = false,
   onSelectionChange,
    onRowClick,
   columnVisibility = {},
@@ -141,7 +144,7 @@ const Table: React.FC<TableProps> = ({
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
+    getPaginationRowModel: disablePaginationRowModel ? undefined : getPaginationRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
   });
 

src/pages/Courses/Course.test.tsx

@@ -0,0 +1,136 @@
+import "@testing-library/jest-dom";
+import { render, screen, waitFor } from "@testing-library/react";
+import Courses from "./Course";
+
+const mockUseLocation = vi.fn();
+const mockNavigate = vi.fn();
+const mockDispatch = vi.fn();
+const mockUseAPI = vi.fn();
+const mockTable = vi.fn();
+
+vi.mock("react-router-dom", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("react-router-dom")>()),
+  useNavigate: () => mockNavigate,
+  useLocation: () => mockUseLocation(),
+  Outlet: () => <div data-testid="courses-outlet" />,
+}));
+
+vi.mock("react-redux", () => ({
+  useDispatch: () => mockDispatch,
+  useSelector: (selector: any) =>
+    selector({
+      authentication: {
+        isAuthenticated: true,
+        user: {
+          id: 7,
+          full_name: "Taylor Teach",
+          role: "Instructor",
+        },
+      },
+    }),
+}));
+
+vi.mock("../../hooks/useAPI", () => ({
+  default: () => mockUseAPI(),
+}));
+
+vi.mock("components/Table/Table", () => ({
+  default: (props: any) => {
+    mockTable(props);
+    return <div data-testid="courses-table" />;
+  },
+}));
+
+vi.mock("./CourseDelete", () => ({
+  default: () => <div>Delete Course Modal</div>,
+}));
+
+vi.mock("./CourseCopy", () => ({
+  default: () => <div>Copy Course Modal</div>,
+}));
+
+vi.mock("./CourseAssignments", () => ({
+  default: () => <div>Course Assignments</div>,
+}));
+
+const setUseApiSequence = () => {
+  mockUseAPI
+    .mockReturnValueOnce({
+      error: "",
+      isLoading: false,
+      data: {
+        data: [
+          {
+            id: 1,
+            name: "CSC 517",
+            directory_path: "csc517",
+            info: "Course info",
+            private: true,
+            created_at: "2024-01-01T00:00:00.000Z",
+            updated_at: "2024-01-02T00:00:00.000Z",
+            institution_id: 1,
+            instructor_id: 7,
+            institution: { id: 1, name: "NCSU" },
+            instructor: { id: 7, name: "Taylor Teach" },
+            date_format_pref: "MM/DD/YYYY",
+          },
+        ],
+      },
+      sendRequest: vi.fn(),
+    })
+    .mockReturnValueOnce({
+      data: { data: [{ id: 1, name: "NCSU" }] },
+      sendRequest: vi.fn(),
+    })
+    .mockReturnValueOnce({
+      data: { data: [{ id: 7, name: "Taylor Teach" }] },
+      sendRequest: vi.fn(),
+    })
+    .mockReturnValueOnce({
+      data: { data: [{ course_id: 1 }] },
+      sendRequest: vi.fn(),
+    });
+};
+
+describe("Courses report route behavior", () => {
+  beforeEach(() => {
+    mockUseLocation.mockReturnValue({
+      pathname: "/courses",
+      search: "",
+      hash: "",
+    });
+    mockUseAPI.mockReset();
+    mockTable.mockReset();
+    setUseApiSequence();
+  });
+
+  it("renders only the outlet when the current path is the course report page", () => {
+    mockUseLocation.mockReturnValue({
+      pathname: "/courses/1/class_assignment_overview",
+      search: "",
+      hash: "",
+    });
+
+    render(<Courses />);
+
+    expect(screen.getByTestId("courses-outlet")).toBeInTheDocument();
+    expect(screen.queryByTestId("courses-table")).not.toBeInTheDocument();
+    expect(screen.queryByText(/Manage Courses/i)).not.toBeInTheDocument();
+  });
+
+  it("renders the normal courses page when the current path is not the report page", () => {
+    render(<Courses />);
+
+    expect(screen.getByTestId("courses-outlet")).toBeInTheDocument();
+    expect(screen.getByTestId("courses-table")).toBeInTheDocument();
+    expect(screen.getByText("Instructed by: Taylor Teach")).toBeInTheDocument();
+  });
+
+  it("passes course rows to the shared table on the normal courses page", async () => {
+    render(<Courses />);
+
+    await waitFor(() => expect(mockTable).toHaveBeenCalledTimes(1));
+    expect(mockTable.mock.calls[0][0].data).toHaveLength(1);
+    expect(mockTable.mock.calls[0][0].data[0].name).toBe("CSC 517");
+  });
+});

src/pages/Courses/Course.tsx

@@ -32,7 +32,8 @@ const Courses = () => {
   const currUserRole = auth.user.role.valueOf();
   const navigate = useNavigate();
   const location = useLocation();
-  const dispatch = useDispatch();
+  const dispatch = useDispatch();
+  const isReportPage = location.pathname.includes("class_assignment_overview");
 
   const [showDeleteConfirmation, setShowDeleteConfirmation] = useState<{
     visible: boolean;
@@ -96,25 +97,30 @@ const Courses = () => {
     []
   );
 
-  const onCopyHandle = useCallback(
-    (row: TRow<ICourseResponse>) =>
-      setShowCopyConfirmation({ visible: true, data: row.original }),
-    []
-  );
-
-const renderSubComponent = useCallback(({ row }: { row: TRow<ICourseResponse> }) => {
-	return (
+  const onCopyHandle = useCallback(
+    (row: TRow<ICourseResponse>) =>
+      setShowCopyConfirmation({ visible: true, data: row.original }),
+    []
+  );
+
+  const onReportHandle = useCallback(
+    (row: TRow<ICourseResponse>) => navigate(`${row.original.id}/class_assignment_overview`),
+    [navigate]
+  );
+
+const renderSubComponent = useCallback(({ row }: { row: TRow<ICourseResponse> }) => {
+	return (
 	  <CourseAssignments
 		courseId={row.original.id}
 		courseName={row.original.name}
 	  />
 	);
   }, []);
-
-  const tableColumns = useMemo(
-    () => COURSE_COLUMNS(onEditHandle, onDeleteHandle, onTAHandle, onCopyHandle),
-    [onDeleteHandle, onEditHandle, onTAHandle, onCopyHandle]
-  );
+
+  const tableColumns = useMemo(
+    () => COURSE_COLUMNS(onEditHandle, onDeleteHandle, onTAHandle, onCopyHandle, onReportHandle),
+    [onDeleteHandle, onEditHandle, onTAHandle, onCopyHandle, onReportHandle]
+  );
 
   const tableData = useMemo(
     () => (isLoading || !CourseResponse?.data ? [] : CourseResponse.data),
@@ -158,14 +164,18 @@ const renderSubComponent = useCallback(({ row }: { row: TRow<ICourseResponse> })
     );
   }, [mergedTableData, loggedInUserRole]);
 
-  const coursesWithAssignments = useMemo(() => {
-    if (!assignmentResponse?.data) return new Set();
-    return new Set(assignmentResponse.data.map((a: any) => a.course_id));
-  }, [assignmentResponse?.data]);
-
-  return (
-    <>
-      <Outlet />
+  const coursesWithAssignments = useMemo(() => {
+    if (!assignmentResponse?.data) return new Set();
+    return new Set(assignmentResponse.data.map((a: any) => a.course_id));
+  }, [assignmentResponse?.data]);
+
+  if (isReportPage) {
+    return <Outlet />;
+  }
+
+  return (
+    <>
+      <Outlet />
       <main>
         <Container fluid className="px-md-4">
           <Row className="mt-4 mb-4">

src/pages/Courses/CourseColumns.test.tsx

@@ -0,0 +1,77 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { courseColumns } from "./CourseColumns";
+
+const mockRow = {
+  original: {
+    id: 15,
+    name: "CSC 517",
+    institution: { id: 1, name: "NCSU" },
+    instructor: { id: 2, name: "Prof. Lane" },
+    created_at: "2024-01-01T00:00:00.000Z",
+    updated_at: "2024-01-02T00:00:00.000Z",
+  },
+} as any;
+
+describe("courseColumns report action", () => {
+  const handleEdit = vi.fn();
+  const handleDelete = vi.fn();
+  const handleTA = vi.fn();
+  const handleCopy = vi.fn();
+  const handleReport = vi.fn();
+
+  const renderActionsCell = () => {
+    const columns = courseColumns(
+      handleEdit,
+      handleDelete,
+      handleTA,
+      handleCopy,
+      handleReport
+    );
+    const actionsColumn = columns.find((column: any) => column.id === "actions") as any;
+
+    return render(actionsColumn.cell({ row: mockRow }));
+  };
+
+  beforeEach(() => {
+    handleEdit.mockReset();
+    handleDelete.mockReset();
+    handleTA.mockReset();
+    handleCopy.mockReset();
+    handleReport.mockReset();
+  });
+
+  it("renders the report action with the existing tooltip text", async () => {
+    const user = userEvent.setup();
+
+    renderActionsCell();
+    const reportButton = screen.getByRole("button", { name: "View Course Report" });
+
+    await user.hover(reportButton);
+
+    expect(await screen.findByText("View Course Report")).toBeInTheDocument();
+  });
+
+  it("calls handleReport with the clicked row", async () => {
+    const user = userEvent.setup();
+
+    renderActionsCell();
+    await user.click(screen.getByRole("button", { name: "View Course Report" }));
+
+    expect(handleReport).toHaveBeenCalledWith(mockRow);
+  });
+
+  it("renders the report action as a brown rectangular button instead of a link-style icon button", () => {
+    renderActionsCell();
+    const reportButton = screen.getByRole("button", { name: "View Course Report" });
+
+    expect(reportButton).toHaveStyle({
+      backgroundColor: "#8B4513",
+      borderColor: "#8B4513",
+      width: "25px",
+      height: "25px",
+    });
+    expect(reportButton).not.toHaveClass("btn-link");
+  });
+});