Corriger des tests et auto-fix des problèmes de style

This commit is contained in:
C. Fuhrman 2025-02-02 12:42:05 -05:00
parent 23e053e24f
commit 2de7671666
13 changed files with 58 additions and 44 deletions

View file

@ -1,4 +1,4 @@
/* eslint-disable no-undef */
module.exports = {
presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
};

View file

@ -1,4 +1,4 @@
/* eslint-disable no-undef */
/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {

View file

@ -1,3 +1,3 @@
/* eslint-disable no-undef */
process.env.VITE_BACKEND_URL = 'http://localhost:4000/';
process.env.VITE_BACKEND_SOCKET_URL = 'https://ets-glitch-backend.glitch.me/';

View file

@ -12,6 +12,6 @@ describe('StudentType', () => {
expect(user.name).toBe('Student');
expect(user.id).toBe('123');
expect(user.answers.length).toBe(0);
expect(user.answers).toHaveLength(0);
});
});

View file

@ -5,47 +5,64 @@ import GIFTTemplatePreview from 'src/components/GiftTemplate/GIFTTemplatePreview
describe('GIFTTemplatePreview Component', () => {
test('renders error message when questions contain invalid syntax', () => {
render(<GIFTTemplatePreview questions={['Invalid GIFT syntax']} />);
const errorMessage = screen.findByText(/Erreur inconnue/i, {}, { timeout: 5000 });
expect(errorMessage).resolves.toBeInTheDocument();
render(<GIFTTemplatePreview questions={[':: title']} />);
const errorMessage = screen.getByText(/Title ::, Category, Description, or Question formatted stem but ":" found./i);
expect(errorMessage).toBeInTheDocument();
});
test('renders preview when valid questions are provided', () => {
const questions = [
'Question 1 { A | B | C }',
'Question 2 { D | E | F }',
'Stem1 {=ans1 ~ans2 ~ans3}',
];
render(<GIFTTemplatePreview questions={questions} />);
const previewContainer = screen.getByTestId('preview-container');
expect(previewContainer).toBeInTheDocument();
// const question1 = screen.getByText('Stem1');
const mcQuestion1 = screen.getByText('Stem1');
const ans1 = screen.getByText('ans1');
const ans2 = screen.getByText('ans2');
const ans3 = screen.getByText('ans3');
expect(mcQuestion1).toBeInTheDocument();
expect(ans1).toBeInTheDocument();
expect(ans2).toBeInTheDocument();
expect(ans3).toBeInTheDocument();
// each answer should have a radio button before it
const radioButtons = screen.getAllByRole('radio');
expect(radioButtons).toHaveLength(3);
// ans1 should be the <label> for the first radio button
expect(radioButtons[0].nextElementSibling).toBe(ans1);
// ans2 should be the <label> for the second radio button
expect(radioButtons[1].nextElementSibling).toBe(ans2);
// ans3 should be the <label> for the third radio button
expect(radioButtons[2].nextElementSibling).toBe(ans3);
// after the <label> for correct answer (ans1) there should be an svg with aria-hidden="true"
expect(ans1.nextElementSibling).toHaveAttribute('aria-hidden', 'true');
// after the <label> for incorrect answer (ans2) there should be an svg with aria-hidden="true"
expect(ans2.nextElementSibling).toHaveAttribute('aria-hidden', 'true');
// after the <label> for incorrect answer (ans3) there should be an svg with aria-hidden="true"
expect(ans3.nextElementSibling).toHaveAttribute('aria-hidden', 'true');
});
test('hides answers when hideAnswers prop is true', () => {
test('hides correct/incorrect answers when hideAnswers prop is true', () => {
const questions = [
'Question 1 { A | B | C }',
'Question 2 { D | E | F }',
'Stem1 {=ans1 ~ans2 ~ans3}',
];
render(<GIFTTemplatePreview questions={questions} hideAnswers />);
const previewContainer = screen.getByTestId('preview-container');
expect(previewContainer).toBeInTheDocument();
const ans1 = screen.queryByText('ans1');
const ans2 = screen.queryByText('ans2');
const ans3 = screen.queryByText('ans3');
const radioButtons = screen.getAllByRole('radio');
expect(radioButtons).toHaveLength(3);
expect(radioButtons[0].nextElementSibling).toBe(ans1);
expect(ans1?.nextElementSibling).toBeNull();
expect(radioButtons[1].nextElementSibling).toBe(ans2);
expect(ans2?.nextElementSibling).toBeNull();
expect(radioButtons[2].nextElementSibling).toBe(ans3);
expect(ans3?.nextElementSibling).toBeNull();
});
// it('renders images correctly', () => {
// const questions = [
// 'Question 1',
// '<img src="image1.jpg" alt="Image 1">',
// 'Question 2',
// '<img src="image2.jpg" alt="Image 2">',
// ];
// const { getByAltText } = render(<GIFTTemplatePreview questions={questions} />);
// const image1 = getByAltText('Image 1');
// const image2 = getByAltText('Image 2');
// expect(image1).toBeInTheDocument();
// expect(image2).toBeInTheDocument();
// });
// it('renders non-images correctly', () => {
// const questions = ['Question 1', 'Question 2'];
// const { queryByAltText } = render(<GIFTTemplatePreview questions={questions} />);
// const image1 = queryByAltText('Image 1');
// const image2 = queryByAltText('Image 2');
// expect(image1).toBeNull();
// expect(image2).toBeNull();
// });
});

View file

@ -54,10 +54,10 @@ describe('TextType', () => {
format: ''
};
// eslint-disable-next-line no-irregular-whitespace
// warning: there are zero-width spaces "" in the expected output -- you must enable seeing them with an extension such as Gremlins tracker in VSCode
// eslint-disable-next-line no-irregular-whitespace
const expectedOutput = `Inline matrix: <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><mrow><mo fence="true">(</mo><mtable rowspacing="0.16em"><mtr><mtd><mstyle displaystyle="false" scriptlevel="0"><mi>a</mi></mstyle></mtd><mtd><mstyle displaystyle="false" scriptlevel="0"><mi>b</mi></mstyle></mtd></mtr><mtr><mtd><mstyle displaystyle="false" scriptlevel="0"><mi>c</mi></mstyle></mtd><mtd><mstyle displaystyle="false" scriptlevel="0"><mi>d</mi></mstyle></mtd></mtr></mtable><mo fence="true">)</mo></mrow> \\begin{pmatrix} a &amp; b \\\\ c &amp; d \\end{pmatrix} </math></span><span aria-hidden="true" class="katex-html"><span class="base"><span style="height:2.4em;vertical-align:-0.95em;" class="strut"></span><span class="minner"><span style="top:0em;" class="mopen delimcenter"><span class="delimsizing size3">(</span></span><span class="mord"><span class="mtable"><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span style="height:1.45em;" class="vlist"><span style="top:-3.61em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span class="mord mathnormal">a</span></span></span><span style="top:-2.41em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span class="mord mathnormal">c</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span style="height:0.95em;" class="vlist"><span></span></span></span></span></span><span style="width:0.5em;" class="arraycolsep"></span><span style="width:0.5em;" class="arraycolsep"></span><span class="col-align-c"><span class="vlist-t vlist-t2"><span class="vlist-r"><span style="height:1.45em;" class="vlist"><span style="top:-3.61em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span class="mord mathnormal">b</span></span></span><span style="top:-2.41em;"><span style="height:3em;" class="pstrut"></span><span class="mord"><span class="mord mathnormal">d</span></span></span></span><span class="vlist-s"></span></span><span class="vlist-r"><span style="height:0.95em;" class="vlist"><span></span></span></span></span></span></span></span><span style="top:0em;" class="mclose delimcenter"><span class="delimsizing size3">)</span></span></span></span></span></span>`;
expect(FormattedTextTemplate(input)).toContain(expectedOutput);
});

View file

@ -28,7 +28,7 @@ function convertStylesToObject(styles: string): React.CSSProperties {
styles.split(';').forEach((style) => {
const [property, value] = style.split(':');
if (property && value) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(styleObject as any)[property.trim()] = value.trim();
}
});

View file

@ -12,7 +12,7 @@ import { Question } from 'gift-pegjs';
interface StudentModeQuizProps {
questions: QuestionType[];
submitAnswer: (answer: string | number | boolean, idQuestion: number) => void;
submitAnswer: (_answer: string | number | boolean, _idQuestion: number) => void;
disconnectWebSocket: () => void;
}

View file

@ -9,7 +9,7 @@ import './studentWaitPage.css';
interface Props {
students: StudentType[];
launchQuiz: () => void;
setQuizMode: (mode: 'student' | 'teacher') => void;
setQuizMode: (_mode: 'student' | 'teacher') => void;
}
const StudentWaitPage: React.FC<Props> = ({ students, launchQuiz, setQuizMode }) => {

View file

@ -12,7 +12,7 @@ import { Question } from 'gift-pegjs';
interface TeacherModeQuizProps {
questionInfos: QuestionType;
submitAnswer: (answer: string | number | boolean, idQuestion: number) => void;
submitAnswer: (_answer: string | number | boolean, _idQuestion: number) => void;
disconnectWebSocket: () => void;
}

View file

@ -196,8 +196,7 @@ const Dashboard: React.FC = () => {
// questions[i] = QuestionService.ignoreImgTags(questions[i]);
const parsedItem = parse(questions[i]);
Template(parsedItem[0]);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
} catch (_error) {
return false;
}
}

View file

@ -182,8 +182,7 @@ const QuizForm: React.FC = () => {
if (fileInputRef.current) {
fileInputRef.current.value = '';
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
} catch (error) {
} catch (_error) {
window.alert(`Une erreur est survenue.\n Veuillez réessayer plus tard`)
}

View file

@ -125,7 +125,6 @@ const ManageRoom: React.FC = () => {
// This is here to make sure the correct value is sent when user join
if (socket) {
console.log(`Listening for user-joined in room ${roomName}`);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
socket.on('user-joined', (_student: StudentType) => {
if (quizMode === 'teacher') {
webSocketService.nextQuestion(roomName, currentQuestion);