From 427182e7a8c1f38d63cd4ce46aa469ebba591573 Mon Sep 17 00:00:00 2001 From: JubaAzul <118773284+JubaAzul@users.noreply.github.com> Date: Fri, 10 Jan 2025 17:39:19 -0500 Subject: [PATCH] Adding snapshot tests for editor --- .../GiftTemplate/templates/Numerical.test.tsx | 72 +++++ .../templates/ShortAnswer.test.tsx | 23 +- .../GiftTemplate/templates/TrueFalse.test.tsx | 16 + .../MultipleChoice.test.tsx.snap | 82 ++--- .../__snapshots__/Numerical.test.tsx.snap | 301 ++++++++++++++++++ .../__snapshots__/ShortAnswer.test.tsx.snap | 78 +++++ .../__snapshots__/TrueFalse.test.tsx.snap | 133 +++++++- 7 files changed, 650 insertions(+), 55 deletions(-) create mode 100644 client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx create mode 100644 client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap diff --git a/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx new file mode 100644 index 0000000..65921f9 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/Numerical.test.tsx @@ -0,0 +1,72 @@ +import { render } from '@testing-library/react'; +import Numerical from '../../../../components/GiftTemplate/templates/Numerical'; +import { TemplateOptions, Numerical as NumericalType } from '../../../../components/GiftTemplate/templates/types'; + +const plainTextMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title', + stem: { format: 'plain', text: 'Sample Stem' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback' } +}; + +const htmlMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title', + stem: { format: 'html', text: '$$\\frac{zzz}{yyy}$$' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'html', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'html', text: 'Incorrect!' } } + ], + globalFeedback: { format: 'html', text: 'Sample Global Feedback' } +}; + +const moodleMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title', + stem: { format: 'moodle', text: 'Sample Stem' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'moodle', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'moodle', text: 'Incorrect!' } } + ], + globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } +}; + +const imageMock: TemplateOptions & NumericalType = { + type: 'Numerical', + hasEmbeddedAnswers: false, + title: 'Sample Numerical Title with Image', + stem: { format: 'plain', text: 'Sample Stem with Image' }, + choices: [ + { isCorrect: true, weight: 1, text: { type: 'simple', number: 42}, feedback: { format: 'plain', text: 'Correct!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 43}, feedback: { format: 'plain', text: 'Incorrect!' } }, + { isCorrect: false, weight: 1, text: { type: 'simple', number: 44}, feedback: { format: 'plain', text: 'Sample Image' } } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' } +}; + +test('Numerical snapshot test with plain text', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Numerical snapshot test with html', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Numerical snapshot test with moodle', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Numerical snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); +}); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx index 626389c..1a84fa9 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/templates/ShortAnswer.test.tsx @@ -32,12 +32,26 @@ const moodleMock: TemplateOptions & ShortAnswerType = { title: 'Sample Short Answer Title', stem: { format: 'moodle', text: 'Sample Stem' }, choices: [ - { text: { format: 'plain' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, - { text: { format: 'plain' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 } + { text: { format: 'moodle' , text: 'Answer 1'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 }, + { text: { format: 'moodle' , text: 'Answer 2'}, isCorrect: true, feedback: { format: 'plain' , text: 'Correct!'}, weight: 1 } ], globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } }; +const imageMock: TemplateOptions & ShortAnswerType = { + type: 'Short', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title with Image', + stem: { format: 'markdown', text: 'Sample Stem with Image' }, + choices: [ + { text: { format: 'markdown', text: 'Answer 1' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Answer 2' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 }, + { text: { format: 'markdown', text: 'Sample Image' }, isCorrect: true, feedback: { format: 'plain', text: 'Correct!' }, weight: 1 } + ], + globalFeedback: { format: 'plain', text: 'Sample Global Feedback with Image' } +}; + + test('ShortAnswer snapshot test with plain text', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); @@ -51,4 +65,9 @@ test('ShortAnswer snapshot test with katex', () => { test('ShortAnswer snapshot test with moodle', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); +}); + +test('ShortAnswer snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx index 69cd3e7..6d3a93a 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx +++ b/client/src/__tests__/components/GiftTemplate/templates/TrueFalse.test.tsx @@ -35,6 +35,17 @@ const moodleMock: TemplateOptions & TrueFalseType = { globalFeedback: { format: 'moodle', text: 'Sample Global Feedback' } }; +const imageMock: TemplateOptions & TrueFalseType = { + type: 'TF', + hasEmbeddedAnswers: false, + title: 'Sample Short Answer Title with Image', + stem: { format: 'plain', text: 'Sample Stem with Image' }, + trueFeedback: { format: 'moodle', text: 'Correct!' }, + isTrue: true, + falseFeedback: { format: 'moodle', text: 'Incorrect!' }, + globalFeedback: { format: 'plain', text: 'Sample Image' } +}; + test('TrueFalse snapshot test with plain text', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); @@ -48,4 +59,9 @@ test('TrueFalse snapshot test with katex', () => { test('TrueFalse snapshot test with moodle', () => { const { asFragment } = render(); expect(asFragment()).toMatchSnapshot(); +}); + +test('TrueFalse snapshot test with image', () => { + const { asFragment } = render(); + expect(asFragment()).toMatchSnapshot(); }); \ No newline at end of file diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap index 75e7226..ab25b5e 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/MultipleChoice.test.tsx.snap @@ -44,7 +44,7 @@ exports[`MultipleChoice snapshot test 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="ideNwBGu" name="id2CCZVRT9"> + <input class="gift-input" type="radio" id="idY6sLQS" name="idYcbBS3PT"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -61,7 +61,7 @@ exports[`MultipleChoice snapshot test 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="ideNwBGu"> +" for="idY6sLQS"> Choice 1 </label> <svg style=" @@ -80,7 +80,7 @@ exports[`MultipleChoice snapshot test 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idGR2h1H" name="id2CCZVRT9"> + <input class="gift-input" type="radio" id="ida41-A1" name="idYcbBS3PT"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -97,7 +97,7 @@ exports[`MultipleChoice snapshot test 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idGR2h1H"> +" for="ida41-A1"> Choice 2 </label> <svg style=" @@ -173,7 +173,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1 color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id57MvEd" name="idQ_whKmSd"> + <input class="gift-input" type="radio" id="idRndLXH" name="id41Q3iM9t"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -190,7 +190,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1 padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id57MvEd"> +" for="idRndLXH"> Choice 1 </label> @@ -210,7 +210,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1 </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idZ1O9uM" name="idQ_whKmSd"> + <input class="gift-input" type="radio" id="id9so1y3" name="id41Q3iM9t"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -227,7 +227,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1 padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idZ1O9uM"> +" for="id9so1y3"> Choice 2 </label> @@ -247,7 +247,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1 </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idJ4Wzh2" name="idQ_whKmSd"> + <input class="gift-input" type="radio" id="idyhlQbI" name="id41Q3iM9t"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -264,7 +264,7 @@ exports[`MultipleChoice snapshot test with 2 images using markdown text format 1 padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idJ4Wzh2"> +" for="idyhlQbI"> <img src="https://via.placeholder.com/150" alt="Sample Image" /> </label> <svg style=" @@ -341,7 +341,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idmWstm6" name="idhXDZKhP7"> + <input class="gift-input" type="radio" id="idOkvGfv" name="idG7FzhlwG"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -358,7 +358,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idmWstm6"> +" for="idOkvGfv"> Choice 1 </label> <svg style=" @@ -377,7 +377,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id7sfVHd" name="idhXDZKhP7"> + <input class="gift-input" type="radio" id="idWc4Fdg" name="idG7FzhlwG"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -394,7 +394,7 @@ exports[`MultipleChoice snapshot test with Moodle text format 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id7sfVHd"> +" for="idWc4Fdg"> Choice 2 </label> <svg style=" @@ -470,7 +470,7 @@ exports[`MultipleChoice snapshot test with image 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idYcIYQH" name="id4wrZpxqV"> + <input class="gift-input" type="radio" id="idtg_4sy" name="idtYfkT0sj"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -487,7 +487,7 @@ exports[`MultipleChoice snapshot test with image 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idYcIYQH"> +" for="idtg_4sy"> Choice 1 </label> <svg style=" @@ -506,7 +506,7 @@ exports[`MultipleChoice snapshot test with image 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id2Vhlzo" name="id4wrZpxqV"> + <input class="gift-input" type="radio" id="idsl9DOz" name="idtYfkT0sj"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -523,7 +523,7 @@ exports[`MultipleChoice snapshot test with image 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id2Vhlzo"> +" for="idsl9DOz"> Choice 2 </label> <svg style=" @@ -542,7 +542,7 @@ exports[`MultipleChoice snapshot test with image 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idz87odw" name="id4wrZpxqV"> + <input class="gift-input" type="radio" id="idPEStwV" name="idtYfkT0sj"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -559,7 +559,7 @@ exports[`MultipleChoice snapshot test with image 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idz87odw"> +" for="idPEStwV"> <img src="https://via.placeholder.com/150" alt="Sample Image" /> </label> <svg style=" @@ -636,7 +636,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`] color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idGnTXOs" name="idy3Mbb-wN"> + <input class="gift-input" type="radio" id="idfcMRhV" name="idIpMjpvV3"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -653,7 +653,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`] padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idGnTXOs"> +" for="idfcMRhV"> Choice 1 </label> @@ -673,7 +673,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`] </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id4cQyMJ" name="idy3Mbb-wN"> + <input class="gift-input" type="radio" id="idS15bbw" name="idIpMjpvV3"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -690,7 +690,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`] padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id4cQyMJ"> +" for="idS15bbw"> Choice 2 </label> @@ -710,7 +710,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`] </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="ideT1A0q" name="idy3Mbb-wN"> + <input class="gift-input" type="radio" id="id5hwUQu" name="idIpMjpvV3"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -727,7 +727,7 @@ exports[`MultipleChoice snapshot test with image using markdown text format 1`] padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="ideT1A0q"> +" for="id5hwUQu"> <img src="https://via.placeholder.com/150" alt="Sample Image" /> </label> <svg style=" @@ -804,7 +804,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idNwG_aI" name="idir2jT135"> + <input class="gift-input" type="radio" id="id_8Kbh1" name="idwLkHBxIV"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -821,7 +821,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idNwG_aI"> +" for="id_8Kbh1"> Choice 1 </label> <svg style=" @@ -840,7 +840,7 @@ exports[`MultipleChoice snapshot test with katex 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idbqDUYQ" name="idir2jT135"> + <input class="gift-input" type="radio" id="idmmZ__M" name="idwLkHBxIV"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -849,15 +849,15 @@ exports[`MultipleChoice snapshot test with katex 1`] = ` padding-top: 0.05rem; padding-bottom: 0.05rem; - color: hsl(35, 51%, 33%); - background-color: hsl(36, 84%, 93%); - ">1%</span> + color: hsl(134, 31%, 32%); + background-color: hsl(134, 68%, 95%); + ">1%</span> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idbqDUYQ"> +" for="idmmZ__M"> Choice 2 </label> <svg style=" @@ -866,12 +866,12 @@ exports[`MultipleChoice snapshot test with katex 1`] = ` margin-left: 0.1rem; margin-right: 0.2rem; - width: 0.75em; - color: hsl(2, 64%, 58%); - " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> <span style=" color: hsl(180, 15%, 41%); - ">InCorrect!</span> + ">Correct!</span> </input> </div> <div style=" @@ -933,7 +933,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idhrJmYd" name="idiA6lal3j"> + <input class="gift-input" type="radio" id="idmhYkGR" name="id7uMk4tB5"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -950,7 +950,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idhrJmYd"> +" for="idmhYkGR"> Choice 1 </label> <svg style=" @@ -969,7 +969,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idxZUKMy" name="idiA6lal3j"> + <input class="gift-input" type="radio" id="idvT6Xg7" name="id7uMk4tB5"> <span style=" box-shadow: 0px 1px 1px hsl(0, 0%, 74%); border-radius: 3px; @@ -986,7 +986,7 @@ exports[`MultipleChoice snapshot test with katex, using html text format 1`] = ` padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idxZUKMy"> +" for="idvT6Xg7"> Choice 2 </label> <svg style=" diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap new file mode 100644 index 0000000..20ae2b9 --- /dev/null +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/Numerical.test.tsx.snap @@ -0,0 +1,301 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Numerical snapshot test with html 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mfrac><mrow><mi>z</mi><mi>z</mi><mi>z</mi></mrow><mrow><mi>y</mi><mi>y</mi><mi>y</mi></mrow></mfrac></mrow><annotation encoding="application/x-tex">\\frac{zzz}{yyy}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:1.988em;vertical-align:-0.8804em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.1076em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">yyy</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord mathnormal" style="margin-right:0.04398em;">zzz</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.8804em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span></span></span></span></span></p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`Numerical snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43, 44"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image</p> + </div></section> + +`; + +exports[`Numerical snapshot test with moodle 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; + +exports[`Numerical snapshot test with plain text 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Numerical Title</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Numérique</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="42, 43"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback</p> + </div></section> + +`; diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap index 9646352..6204be4 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/ShortAnswer.test.tsx.snap @@ -1,5 +1,83 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`ShortAnswer snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Réponse courte</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image +</p> + <div> + <span style=" + color: hsl(0, 0%, 0%); +">Réponse: </span><input class="gift-input" type="text" style=" + display: inline-block; + padding: 0.375rem 0.75rem; + line-height: 1.5; + color: hsl(0, 0%, 16%); + background-color: hsl(0, 0%, 100%); + border: 1px solid hsl(0, 0%, 81%); + border-radius: 0.25rem; + box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + width: 90%; +" placeholder="Answer 1 +, Answer 2 +, <img src="https://via.placeholder.com/150" alt="Sample Image" />"> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p>Sample Global Feedback with Image</p> + </div></section> + +`; + exports[`ShortAnswer snapshot test with katex 1`] = ` <section style=" diff --git a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap index 8d914d8..7003dac 100644 --- a/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap +++ b/client/src/__tests__/components/GiftTemplate/templates/__snapshots__/TrueFalse.test.tsx.snap @@ -1,5 +1,114 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`TrueFalse snapshot test with image 1`] = ` + + <section style=" + flex-wrap: wrap; + position: relative; + padding: 1rem 1rem; + margin-bottom: 0.5rem; + background-color: hsl(0, 0%, 100%); + border: solid hsl(0, 0%, 100%) 2px; + border-radius: 6px; + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); +"> + <div style=" + display: flex; + font-weight: bold; +"> + <span> + <span style=" + color: #5271FF; + ">Sample Short Answer Title with Image</span> + </span> + <span style=" + margin-left: auto; + padding-left: 0.75rem; + flex: none; + margin-bottom: 10px;"> + <span style=" + box-shadow: 0px 1px 3px hsl(0, 0%, 74%); + padding-left: 0.7rem; + padding-right: 0.7rem; + padding-top: 0.4rem; + padding-bottom: 0.4rem; + border-radius: 4px; + background-color: hsl(0, 0%, 100%); + color: hsl(180, 15%, 41%); +">Vrai/Faux</span> + </span> + </div> +<p style=" + color: hsl(0, 0%, 0%); +">Sample Stem with Image</p><span style=" + color: hsl(0, 0%, 0%); +">Choisir une réponse:</span> + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idgpc2Rm" name="idrK_AqV9h"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idgpc2Rm"> + Vrai + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 1em; + color: hsl(120, 39%, 54%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Correct!</span> + </input> + </div> + + <div class='multiple-choice-answers-container'> + <input class="gift-input" type="radio" id="idQF-GNQ" name="idrK_AqV9h"> + + <label style=" + display: inline-block; + padding: 0.2em 0 0.2em 0; + + color: hsl(0, 0%, 0%); +" for="idQF-GNQ"> + Faux + </label> + <svg style=" + vertical-align: text-bottom; + display: inline-block; + margin-left: 0.1rem; + margin-right: 0.2rem; + + width: 0.75em; + color: hsl(2, 64%, 58%); + " role="img" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg> + <span style=" + color: hsl(180, 15%, 41%); + ">Incorrect!</span> + </input> + </div> + <div style=" + position: relative; + margin-top: 1rem; + padding: 0 1rem; + background-color: hsl(43, 100%, 94%); + color: hsl(43, 95%, 9%); + border: hsl(36, 84%, 93%) 1px solid; + border-radius: 6px; + box-shadow: 0px 2px 5px hsl(0, 0%, 74%); +"> + <p><img src="https://via.placeholder.com/150" alt="Sample Image" /></p> + </div></section> + +`; + exports[`TrueFalse snapshot test with katex 1`] = ` <section style=" @@ -44,14 +153,14 @@ exports[`TrueFalse snapshot test with katex 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idJPS1EM" name="idpM8HEdsR"> + <input class="gift-input" type="radio" id="idHBTzQU" name="idA0BQMs9B"> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idJPS1EM"> +" for="idHBTzQU"> Vrai </label> <svg style=" @@ -70,14 +179,14 @@ exports[`TrueFalse snapshot test with katex 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id_-5rkc" name="idpM8HEdsR"> + <input class="gift-input" type="radio" id="idYE-crD" name="idA0BQMs9B"> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id_-5rkc"> +" for="idYE-crD"> Faux </label> <svg style=" @@ -154,14 +263,14 @@ exports[`TrueFalse snapshot test with moodle 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idOPBdFk" name="idoMEBjTDb"> + <input class="gift-input" type="radio" id="idf3UShS" name="idNOTYKGh8"> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idOPBdFk"> +" for="idf3UShS"> Vrai </label> <svg style=" @@ -180,14 +289,14 @@ exports[`TrueFalse snapshot test with moodle 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id3lljUu" name="idoMEBjTDb"> + <input class="gift-input" type="radio" id="idtUEUUA" name="idNOTYKGh8"> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id3lljUu"> +" for="idtUEUUA"> Faux </label> <svg style=" @@ -263,14 +372,14 @@ exports[`TrueFalse snapshot test with plain text 1`] = ` color: hsl(0, 0%, 0%); ">Choisir une réponse:</span> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="id2_2M-E" name="idpl2XIOYb"> + <input class="gift-input" type="radio" id="idgBg2Sw" name="idWE_PEATF"> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="id2_2M-E"> +" for="idgBg2Sw"> Vrai </label> <svg style=" @@ -289,14 +398,14 @@ exports[`TrueFalse snapshot test with plain text 1`] = ` </div> <div class='multiple-choice-answers-container'> - <input class="gift-input" type="radio" id="idPc16JK" name="idpl2XIOYb"> + <input class="gift-input" type="radio" id="idSjCrHY" name="idWE_PEATF"> <label style=" display: inline-block; padding: 0.2em 0 0.2em 0; color: hsl(0, 0%, 0%); -" for="idPc16JK"> +" for="idSjCrHY"> Faux </label> <svg style="