Работа с формами в Cypress и отправка данных

Введение

Формы — это своего рода дипломат вашего приложения. Они получают данные от пользователей и отправляют их на сервер. Неправильная работа формы может стать причиной недовольства пользователей и, как следствие, падения доверия. Подумайте, как вы себя чувствуете, если форма скажет вам: "Эй, введи свой email", пока вы десятый раз подряд вводите его правильно.

С помощью Cypress мы можем протестировать форму "на прочность". Наши тесты смогут проверить такие важные элементы, как:

• Корректность ввода данных;
• Валидация полей (как на клиенте, так и на сервере);
• Отправка данных;
• Обработка ошибок и показ сообщений.

Сегодня мы эту тему и разберём.

Создаем базовую форму

Давайте начнем с простого примера формы. Представьте, что у нас есть форма логина:

// src/components/LoginForm.tsx
import React, { useState } from 'react';

interface LoginFormProps {
  onSubmit: (data: { email: string; password: string }) => void;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email:</label>
      <input
        id="email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <label htmlFor="password">Password:</label>
      <input
        id="password"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
};

export default LoginForm;

Эта форма состоит из двух полей ввода: email и password, а также кнопки "Login". При отправке данных вызывается функция onSubmit, которую мы передаем в компонент через пропсы. Теперь мы готовы тестировать.

Написание тестов для ввода данных

Теперь, когда у нас есть форма, давайте перейдем к написанию тестов. Начнем с проверки ввода данных.

// cypress/e2e/loginForm.cy.ts
describe('Login Form', () => {
  beforeEach(() => {
    // Загружаем страницу с формой перед каждым тестом
    cy.visit('/login');
  });

  it('should allow the user to type in email and password fields', () => {
    // Проверяем ввод email
    cy.get('#email').type('test@example.com').should('have.value', 'test@example.com');

    // Проверяем ввод пароля
    cy.get('#password').type('securepassword').should('have.value', 'securepassword');
  });
});

В этом тесте мы используем .type() для ввода текста в поля email и password. Метод .should('have.value', ...) помогает проверить, что данные действительно оказались в поле.

Тестирование отправки формы

Следующим шагом мы проверим, правильно ли работает отправка данных формы. Для этого создадим моковую функцию, которая будет заменять onSubmit и проверять её вызов.

// cypress/e2e/loginForm.cy.ts
it('should submit the form with email and password', () => {
  const mockSubmit = cy.stub(); // Создаем мок

  // Монтируем компонент с подменой функции onSubmit
  cy.mount(<LoginForm onSubmit={mockSubmit} />);

  // Вводим данные
  cy.get('#email').type('test@example.com');
  cy.get('#password').type('securepassword');

  // Отправляем форму
  cy.get('form').submit();

  // Проверяем вызов моковой функции
  cy.wrap(mockSubmit).should('be.calledOnceWith', {
    email: 'test@example.com',
    password: 'securepassword',
  });
});

Здесь мы используем cy.stub() для создания моковой функции, которая заменяет onSubmit. После ввода данных в поля мы вызываем .submit() для отправки формы и проверяем, что мок был вызван с правильными параметрами с помощью .should('be.calledOnceWith').

Валидация полей формы

Поле email явно требует проверки: email должен быть в правильном формате, а пароль не может быть пустым. Добавим базовую валидацию в нашу форму:

const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault();
  if (!email || !password) {
    alert('All fields are required');
    return;
  }
  onSubmit({ email, password });
};

Теперь протестируем эту валидацию:

it('should show an alert if fields are empty', () => {
  cy.mount(<LoginForm onSubmit={cy.stub()} />);

  // Пытаемся отправить пустую форму
  cy.get('form').submit();

  // Проверяем, что alert отображается
  cy.on('window:alert', (text) => {
    expect(text).to.equal('All fields are required');
  });
});

Этот тест проверяет, что при пустых полях отображается сообщение через window.alert. Мы используем cy.on() для захвата события alert.

Тестирование обработки ошибок

Когда пользователь отправляет форму, сервер может вернуть ошибку. Например, если email или пароль неверны. Нам нужно это проверить. Для этого используем фикстуры, чтобы имитировать ошибочный ответ:

// cypress/fixtures/loginError.json
{
  "error": "Invalid email or password"
}

Теперь настроим тест:

it('should display error message from the server', () => {
  cy.intercept('POST', '/api/login', {
    statusCode: 401,
    fixture: 'loginError.json',
  }).as('loginRequest');

  cy.mount(<LoginForm onSubmit={cy.stub()} />);

  cy.get('#email').type('wrong@example.com');
  cy.get('#password').type('wrongpassword');
  cy.get('form').submit();

  cy.wait('@loginRequest');
  cy.get('.error-message').should('contain.text', 'Invalid email or password');
});

Здесь мы:

1. Используем cy.intercept() для подмены ответа сервера.
2. Проверяем, что сообщение об ошибке корректно отображается после неудачной попытки логина.

2

Задача

Модуль 3: React, 18 уровень, 5 лекция

Недоступна

Тестирование обработки ошибок в форме

Тестирование обработки ошибок в форме

Открыть