Check for display of answers in the table cells of Live Results

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,33 @@ describe('LiveResults', () => {
         });
     });
 
+    test('displays the chosen answer 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();
+            });
+        });
+    });
+
 });

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" />