Added tests

client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx

@@ -209,5 +209,33 @@ describe('MultipleChoiceQuestionDisplay', () => {
         expect(wrongAnswer1?.textContent).not.toContain('❌');
     });
 
+    it('calculates and displays pick rates correctly when showResults is true', () => {
+        const question = parse(`::MCQ:: What is 2+2? {
+            =Four
+            ~Three
+            ~Five
+        }`)[0] as MultipleChoiceQuestion;
+    
+        const mockStudents = [
+            { id: '1', name: 'Alice', answers: [{ idQuestion: 1, answer: ['Four'], isCorrect: true }] },
+            { id: '2', name: 'Bob', answers: [{ idQuestion: 1, answer: ['Three'], isCorrect: false }] },
+            { id: '3', name: 'Charlie', answers: [{ idQuestion: 1, answer: ['Four'], isCorrect: true }] }
+        ];
+    
+        render(
+            <MultipleChoiceQuestionDisplay
+                question={{ ...question, id: '1' }}
+                students={mockStudents}
+                showResults={true}
+            />
+        );
+    
+        // Expect pick rate for "Four" to be 2/3
+        expect(screen.getByText('✅2/3 (66.7%)')).toBeInTheDocument();
+    
+        // Expect pick rate for "Three" to be 1/3
+        expect(screen.getByText('❌1/3 (33.3%)')).toBeInTheDocument();
+    });
+
 });
 

client/src/__tests__/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.test.tsx

@@ -81,4 +81,37 @@ describe('NumericalQuestion Component', () => {
         expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith([7]);
         mockHandleOnSubmitAnswer.mockClear();
     });
+
+    it('calculates and displays correct answer rate when showResults is true', () => {
+        const mockStudents = [
+            {
+                id: '1',
+                name: 'Alice',
+                answers: [{ idQuestion: 1, answer: [7], isCorrect: true }]
+            },
+            {
+                id: '2',
+                name: 'Bob',
+                answers: [{ idQuestion: 1, answer: [3], isCorrect: false }]
+            },
+            {
+                id: '3',
+                name: 'Charlie',
+                answers: [{ idQuestion: 1, answer: [6], isCorrect: true }]
+            }
+        ];
+    
+        render(
+            <MemoryRouter>
+                <NumericalQuestionDisplay
+                    question={{ ...question, id: '1' }}
+                    showResults={true}
+                    students={mockStudents}
+                />
+            </MemoryRouter>
+        );
+    
+        expect(screen.getByText('Taux de réponse correcte: 2/3')).toBeInTheDocument();
+        expect(screen.getByText('66.7%')).toBeInTheDocument();
+    });
 });

client/src/__tests__/components/QuestionsDisplay/Question.test.tsx

@@ -25,8 +25,8 @@ describe('Questions Component', () => {
         showAnswer: false
     };
 
-    const renderComponent = (question: Question) => {
-        render(<QuestionDisplay question={question} {...sampleProps} />);
+    const renderComponent = (question: Question, showAnswerToggle = false) => {
+        render(<QuestionDisplay question={question} showAnswerToggle={showAnswerToggle} {...sampleProps} />);
     };
 
     // describe('question type parsing', () => {
@@ -122,6 +122,11 @@ describe('Questions Component', () => {
 
         expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(['User Input']);
     });
+
+    it('shows "Afficher les résultats" toggle when showAnswerToggle is true', () => {
+        renderComponent(sampleTrueFalseQuestion, true);
+        expect(screen.getByText('Afficher les résultats')).toBeInTheDocument();
+    });
 });
 
 

client/src/__tests__/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { parse, ShortAnswerQuestion } from 'gift-pegjs';
 import ShortAnswerQuestionDisplay from 'src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('ShortAnswerQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
@@ -64,4 +65,54 @@ describe('ShortAnswerQuestion Component', () => {
         expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(['User Input']);
         mockHandleSubmitAnswer.mockClear();
     });
+
+
+    it('calculates and displays correct answer rate when showResults is true', () => {
+        const mockStudents = [
+            {
+                id: '1',
+                name: 'Alice',
+                answers: [{ idQuestion: 1, answer: ['Paris'], isCorrect: true }]
+            },
+            {
+                id: '2',
+                name: 'Bob',
+                answers: [{ idQuestion: 1, answer: ['Lyon'], isCorrect: false }]
+            },
+            {
+                id: '3',
+                name: 'Charlie',
+                answers: [{ idQuestion: 1, answer: ['Paris'], isCorrect: true }]
+            }
+        ];
+    
+
+        const question: ShortAnswerQuestion = {
+            id: '1',
+            type: 'Short',
+            hasEmbeddedAnswers: false,
+            formattedStem: {
+              text: 'What is the capital of France?',
+              format: 'html'
+            },
+            choices: [{ text: 'Paris', isCorrect: true }],
+            formattedGlobalFeedback: {
+                text: '',
+                format: 'html'
+              }
+          };
+    
+        render(
+            <MemoryRouter>
+                <ShortAnswerQuestionDisplay
+                    question={question}
+                    showResults={true}
+                    students={mockStudents}
+                />
+            </MemoryRouter>
+        );
+    
+        expect(screen.getByText('Taux de réponse correcte: 2/3')).toBeInTheDocument();
+        expect(screen.getByText('66.7%')).toBeInTheDocument();
+    });
 });

client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx

@@ -134,4 +134,43 @@ describe('TrueFalseQuestion Component', () => {
             expect(wrongAnswer1).toBeInTheDocument();
             expect(wrongAnswer1?.textContent).not.toContain('❌');
         });
+
+        it('calculates and displays pick rates correctly when showResults is true', () => {
+            const mockStudents = [
+                {
+                    id: '1',
+                    name: 'Alice',
+                    answers: [{ idQuestion: 1, answer: [true], isCorrect: true }]
+                },
+                {
+                    id: '2',
+                    name: 'Bob',
+                    answers: [{ idQuestion: 1, answer: [false], isCorrect: false }]
+                }
+            ];
+        
+            render(
+                <MemoryRouter>
+                    <TrueFalseQuestionDisplay
+                        question={{ ...trueFalseQuestion, id: '1' }}
+                        students={mockStudents}
+                        showResults={true}
+                    />
+                </MemoryRouter>
+            );
+        
+            const pickRateDivs = screen.getAllByText((_, element) =>
+            element !== null &&
+            (element as HTMLElement).classList.contains('pick-rate') &&
+            (element as HTMLElement).textContent!.includes('1/2')
+          );
+          expect(pickRateDivs.length).toBe(2);
+          
+          const percentDivs = screen.getAllByText((_, element) =>
+            element !== null &&
+            (element as HTMLElement).classList.contains('pick-rate') &&
+            (element as HTMLElement).textContent!.includes('50.0%')
+          );
+          expect(percentDivs.length).toBe(2);
+        });
 });

client/src/components/LiveResults/LiveResults.tsx

@@ -29,6 +29,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
     return (
         <div>
             <div className="action-bar mb-1">
+            <div className="text-2xl text-bold">Résultats du quiz</div>
                 <FormGroup row>
                     <FormControlLabel
                         label={<div className="text-sm">Afficher les noms</div>}