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 { render, fireEvent, screen } from '@testing-library/react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Editor from 'src/components/Editor/Editor';
import Editor from '../../../components/Editor/Editor';
describe('Editor Component', () => {
const mockOnEditorChange = jest.fn();
const mockOnValuesChange = jest.fn();
const sampleProps = {
label: 'Sample Label',
initialValue: 'Sample Initial Value',
onEditorChange: mockOnEditorChange
values: ['Question 1', 'Question 2'],
onValuesChange: mockOnValuesChange
};
beforeEach(() => {
mockOnValuesChange.mockClear();
});
test('renders the label correctly', () => {
render(<Editor {...sampleProps} />);
const label = screen.getByText('Sample Label');
expect(label).toBeInTheDocument();
});
it('renders correctly with initial value', () => {
const editorTextarea = screen.getByRole('textbox') as HTMLTextAreaElement;
expect(editorTextarea).toBeInTheDocument();
expect(editorTextarea.value).toBe('Sample Initial Value');
test('renders the correct number of questions', () => {
render(<Editor {...sampleProps} />);
const questions = screen.getAllByRole('textbox');
expect(questions.length).toBe(2);
});
it('calls onEditorChange callback when editor value changes', () => {
const editorTextarea = screen.getByRole('textbox') as HTMLTextAreaElement;
fireEvent.change(editorTextarea, { target: { value: 'Updated Value' } });
expect(mockOnEditorChange).toHaveBeenCalledWith('Updated Value');
test('calls onValuesChange with updated values when a question is changed', () => {
render(<Editor {...sampleProps} />);
const questionInput = screen.getAllByRole('textbox')[0];
fireEvent.change(questionInput, { target: { value: 'Updated Question 1' } });
expect(mockOnValuesChange).toHaveBeenCalledWith(['Updated Question 1', 'Question 2']);
});
it('updates editor value when initialValue prop changes', () => {
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];
expect(editorTextarea.value).toBe('Updated Initial Value');
test('calls onValuesChange with updated values when a question is deleted', () => {
render(<Editor {...sampleProps} />);
const deleteButton = screen.getAllByLabelText('delete')[0];
fireEvent.click(deleteButton);
expect(mockOnValuesChange).toHaveBeenCalledWith(['Question 2']);
});
test('should call change text with the correct value on textarea change', () => {
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: 'New value' } });
expect(editorTextarea.value).toBe('New value');
test('renders delete buttons for each question', () => {
render(<Editor {...sampleProps} />);
const deleteButtons = screen.getAllByLabelText('delete');
expect(deleteButtons.length).toBe(2);
});
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 () => {
try {
// check if everything is there
if (quizTitle == '') {
alert("Veuillez choisir un titre");
return;