Merge 9fbe2920cc into ee7a7a0544

client/src/__tests__/components/LiveResults/LiveResults.test.tsx

@@ -152,7 +152,7 @@ describe('LiveResults', () => {
         expect(classAverageElement).toBeInTheDocument();
     });
 
-    test('displays the correct answers per question', () => {
+    test('displays the correct answers per question in %', () => {
         render(
             <LiveResults
                 socket={mockSocket}
@@ -175,4 +175,67 @@ describe('LiveResults', () => {
         });
     });
 
+    test('displays the submitted answer(s) in a question cell', () => {
+        render(
+            <LiveResults
+                socket={mockSocket}
+                questions={mockQuestions}
+                showSelectedQuestion={jest.fn()}
+                quizMode="teacher"
+                students={mockStudents}
+            />
+        );
+
+        // Show answers should be enabled
+        const showAnswersSwitch = screen.getByLabelText('Afficher les réponses');
+        // Toggle the display of answers is it's not already enabled
+        if (!(showAnswersSwitch as HTMLInputElement).checked) {
+            fireEvent.click(showAnswersSwitch);
+        }
+
+        mockStudents.forEach((student) => {
+            student.answers.forEach((answer) => {
+                const chosenAnswerElements = screen.getAllByText(answer.answer.join(', '));
+                const chosenAnswerElement = chosenAnswerElements.find((element) => {
+                    return element.closest('td')?.classList.contains('MuiTableCell-root');
+                });
+                expect(chosenAnswerElement).toBeInTheDocument();
+            });
+        });
+    });
+
+    test('highlights the cell of the selected question', () => {
+        render(
+            <LiveResults
+                socket={mockSocket}
+                questions={mockQuestions}
+                showSelectedQuestion={jest.fn()}
+                quizMode="teacher"
+                students={mockStudents}
+            />
+        );
+
+        // Select the first question
+        const questionCell = screen.getByText(`Q${1}`);
+        fireEvent.click(questionCell);
+
+        // Check if the selected question is highlighted
+        expect(questionCell.closest('th')?.classList.contains('selected-question')).toBe(true);
+    });
+
+    test('Show answers should be enabled by default', () => {
+        render(
+            <LiveResults
+                socket={mockSocket}
+                questions={mockQuestions}
+                showSelectedQuestion={jest.fn()}
+                quizMode="teacher"
+                students={mockStudents}
+            />
+        );
+
+        const showAnswersSwitch = screen.getByLabelText('Afficher les réponses');
+        expect((showAnswersSwitch as HTMLInputElement).checked).toBe(true);
+    });
+
 });

client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx

@@ -42,7 +42,11 @@ const LiveResultsTableFooter: React.FC<LiveResultsFooterProps> = ({
                         const answer = student.answers.find(
                             (answer) => parseInt(answer.idQuestion.toString()) === index + 1
                         );
-                        const answerText = answer ? answer.answer.toString() : '';
+                        const answerText = answer
+                            ? Array.isArray(answer.answer)
+                                ? answer.answer.join(', ') // Join array elements with a space or another delimiter
+                                : "" // never reached
+                            : '';
                         const isCorrect = answer ? answer.isCorrect : false;
 
                         return (
@@ -63,6 +67,7 @@ const LiveResultsTableFooter: React.FC<LiveResultsFooterProps> = ({
                                 }
                             >
                                 {showCorrectAnswers ? (
+                                    // strips out formatting of answer text here (it will break images, katex, etc.)
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate({ format: '', text: answerText }) }}></div>
                                 ) : isCorrect ? (
                                     <FontAwesomeIcon icon={faCheck} aria-label="correct" />
@@ -91,4 +96,4 @@ const LiveResultsTableFooter: React.FC<LiveResultsFooterProps> = ({
         </TableBody>
     );
 };
-export default LiveResultsTableFooter;
+export default LiveResultsTableFooter;