mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
dlquizmodal tests
This commit is contained in:
Philippe
parent
4ae5561154
commit
db21581535
2 changed files with 72 additions and 461 deletions
|
|
@ -0,0 +1,72 @@
|
|||
import React from 'react';
|
||||
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
||||
import '@testing-library/jest-dom';
|
||||
import DownloadQuizModal from '../../../components/DownloadQuizModal/DownloadQuizModal';
|
||||
import ApiService from '../../../services/ApiService';
|
||||
import { QuizType } from '../../../Types/QuizType';
|
||||
|
||||
jest.mock('../../../services/ApiService');
|
||||
jest.mock('jspdf', () => {
|
||||
return jest.fn().mockImplementation(() => ({
|
||||
addImage: jest.fn(),
|
||||
save: jest.fn(),
|
||||
addPage: jest.fn(),
|
||||
}));
|
||||
});
|
||||
jest.mock('html2canvas', () => jest.fn(() => Promise.resolve(document.createElement('canvas'))));
|
||||
jest.mock('dompurify', () => ({
|
||||
sanitize: jest.fn((input) => input),
|
||||
}));
|
||||
|
||||
const mockQuiz: QuizType = {
|
||||
_id: '123',
|
||||
title: 'Sample Quiz',
|
||||
content: ['::Question 1:: What is 2+2? {=4 ~3 ~5}'],
|
||||
folderId: 'folderId',
|
||||
folderName: 'folderName',
|
||||
userId: 'userId',
|
||||
created_at: new Date(),
|
||||
updated_at: new Date(),
|
||||
};
|
||||
|
||||
describe('DownloadQuizModal', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(ApiService.getQuiz as jest.Mock).mockResolvedValue(mockQuiz);
|
||||
jest.spyOn(console, 'error').mockImplementation(() => {});
|
||||
});
|
||||
|
||||
it('renders without crashing', () => {
|
||||
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||
expect(screen.getByRole('button', { name: /télécharger quiz/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('opens modal when download button is clicked', () => {
|
||||
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
|
||||
expect(screen.getByText(/choisissez un format de téléchargement/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('closes modal when a format button is clicked', async () => {
|
||||
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /gift/i }));
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByText(/choisissez un format de téléchargement/i)).not.toBeInTheDocument()
|
||||
);
|
||||
});
|
||||
|
||||
it('handles error when quiz API fails', async () => {
|
||||
(ApiService.getQuiz as jest.Mock).mockRejectedValue(new Error('Quiz not found'));
|
||||
render(<DownloadQuizModal quiz={mockQuiz} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: /télécharger quiz/i }));
|
||||
fireEvent.click(screen.getByRole('button', { name: /gift/i }));
|
||||
await waitFor(() => {
|
||||
expect(console.error).toHaveBeenCalledWith(
|
||||
expect.any(String),
|
||||
expect.objectContaining({ message: expect.stringContaining("Quiz not found") })
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -1,461 +0,0 @@
|
|||
<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;"><em>(Sans titre)</em></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%);">Choix multiple</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
Quelle ville est la capitale du Canada?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<span style="color: hsl(0, 0%, 0%);">Choisir une réponse:</span>
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idCO6FDyZe" id="idMhfh1m" type="radio" class="gift-input">
|
||||
|
||||
<label for="idMhfh1m" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Toronto
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idCO6FDyZe" id="idE3YQnW" type="radio" class="gift-input">
|
||||
|
||||
<label for="idE3YQnW" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Montréal
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idCO6FDyZe" id="id9UoyK7" type="radio" class="gift-input">
|
||||
|
||||
<label for="id9UoyK7" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Ottawa
|
||||
</label>
|
||||
|
||||
|
||||
</div></section><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;"><em>(Sans titre)</em></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>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
Avec quoi ouvre-t-on une porte?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span style="color: hsl(0, 0%, 0%);">Réponse: </span><input placeholder="" 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%;" type="text" class="gift-input">
|
||||
</div>
|
||||
</section><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;"><em>(Sans titre)</em></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>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
Quel est un nombre de 1 à 5 ?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" 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%;
|
||||
;width: 100%" type="text" class="gift-input"></div></section><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;"><em>(Sans titre)</em></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>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
Quel est un nombre de 1 à 5 ?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" 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%;
|
||||
;width: 100%" type="text" class="gift-input"></div></section><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;"><em>(Sans titre)</em></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>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
Quand est né Ulysses S. Grant ?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<div><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" 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%;
|
||||
;width: 100%" type="text" class="gift-input"><p style="color: hsl(0, 0%, 0%);">Réponse: </p><input placeholder="" 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%;
|
||||
;width: 100%" type="text" class="gift-input"></div></section><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;"><em>(Sans titre)</em></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>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
2+2 = 4 ?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<span style="color: hsl(0, 0%, 0%);">Choisir une réponse:</span>
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idOrgRFcP7" id="id0Y3L_s" type="radio" class="gift-input">
|
||||
|
||||
<label for="id0Y3L_s" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Vrai
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idOrgRFcP7" id="idYvbRmI" type="radio" class="gift-input">
|
||||
|
||||
<label for="idYvbRmI" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Faux
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</section><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;"><em>(Sans titre)</em></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%);">Choix multiple</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div style="display: flex;">
|
||||
<span>
|
||||
<p class="present-question-stem" style="color: hsl(0, 0%, 0%);">
|
||||
Quelles villes trouve-t-on au Canada?
|
||||
</p>
|
||||
</span>
|
||||
</div>
|
||||
<span style="color: hsl(0, 0%, 0%);">Choisir une réponse ou plusieurs:</span>
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idIWtFb7BZ" id="idgi6jMo" type="checkbox" class="gift-input">
|
||||
|
||||
<label for="idgi6jMo" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Montréal
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idIWtFb7BZ" id="idmHcWKn" type="checkbox" class="gift-input">
|
||||
|
||||
<label for="idmHcWKn" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Ottawa
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idIWtFb7BZ" id="idSmdZmZ" type="checkbox" class="gift-input">
|
||||
|
||||
<label for="idSmdZmZ" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Vancouver
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idIWtFb7BZ" id="idOwpWf3" type="checkbox" class="gift-input">
|
||||
|
||||
<label for="idOwpWf3" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
New York
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="multiple-choice-answers-container">
|
||||
<input name="idIWtFb7BZ" id="idT8VlUn" type="checkbox" class="gift-input">
|
||||
|
||||
<label for="idT8VlUn" style="display: inline-block;
|
||||
padding: 0.2em 0 0.2em 0;
|
||||
|
||||
color: hsl(0, 0%, 0%);">
|
||||
Paris
|
||||
</label>
|
||||
|
||||
|
||||
|
||||
</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%);">
|
||||
|
||||
</div></section>
|
||||
Loading…
Reference in a new issue