Merge remote-tracking branch 'test/main' into PFEH25-merge-it2main

2025-08-11 21:23:54 -04:00 · 2025-02-03 18:45:48 -05:00 · 2025-02-03 18:45:48 -05:00 · 68f301b972
commit 68f301b972
parent 3b6e009d73 cb069bebeb
7 changed files with 167 additions and 44 deletions
--- a/1
+++ b/1
@ -2,6 +2,7 @@ MIT License

 Copyright (c) 2023 ETS-PFE004-Plateforme-sondage-minitest
 Copyright (c) 2024 Louis-Antoine Caron, Mathieu Roy, Mélanie St-Hilaire, Samy Waddah
+Copyright (c) 2024 Gabriel Moisan-Matte, Mathieu Sévigny-Lavallée, Jerry Kwok Hiu Fung, Bruno Roesner, Florent Serres

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/client/src/tests/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
+++ b/client/src/tests/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.test.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { act } from 'react';
@ -17,21 +17,30 @@ const question = questions[0];

 describe('MultipleChoiceQuestionDisplay', () => {
    const mockHandleOnSubmitAnswer = jest.fn();
-    const sampleProps = {
-        question: question,
-        handleOnSubmitAnswer: mockHandleOnSubmitAnswer,
-        showAnswer: false
+
+    const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
+        const [showAnswerState, setShowAnswerState] = useState(showAnswer);
+
+        const handleOnSubmitAnswer = (answer: string) => {
+            mockHandleOnSubmitAnswer(answer);
+            setShowAnswerState(true);
+        };
+
+        return (
+            <MemoryRouter>
+                <MultipleChoiceQuestionDisplay
+                    question={question}
+                    handleOnSubmitAnswer={handleOnSubmitAnswer}
+                    showAnswer={showAnswerState}
+                />
+            </MemoryRouter>
+        );
    };

    const choices = question.choices;

    beforeEach(() => {
-        render(
-            <MemoryRouter>
-                <MultipleChoiceQuestionDisplay
-                  {...sampleProps}
-                    />
-            </MemoryRouter>);
+        render(<TestWrapper showAnswer={false} />);
    });

    test('renders the question and choices', () => {
@ -55,7 +64,6 @@ describe('MultipleChoiceQuestionDisplay', () => {
        act(() => {
            fireEvent.click(choiceButton);
        });
-
        const submitButton = screen.getByText('Répondre');
        act(() => {
            fireEvent.click(submitButton);
@ -63,4 +71,51 @@ describe('MultipleChoiceQuestionDisplay', () => {

        expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith('Choice 1');
    });
-});
+
+    it('should show ✅ next to the correct answer and ❌ next to the wrong answers when showAnswer is true', async () => {
+        const choiceButton = screen.getByText('Choice 1').closest('button');
+        if (!choiceButton) throw new Error('Choice button not found');
+
+        // Click on choiceButton
+        act(() => {
+            fireEvent.click(choiceButton);
+        });
+
+        const button = screen.getByText("Répondre");
+
+        act(() => {
+            fireEvent.click(button);
+        });
+
+        // Wait for the DOM to update
+            const correctAnswer = screen.getByText("Choice 1").closest('button');
+            expect(correctAnswer).toBeInTheDocument();
+            expect(correctAnswer?.textContent).toContain('✅');
+
+            const wrongAnswer1 = screen.getByText("Choice 2").closest('button');
+            expect(wrongAnswer1).toBeInTheDocument();
+            expect(wrongAnswer1?.textContent).toContain('❌');
+    });
+
+    it('should not show ✅ or ❌ when repondre button is not clicked', async () => {
+        const choiceButton = screen.getByText('Choice 1').closest('button');
+        if (!choiceButton) throw new Error('Choice button not found');
+
+        // Click on choiceButton
+        act(() => {
+            fireEvent.click(choiceButton);
+        });
+
+        // Check for correct answer
+        const correctAnswer = screen.getByText("Choice 1").closest('button');
+        expect(correctAnswer).toBeInTheDocument();
+        expect(correctAnswer?.textContent).not.toContain('✅');
+
+        // Check for wrong answers
+        const wrongAnswer1 = screen.getByText("Choice 2");
+        expect(wrongAnswer1).toBeInTheDocument();
+        expect(wrongAnswer1?.textContent).not.toContain('❌');
+    });
+
+    });
+
--- a/client/src/tests/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
+++ b/client/src/tests/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.test.tsx
@ -1,5 +1,5 @@
 // TrueFalseQuestion.test.tsx
-import React from 'react';
+import React, { useState } from 'react';
 import { render, fireEvent, screen, act } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { MemoryRouter } from 'react-router-dom';
@ -9,20 +9,31 @@ import { parse, TrueFalseQuestion } from 'gift-pegjs';
 describe('TrueFalseQuestion Component', () => {
    const mockHandleSubmitAnswer = jest.fn();
    const sampleStem = 'Sample True False Question';
-    const trueFalseQuestion = 
+    const trueFalseQuestion =
        parse(`${sampleStem}{T}`)[0] as TrueFalseQuestion;

-    const sampleProps = {
-        question: trueFalseQuestion,
-        handleOnSubmitAnswer: mockHandleSubmitAnswer,
-        showAnswer: false
+
+    const TestWrapper = ({ showAnswer }: { showAnswer: boolean }) => {
+        const [showAnswerState, setShowAnswerState] = useState(showAnswer);
+
+        const handleOnSubmitAnswer = (answer: boolean) => {
+            mockHandleSubmitAnswer(answer);
+            setShowAnswerState(true);
+        };
+
+        return (
+            <MemoryRouter>
+                <TrueFalseQuestionDisplay
+                    question={trueFalseQuestion}
+                    handleOnSubmitAnswer={handleOnSubmitAnswer}
+                    showAnswer={showAnswerState}
+                />
+            </MemoryRouter>
+        );
    };

    beforeEach(() => {
-        render(
-            <MemoryRouter>
-                <TrueFalseQuestionDisplay {...sampleProps} />
-            </MemoryRouter>);
+        render(<TestWrapper showAnswer={false} />);
    });

    it('renders correctly', () => {
@ -73,4 +84,50 @@ describe('TrueFalseQuestion Component', () => {

        expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(false);
    });
+
+
+        it('should show ✅ next to the correct answer and ❌ next to the wrong answers when showAnswer is true', async () => {
+            const choiceButton = screen.getByText('Vrai').closest('button');
+            if (!choiceButton) throw new Error('T button not found');
+    
+            // Click on choiceButton
+            act(() => {
+                fireEvent.click(choiceButton);
+            });
+    
+            const button = screen.getByText("Répondre");
+    
+            act(() => {
+                fireEvent.click(button);
+            });
+    
+            // Wait for the DOM to update
+                const correctAnswer = screen.getByText("Vrai").closest('button');
+                expect(correctAnswer).toBeInTheDocument();
+                expect(correctAnswer?.textContent).toContain('✅');
+    
+                const wrongAnswer1 = screen.getByText("Faux").closest('button');
+                expect(wrongAnswer1).toBeInTheDocument();
+                expect(wrongAnswer1?.textContent).toContain('❌');
+        });
+    
+        it('should not show ✅ or ❌ when repondre button is not clicked', async () => {
+            const choiceButton = screen.getByText('Vrai').closest('button');
+            if (!choiceButton) throw new Error('Choice button not found');
+    
+            // Click on choiceButton
+            act(() => {
+                fireEvent.click(choiceButton);
+            });
+    
+            // Check for correct answer
+            const correctAnswer = screen.getByText("Vrai").closest('button');
+            expect(correctAnswer).toBeInTheDocument();
+            expect(correctAnswer?.textContent).not.toContain('✅');
+    
+            // Check for wrong answers
+            const wrongAnswer1 = screen.getByText("Faux");
+            expect(wrongAnswer1).toBeInTheDocument();
+            expect(wrongAnswer1?.textContent).not.toContain('❌');
+        });
 });
--- a/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
+++ b/client/src/components/GIFTCheatSheet/GiftCheatSheet.tsx
@ -153,7 +153,7 @@ const GiftCheatSheet: React.FC = () => {
                </pre>
            </div>

-            <div className="question-type">
+            <div className="question-type" id="images-section">
                <h4> 9. Images </h4>
                <p>Il est possible d&apos;insérer une image dans une question, une réponse (choix multiple) et dans une rétroaction. D&apos;abord, <strong>le format de l&apos;élément doit être [markdown]</strong>. Ensuite utilisez la syntaxe suivante&nbsp;:</p>
                <pre>
@ -185,8 +185,7 @@ const GiftCheatSheet: React.FC = () => {
                    Attention: l&apos;ancienne fonctionnalité avec les balises <code>{'<img>'}</code> n&apos;est plus
                    supportée.
                </p>
-            </div>
-
+                </div>
            <div className="question-type">
                <h4> 10. Informations supplémentaires </h4>
                <p>
--- a/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/MultipleChoiceQuestionDisplay/MultipleChoiceQuestionDisplay.tsx
@ -12,10 +12,9 @@ interface Props {
 }

 const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
-  
    const { question, showAnswer, handleOnSubmitAnswer } = props;
    const [answer, setAnswer] = useState<string>();
-
+    
    useEffect(() => {
        setAnswer(undefined);
    }, [question]);
@ -24,7 +23,6 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
        setAnswer(choice);
    };

-
    const alpha = Array.from(Array(26)).map((_e, i) => i + 65);
    const alphabet = alpha.map((x) => String.fromCharCode(x));
    return (
@ -37,25 +35,23 @@ const MultipleChoiceQuestionDisplay: React.FC<Props> = (props) => {
                    const selected = answer === choice.formattedText.text ? 'selected' : '';
                    return (
                        <div key={choice.formattedText.text + i} className="choice-container">
-                                <Button
+                            <Button
                                variant="text"
                                className="button-wrapper"
-                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}
-                            >
-                                {choice.formattedFeedback === null &&
-                                    showAnswer &&
-                                    (choice.isCorrect ? '✅' : '❌')}
+                                onClick={() => !showAnswer && handleOnClickAnswer(choice.formattedText.text)}>
+                                {showAnswer? (<div> {(choice.isCorrect ? '✅' : '❌')}</div>)
+                                :``}
                                <div className={`circle ${selected}`}>{alphabet[i]}</div>
                                <div className={`answer-text ${selected}`}>
                                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedText) }} />
                                </div>
-                            </Button>
-                            {choice.formattedFeedback && showAnswer && (
+                                {choice.formattedFeedback && showAnswer && (
                                <div className="feedback-container mb-1 mt-1/2">
-                                    {choice.isCorrect ? '✅' : '❌'}
                                    <div dangerouslySetInnerHTML={{ __html: FormattedTextTemplate(choice.formattedFeedback) }} />
                                </div>
                            )}
+                            </Button>
+
                        </div>
                    );
                })}
--- a/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
+++ b/client/src/components/QuestionsDisplay/TrueFalseQuestionDisplay/TrueFalseQuestionDisplay.tsx
@ -22,7 +22,6 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {

    const selectedTrue = answer ? 'selected' : '';
    const selectedFalse = answer !== undefined && !answer ? 'selected' : '';
-    const correctAnswer = question.isTrue === answer;
    return (
        <div className="question-container">
            <div className="question content">
@ -34,7 +33,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                    onClick={() => !showAnswer && setAnswer(true)}
                    fullWidth
                >
-                    {showAnswer && (correctAnswer ? '✅' : '❌')}
+                    {showAnswer? (<div> {(question.isTrue ? '✅' : '❌')}</div>):``}                    
                    <div className={`circle ${selectedTrue}`}>V</div>
                    <div className={`answer-text ${selectedTrue}`}>Vrai</div>
                </Button>
@ -43,7 +42,7 @@ const TrueFalseQuestionDisplay: React.FC<Props> = (props) => {
                    onClick={() => !showAnswer && setAnswer(false)}
                    fullWidth
                >
-                    {showAnswer && (!correctAnswer ? '✅' : '❌')}
+                    {showAnswer? (<div> {(!question.isTrue ? '✅' : '❌')}</div>):``}                    
                    <div className={`circle ${selectedFalse}`}>F</div>
                    <div className={`answer-text ${selectedFalse}`}>Faux</div>
                </Button>
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@ -61,6 +61,14 @@ const QuizForm: React.FC = () => {
        };
    }, []);

+    const scrollToImagesSection = (event: { preventDefault: () => void; }) => {
+        event.preventDefault();
+        const section = document.getElementById('images-section');
+        if (section) {
+            section.scrollIntoView({ behavior: 'smooth' });
+        }
+    };
+
    useEffect(() => {
        const fetchData = async () => {
            const userFolders = await ApiService.getUserFolders();
@ -277,10 +285,18 @@ const QuizForm: React.FC = () => {
                        </div>

                        <h4>Mes images :</h4>
-
                        <div>
-                            <div>(Cliquez sur un lien pour le copier)</div>
-                            <ul>
+                                <div>
+                                <div style={{ display: "inline" }}>(Voir section </div>
+                                    <a href="#images-section"style={{ textDecoration: "none" }} onClick={scrollToImagesSection}>
+                                        <u><em><h4 style={{ display: "inline" }}> 9. Images </h4></em></u>
+                                    </a>
+                                <div style={{ display: "inline" }}> ci-dessous</div>
+                                <div style={{ display: "inline" }}>)</div>
+                                <br />
+                                <em> - Cliquez sur un lien pour le copier</em>
+                                </div>                            
+                                <ul>
                                {imageLinks.map((link, index) => {
                                    const imgTag = `![alt_text](${escapeForGIFT(link)} "texte de l'infobulle")`;
                                    return (