From 42592990eadaade633d718033902cf4e41bb2cb4 Mon Sep 17 00:00:00 2001
From: Jaycie Brown <jeab2@cam.ac.uk>
Date: Tue, 6 Jan 2026 16:35:06 +0000
Subject: [PATCH] Add tests for MyQuizzes (My Tests)

---
 src/app/components/elements/Tabs.tsx          | 27 ++++---
 .../components/pages/quizzes/MyQuizzes.tsx    |  4 +-
 src/app/services/constants.ts                 |  1 +
 src/mocks/data.ts                             | 78 ++++++++++++++++++
 src/mocks/handlers.ts                         |  8 +-
 src/test/pages/MyQuizzes.test.tsx             | 81 +++++++++++++++++++
 6 files changed, 183 insertions(+), 16 deletions(-)
 create mode 100644 src/test/pages/MyQuizzes.test.tsx

diff --git a/src/app/components/elements/Tabs.tsx b/src/app/components/elements/Tabs.tsx
index 76e7d7ae2b..994da9f4e6 100644
--- a/src/app/components/elements/Tabs.tsx
+++ b/src/app/components/elements/Tabs.tsx
@@ -24,6 +24,7 @@ interface TabsProps {
     expandable?: boolean;
     singleLine?: boolean;
     style?: TabStyle;
+    dataTestId?: string;
 }
 
 function callOrString(stringOrTabFunction: StringOrTabFunction | undefined, tabTitle: string, tabIndex: number) {
@@ -33,8 +34,8 @@ function callOrString(stringOrTabFunction: StringOrTabFunction | undefined, tabT
 }
 
 // e.g.:   Tab 1 | Tab 2 | Tab 3
-const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab, className}: TabsProps & {activeTab: number; changeTab: (i: number) => void;}) => {
-    return <Nav tabs className={classNames(className, "flex-wrap", {"guaranteed-single-line": singleLine})}>
+const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab, className, dataTestId}: TabsProps & {activeTab: number; changeTab: (i: number) => void;}) => {
+    return <Nav tabs className={classNames(className, "flex-wrap", {"guaranteed-single-line": singleLine})} data-testid={dataTestId}>
         {Object.keys(children).map((tabTitle, mapIndex) => {
             const tabIndex = mapIndex + 1;
             const linkClasses = callOrString(tabTitleClass, tabTitle, tabIndex);
@@ -53,7 +54,7 @@ const TabNavbar = ({singleLine, children, tabTitleClass, activeTab, changeTab, c
 };
 
 // e.g.:   (Tab 1|Tab 2|Tab 3), i.e. as joined buttons
-const ButtonNavbar = ({children, activeTab, changeTab, tabTitleClass="", className}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
+const ButtonNavbar = ({children, activeTab, changeTab, tabTitleClass="", className, dataTestId}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
     const gliderRef = useRef<HTMLSpanElement>(null);
     const numberOfTabs = Object.keys(children).length;
     const buttonRefs = useRef<(HTMLButtonElement | null)[]>(Array(numberOfTabs).fill(null));
@@ -68,7 +69,7 @@ const ButtonNavbar = ({children, activeTab, changeTab, tabTitleClass="", classNa
         gliderRef.current.style.transform = `translate(${xOffset}px, ${yOffset}px)`;
     }
 
-    return <div className={"w-100 text-center"}>
+    return <div className={"w-100 text-center"} data-testid={dataTestId}>
         <ButtonGroup className={classNames(className, "selector-tabs")}>
             {Object.keys(children).map((tabTitle, i) =>
                 <Button key={i} innerRef={el => buttonRefs.current[i] = el}
@@ -84,8 +85,8 @@ const ButtonNavbar = ({children, activeTab, changeTab, tabTitleClass="", classNa
     </div>;
 };
 
-const DropdownNavbar = ({children, activeTab, changeTab, tabTitleClass, className}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
-    return <div className={classNames(className, "mt-3 mb-1")}>
+const DropdownNavbar = ({children, activeTab, changeTab, tabTitleClass, className, dataTestId}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
+    return <div className={classNames(className, "mt-3 mb-1")} data-testid={dataTestId}>
         {Object.keys(children).map((tabTitle, i) =>
             <AffixButton key={tabTitle} color="tint" className={classNames("btn-dropdown me-2 mb-2", tabTitleClass, {"active": activeTab === i + 1})} onClick={() => changeTab(i + 1)} affix={{
                 affix: "icon-chevron-right",
@@ -99,8 +100,8 @@ const DropdownNavbar = ({children, activeTab, changeTab, tabTitleClass, classNam
     </div>;
 };
 
-const CardsNavbar = ({children, activeTab, changeTab, tabTitleClass=""}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
-    return <div className="d-flex card-tabs">
+const CardsNavbar = ({children, activeTab, changeTab, tabTitleClass="", dataTestId}: TabsProps & {activeTab: number; changeTab: (i: number) => void}) => {
+    return <div className="d-flex card-tabs" data-testid={dataTestId}>
         {Object.keys(children).map((tabTitle, i) =>
             <button key={i} className={classNames(tabTitleClass, "flex-grow-1 py-3 card-tab", {"active": activeTab === i + 1})} onClick={() => changeTab(i + 1)} type="button">
                 <Markup encoding={"latex"}>{tabTitle}</Markup>
@@ -143,12 +144,12 @@ export const Tabs = (props: TabsProps) => {
         {expandButton}
         <div className={classNames(className, innerClasses, `tab-style-${style}`, "position-relative")}>
             {style === "tabs"
-                ? <TabNavbar {...props} className="no-print" activeTab={activeTab} changeTab={changeTab}>{children}</TabNavbar>
+                ? <TabNavbar {...props} className="no-print" activeTab={activeTab} changeTab={changeTab} dataTestId="tab-navbar">{children}</TabNavbar>
                 : style === "buttons"
-                    ? <ButtonNavbar {...props} activeTab={activeTab} changeTab={changeTab}>{children}</ButtonNavbar>
+                    ? <ButtonNavbar {...props} activeTab={activeTab} changeTab={changeTab} dataTestId="tab-navbar">{children}</ButtonNavbar>
                     : style === "dropdowns" 
-                        ? <DropdownNavbar {...props} className={classNames({"no-print": isPhy}, tabNavbarClass)} activeTab={activeTab} changeTab={changeTab}>{children}</DropdownNavbar>
-                        : <CardsNavbar  {...props} activeTab={activeTab} changeTab={changeTab}>{children}</CardsNavbar>
+                        ? <DropdownNavbar {...props} className={classNames({"no-print": isPhy}, tabNavbarClass)} activeTab={activeTab} changeTab={changeTab} dataTestId="tab-navbar">{children}</DropdownNavbar>
+                        : <CardsNavbar  {...props} activeTab={activeTab} changeTab={changeTab} dataTestId="tab-navbar">{children}</CardsNavbar>
             }
             <ExpandableParentContext.Provider value={true}>
                 <TabContent activeTab={activeTab} className={tabContentClass}>
@@ -165,7 +166,7 @@ export const Tabs = (props: TabsProps) => {
                                     {children}
                                 </DropdownNavbar>
                             }
-                            <TabPane key={tabTitle} tabId={tabIndex}>
+                            <TabPane key={tabTitle} tabId={tabIndex} data-testid={tabIndex === activeTab ? "active-tab-pane" : undefined}>
                                 {tabBody as ReactNode}
                             </TabPane>
                         </React.Fragment>;
diff --git a/src/app/components/pages/quizzes/MyQuizzes.tsx b/src/app/components/pages/quizzes/MyQuizzes.tsx
index 3df8524dac..fa43da07bb 100644
--- a/src/app/components/pages/quizzes/MyQuizzes.tsx
+++ b/src/app/components/pages/quizzes/MyQuizzes.tsx
@@ -199,7 +199,7 @@ const AssignedQuizTable = ({quizzes, boardOrder, setBoardOrder, emptyMessage}: {
                     <th/>
                 </tr>
             </thead>
-            <tbody>
+            <tbody data-testid="assigned-quizzes">
                 {quizzes.map(quiz => {
                     return <TrLink to={quiz.link} key={quiz.id} className={classNames("align-middle", {"completed": quiz.status === QuizStatus.Complete}, {"overdue": quiz.status === QuizStatus.Overdue})}>
                         <td>
@@ -248,7 +248,7 @@ const PracticeQuizTable = ({quizzes, boardOrder, setBoardOrder, emptyMessage}: {
                     <th/>
                 </tr>
             </thead>
-            <tbody>
+            <tbody data-testid="practice-quizzes">
                 {quizzes.map(quiz => {
                     return <TrLink to={quiz.link} key={quiz.id} tabIndex={0} className={classNames("align-middle", {"completed": quiz.status === QuizStatus.Complete})}>
                         <td>
diff --git a/src/app/services/constants.ts b/src/app/services/constants.ts
index 9db44c67cf..7b3e9cd090 100644
--- a/src/app/services/constants.ts
+++ b/src/app/services/constants.ts
@@ -1276,6 +1276,7 @@ export const PATHS = {
     }),
     // Common paths
     MANAGE_GROUPS: "/groups",
+    MY_TESTS: "/tests",
     TEST: "/test/assignment",
     PREVIEW_TEST: "/test/preview",
 };
diff --git a/src/mocks/data.ts b/src/mocks/data.ts
index 50e8b932ee..f49645eecd 100644
--- a/src/mocks/data.ts
+++ b/src/mocks/data.ts
@@ -6191,9 +6191,87 @@ export const mockQuizAssignments = [
             startDate: DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), 3),
             completedDate: DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), 2)
         }
+    },
+    {
+        id: 11,
+        quizId: "test-quiz-assignment-3",
+        quizSummary: {
+            id: "test-quiz-assignment-3",
+            title: "Test Quiz Assignment 3",
+            type: "isaacQuiz",
+            tags: [],
+            url: "/isaac-api/api/quiz/test-quiz-assignment-3",
+            visibleToStudents: false,
+            hiddenFromRoles: [
+                "TEACHER",
+                "STUDENT"
+            ]
+        },
+        groupId: 2,
+        ownerId: mockUser.id,
+        assignerSummary: buildMockUserSummary(mockUser, false),
+        creationDate: DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), 5),
+        dueDate: DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), -5),
+        quizFeedbackMode: "DETAILED_FEEDBACK",
     }
 ];
 
+export const mockFreeAttempts = [
+    {
+        "id": 8,
+        "userId": 9,
+        "quizId": "test-free-attempt-1",
+        "quizSummary": {
+            "id": "test-free-attempt-1",
+            "title": "Practice Quiz 1",
+            "type": "isaacQuiz",
+            "tags": [],
+            "url": "/isaac-api/api/quiz/test-free-attempt-1",
+            "audience": [
+                {
+                    "stage": [
+                        "a_level"
+                    ]
+                },
+                {
+                    "stage": [
+                        "university"
+                    ]
+                }
+            ],
+            "hiddenFromRoles": []
+        },
+        "startDate": DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), 5),
+    },
+    {
+        "id": 9,
+        "userId": 9,
+        "quizId": "test-free-attempt-2",
+        "quizSummary": {
+            "id": "test-free-attempt-2",
+            "title": "Practice Quiz 2",
+            "type": "isaacQuiz",
+            "tags": [],
+            "url": "/isaac-api/api/quiz/test-free-attempt-2",
+            "audience": [
+                {
+                    "stage": [
+                        "a_level"
+                    ]
+                },
+                {
+                    "stage": [
+                        "university"
+                    ]
+                }
+            ],
+            "hiddenFromRoles": []
+        },
+        "startDate": DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), 5),
+        "completedDate": DAYS_AGO(new Date(SOME_FIXED_FUTURE_DATE), 2)
+    },
+];
+
 export const mockGroups = [
     {
         id: 2,
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 14b2c6e7dd..48b24f467e 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -22,7 +22,8 @@ import {
     mockProgress,
     mockLLMMarkedRegressionTestQuestion,
     mockLLMMarkedValidationResponse,
-    mockSearchResults
+    mockSearchResults,
+    mockFreeAttempts
 } from "./data";
 import {API_PATH} from "../app/services";
 import {produce} from "immer";
@@ -83,6 +84,11 @@ export const handlers = [
             status: 200,
         });
     }),
+    http.get(API_PATH + "/quiz/free_attempts", () => {
+        return HttpResponse.json(mockFreeAttempts, {
+            status: 200,
+        });
+    }),
     http.get(API_PATH + "/quiz/:quizId/rubric", ({ params }) => {
         const quizId = params.quizId as string;
         if (quizId in mockRubrics) {
diff --git a/src/test/pages/MyQuizzes.test.tsx b/src/test/pages/MyQuizzes.test.tsx
new file mode 100644
index 0000000000..6e0e18f812
--- /dev/null
+++ b/src/test/pages/MyQuizzes.test.tsx
@@ -0,0 +1,81 @@
+import { MyQuizzes } from "../../app/components/pages/quizzes/MyQuizzes";
+import { PATHS } from "../../app/services";
+import { renderTestEnvironment, waitForLoaded } from "../testUtils";
+import {screen, waitFor, within} from "@testing-library/react";
+
+describe("My Tests", () => {
+
+    const renderMyTests = async () => {
+        await renderTestEnvironment({
+            PageComponent: MyQuizzes,
+            initalRouteEntries: [PATHS.MY_TESTS],
+            extraEndpoints: [],
+        });
+
+        await waitForLoaded();
+        await waitFor(() => {
+            expect(screen.queryByText("No tests match your filters.")).not.toBeInTheDocument();
+        });
+    };
+
+    const switchToPracticeTestsTab = async () => {
+        const tabs = await screen.findByTestId("tab-navbar");
+        const practiceTestsButton = await within(tabs).findByRole("button", {name: /Practice tests/i});
+        practiceTestsButton.click();
+    };
+
+    it("starts on the Assigned Tests tab", async () => {
+        await renderMyTests();
+        const tabs = await screen.findByTestId("tab-navbar");
+        const assignedTestsButton = await within(tabs).findByRole("button", {name: /Assigned tests/i});
+        expect(assignedTestsButton.parentElement).toHaveClass("active");
+    });
+
+    it("tests that are assigned, incomplete, and before their due date appear on load", async () => {
+        await renderMyTests();
+        const tabs = await screen.findByTestId("active-tab-pane");
+        const quizzes = await within(tabs).findByTestId("assigned-quizzes");
+        expect(quizzes.children).toHaveLength(1);
+        expect(quizzes).toHaveTextContent("Test Quiz Assignment 3");
+    });
+
+    it("tests that are assigned and completed appear when the Completed filter is selected", async () => {
+        await renderMyTests();
+
+        const completedFilter = await screen.findByLabelText("Complete");
+        completedFilter.click();
+        
+        const tabs = await screen.findByTestId("active-tab-pane");
+        const quizzes = await within(tabs).findByTestId("assigned-quizzes");
+        expect(quizzes.children).toHaveLength(3);
+        expect(quizzes).toHaveTextContent("Test Quiz Assignment 1");
+        expect(quizzes).toHaveTextContent("Test Quiz Assignment 2");
+        expect(quizzes).toHaveTextContent("Test Quiz Assignment 3");
+    });
+
+    it("practice tests appear in the Practice Tests tab", async () => {
+        await renderMyTests();
+        await switchToPracticeTestsTab();
+        
+        const tabs = await screen.findByTestId("active-tab-pane");
+        const quizzes = await within(tabs).findByTestId("practice-quizzes");
+
+        expect(quizzes.children).toHaveLength(1);
+        expect(quizzes).toHaveTextContent("Practice Quiz 1");
+    });
+
+    it("practice tests that are completed appear when the Completed filter is selected", async () => {
+        await renderMyTests();
+        await switchToPracticeTestsTab();
+
+        const completedFilter = await screen.findByLabelText("Complete");
+        completedFilter.click();
+        
+        const tabs = await screen.findByTestId("active-tab-pane");
+        const quizzes = await within(tabs).findByTestId("practice-quizzes");
+
+        expect(quizzes.children).toHaveLength(2);
+        expect(quizzes).toHaveTextContent("Practice Quiz 1");
+        expect(quizzes).toHaveTextContent("Practice Quiz 2");
+    });
+});