update react (@testing-library, etc.), fix tests, refactor

client/package.json

@@ -27,11 +27,11 @@
         "gift-pegjs": "^1.0.2",
         "jest-environment-jsdom": "^29.7.0",
         "katex": "^0.16.9",
-        "marked": "^9.1.2",
+        "marked": "^14.1.2",
         "nanoid": "^5.0.2",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
-        "react-latex": "^1.2.0",
+        "react-latex": "^2.0.0",
         "react-modal": "^3.16.1",
         "react-router-dom": "^6.26.2",
         "remark-math": "^6.0.0",
@@ -44,24 +44,25 @@
         "@babel/preset-env": "^7.23.3",
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
-        "@testing-library/jest-dom": "^6.1.4",
+        "@testing-library/dom": "^10.4.0",
-        "@testing-library/react": "^14.1.0",
+        "@testing-library/jest-dom": "^6.5.0",
+        "@testing-library/react": "^16.0.1",
         "@types/jest": "^29.5.13",
-        "@types/node": "^20.8.8",
+        "@types/node": "^22.5.5",
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
         "@types/react-latex": "^2.0.3",
-        "@typescript-eslint/eslint-plugin": "^6.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.5.0",
-        "@typescript-eslint/parser": "^6.0.0",
+        "@typescript-eslint/parser": "^8.5.0",
         "@vitejs/plugin-react-swc": "^3.3.2",
-        "eslint": "^8.45.0",
+        "eslint": "^9.10.0",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.12",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "ts-jest": "^29.1.1",
         "typescript": "^5.6.2",
-        "vite": "^4.4.5",
+        "vite": "^5.4.5",
         "vite-plugin-environment": "^1.1.3",
         "vite-plugin-rewrite-all": "^1.0.1"
     }

client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import MultipleChoiceQuestion from '../../../../components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion';
+import { act } from 'react';
+import { MemoryRouter } from 'react-router-dom';
 
 const questionStem = 'Question stem';
 const sampleFeedback = 'Feedback';
