Merge 5edd556688 into 112062c0b2

client/src/__tests__/components/GiftTemplate/LiveResults/LiveResults.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import LiveResults from 'src/components/LiveResults/LiveResults';
 import { QuestionType } from 'src/Types/QuestionType';
+import { Socket } from 'socket.io-client';
 import { StudentType } from 'src/Types/StudentType';
 import { BaseQuestion, parse } from 'gift-pegjs';
 
@@ -11,6 +12,14 @@ const mockGiftQuestions = parse(
     
     ::Sample Question 2:: Sample Question 2 {T}`);
 
+const mockSocket: Socket = {
+    on: jest.fn(),
+    off: jest.fn(),
+    emit: jest.fn(),
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+} as unknown as Socket;
+
 const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => {
     if (question.type !== "Category")
         question.id = (index + 1).toString();
@@ -26,6 +35,131 @@ const mockStudents: StudentType[] = [
 const mockShowSelectedQuestion = jest.fn();
 
 describe('LiveResults', () => {
+    test('renders the component with questions and students', () => {
+        render(
+            <LiveResults
+                socket={mockSocket}
+                questions={mockQuestions}
+                showSelectedQuestion={jest.fn()}
+                quizMode="teacher"
+                students={mockStudents}
+            />
+        );
+        expect(screen.getByText(`Q${1}`)).toBeInTheDocument();
+
+        // Toggle the display of usernames
+        const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
+
+        // Toggle the display of usernames back
+        fireEvent.click(toggleUsernamesSwitch);
+
+        // Check if the component renders the students
+        mockStudents.forEach((student) => {
+            expect(screen.getByText(student.name)).toBeInTheDocument();
+        });
+    });
+
+    test('toggles the display of usernames', () => {
+        render(
+            <LiveResults
+                socket={mockSocket}
+                questions={mockQuestions}
+                showSelectedQuestion={jest.fn()}
+                quizMode="teacher"
+                students={mockStudents}
+            />
+        );
+
+        // Toggle the display of usernames
+        const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
+
+        // Toggle the display of usernames back
+        fireEvent.click(toggleUsernamesSwitch);
+
+        // Check if the usernames are shown again
+        mockStudents.forEach((student) => {
+            expect(screen.getByText(student.name)).toBeInTheDocument();
+        });
+    });
+
+});
+test('calculates and displays the correct student grades', () => {
+    render(
+        <LiveResults
+            socket={mockSocket}
+            questions={mockQuestions}
+            showSelectedQuestion={jest.fn()}
+            quizMode="teacher"
+            students={mockStudents}
+        />
+    );
+
+    // Toggle the display of usernames
+    const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
+
+    // Toggle the display of usernames back
+    fireEvent.click(toggleUsernamesSwitch);
+
+    // Check if the student grades are calculated and displayed correctly
+    mockStudents.forEach((student) => {
+        const grade = student.answers.filter(answer => answer.isCorrect).length / mockQuestions.length * 100;
+        const gradeElements = screen.getAllByText(`${grade.toFixed()} %`);
+        expect(gradeElements.length).toBeGreaterThan(0);});
+});
+
+test('calculates and displays the class average', () => {
+    render(
+        <LiveResults
+            socket={mockSocket}
+            questions={mockQuestions}
+            showSelectedQuestion={jest.fn()}
+            quizMode="teacher"
+            students={mockStudents}
+        />
+    );
+
+    // Toggle the display of usernames
+    const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
+
+    // Toggle the display of usernames back
+    fireEvent.click(toggleUsernamesSwitch);
+
+    // Calculate the class average
+    const totalGrades = mockStudents.reduce((total, student) => {
+        return total + (student.answers.filter(answer => answer.isCorrect).length / mockQuestions.length * 100);
+    }, 0);
+    const classAverage = totalGrades / mockStudents.length;
+
+    // Check if the class average is displayed correctly
+    const classAverageElements = screen.getAllByText(`${classAverage.toFixed()} %`);
+    const classAverageElement = classAverageElements.find((element) => {
+        return element.closest('td')?.classList.contains('MuiTableCell-footer');
+    });
+    expect(classAverageElement).toBeInTheDocument();
+});
+
+test('displays the correct answers per question', () => {
+    render(
+        <LiveResults
+            socket={mockSocket}
+            questions={mockQuestions}
+            showSelectedQuestion={jest.fn()}
+            quizMode="teacher"
+            students={mockStudents}
+        />
+    );
+
+    // Check if the correct answers per question are displayed correctly
+    mockQuestions.forEach((_, index) => {
+        const correctAnswers = mockStudents.filter(student => student.answers.some(answer => answer.idQuestion === index + 1 && answer.isCorrect)).length;
+        const correctAnswersPercentage = (correctAnswers / mockStudents.length) * 100;
+        const correctAnswersElements = screen.getAllByText(`${correctAnswersPercentage.toFixed()} %`);
+        const correctAnswersElement = correctAnswersElements.find((element) => {
+            return element.closest('td')?.classList.contains('MuiTableCell-root');
+        });
+        expect(correctAnswersElement).toBeInTheDocument();
+    });
+});
 test('renders LiveResults component', () => {
     render(
         <LiveResults
@@ -92,4 +226,31 @@ describe('LiveResults', () => {
 
     expect(mockShowSelectedQuestion).toHaveBeenCalled();
 });
+
+test('toggles the visibility of content when the arrow button is clicked', () => {
+    render(<LiveResults
+        socket={null}
+        questions={mockQuestions}
+        showSelectedQuestion={mockShowSelectedQuestion}
+        quizMode="teacher"
+        students={mockStudents}
+    />);
+    const toggleSwitch = screen.getByTestId("liveResults-switch");
+    expect(toggleSwitch).toBeInTheDocument();
+    expect(screen.queryByText('Afficher les noms')).toBeInTheDocument();
+    expect(screen.queryByText('Afficher les réponses')).toBeInTheDocument();
+    expect(screen.queryByTestId('table-container')).toBeInTheDocument();
+
+
+    fireEvent.click(toggleSwitch);
+    screen.debug();
+
+    expect(screen.queryByText('Afficher les noms')).not.toBeInTheDocument();
+    expect(screen.queryByText('Afficher les réponses')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('table-container')).not.toBeInTheDocument();
+
+    fireEvent.click(toggleSwitch);
+    expect(screen.queryByText('Afficher les noms')).toBeInTheDocument();
+    expect(screen.queryByText('Afficher les réponses')).toBeInTheDocument();
+    expect(screen.queryByTestId('table-container')).toBeInTheDocument();
 });

client/src/__tests__/components/LiveResults/LiveResults.test.tsx

@@ -1,163 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import LiveResults from 'src/components/LiveResults/LiveResults';
-import { QuestionType } from 'src/Types/QuestionType';
-import { StudentType } from 'src/Types/StudentType';
-import { Socket } from 'socket.io-client';
-import { BaseQuestion,parse } from 'gift-pegjs';
-
-const mockSocket: Socket = {
-    on: jest.fn(),
-    off: jest.fn(),
-    emit: jest.fn(),
-    connect: jest.fn(),
-    disconnect: jest.fn(),
-} as unknown as Socket;
-
-const mockGiftQuestions = parse(
-    `::Sample Question 1:: Question stem
-    {
-        =Choice 1
-        ~Choice 2
-    }`);
-
-const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => {
-    if (question.type !== "Category")
-        question.id = (index + 1).toString();
-    const newMockQuestion = question;
-    return {question : newMockQuestion as BaseQuestion};
-});
-
-const mockStudents: StudentType[] = [
-    { id: '1', name: 'Student 1', answers: [{ idQuestion: 1, answer: 'Choice 1', isCorrect: true }] },
-    { id: '2', name: 'Student 2', answers: [{ idQuestion: 1, answer: 'Choice 2', isCorrect: false }] },
-];
-
-describe('LiveResults', () => {
-    test('renders the component with questions and students', () => {
-        render(
-            <LiveResults
-                socket={mockSocket}
-                questions={mockQuestions}
-                showSelectedQuestion={jest.fn()}
-                quizMode="teacher"
-                students={mockStudents}
-            />
-        );
-        expect(screen.getByText(`Q${1}`)).toBeInTheDocument();
-
-        // Toggle the display of usernames
-        const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
-
-        // Toggle the display of usernames back
-        fireEvent.click(toggleUsernamesSwitch);
-        
-        // Check if the component renders the students
-        mockStudents.forEach((student) => {
-            expect(screen.getByText(student.name)).toBeInTheDocument();
-        });
-    });
-
-    test('toggles the display of usernames', () => {
-        render(
-            <LiveResults
-                socket={mockSocket}
-                questions={mockQuestions}
-                showSelectedQuestion={jest.fn()}
-                quizMode="teacher"
-                students={mockStudents}
-            />
-        );
-
-        // Toggle the display of usernames
-        const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
-
-        // Toggle the display of usernames back
-        fireEvent.click(toggleUsernamesSwitch);
-
-        // Check if the usernames are shown again
-        mockStudents.forEach((student) => {
-            expect(screen.getByText(student.name)).toBeInTheDocument();
-        });
-    });
-
-});
-test('calculates and displays the correct student grades', () => {
-    render(
-        <LiveResults
-            socket={mockSocket}
-            questions={mockQuestions}
-            showSelectedQuestion={jest.fn()}
-            quizMode="teacher"
-            students={mockStudents}
-        />
-    );
-
-
-    // Toggle the display of usernames
-    const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
-
-    // Toggle the display of usernames back
-    fireEvent.click(toggleUsernamesSwitch);
-    
-    // Check if the student grades are calculated and displayed correctly
-    mockStudents.forEach((student) => {
-        const grade = student.answers.filter(answer => answer.isCorrect).length / mockQuestions.length * 100;
-        expect(screen.getByText(`${grade.toFixed()} %`)).toBeInTheDocument();
-    });
-});
-
-test('calculates and displays the class average', () => {
-    render(
-        <LiveResults
-            socket={mockSocket}
-            questions={mockQuestions}
-            showSelectedQuestion={jest.fn()}
-            quizMode="teacher"
-            students={mockStudents}
-        />
-    );
-
-    // Toggle the display of usernames
-    const toggleUsernamesSwitch = screen.getByLabelText('Afficher les noms');
-
-    // Toggle the display of usernames back
-    fireEvent.click(toggleUsernamesSwitch);
-    
-    // Calculate the class average
-    const totalGrades = mockStudents.reduce((total, student) => {
-        return total + (student.answers.filter(answer => answer.isCorrect).length / mockQuestions.length * 100);
-    }, 0);
-    const classAverage = totalGrades / mockStudents.length;
-
-    // Check if the class average is displayed correctly
-    const classAverageElements = screen.getAllByText(`${classAverage.toFixed()} %`);
-    const classAverageElement = classAverageElements.find((element) => {
-        return element.closest('td')?.classList.contains('MuiTableCell-footer');
-    });
-    expect(classAverageElement).toBeInTheDocument();
-});
-
-test('displays the correct answers per question', () => {
-    render(
-        <LiveResults
-            socket={mockSocket}
-            questions={mockQuestions}
-            showSelectedQuestion={jest.fn()}
-            quizMode="teacher"
-            students={mockStudents}
-        />
-    );
-
-    // Check if the correct answers per question are displayed correctly
-    mockQuestions.forEach((_, index) => {
-        const correctAnswers = mockStudents.filter(student => student.answers.some(answer => answer.idQuestion === index + 1 && answer.isCorrect)).length;
-        const correctAnswersPercentage = (correctAnswers / mockStudents.length) * 100;
-        const correctAnswersElements = screen.getAllByText(`${correctAnswersPercentage.toFixed()} %`);
-        const correctAnswersElement = correctAnswersElements.find((element) => {
-            return element.closest('td')?.classList.contains('MuiTableCell-root');
-        });
-        expect(correctAnswersElement).toBeInTheDocument();
-    });
-});

client/src/components/LiveResults/LiveResults.tsx

@@ -24,14 +24,31 @@ interface LiveResultsProps {
 const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuestion, students }) => {
     const [showUsernames, setShowUsernames] = useState<boolean>(false);
     const [showCorrectAnswers, setShowCorrectAnswers] = useState<boolean>(false);
+    const [isExpanded, setIsExpanded] = useState<boolean>(true);
+
+    const toggleExpand = () => {
+        setIsExpanded(!isExpanded);
+    };
 
     return (
 
 
         <div>
-            <div className="action-bar mb-1">
+            <div className="action-bar">
-                <div className="text-2xl text-bold">Résultats du quiz</div>
+                <div>
-                <FormGroup row>
+                    <FormControlLabel
+                        label={<div className="text-sm">Résultats du quiz</div>}
+                        control={
+                            <Switch
+                                data-testid="liveResults-switch"
+                                checked={isExpanded}
+                                onChange={() => toggleExpand()}
+                            />
+                        }
+                    />
+                </div>
+                {isExpanded && (
+                    <FormGroup row className='form-group'>
                         <FormControlLabel
                             label={<div className="text-sm">Afficher les noms</div>}
                             control={
@@ -55,9 +72,10 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
                             }
                         />
                     </FormGroup>
+                )}
             </div>
-
+            {isExpanded && (
-            <div className="table-container">
+                <div className="table-container" data-testid="table-container">
 
                     <LiveResultsTable
                         students={students}
@@ -67,6 +85,7 @@ const LiveResults: React.FC<LiveResultsProps> = ({ questions, showSelectedQuesti
                         showUsernames={showUsernames}
                     />
                 </div>
+            )}
         </div>
     );
 };

client/src/components/LiveResults/liveResult.css

@@ -16,8 +16,8 @@
 /* Flexbox container for the action bar */
 .action-bar {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
-    align-items: flex-start;
+    margin-top: 2rem;
 }
 
 /* Flexbox container for the form group */
@@ -25,6 +25,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+    margin-left: 1rem;
 }
 
 .table-cell-border {

client/src/pages/Teacher/ManageRoom/ManageRoom.tsx

@@ -258,10 +258,12 @@ const ManageRoom: React.FC = () => {
         if (nextQuestionIndex === undefined || nextQuestionIndex > quizQuestions.length - 1) return;
 
         setCurrentQuestion(quizQuestions[nextQuestionIndex]);
-        webSocketService.nextQuestion({roomName: formattedRoomName, 
+        webSocketService.nextQuestion({
+            roomName: formattedRoomName,
             questions: quizQuestions,
             questionIndex: nextQuestionIndex,
-                                       isLaunch: false});
+            isLaunch: false
+        });
     };
 
     const previousQuestion = () => {
@@ -490,22 +492,8 @@ const ManageRoom: React.FC = () => {
 
                                     />
                                 )}
-
-                                <LiveResultsComponent
-                                    quizMode={quizMode}
-                                    socket={socket}
-                                    questions={quizQuestions}
-                                    showSelectedQuestion={showSelectedQuestion}
-                                    students={students}
-                                ></LiveResultsComponent>
-                            </div>
-                        </div>
-
                                 {quizMode === 'teacher' && (
-                            <div
+                                    <div className="questionNavigationButtons">
-                                className="questionNavigationButtons"
-                                style={{ display: 'flex', justifyContent: 'center' }}
-                            >
                                         <div className="previousQuestionButton">
                                             <Button
                                                 onClick={previousQuestion}
@@ -529,6 +517,17 @@ const ManageRoom: React.FC = () => {
                                         </div>
                                     </div>
                                 )}
+                                <LiveResultsComponent
+                                    quizMode={quizMode}
+                                    socket={socket}
+                                    questions={quizQuestions}
+                                    showSelectedQuestion={showSelectedQuestion}
+                                    students={students}
+                                ></LiveResultsComponent>
+                            </div>
+                        </div>
+
+
                     </div>
                 ) : (
                     <StudentWaitPage

client/src/pages/Teacher/ManageRoom/manageRoom.css

@@ -36,6 +36,11 @@
     justify-content: center;
     /* align-items: center; */
 }
+.questionNavigationButtons {
+    display: flex;
+    justify-content: center;
+    margin-top: 2rem;
+}