Tests complétés

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/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx

@@ -99,6 +99,7 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
             {!showAnswer && handleOnSubmitAnswer && (
 
                 <Button
+                    className='submit-button'
                     variant="contained"
                     onClick={() =>
                         answer !== "" && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)

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

@@ -109,6 +109,7 @@ const NumericalQuestionDisplay: React.FC<Props> = (props) => {
                     )}
                     {handleOnSubmitAnswer && (
                         <Button
+                        className='submit-button'
                             variant="contained"
                             onClick={() =>
                                 answer !== undefined &&

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);
     };
 
@@ -91,6 +91,7 @@ const ShortAnswerQuestionDisplay: React.FC<Props> = (props) => {
                     </div>
                     {handleOnSubmitAnswer && (
                         <Button
+                        className='submit-button'   
                             variant="contained"
                             onClick={() =>
                                 answer !== undefined &&

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

@@ -105,6 +105,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
             )}
             {!showAnswer && handleOnSubmitAnswer && (
                 <Button
+                className='submit-button'
                     variant="contained"
                     onClick={() =>
                         answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer(answer)

client/src/components/QuestionsDisplay/questionStyle.css

@@ -200,6 +200,10 @@
     margin-bottom: 1rem;
     
 }
+.submit-button{
+width: 20%;
+
+}
 
 
 

client/src/components/StudentModeQuiz/StudentModeQuiz.tsx

@@ -60,7 +60,7 @@ const StudentModeQuiz: React.FC<StudentModeQuizProps> = ({
     <div >
     <b>Question {questionInfos.question.id}/{questions.length}</b>
     </div>
-        <div className="overflow-auto">
+        <div className="overflow-auto" style={{ width: '50%', alignItems: 'center', justifyContent: 'center', margin: 'auto' }}>
             <div className="question-component-container">
                 <div className="mb-5">
                     {/* <QuestionNavigation