mirror of
https://github.com/ets-cfuhrman-pfe/EvalueTonSavoir.git
synced 2025-08-11 21:23:54 -04:00
new test for editor components
This commit is contained in:
parent
aa74227981
commit
c18b1a8759
2 changed files with 30 additions and 61 deletions
|
|
@ -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('');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue