From e8b11637334eba38773b7bddaabd200db460641b Mon Sep 17 00:00:00 2001
From: JubaAzul <118773284+JubaAzul@users.noreply.github.com>
Date: Fri, 31 Jan 2025 15:55:37 -0500
Subject: [PATCH] =?UTF-8?q?L'affichage=20de=20la=20bonne=20r=C3=A9ponse=20?=
 =?UTF-8?q?dans=20les=20r=C3=A9troactions=20ne=20fonctionne=20plus=20Fixes?=
 =?UTF-8?q?=20#218?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MultipleChoiceQuestionDisplay.test.tsx    | 81 ++++++++++++++++---
 .../TrueFalseQuestionDisplay.test.tsx         | 77 +++++++++++++++---
 .../MultipleChoiceQuestionDisplay.tsx         |  3 +-
 .../TrueFalseQuestionDisplay.tsx              |  5 +-
 4 files changed, 139 insertions(+), 27 deletions(-)

diff --git a/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
index f4198ed..05900fc 100644
--- a/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
+++ b/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { act } from 'react';
@@ -17,21 +17,30 @@ const question = questions[0];
 
 describe('MultipleChoiceQuestionDisplay', () => {
     const mockHandleOnSubmitAnswer = jest.fn();
-    const sampleProps = {
-        question: question,
-        handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
-        showAnswer: false
+
+    const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
+        const [showAnswerState, setShowAnswerState] = useState(showAnswer);
+
+        const handleOnSubmitAnswer = (answer: string) => {
+            mockHandleOnSubmitAnswer(answer);
+            setShowAnswerState(true);
+        };
+
+        return (
+            <MemoryRouter>
+                <MultipleChoiceQuestionDisplay
+                    question={question}
+                    handleOnSubmitAnswer={handleOnSubmitAnswer}
+                    showAnswer={showAnswerState}
+                />
+            </MemoryRouter>
+        );
     };
 
     const choices = question.choices;
 
     beforeEach(() => {
-        render(
-            <MemoryRouter>
-                <MultipleChoiceQuestionDisplay
-                  {...sampleProps}
-                    />
-            </MemoryRouter>);
+        render(<TestWrapper showAnswer={false} />);
     });
 
     test('renders the question and choices', () => {
@@ -55,7 +64,6 @@ describe('MultipleChoiceQuestionDisplay', () => {
         act(() => {
             fireEvent.click(choiceButton);
         });
-
         const submitButton = screen.getByText('Répondre');
         act(() => {
             fireEvent.click(submitButton);
@@ -63,4 +71,51 @@ describe('MultipleChoiceQuestionDisplay', () => {
 
         expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith('Choice 1');
     });
-});
+
+    it('should show ✅ next to the correct answer and ❌ next to the wrong answers when showAnswer is true', async () => {
+        const choiceButton = screen.getByText('Choice 1').closest('button');
+        if (!choiceButton) throw new Error('Choice button not found');
+
+        // Click on choiceButton
+        act(() => {
+            fireEvent.click(choiceButton);
+        });
+
+        const button = screen.getByText("Répondre");
+
+        act(() => {
+            fireEvent.click(button);
+        });
+
+        // Wait for the DOM to update
+            const correctAnswer = screen.getByText("Choice 1").closest('button');
+            expect(correctAnswer).toBeInTheDocument();
+            expect(correctAnswer?.textContent).toContain('✅');
+
+            const wrongAnswer1 = screen.getByText("Choice 2").closest('button');
+            expect(wrongAnswer1).toBeInTheDocument();
+            expect(wrongAnswer1?.textContent).toContain('❌');
+    });
+
+    it('should not show ✅ or ❌ when repondre button is not clicked', async () => {
+        const choiceButton = screen.getByText('Choice 1').closest('button');
+        if (!choiceButton) throw new Error('Choice button not found');
+
+        // Click on choiceButton
+        act(() => {
+            fireEvent.click(choiceButton);
+        });
+
+        // Check for correct answer
+        const correctAnswer = screen.getByText("Choice 1").closest('button');
+        expect(correctAnswer).toBeInTheDocument();
+        expect(correctAnswer?.textContent).not.toContain('✅');
+
+        // Check for wrong answers
+        const wrongAnswer1 = screen.getByText("Choice 2");
+        expect(wrongAnswer1).toBeInTheDocument();
+        expect(wrongAnswer1?.textContent).not.toContain('❌');
+    });
+
+    });
+
diff --git a/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
index 04620a1..5bcb7df 100644
--- a/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
+++ b/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
@@ -1,5 +1,5 @@
 // TrueFalseQuestion.test.tsx
-import React from 'react';
+import React, { useState } from 'react';
 import { render, fireEvent, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
@@ -9,20 +9,31 @@ import { parse, TrueFalseQuestion } from 'gift-pegjs';
 describe('TrueFalseQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
     const sampleStem = 'Sample True False Question';
-    const trueFalseQuestion = 
+    const trueFalseQuestion =
         parse(`${sampleStem}{T}`)[0] as TrueFalseQuestion;
 
-    const sampleProps = {
-        question: trueFalseQuestion,
-        handleOnSubmitAnswer: mockHandleSubmitAnswer,
-        showAnswer: false
+
+    const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
+        const [showAnswerState, setShowAnswerState] = useState(showAnswer);
+
+        const handleOnSubmitAnswer = (answer: boolean) => {
+            mockHandleSubmitAnswer(answer);
+            setShowAnswerState(true);
+        };
+
+        return (
+            <MemoryRouter>
+                <TrueFalseQuestionDisplay
+                    question={trueFalseQuestion}
+                    handleOnSubmitAnswer={handleOnSubmitAnswer}
+                    showAnswer={showAnswerState}
+                />
+            </MemoryRouter>
+        );
     };
 
     beforeEach(() => {
-        render(
-            <MemoryRouter>
-                <TrueFalseQuestionDisplay {...sampleProps} />
-            </MemoryRouter>);
+        render(<TestWrapper showAnswer={false} />);
     });
 
     it('renders correctly', () => {
@@ -73,4 +84,50 @@ describe('TrueFalseQuestion Component', () => {
 
         expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(false);
     });
+
+
+        it('should show ✅ next to the correct answer and ❌ next to the wrong answers when showAnswer is true', async () => {
+            const choiceButton = screen.getByText('Vrai').closest('button');
+            if (!choiceButton) throw new Error('T button not found');
+    
+            // Click on choiceButton
+            act(() => {
+                fireEvent.click(choiceButton);
+            });
+    
+            const button = screen.getByText("Répondre");
+    
+            act(() => {
+                fireEvent.click(button);
+            });
+    
+            // Wait for the DOM to update
+                const correctAnswer = screen.getByText("Vrai").closest('button');
+                expect(correctAnswer).toBeInTheDocument();
+                expect(correctAnswer?.textContent).toContain('✅');
+    
+                const wrongAnswer1 = screen.getByText("Faux").closest('button');
+                expect(wrongAnswer1).toBeInTheDocument();
+                expect(wrongAnswer1?.textContent).toContain('❌');
+        });
+    
+        it('should not show ✅ or ❌ when repondre button is not clicked', async () => {
+            const choiceButton = screen.getByText('Vrai').closest('button');
+            if (!choiceButton) throw new Error('Choice button not found');
+    
+            // Click on choiceButton
+            act(() => {
+                fireEvent.click(choiceButton);
+            });
+    
+            // Check for correct answer
+            const correctAnswer = screen.getByText("Vrai").closest('button');
+            expect(correctAnswer).toBeInTheDocument();
+            expect(correctAnswer?.textContent).not.toContain('✅');
+    
+            // Check for wrong answers
+            const wrongAnswer1 = screen.getByText("Faux");
+            expect(wrongAnswer1).toBeInTheDocument();
+            expect(wrongAnswer1?.textContent).not.toContain('❌');
+        });
 });
diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
index 2fb187b..e5e7b6b 100644
--- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
@@ -39,7 +39,8 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                                 variant="text"
                                 className="button-wrapper"
                                 onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
-                                { showAnswer && (choice.isCorrect ? '✅' : '❌')}
+                                {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
+                                :``}
                                 <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                 <div className={`answer-text ${selected}`}>
                                     <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
index 6ab1e07..63b3891 100644
--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@@ -22,7 +22,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
 
     const selectedTrue = answer ? 'selected' : '';
     const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
-    const correctAnswer = question.isTrue === answer;
     return (
         <div className="question-container">
             <div className="question content">
@@ -34,7 +33,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     onClick={() => !showAnswer && setAnswer(true)}
                     fullWidth
                 >
-                    {showAnswer && (correctAnswer ? '✅' : '❌')}
+                    {showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}                    
                     <div className={`circle ${selectedTrue}`}>V</div>
                     <div className={`answer-text ${selectedTrue}`}>Vrai</div>
                 </Button>
@@ -43,7 +42,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                     onClick={() => !showAnswer && setAnswer(false)}
                     fullWidth
                 >
-                    {showAnswer && (!correctAnswer ? '✅' : '❌')}
+                    {showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}                    
                     <div className={`circle ${selectedFalse}`}>F</div>
                     <div className={`answer-text ${selectedFalse}`}>Faux</div>
                 </Button>