diff --git a/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx index 45e9b0a..415524e 100644 --- a/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx @@ -209,5 +209,33 @@ describe('MultipleChoiceQuestionDisplay', () => { expect(wrongAnswer1?.textContent).not.toContain('❌'); }); + it('calculates and displays pick rates correctly when showResults is true', () => { + const question = parse(`::MCQ:: What is 2+2? { + =Four + ~Three + ~Five + }`)[0] as MultipleChoiceQuestion; + + const mockStudents = [ + { id: '1', name: 'Alice', answers: [{ idQuestion: 1, answer: ['Four'], isCorrect: true }] }, + { id: '2', name: 'Bob', answers: [{ idQuestion: 1, answer: ['Three'], isCorrect: false }] }, + { id: '3', name: 'Charlie', answers: [{ idQuestion: 1, answer: ['Four'], isCorrect: true }] } + ]; + + render( + + ); + + // Expect pick rate for "Four" to be 2/3 + expect(screen.getByText('✅2/3 (66.7%)')).toBeInTheDocument(); + + // Expect pick rate for "Three" to be 1/3 + expect(screen.getByText('❌1/3 (33.3%)')).toBeInTheDocument(); + }); + }); diff --git a/client/src/__tests__/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.test.tsx index 5c32547..697ddca 100644 --- a/client/src/__tests__/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/NumericalQuestionDisplay/NumericalQuestionDisplay.test.tsx @@ -81,4 +81,37 @@ describe('NumericalQuestion Component', () => { expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith([7]); mockHandleOnSubmitAnswer.mockClear(); }); + + it('calculates and displays correct answer rate when showResults is true', () => { + const mockStudents = [ + { + id: '1', + name: 'Alice', + answers: [{ idQuestion: 1, answer: [7], isCorrect: true }] + }, + { + id: '2', + name: 'Bob', + answers: [{ idQuestion: 1, answer: [3], isCorrect: false }] + }, + { + id: '3', + name: 'Charlie', + answers: [{ idQuestion: 1, answer: [6], isCorrect: true }] + } + ]; + + render( + + + + ); + + expect(screen.getByText('Taux de réponse correcte: 2/3')).toBeInTheDocument(); + expect(screen.getByText('66.7%')).toBeInTheDocument(); + }); }); diff --git a/client/src/__tests__/components/QuestionsDisplay/Question.test.tsx b/client/src/__tests__/components/QuestionsDisplay/Question.test.tsx index 142e563..83afa57 100644 --- a/client/src/__tests__/components/QuestionsDisplay/Question.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/Question.test.tsx @@ -25,8 +25,8 @@ describe('Questions Component', () => { showAnswer: false }; - const renderComponent = (question: Question) => { - render(); + const renderComponent = (question: Question, showAnswerToggle = false) => { + render(); }; // describe('question type parsing', () => { @@ -122,6 +122,11 @@ describe('Questions Component', () => { expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(['User Input']); }); + + it('shows "Afficher les résultats" toggle when showAnswerToggle is true', () => { + renderComponent(sampleTrueFalseQuestion, true); + expect(screen.getByText('Afficher les résultats')).toBeInTheDocument(); + }); }); diff --git a/client/src/__tests__/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.test.tsx index 57e9da5..687f6a4 100644 --- a/client/src/__tests__/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay.test.tsx @@ -3,6 +3,7 @@ import { render, screen, fireEvent, within } from '@testing-library/react'; import '@testing-library/jest-dom'; import { parse, ShortAnswerQuestion } from 'gift-pegjs'; import ShortAnswerQuestionDisplay from 'src/components/QuestionsDisplay/ShortAnswerQuestionDisplay/ShortAnswerQuestionDisplay'; +import { MemoryRouter } from 'react-router-dom'; describe('ShortAnswerQuestion Component', () => { const mockHandleSubmitAnswer = jest.fn(); @@ -64,4 +65,54 @@ describe('ShortAnswerQuestion Component', () => { expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(['User Input']); mockHandleSubmitAnswer.mockClear(); }); + + + it('calculates and displays correct answer rate when showResults is true', () => { + const mockStudents = [ + { + id: '1', + name: 'Alice', + answers: [{ idQuestion: 1, answer: ['Paris'], isCorrect: true }] + }, + { + id: '2', + name: 'Bob', + answers: [{ idQuestion: 1, answer: ['Lyon'], isCorrect: false }] + }, + { + id: '3', + name: 'Charlie', + answers: [{ idQuestion: 1, answer: ['Paris'], isCorrect: true }] + } + ]; + + + const question: ShortAnswerQuestion = { + id: '1', + type: 'Short', + hasEmbeddedAnswers: false, + formattedStem: { + text: 'What is the capital of France?', + format: 'html' + }, + choices: [{ text: 'Paris', isCorrect: true }], + formattedGlobalFeedback: { + text: '', + format: 'html' + } + }; + + render( + + + + ); + + expect(screen.getByText('Taux de réponse correcte: 2/3')).toBeInTheDocument(); + expect(screen.getByText('66.7%')).toBeInTheDocument(); + }); }); diff --git a/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx b/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx index f79d1da..87ce9cb 100644 --- a/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx +++ b/client/src/__tests__/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx @@ -134,4 +134,43 @@ describe('TrueFalseQuestion Component', () => { expect(wrongAnswer1).toBeInTheDocument(); expect(wrongAnswer1?.textContent).not.toContain('❌'); }); + + it('calculates and displays pick rates correctly when showResults is true', () => { + const mockStudents = [ + { + id: '1', + name: 'Alice', + answers: [{ idQuestion: 1, answer: [true], isCorrect: true }] + }, + { + id: '2', + name: 'Bob', + answers: [{ idQuestion: 1, answer: [false], isCorrect: false }] + } + ]; + + render( + + + + ); + + const pickRateDivs = screen.getAllByText((_, element) => + element !== null && + (element as HTMLElement).classList.contains('pick-rate') && + (element as HTMLElement).textContent!.includes('1/2') + ); + expect(pickRateDivs.length).toBe(2); + + const percentDivs = screen.getAllByText((_, element) => + element !== null && + (element as HTMLElement).classList.contains('pick-rate') && + (element as HTMLElement).textContent!.includes('50.0%') + ); + expect(percentDivs.length).toBe(2); + }); }); diff --git a/client/src/components/LiveResults/LiveResults.tsx b/client/src/components/LiveResults/LiveResults.tsx index a35a672..17ef726 100644 --- a/client/src/components/LiveResults/LiveResults.tsx +++ b/client/src/components/LiveResults/LiveResults.tsx @@ -29,6 +29,7 @@ const LiveResults: React.FC = ({ questions, showSelectedQuesti return (
+
Résultats du quiz
Afficher les noms
}