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

В Element Plus формы реализуются через компоненты <el-form> и <el-form-item>, которые обеспечивают удобную структуру для валидации и управления данными. Центральной частью тестирования является проверка валидаторов, состояния полей, а также обработчиков событий.

Структура формы и её элементы

Форма в Element Plus строится по иерархии:

<el-form :model="formData" :rules="rules" ref="formRef">
  <el-form-item label="Имя" prop="name">
    <el-input v-model="formData.name"></el-input>
  </el-form-item>
  <el-form-item label="Email" prop="email">
    <el-input v-model="formData.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">Отправить</el-button>
  </el-form-item>
</el-form>
  • model — объект с данными формы.
  • rules — объект с правилами валидации.
  • ref — ссылка на форму для программного вызова методов валидации.
  • prop — ключ свойства в model, которое будет валидироваться.

Настройка правил валидации

Правила задаются объектом, где ключи соответствуют свойствам model, а значения — массивы правил:

const rules = {
  name: [
    { required: true, message: 'Имя обязательно', trigger: 'blur' },
    { min: 3, max: 20, message: 'От 3 до 20 символов', trigger: 'blur' }
  ],
  email: [
    { required: true, message: 'Email обязателен', trigger: 'blur' },
    { type: 'email', message: 'Некорректный email', trigger: ['blur', 'change'] }
  ]
};
  • required — проверка обязательного заполнения.
  • min / max — ограничения по длине.
  • type — встроенные типы данных (email, number, url).
  • trigger — событие, при котором срабатывает валидация (blur, change).

Методы формы для тестирования

Для автоматизации проверки форм доступны методы через ref:

const formRef = ref(null);

// Проверка всей формы
formRef.value.validate((valid, fields) => {
  if (valid) {
    console.log('Форма валидна');
  } else {
    console.log('Ошибка валидации', fields);
  }
});

// Проверка одного поля
formRef.value.validateField('email', (errorMessage) => {
  if (errorMessage) {
    console.log('Ошибка в поле email:', errorMessage);
  }
});

// Сброс формы
formRef.value.resetFields();

Ключевые моменты:

  • validate(callback) — проверяет всю форму и возвращает объект с ошибками.
  • validateField(prop, callback) — проверяет конкретное поле.
  • resetFields() — очищает форму и сбрасывает ошибки валидации.

Тестирование пользовательского ввода

Тестирование должно покрывать все сценарии ввода:

  1. Пустое поле — проверка required.
  2. Неверный формат — проверка type и регулярных выражений.
  3. Валидация длины — поля с min и max.
  4. Комбинации событий — blur, change.

Пример программного теста с использованием Jest и Vue Test Utils:

import { mount } from '@vue/test-utils';
import MyForm from '@/components/MyForm.vue';

test('валидирует поля формы', async () => {
  const wrapper = mount(MyForm);
  await wrapper.find('input[name="name"]').setValue('');
  await wrapper.find('button').trigger('click');

  const error = wrapper.find('.el-form-item__error');
  expect(error.text()).toBe('Имя обязательно');
});

Асинхронные валидаторы

Element Plus поддерживает асинхронные проверки, например проверку уникальности email через API:

const rules = {
  email: [
    {
      validator: async (rule, value) => {
        if (!value) return Promise.reject('Email обязателен');
        const exists = await checkEmailExists(value);
        if (exists) return Promise.reject('Email уже зарегистрирован');
        return Promise.resolve();
      },
      trigger: 'blur'
    }
  ]
};
  • Асинхронный валидатор возвращает Promise.
  • Ошибки обрабатываются автоматически, как и синхронные правила.

Работа с динамическими формами

В формах с динамическими полями важно проверять:

  • Добавление/удаление элементов.
  • Правильность привязки prop к модели.
  • Состояние валидации после изменений.
<el-form-item
  v-for="(item, index) in dynamicFields"
  :key="index"
  :prop="'field' + index"
>
  <el-input v-model="item.value"></el-input>
</el-form-item>

Тестирование динамических форм включает проверку всех новых полей после рендеринга и их взаимодействие с методами validate и resetFields.

Проверка визуальных состояний

Element Plus автоматически применяет классы ошибок:

  • .is-error — контейнер поля с ошибкой.
  • .el-form-item__error — текст ошибки.
  • .is-success — валидное поле.

Тестирование UI можно производить через проверку наличия этих классов после вызова validate().

Практические рекомендации

  1. Разделять тесты на поля — отдельные тесты для каждого правила.
  2. Использовать ref формы — упрощает вызов валидации и сброса.
  3. Покрывать асинхронные сценарии — проверка API и уникальности.
  4. Включать тесты событий — blur, change, input.
  5. Проверять динамическую генерацию — особенно при массивах или списках полей.

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

Оглавление