gmatte/EvalueTonSavoir
1
0
Fork 0
mirror of https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git synced 2025-08-11 21:23:54 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
C. Fuhrman 2024-09-15 21:41:24 -04:00
parent c266538aa5
commit c0e95f2a0d
11 changed files with 755 additions and 1429 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1767
client/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

23
client/package.json
View file

@ -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-dom": "^18.2.0",
"react-latex": "^1.2.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"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/react": "^14.1.0",
"@testing-library/dom": "^10.4.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/parser": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^8.5.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"
}

28
client/src/__tests__/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.test.tsx
View file

@ -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(
<MultipleChoiceQuestion
globalFeedback={sampleFeedback}
choices={choices}
handleOnSubmitAnswer={mockHandleOnSubmitAnswer} questionContent={{text: questionStem, format: 'plain'}} />
);
<MemoryRouter>
<MultipleChoiceQuestion
globalFeedback={sampleFeedback}
choices={choices}
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');
fireEvent.click(submitButton);
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');
fireEvent.click(choiceButton);
act(() => {
fireEvent.click(choiceButton);
});
const submitButton = screen.getByText('Répondre');
fireEvent.click(submitButton);
act(() => {
fireEvent.click(submitButton);
});
expect(mockHandleOnSubmitAnswer).toHaveBeenCalledWith('Choice 1');
});
});

32
client/src/__tests__/components/Questions/TrueFalseQuestion/TrueFalseQuestion.test.tsx
View file

@ -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');
fireEvent.click(submitButton);
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');
fireEvent.click(trueButton);
act(() => {
fireEvent.click(trueButton);
});
fireEvent.click(submitButton);
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');
fireEvent.click(falseButton);
fireEvent.click(submitButton);
act(() => {
fireEvent.click(falseButton);
});
act(() => {
fireEvent.click(submitButton);
});
expect(mockHandleSubmitAnswer).toHaveBeenCalledWith(false);
});

172
client/src/__tests__/pages/Student/StudentModeQuiz/StudentModeQuiz.test.tsx
View file

@ -1,141 +1,95 @@
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[] = [
{
question: {
id: '1',
type: 'MC',
stem: { format: 'plain', text: 'Sample Question 1' },
title: 'Sample Question 1',
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 },
],
},
},
{
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 mockGiftQuestions = parse(
`::Sample Question 1:: Sample Question 1 {=Option A ~Option B}
::Sample Question 2:: Sample Question 2 {T}`);
const mockQuestions: QuestionType[] = mockGiftQuestions.map((question, index) => {
question.id = (index + 1).toString();
const newMockQuestion: QuestionType = {
question: question,
};
return newMockQuestion;
});
const mockSubmitAnswer = jest.fn();
const mockDisconnectWebSocket = jest.fn();
describe('StudentModeQuiz', () => {
test('renders the initial question', async () => {
render(
<MemoryRouter>
<StudentModeQuiz
questions={mockQuestions}
submitAnswer={mockSubmitAnswer}
disconnectWebSocket={mockDisconnectWebSocket}
/>
</MemoryRouter>
);
// wait for the question to be rendered
await waitFor(() => {
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 () => {
render(
<MemoryRouter>
<StudentModeQuiz
beforeEach(() => {
render(
<MemoryRouter>
<StudentModeQuiz
questions={mockQuestions}
submitAnswer={mockSubmitAnswer}
disconnectWebSocket={mockDisconnectWebSocket}
/>
</MemoryRouter>
);
/>
</MemoryRouter>);
});
fireEvent.click(screen.getByText('Option A'));
fireEvent.click(screen.getByText('Répondre'));
describe('StudentModeQuiz', () => {
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();
});
await waitFor(() => {
expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1');
test('handles answer submission text', async () => {
act(() => {
fireEvent.click(screen.getByText('Option A'));
});
act(() => {
fireEvent.click(screen.getByText('Répondre'));
});
expect(mockSubmitAnswer).toHaveBeenCalledWith('Option A', '1');
});
test('handles quit button click', async () => {
render(
<MemoryRouter>
<StudentModeQuiz
questions={mockQuestions}
submitAnswer={mockSubmitAnswer}
disconnectWebSocket={mockDisconnectWebSocket}
/>
</MemoryRouter>);
fireEvent.click(screen.getByText('Quitter'));
await waitFor(() => {
expect(mockDisconnectWebSocket).toHaveBeenCalled();
act(() => {
fireEvent.click(screen.getByText('Quitter'));
});
expect(mockDisconnectWebSocket).toHaveBeenCalled();
});
test('navigates to the next question', async () => {
render(
<MemoryRouter>
<StudentModeQuiz
questions={mockQuestions}
submitAnswer={mockSubmitAnswer}
disconnectWebSocket={mockDisconnectWebSocket}
/>
</MemoryRouter>);
fireEvent.click(screen.getByText('Option A'));
fireEvent.click(screen.getByText('Répondre'));
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();
act(() => {
fireEvent.click(screen.getByText('Option A'));
});
act(() => {
fireEvent.click(screen.getByText('Répondre'));
});
act(() => {
fireEvent.click(screen.getByText('Question suivante'));
});
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(
<MemoryRouter>
<StudentModeQuiz
questions={mockQuestions}
submitAnswer={mockSubmitAnswer}
disconnectWebSocket={mockDisconnectWebSocket}
/>
</MemoryRouter>);
fireEvent.click(screen.getByText('Option A'));
fireEvent.click(screen.getByText('Répondre'));
fireEvent.click(screen.getByText('Question précédente'));
await waitFor(() => {
expect(screen.getByText('Sample Question 1')).toBeInTheDocument();
expect(screen.getByText('Option B')).toBeInTheDocument();
act(() => {
fireEvent.click(screen.getByText('Option A'));
});
act(() => {
fireEvent.click(screen.getByText('Répondre'));
});
act(() => {
fireEvent.click(screen.getByText('Question précédente'));
});
expect(screen.getByText('Sample Question 1')).toBeInTheDocument();
expect(screen.getByText('Option B')).toBeInTheDocument();
});
});

42
client/src/__tests__/pages/Student/TeacherModeQuiz/TeacherModeQuiz.test.tsx
View file

@ -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 = {
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 mockQuestion = mockGiftQuestions[0];
mockQuestion.id = '1';
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', () => {
fireEvent.click(screen.getByText('Quitter'));
act(() => {
fireEvent.click(screen.getByText('Quitter'));
});
expect(mockDisconnectWebSocket).toHaveBeenCalled();
});
});

10
client/src/components/GiftTemplate/templates/TextType.ts
View file

@ -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 (
marked
.parse(formatText, { breaks: true }) // call marked.parse instead of marked
// Strip outer paragraph tags
.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2')
);
const parsedText = marked.parse(formatText, { breaks: true }) as string; // https://github.com/markedjs/marked/discussions/3219
return parsedText.replace(/(^<p>)(.*?)(<\/p>)$/gm, '$2');
default:
throw new Error(`Unsupported text format: ${text.format}`);
}

102
client/src/components/GiftTemplate/templates/types.d.ts vendored
View file

@ -12,31 +12,9 @@ export interface DisplayOptions {
preview: boolean;
}
export type QuestionType =
| 'Description'
| 'Category'
| '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 {
QuestionType, FormatType, NumericalType, TextFormat, NumericalFormat, TextChoice, NumericalChoice, Question, Description, Category, MultipleChoice, ShortAnswer, Numerical, Essay, TrueFalse,
Matching, Match, GIFTQuestion } from 'gift-pegjs';
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;

4
client/src/components/Questions/MultipleChoiceQuestion/MultipleChoiceQuestion.tsx
View file

@ -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(() => {

2
client/src/components/Questions/Question.tsx
View file

@ -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}

2
client/src/components/Questions/TrueFalseQuestion/TrueFalseQuestion.tsx
View file

@ -27,7 +27,7 @@ const TrueFalseQuestion: React.FC<Props> = (props) => {
return (
<div className="question-container">
<div className="question content">
<div dangerouslySetInnerHTML={{ __html: TextType({text: questionContent}) }} />
<div dangerouslySetInnerHTML={{ __html: TextType({ text: questionContent }) }} />
</div>
<div className="choices-wrapper mb-1">
<Button