Как тестировать форму с валидацией и асинхронной отправкой

1️⃣ Как кратко ответить

Тестирование формы с валидацией и асинхронной отправкой включает проверку клиентской валидации, серверной валидации и корректности асинхронного запроса. Используйте инструменты для тестирования, такие как Jest и Testing Library, чтобы имитировать пользовательские действия, проверять отображение ошибок и успешную отправку данных.

2️⃣ Подробное объяснение темы

Тестирование формы с валидацией и асинхронной отправкой — это важный аспект разработки, который обеспечивает корректную работу пользовательского интерфейса и взаимодействие с сервером. Рассмотрим основные этапы и подходы к тестированию.

1. Клиентская валидация

Клиентская валидация проверяет данные на стороне клиента перед отправкой на сервер. Это позволяет пользователю сразу увидеть ошибки и исправить их.

Пример кода:

// Импортируем необходимые библиотеки для тестирования
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import FormComponent from './FormComponent'; // Компонент формы
​
test('проверка клиентской валидации', () => {
  // Рендерим компонент формы
  render(<FormComponent />);
​
  // Находим поле ввода и кнопку отправки
  const input = screen.getByLabelText(/email/i);
  const submitButton = screen.getByRole('button', { name: /submit/i });
​
  // Вводим некорректный email
  fireEvent.change(input, { target: { value: 'invalid-email' } });
​
  // Имитируем клик по кнопке отправки
  fireEvent.click(submitButton);
​
  // Проверяем, что отображается сообщение об ошибке
  expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();
});

• render(<FormComponent />);: Рендерит компонент формы для тестирования.
• screen.getByLabelText(/email/i);: Находит поле ввода по метке "email".
• fireEvent.change(input, { target: { value: 'invalid-email' } });: Имитирует ввод некорректного email.
• fireEvent.click(submitButton);: Имитирует клик по кнопке отправки.
• expect(screen.getByText(/invalid email address/i)).toBeInTheDocument();: Проверяет, что отображается сообщение об ошибке.

2. Серверная валидация

Серверная валидация проверяет данные на сервере после их отправки. Это необходимо для защиты от некорректных данных, которые могут быть отправлены в обход клиентской валидации.

Пример кода:

test('проверка серверной валидации', async () => {
  // Мокаем fetch для имитации ответа сервера
  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve({ error: 'Email already exists' }),
    })
  );
​
  render(<FormComponent />);
​
  const input = screen.getByLabelText(/email/i);
  const submitButton = screen.getByRole('button', { name: /submit/i });
​
  fireEvent.change(input, { target: { value: 'test@example.com' } });
  fireEvent.click(submitButton);
​
  // Ожидаем, что сообщение об ошибке отобразится
  expect(await screen.findByText(/email already exists/i)).toBeInTheDocument();
});

• global.fetch = jest.fn(() => ...);: Мокаем fetch для имитации ответа сервера.
• Promise.resolve({ error: 'Email already exists' }): Сервер возвращает ошибку, что email уже существует.
• expect(await screen.findByText(/email already exists/i)).toBeInTheDocument();: Проверяет, что сообщение об ошибке отображается.

3. Асинхронная отправка

Асинхронная отправка данных на сервер позволяет пользователю продолжать взаимодействие с интерфейсом, пока данные обрабатываются.

Пример кода:

test('проверка асинхронной отправки', async () => {
  // Мокаем успешный ответ сервера
  global.fetch = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.resolve({ success: true }),
    })
  );
​
  render(<FormComponent />);
​
  const input = screen.getByLabelText(/email/i);
  const submitButton = screen.getByRole('button', { name: /submit/i });
​
  fireEvent.change(input, { target: { value: 'test@example.com' } });
  fireEvent.click(submitButton);
​
  // Ожидаем, что сообщение об успешной отправке отобразится
  expect(await screen.findByText(/form submitted successfully/i)).toBeInTheDocument();
});

• Promise.resolve({ success: true }): Сервер возвращает успешный ответ.
• expect(await screen.findByText(/form submitted successfully/i)).toBeInTheDocument();: Проверяет, что сообщение об успешной отправке отображается.

Заключение

Тестирование формы с валидацией и асинхронной отправкой включает проверку всех этапов взаимодействия пользователя с формой. Это гарантирует, что форма работает корректно и надежно, обеспечивая положительный пользовательский опыт.