@nualang/nualang-ui-components 0.1.1437 → 0.1.1438

package/dist/Cards/FeedbackCard/FeedbackCard.js

@@ -16,7 +16,35 @@ import level2Rubric from "../../Dialogs/PDFViewer/rubrics/level2Rubric.pdf";
 import level3Rubric from "../../Dialogs/PDFViewer/rubrics/level3Rubric.pdf";
 import level4Rubric from "../../Dialogs/PDFViewer/rubrics/level4Rubric.pdf";
 import HelpOutlinedIcon from "@mui/icons-material/HelpOutlined";
+import CheckIcon from "@mui/icons-material/Check";
+import EditIcon from "@mui/icons-material/Edit";
+import UndoIcon from "@mui/icons-material/Undo";
+import { EMPTY_REVIEW, isPending } from "../../Dialogs/GroupedFeedbackDialog/aiReview";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const aiDraftChipSx = {
+  bgcolor: "#FFF4E5",
+  color: "#663C00",
+  fontWeight: 600,
+  "& .MuiChip-icon": {
+    color: "#ed6c02"
+  }
+};
+const editedChipSx = {
+  bgcolor: "#f5f5f5",
+  color: "rgba(0, 0, 0, 0.87)",
+  fontWeight: 600,
+  "& .MuiChip-icon": {
+    color: "rgba(0, 0, 0, 0.6)"
+  }
+};
+const approvedChipSx = {
+  bgcolor: "#EDF7ED",
+  color: "#1E4620",
+  fontWeight: 600,
+  "& .MuiChip-icon": {
+    color: "#2e7d32"
+  }
+};
 const getPerformanceLevel = (student, aiGrade) => {
   if (!aiGrade || Object.keys(aiGrade).length === 0) return null;
   const keyVariants = [student.username, `${student.username}Student`, student.username?.replace(/\s+/g, "")];
@@ -79,14 +107,22 @@ export default function FeedbackCard({
   canSubmitAll = {},
   setCanSubmit = () => {},
   setIsGeneratingIndividual = () => {},
-  hasBadLanguage
+  hasBadLanguage,
+  aiReview = {},
+  onAiDraftsApplied = () => {},
+  onAiEdit = () => {},
+  onAiApprove = () => {},
+  onAiUndo = () => {}
 }) {
+  const meetingId = discussionData.meetingId || discussionData.meetingID;
   const [isRecordingDialogOpen, setIsRecordingDialogOpen] = useState(false);
   const [hasBeenEdited, setHasBeenEdited] = useState(false);
   const [isSubmitted, setIsSubmitted] = useState(false);
   const [aiJustGenerated, setAiJustGenerated] = useState(false);
   const formikRef = useRef(null);
   const initialValuesRef = useRef(null);
+  // The grade object is replaced whenever new AI results arrive for this discussion
+  const lastAppliedGradeRef = useRef(aiGrade);
   const [openPDF, setOpenPDF] = useState(false);
   const [pageNumber, setPageNumber] = useState(1);
   const [scale, setScale] = useState(1);
@@ -170,16 +206,25 @@ export default function FeedbackCard({
     if (!formik) return;
     if (!hasSubmission || !aiGrade || Object.keys(aiGrade).length === 0) return;
     if (!aiJustGenerated && !generateAllUsed) return;
-    userData.forEach(student => {
+    // Skip grades already applied, e.g. when generating for other discussions
+    if (aiGrade === lastAppliedGradeRef.current) return;
+    lastAppliedGradeRef.current = aiGrade;
+    const draftedMemberIds = [];
+    // Only this group's students: names aren't unique across a classroom
+    attendedMembers.forEach(student => {
       const keyVariants = [student.username, `${student.username}Student`, student.username?.replace(/\s+/g, "")];
       const aiData = keyVariants.map(k => aiGrade?.[k]).find(v => v && typeof v === "object") || null;
       if (aiData?.Feedback) {
         formik.setFieldValue(`feedbackData.${student.memberId}.feedbackText`, aiData.Feedback);
+        draftedMemberIds.push(student.memberId);
       }
       if (aiData?.LevelPerformance) {
         formik.setFieldValue(`feedbackData.${student.memberId}.levelPerformance`, aiData.LevelPerformance);
       }
     });
+    if (draftedMemberIds.length > 0) {
+      onAiDraftsApplied(meetingId, draftedMemberIds);
+    }
     setHasBeenEdited(true);
     setIsSubmitted(false);
     setAiJustGenerated(false);
@@ -223,6 +268,7 @@ export default function FeedbackCard({
     setOpenPDF(false);
   };
   const initialValues = getInitialValues();
+  const pendingAiMemberIds = attendedMembers.map(m => m.memberId).filter(memberId => isPending(aiReview[memberId]));
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Formik, {
       innerRef: formikRef,
@@ -231,6 +277,8 @@ export default function FeedbackCard({
       onSubmit: async (values, {
         setSubmitting
       }) => {
+        // AI drafts can't be sent until the teacher approves them
+        if (pendingAiMemberIds.length > 0) return;
         setSubmitting(true);
         try {
           const allStudents = selectedMembers.map(m => m.memberId);
@@ -240,9 +288,17 @@ export default function FeedbackCard({
           selectedMembers.forEach(student => {
             const existingLevel = feedbackDataWithAbsent[student.memberId]?.levelPerformance;
             const aiLevel = getPerformanceLevel(student, aiGrade);
+            const {
+              aiGenerated,
+              teacherEdited,
+              teacherApproved
+            } = aiReview[student.memberId] || EMPTY_REVIEW;
             feedbackDataWithAbsent[student.memberId] = {
               ...feedbackDataWithAbsent[student.memberId],
-              levelPerformance: existingLevel ?? aiLevel ?? null
+              levelPerformance: existingLevel ?? aiLevel ?? null,
+              aiGenerated,
+              teacherEdited,
+              teacherApproved
             };
           });
           notAttendedMembers.forEach(student => {
@@ -287,7 +343,7 @@ export default function FeedbackCard({
             return current !== initial;
           });
         };
-        const canSubmit = hasSubmission && !isSubmitting && isFormValid() && (hasChanges() || hasBeenEdited) && !isSubmitted;
+        const canSubmit = hasSubmission && !isSubmitting && isFormValid() && (hasChanges() || hasBeenEdited) && !isSubmitted && pendingAiMemberIds.length === 0;
         // eslint-disable-next-line react-hooks/rules-of-hooks
         useEffect(() => {
           setCanSubmit({
@@ -411,6 +467,8 @@ export default function FeedbackCard({
                   const studentFeedback = values.feedbackData[student.memberId] || {};
                   const perfLevel = studentFeedback.levelPerformance || getPerformanceLevel(student, aiGrade);
                   const chipProps = getPerformanceChipProps(perfLevel, t);
+                  const review = aiReview[student.memberId] || EMPTY_REVIEW;
+                  const showReview = review.aiGenerated && !disabled;
                   return /*#__PURE__*/_jsx(Box, {
                     sx: {
                       py: 2
@@ -503,12 +561,12 @@ export default function FeedbackCard({
                             })]
                           })]
                         })
-                      }), /*#__PURE__*/_jsx(Grid, {
+                      }), /*#__PURE__*/_jsxs(Grid, {
                         size: {
                           xs: 12,
                           md: 9.5
                         },
-                        children: /*#__PURE__*/_jsx(TextField, {
+                        children: [/*#__PURE__*/_jsx(TextField, {
                           variant: "outlined",
                           fullWidth: true,
                           multiline: true,
@@ -518,9 +576,57 @@ export default function FeedbackCard({
                             setFieldValue(`feedbackData.${student.memberId}.feedbackText`, e.target.value);
                             setHasBeenEdited(true);
                             setIsSubmitted(false);
+                            onAiEdit(meetingId, student.memberId);
                           },
-                          placeholder: t("write_your_feedback_here")
-                        })
+                          placeholder: t("write_your_feedback_here"),
+                          slotProps: {
+                            htmlInput: {
+                              id: `feedback-${meetingId}-${student.memberId}`,
+                              "data-ai-key": `${meetingId}:${student.memberId}`,
+                              "data-ai-pending": String(showReview && isPending(review))
+                            }
+                          },
+                          sx: showReview && isPending(review) && !review.teacherEdited ? {
+                            "& .MuiOutlinedInput-notchedOutline": {
+                              borderColor: "#ed6c02",
+                              borderWidth: "1px"
+                            }
+                          } : undefined
+                        }), showReview && /*#__PURE__*/_jsxs(Box, {
+                          sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            flexWrap: "wrap",
+                            gap: 1,
+                            mt: 1
+                          },
+                          children: [!review.teacherEdited && !review.teacherApproved && /*#__PURE__*/_jsx(Chip, {
+                            size: "small",
+                            icon: /*#__PURE__*/_jsx(AutoFixHighIcon, {}),
+                            label: t("ai_draft_not_edited"),
+                            sx: aiDraftChipSx
+                          }), review.teacherApproved && /*#__PURE__*/_jsx(Chip, {
+                            size: "small",
+                            icon: /*#__PURE__*/_jsx(CheckCircleIcon, {}),
+                            label: t("approved"),
+                            sx: approvedChipSx
+                          }), review.teacherEdited && /*#__PURE__*/_jsx(Chip, {
+                            size: "small",
+                            icon: /*#__PURE__*/_jsx(EditIcon, {}),
+                            label: t("edited_by_you"),
+                            sx: editedChipSx
+                          }), review.teacherApproved ? /*#__PURE__*/_jsx(Button, {
+                            size: "small",
+                            startIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
+                            onClick: () => onAiUndo(meetingId, student.memberId),
+                            children: t("undo")
+                          }) : /*#__PURE__*/_jsx(Button, {
+                            size: "small",
+                            startIcon: /*#__PURE__*/_jsx(CheckIcon, {}),
+                            onClick: () => onAiApprove(meetingId, student.memberId),
+                            children: t("approve")
+                          })]
+                        })]
                       })]
                     })
                   }, student.memberId);

package/dist/Cards/FeedbackCard/FeedbackCard.test.js

@@ -0,0 +1,187 @@
+import FeedbackCard from "./FeedbackCard";
+import { props } from "./FeedbackCard.stories";
+import { render, screen, fireEvent, waitFor, cleanup } from "@testing-library/react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+
+// react-pdf needs DOMMatrix, which jsdom doesn't provide
+import { jsx as _jsx } from "react/jsx-runtime";
+vi.mock("../../Dialogs/PDFViewer/PDFViewer", () => ({
+  default: () => null
+}));
+const discussionData = {
+  ...props.discussionData,
+  meetingId: "m1"
+};
+const existingFeedback = {
+  1: {
+    feedbackText: "AI feedback for Aaron"
+  },
+  2: {
+    feedbackText: "Teacher feedback for Connor"
+  },
+  3: {
+    feedbackText: "Teacher feedback for Stephen"
+  }
+};
+const pending = {
+  aiGenerated: true,
+  teacherEdited: false,
+  teacherApproved: false
+};
+const renderCard = (overrides = {}) => render(/*#__PURE__*/_jsx(FeedbackCard, {
+  ...props,
+  hasBadLanguage: false,
+  hasSubmission: true,
+  discussionData: discussionData,
+  existingFeedback: existingFeedback,
+  ...overrides
+}));
+const submitButton = () => screen.getByRole("button", {
+  name: "submit_feedback"
+});
+describe("FeedbackCard", () => {
+  afterEach(cleanup);
+  it("renders without crashing", () => {
+    const {
+      unmount
+    } = renderCard();
+    unmount();
+  });
+  it("shows no review controls for teacher-written feedback", () => {
+    renderCard();
+    expect(screen.queryByText("ai_draft_not_edited")).toBeNull();
+    expect(screen.queryByRole("button", {
+      name: "approve"
+    })).toBeNull();
+  });
+  it("flags an unedited AI draft and blocks submit until it is approved", () => {
+    const onAiEdit = vi.fn();
+    const onAiApprove = vi.fn();
+    renderCard({
+      aiReview: {
+        1: pending
+      },
+      onAiEdit,
+      onAiApprove
+    });
+    expect(screen.getByText("ai_draft_not_edited")).toBeTruthy();
+    expect(screen.queryByText("edited_by_you")).toBeNull();
+    fireEvent.change(document.getElementById("feedback-m1-2"), {
+      target: {
+        value: "Edited teacher feedback"
+      }
+    });
+    expect(onAiEdit).toHaveBeenCalledWith("m1", "2");
+    expect(submitButton().disabled).toBe(true);
+    fireEvent.click(screen.getByRole("button", {
+      name: "approve"
+    }));
+    expect(onAiApprove).toHaveBeenCalledWith("m1", "1");
+  });
+  it("shows edited and approved states", () => {
+    const {
+      rerender
+    } = renderCard({
+      aiReview: {
+        1: {
+          ...pending,
+          teacherEdited: true
+        }
+      }
+    });
+    expect(screen.queryByText("ai_draft_not_edited")).toBeNull();
+    expect(screen.getByText("edited_by_you")).toBeTruthy();
+    expect(screen.getByRole("button", {
+      name: "approve"
+    })).toBeTruthy();
+    rerender(/*#__PURE__*/_jsx(FeedbackCard, {
+      ...props,
+      hasBadLanguage: false,
+      hasSubmission: true,
+      discussionData: discussionData,
+      existingFeedback: existingFeedback,
+      aiReview: {
+        1: {
+          ...pending,
+          teacherEdited: true,
+          teacherApproved: true
+        }
+      }
+    }));
+    expect(screen.getByText("approved")).toBeTruthy();
+    expect(screen.getByText("edited_by_you")).toBeTruthy();
+    expect(screen.getByRole("button", {
+      name: "undo"
+    })).toBeTruthy();
+  });
+  it("only drafts for this group's students when classmates share a name", () => {
+    const onAiDraftsApplied = vi.fn();
+    const userData = [...props.userData, {
+      memberId: "99",
+      username: "Aaron Cullen"
+    } // same name, not in this group
+    ];
+    const cardProps = {
+      ...props,
+      userData,
+      hasBadLanguage: false,
+      hasSubmission: true,
+      discussionData,
+      existingFeedback: {},
+      generateAllUsed: true,
+      onAiDraftsApplied
+    };
+    const {
+      rerender
+    } = render(/*#__PURE__*/_jsx(FeedbackCard, {
+      ...cardProps,
+      aiGrade: {}
+    }));
+    rerender(/*#__PURE__*/_jsx(FeedbackCard, {
+      ...cardProps,
+      aiGrade: {
+        "Aaron Cullen": {
+          Feedback: "¡Muy bien!"
+        },
+        "Connor Cawley": {
+          Feedback: "Buen trabajo."
+        }
+      }
+    }));
+    expect(onAiDraftsApplied).toHaveBeenCalledTimes(1);
+    expect(onAiDraftsApplied).toHaveBeenCalledWith("m1", ["1", "2"]);
+  });
+  it("submits approved AI drafts with their review flags", async () => {
+    const onSubmitFeedback = vi.fn();
+    renderCard({
+      aiReview: {
+        1: {
+          ...pending,
+          teacherApproved: true
+        }
+      },
+      onSubmitFeedback
+    });
+    fireEvent.change(document.getElementById("feedback-m1-2"), {
+      target: {
+        value: "Edited teacher feedback"
+      }
+    });
+    expect(submitButton().disabled).toBe(false);
+    fireEvent.click(submitButton());
+    await waitFor(() => expect(onSubmitFeedback).toHaveBeenCalled());
+    const {
+      feedbackData
+    } = onSubmitFeedback.mock.calls[0][0];
+    expect(feedbackData[1]).toMatchObject({
+      aiGenerated: true,
+      teacherEdited: false,
+      teacherApproved: true
+    });
+    expect(feedbackData[2]).toMatchObject({
+      aiGenerated: false,
+      teacherEdited: false,
+      teacherApproved: false
+    });
+  });
+});

package/dist/Cards/RecordingCard/RecordingCard.js

@@ -216,6 +216,16 @@ export default function RecordingCard({
                   },
                   children: /*#__PURE__*/_jsx(HelpOutlinedIcon, {})
                 })
+              }), recordingsListData.aiGenerated === true && recordingsListData.teacherEdited !== true && /*#__PURE__*/_jsx(Tooltip, {
+                title: t("ai_suggested_tooltip"),
+                children: /*#__PURE__*/_jsx(Chip, {
+                  size: "small",
+                  label: t("ai_suggested"),
+                  sx: {
+                    ml: 0.5,
+                    fontWeight: 600
+                  }
+                })
               })]
             }), /*#__PURE__*/_jsx(Typography, {
               variant: "body2",

package/dist/Dialogs/ExerciseMenu/CompletionDialog/AttemptsCompletionDialog.js

@@ -0,0 +1,77 @@
+import CompletionDialog from "./CompletionDialog";
+import { CompletionExitAction, CompletionMainActions, useAssignmentId } from "./CompletionActions";
+import AnswersSummary from "./Sections/AnswersSummary";
+import AttemptsToReview from "./Sections/AttemptsToReview";
+import { jsx as _jsx } from "react/jsx-runtime";
+function AttemptsCompletionDialog({
+  open,
+  t = text => text,
+  icon,
+  celebration = null,
+  exerciseLabel,
+  contentName,
+  answerAttempts = [],
+  startTime,
+  showAnswerMethod = true,
+  rolePlayed = null,
+  viewAttempt = null,
+  viewReport,
+  disableViewReport,
+  restartExcercise,
+  handleNextGame = null,
+  goBack,
+  goBackToAssignment,
+  inTopic = false,
+  "data-cy": dataCy
+}) {
+  const assignmentId = useAssignmentId();
+  const attempts = answerAttempts.filter(Boolean);
+  const hasAttempts = attempts.length > 0;
+  const onViewAttempt = assignmentId ? null : viewAttempt;
+  return /*#__PURE__*/_jsx(CompletionDialog, {
+    open: open,
+    maxWidth: hasAttempts ? "lg" : "md",
+    icon: icon,
+    celebration: celebration,
+    title: t("exercise_complete"),
+    subtitle: [exerciseLabel, contentName, attempts.length > 0 && t("attempt_count", {
+      count: attempts.length
+    })].filter(Boolean).join(" · "),
+    "data-cy": dataCy,
+    sections: [{
+      key: "summary",
+      content: /*#__PURE__*/_jsx(AnswersSummary, {
+        answerAttempts: attempts,
+        startTime: startTime,
+        showAnswerMethod: showAnswerMethod,
+        rolePlayed: rolePlayed,
+        onViewAttempt: hasAttempts ? null : onViewAttempt,
+        t: t
+      })
+    }, hasAttempts && {
+      key: "review",
+      muted: true,
+      scroll: "content",
+      content: /*#__PURE__*/_jsx(AttemptsToReview, {
+        answerAttempts: attempts,
+        onViewAll: onViewAttempt,
+        showMethod: showAnswerMethod,
+        t: t
+      })
+    }],
+    actionsStart: /*#__PURE__*/_jsx(CompletionExitAction, {
+      t: t,
+      goBack: goBack,
+      goBackToAssignment: goBackToAssignment,
+      inTopic: inTopic
+    }),
+    actions: /*#__PURE__*/_jsx(CompletionMainActions, {
+      t: t,
+      viewReport: viewReport,
+      disableViewReport: disableViewReport,
+      restartExcercise: restartExcercise,
+      handleNextGame: handleNextGame
+    })
+  });
+}
+export default AttemptsCompletionDialog;

package/dist/Dialogs/ExerciseMenu/CompletionDialog/AttemptsCompletionDialog.test.js

@@ -0,0 +1,37 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, it } from "vitest";
+import { MemoryRouter } from "react-router";
+import AttemptsCompletionDialog from "./AttemptsCompletionDialog";
+import { jsx as _jsx } from "react/jsx-runtime";
+afterEach(cleanup);
+const t = (key, values) => key === "attempt_count" ? `${values.count} attempts` : key;
+const renderDialog = props => render(/*#__PURE__*/_jsx(MemoryRouter, {
+  children: /*#__PURE__*/_jsx(AttemptsCompletionDialog, {
+    open: true,
+    t: t,
+    ...props
+  })
+}));
+describe("AttemptsCompletionDialog header", () => {
+  it("titles every exercise the same and names it in the subtitle", () => {
+    renderDialog({
+      exerciseLabel: "Act it out - Listening and Speaking",
+      contentName: "Completion",
+      answerAttempts: [{
+        result: "correct"
+      }, {
+        result: "incorrect"
+      }]
+    });
+    screen.getByText("exercise_complete");
+    screen.getByText("Act it out - Listening and Speaking · Completion · 2 attempts");
+  });
+  it("leaves out the attempt count when nothing was answered", () => {
+    renderDialog({
+      exerciseLabel: "Story",
+      contentName: "Completion",
+      answerAttempts: []
+    });
+    screen.getByText("Story · Completion");
+  });
+});

package/dist/Dialogs/ExerciseMenu/CompletionDialog/CompletionActions.js

@@ -0,0 +1,82 @@
+import { useLocation } from "react-router";
+import { Box, Button, Tooltip } from "@mui/material";
+import ReplayIcon from "@mui/icons-material/Replay";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function useAssignmentId() {
+  const location = useLocation();
+  return new URLSearchParams(location.search).get("assignmentId");
+}
+export function CompletionExitAction({
+  t = text => text,
+  goBack,
+  goBackToAssignment,
+  inTopic = false
+}) {
+  const assignmentId = useAssignmentId();
+  return assignmentId ? /*#__PURE__*/_jsx(Button, {
+    color: "inherit",
+    onClick: goBackToAssignment,
+    "data-cy": "go_back_to_assignments",
+    sx: {
+      fontWeight: 700
+    },
+    children: t("go_back_to_assignments")
+  }) : /*#__PURE__*/_jsx(Button, {
+    color: "inherit",
+    onClick: goBack,
+    "data-cy": "go_back_to_topic",
+    sx: {
+      fontWeight: 700
+    },
+    children: inTopic ? t("go_back_to_topic") : t("quit")
+  });
+}
+export function CompletionMainActions({
+  t = text => text,
+  viewReport,
+  disableViewReport,
+  restartExcercise,
+  handleNextGame = null
+}) {
+  const assignmentId = useAssignmentId();
+  const viewReportDisabled = Boolean(disableViewReport || assignmentId);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: assignmentId ? "Reports are not available during assignments. You can review your attempts in the Progress tab." : "",
+      children: /*#__PURE__*/_jsx(Box, {
+        component: "span",
+        sx: {
+          display: {
+            xs: "block",
+            sm: "inline-block"
+          }
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "outlined",
+          color: "primary",
+          onClick: viewReport,
+          disabled: viewReportDisabled,
+          "data-cy": "view_report",
+          children: t("view_report")
+        })
+      })
+    }), /*#__PURE__*/_jsx(Button, {
+      variant: handleNextGame ? "outlined" : "contained",
+      color: "primary",
+      startIcon: /*#__PURE__*/_jsx(ReplayIcon, {}),
+      onClick: restartExcercise,
+      "data-cy": "play_again",
+      autoFocus: !handleNextGame,
+      children: t("play_again")
+    }), handleNextGame && /*#__PURE__*/_jsx(Button, {
+      variant: "contained",
+      color: "primary",
+      endIcon: /*#__PURE__*/_jsx(ChevronRightIcon, {}),
+      onClick: handleNextGame,
+      "data-cy": "next_game",
+      autoFocus: true,
+      children: t("next_game")
+    })]
+  });
+}

package/dist/Dialogs/ExerciseMenu/CompletionDialog/CompletionActions.test.js

@@ -0,0 +1,30 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { MemoryRouter } from "react-router";
+import { CompletionMainActions } from "./CompletionActions";
+import { jsx as _jsx } from "react/jsx-runtime";
+afterEach(cleanup);
+const renderActions = props => render(/*#__PURE__*/_jsx(MemoryRouter, {
+  children: /*#__PURE__*/_jsx(CompletionMainActions, {
+    t: key => key,
+    restartExcercise: () => {},
+    viewReport: () => {},
+    ...props
+  })
+}));
+describe("CompletionMainActions", () => {
+  it("makes play again the main action without a next game", () => {
+    renderActions();
+    expect(screen.queryByText("next_game")).toBeNull();
+    expect(screen.getByText("play_again").closest("button").className).toContain("MuiButton-contained");
+  });
+  it("adds next game as the main action when there is one", () => {
+    const handleNextGame = vi.fn();
+    renderActions({
+      handleNextGame
+    });
+    expect(screen.getByText("play_again").closest("button").className).toContain("MuiButton-outlined");
+    screen.getByText("next_game").click();
+    expect(handleNextGame).toHaveBeenCalled();
+  });
+});