@@ -14,11 +16,13 @@ describe('MultipleChoiceQuestion', () => {
 
     beforeEach(() => {
         render(
+            <MemoryRouter>
                 <MultipleChoiceQuestion
                     globalFeedback={sampleFeedback}
                     choices={choices}
-                handleOnSubmitAnswer={mockHandleOnSubmitAnswer} questionContent={{text: questionStem, format: 'plain'}}            />
+                    handleOnSubmitAnswer={mockHandleOnSubmitAnswer}
-        );
+                    questionStem={{ text: questionStem, format: 'plain' }} />
+            </MemoryRouter>);
     });
 
     test('renders the question and choices', () => {
@@ -30,16 +34,24 @@ describe('MultipleChoiceQuestion', () => {
 
     test('does not submit when no answer is selected', () => {
         const submitButton = screen.getByText('Répondre');
+        act(() => {
             fireEvent.click(submitButton);
+        });
         expect(mockHandleOnSubmitAnswer).not.toHaveBeenCalled();
     });
 
     test('submits the selected answer', () => {
         const choiceButton = screen.getByText('Choice 1').closest('button');
         if (!choiceButton) throw new Error('Choice button not found');
+        act(() => {
             fireEvent.click(choiceButton);
+        });
+
         const submitButton = screen.getByText('Répondre');
+        act(() => {
             fireEvent.click(submitButton);
+        });
+
         expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith('Choice 1');
     });
 });

client/src/__tests__/components/Questions/TrueFalseQuestion/TrueFalseQuestion.test.tsx

@@ -1,7 +1,8 @@
 // TrueFalseQuestion.test.tsx
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import TrueFalseQuestion from '../../../../components/Questions/TrueFalseQuestion/TrueFalseQuestion';
+import { MemoryRouter } from 'react-router-dom';
 
 describe('TrueFalseQuestion Component', () => {
     const mockHandleSubmitAnswer = jest.fn();
@@ -15,7 +16,10 @@ describe('TrueFalseQuestion Component', () => {
     };
 
     beforeEach(() => {
-        render(<TrueFalseQuestion questionContent={{text: sampleStem, format: 'plain'}} {...sampleProps} />);
+        render(
+            <MemoryRouter>
+                <TrueFalseQuestion questionContent={{ text: sampleStem, format: 'plain' }} {...sampleProps} />
+            </MemoryRouter>);
     });
 
     it('renders correctly', () => {
@@ -27,14 +31,14 @@ describe('TrueFalseQuestion Component', () => {
 
     it('Submit button should be disabled if no option is selected', () => {
         const submitButton = screen.getByText('Répondre');
-
         expect(submitButton).toBeDisabled();
     });
 
     it('not submit answer if no option is selected', () => {
         const submitButton = screen.getByText('Répondre');
-
+        act(() => {
             fireEvent.click(submitButton);
+        });
 
         expect(mockHandleSubmitAnswer).not.toHaveBeenCalled();
     });
@@ -43,9 +47,13 @@ describe('TrueFalseQuestion Component', () => {
         const trueButton = screen.getByText('Vrai');
         const submitButton = screen.getByText('Répondre');
 
+        act(() => {
             fireEvent.click(trueButton);
+        });
 
+        act(() => {
             fireEvent.click(submitButton);
+        });
 
         expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(true);
     });
@@ -53,10 +61,12 @@ describe('TrueFalseQuestion Component', () => {
     it('submits answer correctly for False', () => {
         const falseButton = screen.getByText('Faux');
         const submitButton = screen.getByText('Répondre');
-
+        act(() => {
             fireEvent.click(falseButton);
-
+        });
+        act(() => {
             fireEvent.click(submitButton);
+        });
 
         expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(false);
     });

client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx

@@ -1,44 +1,27 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { parse } from 'gift-pegjs';
 import { MemoryRouter } from 'react-router-dom';
 import { QuestionType } from '../../../../Types/QuestionType';
 import StudentModeQuiz from '../../../../components/StudentModeQuiz/StudentModeQuiz';
 
-const mockQuestions: QuestionType[] = [
+const mockGiftQuestions = parse(
-    {
+    `::Sample Question 1:: Sample Question 1 {=Option A ~Option B}
-        question: {
+    
-            id: '1',
+    ::Sample Question 2:: Sample Question 2 {T}`);
-            type: 'MC',
+
-            stem: { format: 'plain', text: 'Sample Question 1' },
+const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => {
-            title: 'Sample Question 1',
+    question.id = (index + 1).toString();
-            hasEmbeddedAnswers: false,
+    const newMockQuestion: QuestionType = {
-            globalFeedback: null,
+        question: question,
-            choices: [
+    };
-                { text: { format: 'plain', text: 'Option A' }, isCorrect: true, weight: 1, feedback: null },
+    return newMockQuestion;
-                { text: { format: 'plain', text: 'Option B' }, isCorrect: false, weight: 0, feedback: null },
+});
-            ],
-        },
-    },
-    {
-        question: {
-            id: '2',
-            type: 'TF',
-            stem: { format: 'plain', text: 'Sample Question 2' },
-            isTrue: true,
-            falseFeedback: null,
-            trueFeedback: null,
-            title: 'Question 2',
-            hasEmbeddedAnswers: false,
-            globalFeedback: null,
-        },
-    },
-];
 
 const mockSubmitAnswer = jest.fn();
 const mockDisconnectWebSocket = jest.fn();
 
-describe('StudentModeQuiz', () => {
+beforeEach(() => {
-    test('renders the initial question', async () => {
     render(
         <MemoryRouter>
             <StudentModeQuiz
@@ -46,97 +29,68 @@ describe('StudentModeQuiz', () => {
                 submitAnswer={mockSubmitAnswer}
                 disconnectWebSocket={mockDisconnectWebSocket}
             />
-            </MemoryRouter>
+        </MemoryRouter>);
-        );
+});
 
-        // wait for the question to be rendered
+describe('StudentModeQuiz', () => {
-        await waitFor(() => {
+    test('renders the initial question', async () => {
         expect(screen.getByText('Sample Question 1')).toBeInTheDocument();
         expect(screen.getByText('Option A')).toBeInTheDocument();
         expect(screen.getByText('Option B')).toBeInTheDocument();
         expect(screen.getByText('Quitter')).toBeInTheDocument();
     });
 
-    });
-
     test('handles answer submission text', async () => {
-
+        act(() => {
-        render(
-            <MemoryRouter>
-                <StudentModeQuiz
-                questions={mockQuestions}
-                submitAnswer={mockSubmitAnswer}
-                disconnectWebSocket={mockDisconnectWebSocket}
-                />
-            </MemoryRouter>
-        );
-
             fireEvent.click(screen.getByText('Option A'));
-        fireEvent.click(screen.getByText('Répondre'));
-
-        await waitFor(() => {
-            expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1');
         });
+        act(() => {
+            fireEvent.click(screen.getByText('Répondre'));
+        });
+
+        expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1');
     });
 
     test('handles quit button click', async () => {
-        render(
+        act(() => {
-            <MemoryRouter>
-                <StudentModeQuiz
-                    questions={mockQuestions}
-                    submitAnswer={mockSubmitAnswer}
-                    disconnectWebSocket={mockDisconnectWebSocket}
-                />
-            </MemoryRouter>);
             fireEvent.click(screen.getByText('Quitter'));
-
-        await waitFor(() => {
-            expect(mockDisconnectWebSocket).toHaveBeenCalled();
         });
+
+        expect(mockDisconnectWebSocket).toHaveBeenCalled();
     });
 
     test('navigates to the next question', async () => {
-        render(
+        act(() => {
-            <MemoryRouter>
-                <StudentModeQuiz
-                    questions={mockQuestions}
-                    submitAnswer={mockSubmitAnswer}
-                    disconnectWebSocket={mockDisconnectWebSocket}
-                />
-            </MemoryRouter>);
-
             fireEvent.click(screen.getByText('Option A'));
+        });
+        act(() => {
             fireEvent.click(screen.getByText('Répondre'));
+        });        
+        act(() => {
             fireEvent.click(screen.getByText('Question suivante'));
+        });
 
-        await waitFor(() => {
         const sampleQuestionElements = screen.queryAllByText(/Sample question 2/i);
         expect(sampleQuestionElements.length).toBeGreaterThan(0);
         expect(screen.getByText('V')).toBeInTheDocument();
-        });
 
     });
 
     test('navigates to the previous question', async () => {
 
-        render(
+        act(() => {
-            <MemoryRouter>
-                <StudentModeQuiz
-                    questions={mockQuestions}
-                    submitAnswer={mockSubmitAnswer}
-                    disconnectWebSocket={mockDisconnectWebSocket}
-                />
-            </MemoryRouter>);
-
             fireEvent.click(screen.getByText('Option A'));
+        });
+        act(() => {
             fireEvent.click(screen.getByText('Répondre'));
+        });        
+        act(() => {
             fireEvent.click(screen.getByText('Question précédente'));
+        });
 
-        await waitFor(() => {
         expect(screen.getByText('Sample Question 1')).toBeInTheDocument();
         expect(screen.getByText('Option B')).toBeInTheDocument();
     });
-    });
 
 });
 

client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx

@@ -1,36 +1,31 @@
 //TeacherModeQuiz.test.tsx
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
+import { screen } from '@testing-library/dom';
 import '@testing-library/jest-dom';
-import { GIFTQuestion } from 'gift-pegjs';
+import { parse } from 'gift-pegjs';
 
 import TeacherModeQuiz from '../../../../components/TeacherModeQuiz/TeacherModeQuiz';
 import { MemoryRouter } from 'react-router-dom';
+// import { mock } from 'node:test';
+
+const mockGiftQuestions = parse(
+    `::Sample Question:: Sample Question {=Option A ~Option B}`);
+
 
 describe('TeacherModeQuiz', () => {
-    const mockQuestion: GIFTQuestion = {
+    const mockQuestion = mockGiftQuestions[0];
-        id: '1',
+    mockQuestion.id = '1';
-        type: 'MC',
-        stem: { format: 'plain', text: 'Sample Question' },
-        title: 'Sample Question',
-        hasEmbeddedAnswers: false,
-        globalFeedback: null,
-        choices: [
-            { text: { format: 'plain', text: 'Option A' }, isCorrect: true, weight: 1, feedback: null },
-            { text: { format: 'plain', text: 'Option B' }, isCorrect: false, weight: 0, feedback: null },
-        ],
-    };
 
     const mockSubmitAnswer = jest.fn();
     const mockDisconnectWebSocket = jest.fn();
 
-    beforeEach(() => {
+    beforeEach(async () => {
         render(
             <MemoryRouter>
                 <TeacherModeQuiz
                     questionInfos={{ question: mockQuestion }}
                     submitAnswer={mockSubmitAnswer}
-                    disconnectWebSocket={mockDisconnectWebSocket}
+                    disconnectWebSocket={mockDisconnectWebSocket} />
-                />
             </MemoryRouter>
         );
     });
@@ -45,16 +40,21 @@ describe('TeacherModeQuiz', () => {
     });
 
     test('handles answer submission and displays wait text', () => {
-        fireEvent.click(screen.getByText('Option A'));
-        fireEvent.click(screen.getByText('Répondre'));
 
+        act(() => {
+            fireEvent.click(screen.getByText('Option A'));
+        });
+        act(() => {
+            fireEvent.click(screen.getByText('Répondre'));
+        });
         expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1');
         expect(screen.getByText('En attente pour la prochaine question...')).toBeInTheDocument();
     });
 
     test('handles disconnect button click', () => {
+        act(() => {
             fireEvent.click(screen.getByText('Quitter'));
-
+        });
         expect(mockDisconnectWebSocket).toHaveBeenCalled();
     });
 });

client/src/components/GiftTemplate/templates/TextType.ts

@@ -28,7 +28,7 @@ function formatLatex(text: string): string {
  * @see marked
  * @see katex
  */
-export default function TextType({ text }: TextTypeOptions): string {
+export default function TextType({ text }: TextTypeOptions) {
     const formatText = formatLatex(text.text.trim());  // latex needs pure "&", ">", etc. Must not be escaped
 
     switch (text.format) {
@@ -40,12 +40,8 @@ export default function TextType({ text }: TextTypeOptions): string {
             // Strip outer paragraph tags (not a great approach with regex)
             return formatText.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2');
         case 'markdown':
-            return (
+            const parsedText = marked.parse(formatText, { breaks: true }) as string; // https://github.com/markedjs/marked/discussions/3219
-                marked
+            return parsedText.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2');
-                    .parse(formatText, { breaks: true }) // call marked.parse instead of marked
-                    // Strip outer paragraph tags
-                    .replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2')
-            );
         default:
             throw new Error(`Unsupported text format: ${text.format}`);
     }

client/src/components/GiftTemplate/templates/types.d.ts

@@ -12,31 +12,9 @@ export interface DisplayOptions {
     preview: boolean;
 }
 
-export type QuestionType =
+export { 
-    | 'Description'
+    QuestionType, FormatType, NumericalType, TextFormat, NumericalFormat, TextChoice, NumericalChoice, Question, Description, Category, MultipleChoice, ShortAnswer, Numerical, Essay, TrueFalse,
-    | 'Category'
+    Matching, Match, GIFTQuestion } from 'gift-pegjs';
-    | 'MC'
-    | 'Numerical'
-    | 'Short'
-    | 'Essay'
-    | 'TF'
-    | 'Matching';
-
-export type FormatType = 'moodle' | 'html' | 'markdown' | 'plain';
-export type NumericalType = 'simple' | 'range' | 'high-low';
-
-export interface TextFormat {
-    format: FormatType;
-    text: string;
-}
-
-export interface NumericalFormat {
-    type: NumericalType;
-    number?: number;
-    range?: number;
-    numberHigh?: number;
-    numberLow?: number;
-}
 
 export interface Choice {
     isCorrect: boolean;
@@ -44,77 +22,3 @@ export interface Choice {
     text: TextFormat | NumericalFormat;
     feedback: TextFormat | null;
 }
-
-export interface TextChoice extends Choice {
-    text: TextFormat;
-}
-
-export interface NumericalChoice extends Choice {
-    text: NumericalFormat;
-}
-
-export interface Question {
-    type: QuestionType;
-    title: string | null;
-    stem: TextFormat;
-    hasEmbeddedAnswers: boolean;
-    globalFeedback: TextFormat | null;
-}
-
-export interface Description {
-    type: Extract<QuestionType, 'Description'>;
-    title: string | null;
-    stem: TextFormat;
-    hasEmbeddedAnswers: boolean;
-}
-
-export interface Category {
-    type: Extract<QuestionType, 'Category'>;
-    title: string;
-}
-
-export interface MultipleChoice extends Question {
-    type: Extract<QuestionType, 'MC'>;
-    choices: TextChoice[];
-}
-
-export interface ShortAnswer extends Question {
-    type: Extract<QuestionType, 'Short'>;
-    choices: TextChoice[];
-}
-
-export interface Numerical extends Question {
-    type: Extract<QuestionType, 'Numerical'>;
-    choices: NumericalChoice[] | NumericalFormat;
-}
-
-export interface Essay extends Question {
-    type: Extract<QuestionType, 'Essay'>;
-}
-
-export interface TrueFalse extends Question {
-    type: Extract<QuestionType, 'TF'>;
-    isTrue: boolean;
-    falseFeedback: TextFormat | null;
-    trueFeedback: TextFormat | null;
-}
-
-export interface Matching extends Question {
-    type: Extract<QuestionType, 'Matching'>;
-    matchPairs: Match[];
-}
-
-export interface Match {
-    subquestion: TextFormat;
-    subanswer: string;
-}
-
-export type GIFTQuestion =
-    | Description
-    | Category
-    | MultipleChoice
-    | ShortAnswer
-    | Numerical
-    | Essay
-    | TrueFalse
-    | Matching;

client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx

@@ -14,7 +14,7 @@ type Choices = {
 };
 
 interface Props {
-    questionContent: TextFormat;
+    questionStem: TextFormat;
     choices: Choices[];
     globalFeedback?: string | undefined;
     handleOnSubmitAnswer?: (answer: string) => void;
@@ -22,7 +22,7 @@ interface Props {
 }
 
 const MultipleChoiceQuestion: React.FC<Props> = (props) => {
-    const { questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
+    const { questionStem: questionContent, choices, showAnswer, handleOnSubmitAnswer, globalFeedback } = props;
     const [answer, setAnswer] = useState<string>();
 
     useEffect(() => {

client/src/components/Questions/Question.tsx

@@ -41,7 +41,7 @@ const Question: React.FC<QuestionProps> = ({
         case 'MC':
             questionTypeComponent = (
                 <MultipleChoiceQuestion
-                    questionContent={question.stem}
+                    questionStem={question.stem}
                     choices={question.choices}
                     handleOnSubmitAnswer={handleOnSubmitAnswer}
                     showAnswer={showAnswer}