From e4ae70896afd7eb6caf6ed240b1eff76afd35061 Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Tue, 18 Mar 2025 18:11:25 -0400 Subject: [PATCH 1/5] =?UTF-8?q?[BUG]=20Dans=20un=20quiz=20au=20rythme=20de?= =?UTF-8?q?=20l'=C3=A9tudiant,=20l'enseignant=20ne=20peut=20plus=20masquer?= =?UTF-8?q?=20les=20questions=20Fixes=20#295?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/ManageRoom/ManageRoom.test.tsx | 110 ++++++++++++++---- .../pages/Teacher/ManageRoom/ManageRoom.tsx | 77 +++++++----- .../pages/Teacher/ManageRoom/manageRoom.css | 9 +- 3 files changed, 141 insertions(+), 55 deletions(-) diff --git a/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx b/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx index 142f1f3..2d0259e 100644 --- a/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx +++ b/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx @@ -75,36 +75,36 @@ describe('ManageRoom', () => { ); }); - + await act(async () => { const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; createSuccessCallback('Test Room'); }); - + await waitFor(() => { expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id'); }); - + const launchButton = screen.getByText('Lancer'); fireEvent.click(launchButton); - + const rythmeButton = screen.getByText('Rythme du professeur'); fireEvent.click(rythmeButton); - + const secondLaunchButton = screen.getAllByText('Lancer'); fireEvent.click(secondLaunchButton[1]); - + await waitFor(() => { expect(screen.getByText('Test Quiz')).toBeInTheDocument(); - + const roomHeader = document.querySelector('h1'); expect(roomHeader).toHaveTextContent('Salle : TEST ROOM'); - + expect(screen.getByText('0/60')).toBeInTheDocument(); expect(screen.getByText('Question 1/2')).toBeInTheDocument(); }); }); - + test('handles create-success event', async () => { await act(async () => { render( @@ -171,30 +171,30 @@ describe('ManageRoom', () => { ); }); - + await act(async () => { const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; createSuccessCallback('Test Room'); }); - + fireEvent.click(screen.getByText('Lancer')); fireEvent.click(screen.getByText('Rythme du professeur')); fireEvent.click(screen.getAllByText('Lancer')[1]); - + await waitFor(() => { screen.debug(); }); - + const nextQuestionButton = await screen.findByRole('button', { name: /Prochaine question/i }); expect(nextQuestionButton).toBeInTheDocument(); - + fireEvent.click(nextQuestionButton); - + await waitFor(() => { expect(screen.getByText('Question 2/2')).toBeInTheDocument(); }); }); - + test('handles disconnect', async () => { await act(async () => { render( @@ -230,37 +230,37 @@ describe('ManageRoom', () => { ); }); - + await act(async () => { const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; createSuccessCallback('test-room-name'); }); - + const launchButton = screen.getByText('Lancer'); fireEvent.click(launchButton); - + const rythmeButton = screen.getByText('Rythme du professeur'); fireEvent.click(rythmeButton); - + const secondLaunchButton = screen.getAllByText('Lancer'); fireEvent.click(secondLaunchButton[1]); - + await act(async () => { const userJoinedCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'user-joined')[1]; userJoinedCallback(mockStudents[0]); }); - + await act(async () => { const submitAnswerCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'submit-answer-room')[1]; submitAnswerCallback(mockAnswerData); }); - + await waitFor(() => { expect(consoleSpy).toHaveBeenCalledWith( 'Received answer from Student 1 for question 1: Answer1' ); }); - + consoleSpy.mockRestore(); }); @@ -293,4 +293,66 @@ describe('ManageRoom', () => { expect(screen.queryByText('Student 1')).not.toBeInTheDocument(); }); }); + test('initializes isQuestionShown based on quizMode', async() => { + render( + + ); + + await act(async () => { + const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; + createSuccessCallback('Test Room'); + }); + + await waitFor(() => { + expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id'); + }); + const launchButton = screen.getByText('Lancer'); + fireEvent.click(launchButton); + + const rythmeButton = screen.getByText(`Rythme de l'étudiant`); + fireEvent.click(rythmeButton); + + const secondLaunchButton = screen.getAllByText('Lancer'); + fireEvent.click(secondLaunchButton[1]); + + expect(screen.queryByText('Question')).not.toBeInTheDocument(); + }); + + test('renders the close button when quizMode is student and isQuestionShown is true', async() => { + render( + + ); + + await act(async () => { + const createSuccessCallback = (mockSocket.on as jest.Mock).mock.calls.find(call => call[0] === 'create-success')[1]; + createSuccessCallback('Test Room'); + }); + + await waitFor(() => { + expect(ApiService.getQuiz).toHaveBeenCalledWith('test-quiz-id'); + }); + + const launchButton = screen.getByText('Lancer'); + fireEvent.click(launchButton); + + const rythmeButton = screen.getByText(`Rythme de l'étudiant`); + fireEvent.click(rythmeButton); + + const secondLaunchButton = screen.getAllByText('Lancer'); + fireEvent.click(secondLaunchButton[1]); + + const tableHeader = screen.getByText('Q1'); + fireEvent.click(tableHeader); + + const closeButton = screen.getByRole('button', { name: /✖/i }); + expect(closeButton).toBeInTheDocument(); + expect(screen.getByText(/Question 1\//i)).toBeInTheDocument(); + + fireEvent.click(closeButton); + + expect(screen.queryByRole('button', { name: /✖/i })).not.toBeInTheDocument(); + expect(screen.queryByText(/Question 1\//i)).not.toBeInTheDocument(); + + }); + }); diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 01d9c27..67af4a3 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -30,7 +30,7 @@ const ManageRoom: React.FC = () => { const navigate = useNavigate(); const [socket, setSocket] = useState(null); const [students, setStudents] = useState([]); - const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>(); + const { quizId = '', roomName = '' } = useParams<{ quizId: string, roomName: string }>(); const [quizQuestions, setQuizQuestions] = useState(); const [quiz, setQuiz] = useState(null); const [quizMode, setQuizMode] = useState<'teacher' | 'student'>('teacher'); @@ -39,6 +39,7 @@ const ManageRoom: React.FC = () => { const [quizStarted, setQuizStarted] = useState(false); const [formattedRoomName, setFormattedRoomName] = useState(""); const [newlyConnectedUser, setNewlyConnectedUser] = useState(null); + const [isQuestionShown, setIsQuestionShown] = useState(quizMode === 'student' ? false : true); // Handle the newly connected user in useEffect, because it needs state info // not available in the socket.on() callback @@ -46,13 +47,13 @@ const ManageRoom: React.FC = () => { if (newlyConnectedUser) { console.log(`Handling newly connected user: ${newlyConnectedUser.name}`); setStudents((prevStudents) => [...prevStudents, newlyConnectedUser]); - + // only send nextQuestion if the quiz has started if (!quizStarted) { console.log(`!quizStarted: returning.... `); return; } - + if (quizMode === 'teacher') { webSocketService.nextQuestion({ roomName: formattedRoomName, @@ -65,12 +66,16 @@ const ManageRoom: React.FC = () => { } else { console.error('Invalid quiz mode:', quizMode); } - + // Reset the newly connected user state setNewlyConnectedUser(null); } }, [newlyConnectedUser]); + useEffect(() => { + setIsQuestionShown(quizMode === 'student' ? false : true); + }, [quizMode]); + useEffect(() => { const verifyLogin = async () => { if (!ApiService.isLoggedIn()) { @@ -96,7 +101,7 @@ const ManageRoom: React.FC = () => { return () => { disconnectWebSocket(); }; - }, [roomName, navigate]); + }, [roomName, navigate]); useEffect(() => { if (quizId) { @@ -218,14 +223,14 @@ const ManageRoom: React.FC = () => { console.log(`Comparing ${ans.idQuestion} to ${idQuestion}`); return ans.idQuestion === idQuestion ? { - ...ans, - answer, - isCorrect: checkIfIsCorrect( - answer, - idQuestion, - quizQuestions! - ) - } + ...ans, + answer, + isCorrect: checkIfIsCorrect( + answer, + idQuestion, + quizQuestions! + ) + } : ans; }); } else { @@ -258,10 +263,12 @@ const ManageRoom: React.FC = () => { if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return; setCurrentQuestion(quizQuestions[nextQuestionIndex]); - webSocketService.nextQuestion({roomName: formattedRoomName, - questions: quizQuestions, - questionIndex: nextQuestionIndex, - isLaunch: false}); + webSocketService.nextQuestion({ + roomName: formattedRoomName, + questions: quizQuestions, + questionIndex: nextQuestionIndex, + isLaunch: false + }); }; const previousQuestion = () => { @@ -271,7 +278,7 @@ const ManageRoom: React.FC = () => { if (prevQuestionIndex === undefined || prevQuestionIndex < 0) return; setCurrentQuestion(quizQuestions[prevQuestionIndex]); - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false}); + webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex: prevQuestionIndex, isLaunch: false }); }; const initializeQuizQuestion = () => { @@ -299,7 +306,7 @@ const ManageRoom: React.FC = () => { } setCurrentQuestion(quizQuestions[0]); - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true}); + webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex: 0, isLaunch: true }); }; const launchStudentMode = () => { @@ -336,9 +343,11 @@ const ManageRoom: React.FC = () => { if (quiz?.content && quizQuestions) { setCurrentQuestion(quizQuestions[questionIndex]); if (quizMode === 'teacher') { - webSocketService.nextQuestion({roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false}); + webSocketService.nextQuestion({ roomName: formattedRoomName, questions: quizQuestions, questionIndex, isLaunch: false }); } + setIsQuestionShown(true); } + }; const handleReturn = () => { @@ -460,15 +469,29 @@ const ManageRoom: React.FC = () => { {/* the following breaks the css (if 'room' classes are nested) */}
+ {quizQuestions ? (
{quiz?.title}
- {!isNaN(Number(currentQuestion?.question.id)) && ( - - Question {Number(currentQuestion?.question.id)}/ - {quizQuestions?.length} - + {(quizMode === 'student' && isQuestionShown) && ( +
+ +
)} + {!isNaN(Number(currentQuestion?.question.id)) + && isQuestionShown && ( + + Question {Number(currentQuestion?.question.id)}/ + {quizQuestions?.length} + + ) + } {quizMode === 'teacher' && (
@@ -483,11 +506,11 @@ const ManageRoom: React.FC = () => {
- {currentQuestion && ( + {currentQuestion && isQuestionShown && ( )} diff --git a/client/src/pages/Teacher/ManageRoom/manageRoom.css b/client/src/pages/Teacher/ManageRoom/manageRoom.css index ad870a9..9246099 100644 --- a/client/src/pages/Teacher/ManageRoom/manageRoom.css +++ b/client/src/pages/Teacher/ManageRoom/manageRoom.css @@ -37,10 +37,11 @@ /* align-items: center; */ } - - - - +.close-button-wrapper{ + display: flex; + justify-content: flex-end; + margin-right: 1rem; +} /* .create-room-container { display: flex; From 206895ebb54d181b78293cf501388d3e6a88df58 Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Wed, 19 Mar 2025 14:18:31 -0400 Subject: [PATCH 2/5] =?UTF-8?q?[BUG]=20Dans=20un=20quiz=20au=20rythme=20de?= =?UTF-8?q?=20l'=C3=A9tudiant,=20l'enseignant=20ne=20peut=20plus=20masquer?= =?UTF-8?q?=20les=20questions=20Fixes=20#295?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../pages/Teacher/ManageRoom/ManageRoom.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 67af4a3..7034bdc 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -23,7 +23,7 @@ import DisconnectButton from 'src/components/DisconnectButton/DisconnectButton'; import QuestionDisplay from 'src/components/QuestionsDisplay/QuestionDisplay'; import ApiService from '../../../services/ApiService'; import { QuestionType } from 'src/Types/QuestionType'; -import { Button } from '@mui/material'; +import { Button, FormControlLabel, Switch } from '@mui/material'; import { AnswerType } from 'src/pages/Student/JoinRoom/JoinRoom'; const ManageRoom: React.FC = () => { @@ -471,19 +471,24 @@ const ManageRoom: React.FC = () => {
{quizQuestions ? ( +
{quiz?.title}
- {(quizMode === 'student' && isQuestionShown) && ( +
- + Afficher les questions
} + control={ + ) => + setIsQuestionShown(e.target.checked) + } + /> + } + />
- )} + {!isNaN(Number(currentQuestion?.question.id)) && isQuestionShown && ( From 66f8510f9a0f05c3457dfe90374bcc650a4125ca Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Wed, 19 Mar 2025 16:26:03 -0400 Subject: [PATCH 3/5] =?UTF-8?q?[BUG]=20Dans=20un=20quiz=20au=20rythme=20de?= =?UTF-8?q?=20l'=C3=A9tudiant,=20l'enseignant=20ne=20peut=20plus=20masquer?= =?UTF-8?q?=20les=20questions=20Fixes=20#295?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx | 5 ++--- client/src/pages/Teacher/ManageRoom/ManageRoom.tsx | 8 +++++--- client/src/pages/Teacher/ManageRoom/manageRoom.css | 2 +- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx b/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx index 2d0259e..a0645eb 100644 --- a/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx +++ b/client/src/__tests__/pages/ManageRoom/ManageRoom.test.tsx @@ -344,11 +344,10 @@ describe('ManageRoom', () => { const tableHeader = screen.getByText('Q1'); fireEvent.click(tableHeader); - const closeButton = screen.getByRole('button', { name: /✖/i }); - expect(closeButton).toBeInTheDocument(); + const questionVisibilitySwitch = screen.getByTestId('question-visibility-switch'); // Get the specific switch expect(screen.getByText(/Question 1\//i)).toBeInTheDocument(); - fireEvent.click(closeButton); + fireEvent.click(questionVisibilitySwitch); expect(screen.queryByRole('button', { name: /✖/i })).not.toBeInTheDocument(); expect(screen.queryByText(/Question 1\//i)).not.toBeInTheDocument(); diff --git a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx index 7034bdc..60153e4 100644 --- a/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx +++ b/client/src/pages/Teacher/ManageRoom/ManageRoom.tsx @@ -318,6 +318,7 @@ const ManageRoom: React.FC = () => { return; } setQuizQuestions(quizQuestions); + setCurrentQuestion(quizQuestions[0]); webSocketService.launchStudentModeQuiz(formattedRoomName, quizQuestions); }; @@ -475,19 +476,20 @@ const ManageRoom: React.FC = () => {
{quiz?.title}
-
+
Afficher les questions
} control={ ) => setIsQuestionShown(e.target.checked) } /> } /> -
+
{!isNaN(Number(currentQuestion?.question.id)) && isQuestionShown && ( diff --git a/client/src/pages/Teacher/ManageRoom/manageRoom.css b/client/src/pages/Teacher/ManageRoom/manageRoom.css index 9246099..bd4b6fb 100644 --- a/client/src/pages/Teacher/ManageRoom/manageRoom.css +++ b/client/src/pages/Teacher/ManageRoom/manageRoom.css @@ -39,7 +39,7 @@ .close-button-wrapper{ display: flex; - justify-content: flex-end; + justify-content: flex-start; margin-right: 1rem; } From 331ff33d5b879e4349d13bc871d7afe17554e498 Mon Sep 17 00:00:00 2001 From: "C. Fuhrman" Date: Fri, 21 Mar 2025 14:33:43 -0400 Subject: [PATCH 4/5] Check for display of answers in the table cells of Live Results --- .../LiveResults/LiveResults.test.tsx | 31 ++++++++++++++++++- .../TableComponents/LiveResultsTableBody.tsx | 9 ++++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/client/src/__tests__/components/LiveResults/LiveResults.test.tsx b/client/src/__tests__/components/LiveResults/LiveResults.test.tsx index 269d83b..2083361 100644 --- a/client/src/__tests__/components/LiveResults/LiveResults.test.tsx +++ b/client/src/__tests__/components/LiveResults/LiveResults.test.tsx @@ -152,7 +152,7 @@ describe('LiveResults', () => { expect(classAverageElement).toBeInTheDocument(); }); - test('displays the correct answers per question', () => { + test('displays the correct answers per question in %', () => { render( { }); }); + test('displays the chosen answer in a question cell', () => { + render( + + ); + + // Show answers should be enabled + const showAnswersSwitch = screen.getByLabelText('Afficher les réponses'); + // Toggle the display of answers is it's not already enabled + if (!(showAnswersSwitch as HTMLInputElement).checked) { + fireEvent.click(showAnswersSwitch); + } + + mockStudents.forEach((student) => { + student.answers.forEach((answer) => { + const chosenAnswerElements = screen.getAllByText(answer.answer.join(', ')); + const chosenAnswerElement = chosenAnswerElements.find((element) => { + return element.closest('td')?.classList.contains('MuiTableCell-root'); + }); + expect(chosenAnswerElement).toBeInTheDocument(); + }); + }); + }); + }); diff --git a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx index a0c67f7..ffc92bc 100644 --- a/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx +++ b/client/src/components/LiveResults/LiveResultsTable/TableComponents/LiveResultsTableBody.tsx @@ -42,7 +42,11 @@ const LiveResultsTableFooter: React.FC = ({ const answer = student.answers.find( (answer) => parseInt(answer.idQuestion.toString()) === index + 1 ); - const answerText = answer ? answer.answer.toString() : ''; + const answerText = answer + ? Array.isArray(answer.answer) + ? answer.answer.join(', ') // Join array elements with a space or another delimiter + : "" // never reached + : ''; const isCorrect = answer ? answer.isCorrect : false; return ( @@ -63,6 +67,7 @@ const LiveResultsTableFooter: React.FC = ({ } > {showCorrectAnswers ? ( + // strips out formatting of answer text here (it will break images, katex, etc.)
) : isCorrect ? ( @@ -91,4 +96,4 @@ const LiveResultsTableFooter: React.FC = ({ ); }; -export default LiveResultsTableFooter; \ No newline at end of file +export default LiveResultsTableFooter; From 9fbe2920cc5040e8d673c5c42949c6f1346e4cff Mon Sep 17 00:00:00 2001 From: "C. Fuhrman" Date: Fri, 21 Mar 2025 14:43:38 -0400 Subject: [PATCH 5/5] Deux nouveaux tests (qui ne passent pas) --- .../LiveResults/LiveResults.test.tsx | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/client/src/__tests__/components/LiveResults/LiveResults.test.tsx b/client/src/__tests__/components/LiveResults/LiveResults.test.tsx index 2083361..a211327 100644 --- a/client/src/__tests__/components/LiveResults/LiveResults.test.tsx +++ b/client/src/__tests__/components/LiveResults/LiveResults.test.tsx @@ -175,7 +175,7 @@ describe('LiveResults', () => { }); }); - test('displays the chosen answer in a question cell', () => { + test('displays the submitted answer(s) in a question cell', () => { render( { }); }); + test('highlights the cell of the selected question', () => { + render( + + ); + + // Select the first question + const questionCell = screen.getByText(`Q${1}`); + fireEvent.click(questionCell); + + // Check if the selected question is highlighted + expect(questionCell.closest('th')?.classList.contains('selected-question')).toBe(true); + }); + + test('Show answers should be enabled by default', () => { + render( + + ); + + const showAnswersSwitch = screen.getByLabelText('Afficher les réponses'); + expect((showAnswersSwitch as HTMLInputElement).checked).toBe(true); + }); + });