From c65181f7bf184d2a56ea428646aac1fad771c30b Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Thu, 30 Jan 2025 23:01:04 -0500 Subject: [PATCH 1/2] =?UTF-8?q?L'affichage=20de=20la=20bonne=20r=C3=A9pons?= =?UTF-8?q?e=20dans=20les=20r=C3=A9troactions=20ne=20fonctionne=20plus=20F?= =?UTF-8?q?ixes=20#218?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MultipleChoiceQuestionDisplay.tsx | 19 +++++++------------ server/package-lock.json | 2 +- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx index f9ade9f..2fb187b 100644 --- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx @@ -12,10 +12,9 @@ interface Props { } const MultipleChoiceQuestionDisplay: React.FC = (props) => { - const { question, showAnswer, handleOnSubmitAnswer } = props; const [answer, setAnswer] = useState(); - + useEffect(() => { setAnswer(undefined); }, [question]); @@ -24,7 +23,6 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => { setAnswer(choice); }; - const alpha = Array.from(Array(26)).map((_e, i) => i + 65); const alphabet = alpha.map((x) => String.fromCharCode(x)); return ( @@ -37,25 +35,22 @@ const MultipleChoiceQuestionDisplay: React.FC = (props) => { const selected = answer === choice.formattedText.text ? 'selected' : ''; return (
- - {choice.formattedFeedback && showAnswer && ( + {choice.formattedFeedback && showAnswer && (
- {choice.isCorrect ? '✅' : '❌'}
)} + +
); })} diff --git a/server/package-lock.json b/server/package-lock.json index 9b44c36..3d4122a 100644 --- a/server/package-lock.json +++ b/server/package-lock.json @@ -31,7 +31,7 @@ "supertest": "^6.3.4" }, "engines": { - "node": "18.x" + "node": "20.x" } }, "node_modules/@ampproject/remapping": { 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 2/2] =?UTF-8?q?L'affichage=20de=20la=20bonne=20r=C3=A9pons?= =?UTF-8?q?e=20dans=20les=20r=C3=A9troactions=20ne=20fonctionne=20plus=20F?= =?UTF-8?q?ixes=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 ( + + + + ); }; const choices = question.choices; beforeEach(() => { - render( - - - ); + render(); }); 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 ( + + + + ); }; beforeEach(() => { - render( - - - ); + render(); }); 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) => { variant="text" className="button-wrapper" onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}> - { showAnswer && (choice.isCorrect ? '✅' : '❌')} + {showAnswer? (
{(choice.isCorrect ? '✅' : '❌')}
) + :``}
{alphabet[i]}
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) => { const selectedTrue = answer ? 'selected' : ''; const selectedFalse = answer !== undefined && !answer ? 'selected' : ''; - const correctAnswer = question.isTrue === answer; return (
@@ -34,7 +33,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { onClick={() => !showAnswer && setAnswer(true)} fullWidth > - {showAnswer && (correctAnswer ? '✅' : '❌')} + {showAnswer? (
{(question.isTrue ? '✅' : '❌')}
):``}
V
Vrai
@@ -43,7 +42,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { onClick={() => !showAnswer && setAnswer(false)} fullWidth > - {showAnswer && (!correctAnswer ? '✅' : '❌')} + {showAnswer? (
{(!question.isTrue ? '✅' : '❌')}
):``}
F
Faux