From 22482592cdbdcac9f38f5ce4b56733060b8e576b Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Fri, 7 Mar 2025 16:33:57 -0500 Subject: [PATCH] Test --- .../StudentModeQuiz/StudentModeQuiz.test.tsx | 63 ++++++++++++++---- .../TeacherModeQuiz/TeacherModeQuiz.test.tsx | 65 +++++++++++++++++-- .../TrueFalseQuestionDisplay.tsx | 4 +- .../TeacherModeQuiz/TeacherModeQuiz.tsx | 1 - 4 files changed, 115 insertions(+), 18 deletions(-) diff --git a/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx b/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx index 801cdd5..74f5867 100644 --- a/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx +++ b/client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, fireEvent, act } from '@testing-library/react'; +import { render, screen, fireEvent, act, waitFor } from '@testing-library/react'; import '@testing-library/jest-dom'; import { MemoryRouter } from 'react-router-dom'; import StudentModeQuiz from 'src/components/StudentModeQuiz/StudentModeQuiz'; @@ -15,13 +15,16 @@ const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => if (question.type !== "Category") question.id = (index + 1).toString(); const newMockQuestion = question; - return {question : newMockQuestion as BaseQuestion}; + return { question: newMockQuestion as BaseQuestion }; }); const mockSubmitAnswer = jest.fn(); const mockDisconnectWebSocket = jest.fn(); beforeEach(() => { + // Clear local storage before each test + localStorage.clear(); + render( { submitAnswer={mockSubmitAnswer} disconnectWebSocket={mockDisconnectWebSocket} /> - ); + + ); }); describe('StudentModeQuiz', () => { @@ -49,6 +53,47 @@ describe('StudentModeQuiz', () => { }); expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1); + + // await waitFor(() => { + // expect(localStorage.getItem('Answer1')).toBe(JSON.stringify('Option A')); + // }); + }); + + test.skip('handles shows feedback for an already answered question', async () => { + // Answer the first question + act(() => { + fireEvent.click(screen.getByText('Option A')); + }); + act(() => { + fireEvent.click(screen.getByText('Répondre')); + }); + expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1); + + await waitFor(() => { + expect(localStorage.getItem('Answer1')).toBe(JSON.stringify('Option A')); + }); + + expect(screen.queryByText('Répondre')).not.toBeInTheDocument(); + + // Simulate feedback display (e.g., a checkmark or feedback message) + // This part depends on how feedback is displayed in your component + // For example, if you display a checkmark, you can check for it: + expect(screen.getByText('✅')).toBeInTheDocument(); + + // Navigate to the next question + act(() => { + fireEvent.click(screen.getByText('Question suivante')); + }); + expect(screen.getByText('Sample Question 2')).toBeInTheDocument(); + expect(screen.getByText('Répondre')).toBeInTheDocument(); + + // Navigate back to the first question + act(() => { + fireEvent.click(screen.getByText('Question précédente')); + }); + expect(screen.getByText('Sample Question 1')).toBeInTheDocument(); + // Check if feedback is shown again + expect(screen.getByText('✅')).toBeInTheDocument(); }); test('handles quit button click', async () => { @@ -65,16 +110,12 @@ describe('StudentModeQuiz', () => { }); act(() => { fireEvent.click(screen.getByText('Répondre')); - }); + }); act(() => { fireEvent.click(screen.getByText('Question suivante')); }); - const sampleQuestionElements = screen.queryAllByText(/Sample question 2/i); - expect(sampleQuestionElements.length).toBeGreaterThan(0); - expect(screen.getByText('V')).toBeInTheDocument(); - + expect(screen.getByText('Sample Question 2')).toBeInTheDocument(); + expect(screen.getByText('Répondre')).toBeInTheDocument(); }); - -}); - +}); \ No newline at end of file diff --git a/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx b/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx index 393d39d..788dbeb 100644 --- a/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx +++ b/client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx @@ -3,23 +3,36 @@ import React from 'react'; import { render, fireEvent, act } from '@testing-library/react'; import { screen } from '@testing-library/dom'; import '@testing-library/jest-dom'; -import { MultipleChoiceQuestion, parse } from 'gift-pegjs'; +import { BaseQuestion, MultipleChoiceQuestion, parse } from 'gift-pegjs'; import TeacherModeQuiz from 'src/components/TeacherModeQuiz/TeacherModeQuiz'; import { MemoryRouter } from 'react-router-dom'; +import { QuestionType } from 'src/Types/QuestionType'; const mockGiftQuestions = parse( - `::Question:: Sample Question {=Option A ~Option B}`); + `::Sample Question 1:: Sample Question 1 {=Option A ~Option B} + + ::Sample Question 2:: Sample Question 2 {=Option A ~Option B}`); + const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => { + if (question.type !== "Category") + question.id = (index + 1).toString(); + const newMockQuestion = question; + return {question : newMockQuestion as BaseQuestion}; + }); describe('TeacherModeQuiz', () => { - const mockQuestion = mockGiftQuestions[0] as MultipleChoiceQuestion; + + + let mockQuestion = mockQuestions[0].question as MultipleChoiceQuestion; mockQuestion.id = '1'; const mockSubmitAnswer = jest.fn(); const mockDisconnectWebSocket = jest.fn(); + let rerender: (ui: React.ReactElement) => void; + beforeEach(async () => { - render( + const utils = render( { disconnectWebSocket={mockDisconnectWebSocket} /> ); + rerender = utils.rerender; }); test('renders the initial question', () => { expect(screen.getByText('Question 1')).toBeInTheDocument(); - expect(screen.getByText('Sample Question')).toBeInTheDocument(); + expect(screen.getByText('Sample Question 1')).toBeInTheDocument(); expect(screen.getByText('Option A')).toBeInTheDocument(); expect(screen.getByText('Option B')).toBeInTheDocument(); expect(screen.getByText('Quitter')).toBeInTheDocument(); @@ -50,6 +64,47 @@ describe('TeacherModeQuiz', () => { expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1); }); + test('handles shows feedback for an already answered question', () => { + // Answer the first question + act(() => { + fireEvent.click(screen.getByText('Option A')); + }); + act(() => { + fireEvent.click(screen.getByText('Répondre')); + }); + expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', 1); + mockQuestion = mockQuestions[1].question as MultipleChoiceQuestion; + // Navigate to the next question by re-rendering with new props + act(() => { + rerender( + + + + ); + }); + + mockQuestion = mockQuestions[0].question as MultipleChoiceQuestion; + + act(() => { + rerender( + + + + ); + }); + + // Check if the feedback dialog is shown again + expect(screen.getByText('Rétroaction')).toBeInTheDocument(); + }); + test('handles disconnect button click', () => { act(() => { fireEvent.click(screen.getByText('Quitter')); diff --git a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx index 599888b..736563b 100644 --- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx +++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx @@ -22,12 +22,13 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { } useEffect(() => { + console.log("passedAnswer", answer); if (passedAnswer === true || passedAnswer === false) { setAnswer(passedAnswer); } else { setAnswer(undefined); } - }, [passedAnswer]); + }, [passedAnswer, question.id]); const [answer, setAnswer] = useState(() => { @@ -94,6 +95,7 @@ const TrueFalseQuestionDisplay: React.FC = (props) => { variant="contained" onClick={() => answer !== undefined && handleOnSubmitAnswer && handleOnSubmitAnswer(answer) + } disabled={answer === undefined} > diff --git a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx index 1b07909..54b37f4 100644 --- a/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx +++ b/client/src/components/TeacherModeQuiz/TeacherModeQuiz.tsx @@ -28,7 +28,6 @@ const TeacherModeQuiz: React.FC = ({ handleFeedbackDialogClose(); setIsAnswerSubmitted(false); setAnswer(JSON.parse(localStorage.getItem(`Answer${questionInfos.question.id}`)||'null')); - console.log("LA REP",typeof answer); if (typeof answer !== "object" && typeof answer !== "undefined") { setIsAnswerSubmitted(true); setIsFeedbackDialogOpen(true);