[FEATURE] Ajout des rétroactions pour les questions à choix multiples et réponses courtes

Fixes #291

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

@@ -1,44 +1,21 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { NumericalQuestion, parse, ParsedGIFTQuestion } from 'gift-pegjs';
-import { MemoryRouter } from 'react-router-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { parse, NumericalQuestion } from 'gift-pegjs';
+import React from 'react';
 import NumericalQuestionDisplay from 'src/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay';
 
-const questions = parse(
-    `
-    ::Sample Question 1:: Question stem
-    {
-        #5..10
-    }`
-) as ParsedGIFTQuestion[];
-
-const question = questions[0] as NumericalQuestion;
-
-describe('NumericalQuestion parse', () => {
-    const q = questions[0];
-
-    it('The question is Numerical', () => {
-        expect(q.type).toBe('Numerical');
-    });
-});
-
-describe('NumericalQuestion Component', () => {
+describe('NumericalQuestionDisplay Component', () => {
     const mockHandleOnSubmitAnswer = jest.fn();
+    const question = 
+        parse('::Sample Numerical Question:: What is 2+2? {#4}')[0] as NumericalQuestion;
 
     const sampleProps = {
-        question: question,
         handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
         showAnswer: false
     };
 
     beforeEach(() => {
-        render(
-            <MemoryRouter>
-                <NumericalQuestionDisplay
-                    {...sampleProps}
-                />
-            </MemoryRouter>);
+        render(<NumericalQuestionDisplay question={question} {...sampleProps} />);
     });
 
     it('renders correctly', () => {
@@ -55,13 +32,13 @@ describe('NumericalQuestion Component', () => {
         expect(inputElement.value).toBe('7');
     });
 
-    it('Submit button should be disable if nothing is entered', () => {
+    it('Submit button should be disabled if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         expect(submitButton).toBeDisabled();
     });
 
-    it('not submited answer if nothing is entered', () => {
+    it('does not submit answer if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         fireEvent.click(submitButton);
@@ -79,4 +56,52 @@ describe('NumericalQuestion Component', () => {
 
         expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(7);
     });
+
+    it('renders correctly with the correct answer shown', () => {
+        render(<NumericalQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer={4} />);
+        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
+        expect(screen.getAllByText('4')).toHaveLength(2);
+    });
+
+    it('handles input change and checks if the answer is correct', () => {
+        const inputElement = screen.getByTestId('number-input') as HTMLInputElement;
+
+        fireEvent.change(inputElement, { target: { value: '4' } });
+
+        expect(inputElement.value).toBe('4');
+
+        const submitButton = screen.getByText('Répondre');
+        fireEvent.click(submitButton);
+
+        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(4);
+    });
+
+    it('submits the correct answer', () => {
+        const inputElement = screen.getByTestId('number-input') as HTMLInputElement;
+
+        fireEvent.change(inputElement, { target: { value: '4' } });
+
+        const submitButton = screen.getByText('Répondre');
+        fireEvent.click(submitButton);
+
+        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(4);
+    });
+
+    it('submits an incorrect answer', () => {
+        const inputElement = screen.getByTestId('number-input') as HTMLInputElement;
+
+        fireEvent.change(inputElement, { target: { value: '5' } });
+
+        const submitButton = screen.getByText('Répondre');
+        fireEvent.click(submitButton);
+
+        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith(5);
+    });
+
+    it('displays feedback when the answer is shown', () => {
+        render(<NumericalQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer={5} />);
+        expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
+        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
+        expect(screen.getByText('5')).toBeInTheDocument();
+    });
 });

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { render, screen, fireEvent, within } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { parse, ShortAnswerQuestion } from 'gift-pegjs';
+import React from 'react';
 import ShortAnswerQuestionDisplay from 'src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay';
 
 describe('ShortAnswerQuestion Component', () => {
@@ -20,28 +20,26 @@ describe('ShortAnswerQuestion Component', () => {
 
     it('renders correctly', () => {
         expect(screen.getByText(question.formattedStem.text)).toBeInTheDocument();
-        const container = screen.getByLabelText('short-answer-input');
-        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
         expect(inputElement).toBeInTheDocument();
         expect(screen.getByText('Répondre')).toBeInTheDocument();
     });
 
     it('handles input change correctly', () => {
-        const container = screen.getByLabelText('short-answer-input');
-        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
 
         fireEvent.change(inputElement, { target: { value: 'User Input' } });
 
         expect(inputElement.value).toBe('User Input');
     });
 
-    it('Submit button should be disable if nothing is entered', () => {
+    it('Submit button should be disabled if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         expect(submitButton).toBeDisabled();
     });
 
-    it('not submitted answer if nothing is entered', () => {
+    it('does not submit answer if nothing is entered', () => {
         const submitButton = screen.getByText('Répondre');
 
         fireEvent.click(submitButton);
@@ -49,17 +47,51 @@ describe('ShortAnswerQuestion Component', () => {
         expect(mockHandleSubmitAnswer).not.toHaveBeenCalled();
     });
 
-    it('submits answer correctly', () => {
-        const container = screen.getByLabelText('short-answer-input');
-        const inputElement = within(container).getByRole('textbox') as HTMLInputElement;
+    it('renders correctly with the correct answer shown', () => {
+        render(<ShortAnswerQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer="Correct Answer" />);
+        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
+        expect(screen.getByText('Correct Answer')).toBeInTheDocument();
+    });
+
+    it('handles input change and checks if the answer is correct', () => {
+        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
+
+        fireEvent.change(inputElement, { target: { value: 'Correct Answer' } });
+
+        expect(inputElement.value).toBe('Correct Answer');
 
-        // const inputElement = screen.getByRole('textbox', { name: 'short-answer-input'}) as HTMLInputElement;
         const submitButton = screen.getByText('Répondre');
-
-        fireEvent.change(inputElement, { target: { value: 'User Input' } });
-
         fireEvent.click(submitButton);
 
-        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('User Input');
+        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('Correct Answer');
+    });
+
+    it('submits the correct answer', () => {
+        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
+
+        fireEvent.change(inputElement, { target: { value: 'Correct Answer' } });
+
+        const submitButton = screen.getByText('Répondre');
+        fireEvent.click(submitButton);
+
+        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('Correct Answer');
+    });
+
+    it('submits an incorrect answer', () => {
+        const inputElement = screen.getByRole('textbox') as HTMLInputElement;
+
+        fireEvent.change(inputElement, { target: { value: 'Incorrect Answer' } });
+
+        const submitButton = screen.getByText('Répondre');
+        fireEvent.click(submitButton);
+
+        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith('Incorrect Answer');
+    });
+
+    it('displays feedback when the answer is shown', () => {
+        render(<ShortAnswerQuestionDisplay question={question} {...sampleProps} showAnswer={true} passedAnswer="Incorrect Answer" />);
+        expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
+        expect(screen.getByText('Réponse(s) accepté(es):')).toBeInTheDocument();
+        expect(screen.getByText('Incorrect Answer')).toBeInTheDocument();
     });
 });

client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx

@@ -66,6 +66,18 @@ describe('TeacherModeQuiz', () => {
         expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1);
     });
 
+
+    test('handles shows feedback for answered question', () => {
+            act(() => {
+                fireEvent.click(screen.getByText('Option B'));
+            });
+            act(() => {
+                fireEvent.click(screen.getByText('Répondre'));
+            });
+            expect(mockSubmitAnswer).toHaveBeenCalledWith('Option B', 1)
+            expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
+    });
+
     test('handles shows feedback for an already answered question', () => {
         // Answer the first question
         act(() => {
@@ -106,7 +118,7 @@ describe('TeacherModeQuiz', () => {
         });
 
         // Check if the feedback dialog is shown again
-        expect(screen.getByText('Rétroaction')).toBeInTheDocument();
+        expect(screen.getByText('❌ Incorrect!')).toBeInTheDocument();
     });
     
     test('handles disconnect button click', () => {

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

@@ -31,7 +31,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
     }, [answer]);
 
     const checkAnswer = () => {
-        const isCorrect = question.choices.some((choice) => choice.text.toLowerCase() === (answer as String).toLowerCase());
+        const isCorrect = question.choices.some((choice) => String(choice.text).toLowerCase() === String(answer).toLowerCase());
         setisGoodAnswer(isCorrect);
     };