Пользовательские действия — это действия, которые пользователь выполняет в интерфейсе приложения, такие как клики, ввод текста, наведение курсора и другие. Тестирование этих действий важно для обеспечения правильного поведения приложения.
Основные пользовательские действия:
- Клик (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();
});