Пользовательские действия — это действия, которые пользователь выполняет в интерфейсе приложения, такие как клики, ввод текста, наведение курсора и другие. Тестирование этих действий важно для обеспечения правильного поведения приложения.
Основные пользовательские действия:
- Клик (Click): Нажатие на кнопку, ссылку или другой интерактивный элемент.
- Двойной клик (Double Click): Два быстрых нажатия на элемент.
- Наведение курсора (Hover): Наведение курсора мыши на элемент.
- Ввод текста (Input): Ввод текста в текстовое поле.
- Скроллинг (Scroll): Прокрутка страницы или элемента.
- Перетаскивание (Drag and Drop): Перетаскивание элемента с одного места на другое.
- Выбор (Select): Выбор элемента из выпадающего списка или списка.
- Нажатие клавиш (Keyboard Events): Нажатие клавиш на клавиатуре, таких как Enter, Esc, Tab и других.
Тестирование пользовательских действий:
Для тестирования пользовательских действий в React можно использовать библиотеки, такие как React Testing Library и Enzyme. Эти библиотеки предоставляют утилиты для имитации пользовательских действий и проверки результатов.
1. Клик (Click):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles click event', () => {
render(<MyComponent />);
const button = screen.getByText('Click me');
fireEvent.click(button);
expect(screen.getByText('Clicked!')).toBeInTheDocument();
});2. Двойной клик (Double Click):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles double click event', () => {
render(<MyComponent />);
const button = screen.getByText('Double Click me');
fireEvent.doubleClick(button);
expect(screen.getByText('Double Clicked!')).toBeInTheDocument();
});3. Наведение курсора (Hover):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles hover event', () => {
render(<MyComponent />);
const element = screen.getByText('Hover me');
fireEvent.mouseOver(element);
expect(screen.getByText('Hovered!')).toBeInTheDocument();
});4. Ввод текста (Input):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles input event', () => {
render(<MyComponent />);
const input = screen.getByPlaceholderText('Enter text');
fireEvent.change(input, { target: { value: 'Hello, World!' } });
expect(input.value).toBe('Hello, World!');
});5. Скроллинг (Scroll):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles scroll event', () => {
render(<MyComponent />);
const container = screen.getByTestId('scroll-container');
fireEvent.scroll(container, { target: { scrollTop: 100 } });
expect(screen.getByText('Scrolled!')).toBeInTheDocument();
});6. Перетаскивание (Drag and Drop):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles drag and drop event', () => {
render(<MyComponent />);
const source = screen.getByText('Drag me');
const target = screen.getByText('Drop here');
fireEvent.dragStart(source);
fireEvent.dragEnter(target);
fireEvent.dragOver(target);
fireEvent.drop(target);
expect(screen.getByText('Dropped!')).toBeInTheDocument();
});7. Выбор (Select):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles select event', () => {
render(<MyComponent />);
const select = screen.getByRole('combobox');
fireEvent.change(select, { target: { value: 'option2' } });
expect(screen.getByText('Selected: option2')).toBeInTheDocument();
});8. Нажатие клавиш (Keyboard Events):
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';
test('handles key press event', () => {
render(<MyComponent />);
const input = screen.getByPlaceholderText('Enter text');
fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
expect(screen.getByText('Enter key pressed!')).toBeInTheDocument();
});