new test for editor components

This commit is contained in:
Philippe 2025-03-16 13:25:51 -04:00
parent cf2083ff85
commit c35db46387
2 changed files with 30 additions and 61 deletions

View file

@ -1,80 +1,50 @@
// Editor.test.tsx
import React from 'react'; import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react'; import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom'; import '@testing-library/jest-dom';
import Editor from 'src/components/Editor/Editor'; import Editor from '../../../components/Editor/Editor';
describe('Editor Component', () => { describe('Editor Component', () => {
const mockOnEditorChange = jest.fn(); const mockOnValuesChange = jest.fn();
const sampleProps = { const sampleProps = {
label: 'Sample Label', label: 'Sample Label',
initialValue: 'Sample Initial Value', values: ['Question 1', 'Question 2'],
onEditorChange: mockOnEditorChange onValuesChange: mockOnValuesChange
}; };
beforeEach(() => { beforeEach(() => {
mockOnValuesChange.mockClear();
});
test('renders the label correctly', () => {
render(<Editor {...sampleProps} />); render(<Editor {...sampleProps} />);
const label = screen.getByText('Sample Label');
expect(label).toBeInTheDocument();
}); });
it('renders correctly with initial value', () => { test('renders the correct number of questions', () => {
const editorTextarea = screen.getByRole('textbox') as HTMLTextAreaElement; render(<Editor {...sampleProps} />);
expect(editorTextarea).toBeInTheDocument(); const questions = screen.getAllByRole('textbox');
expect(editorTextarea.value).toBe('Sample Initial Value'); expect(questions.length).toBe(2);
}); });
it('calls onEditorChange callback when editor value changes', () => { test('calls onValuesChange with updated values when a question is changed', () => {
const editorTextarea = screen.getByRole('textbox') as HTMLTextAreaElement; render(<Editor {...sampleProps} />);
fireEvent.change(editorTextarea, { target: { value: 'Updated Value' } }); const questionInput = screen.getAllByRole('textbox')[0];
expect(mockOnEditorChange).toHaveBeenCalledWith('Updated Value'); fireEvent.change(questionInput, { target: { value: 'Updated Question 1' } });
expect(mockOnValuesChange).toHaveBeenCalledWith(['Updated Question 1', 'Question 2']);
}); });
it('updates editor value when initialValue prop changes', () => { test('calls onValuesChange with updated values when a question is deleted', () => {
const updatedProps = { render(<Editor {...sampleProps} />);
label: 'Updated Label', const deleteButton = screen.getAllByLabelText('delete')[0];
initialValue: 'Updated Initial Value', fireEvent.click(deleteButton);
onEditorChange: mockOnEditorChange expect(mockOnValuesChange).toHaveBeenCalledWith(['Question 2']);
};
render(<Editor {...updatedProps} />);
const editorTextareas = screen.getAllByRole('textbox') as HTMLTextAreaElement[];
const editorTextarea = editorTextareas[1];
expect(editorTextarea.value).toBe('Updated Initial Value');
}); });
test('should call change text with the correct value on textarea change', () => { test('renders delete buttons for each question', () => {
const updatedProps = { render(<Editor {...sampleProps} />);
label: 'Updated Label', const deleteButtons = screen.getAllByLabelText('delete');
initialValue: 'Updated Initial Value', expect(deleteButtons.length).toBe(2);
onEditorChange: mockOnEditorChange
};
render(<Editor {...updatedProps} />);
const editorTextareas = screen.getAllByRole('textbox') as HTMLTextAreaElement[];
const editorTextarea = editorTextareas[1];
fireEvent.change(editorTextarea, { target: { value: 'New value' } });
expect(editorTextarea.value).toBe('New value');
}); });
test('should call onEditorChange with an empty string if textarea value is falsy', () => {
const updatedProps = {
label: 'Updated Label',
initialValue: 'Updated Initial Value',
onEditorChange: mockOnEditorChange
};
render(<Editor {...updatedProps} />);
const editorTextareas = screen.getAllByRole('textbox') as HTMLTextAreaElement[];
const editorTextarea = editorTextareas[1];
fireEvent.change(editorTextarea, { target: { value: '' } });
expect(editorTextarea.value).toBe('');
});
}); });

View file

@ -131,7 +131,6 @@ const QuizForm: React.FC = () => {
const handleQuizSave = async () => { const handleQuizSave = async () => {
try { try {
// check if everything is there
if (quizTitle == '') { if (quizTitle == '') {
alert("Veuillez choisir un titre"); alert("Veuillez choisir un titre");
return; return;