Тестирование пользовательских сценариев

Naive UI — это современная библиотека компонентов для Vue 3, обеспечивающая гибкость и высокую кастомизацию. При разработке сложных приложений важное место занимает тестирование пользовательских сценариев, так как оно позволяет убедиться, что интерфейс корректно реагирует на действия пользователя.

Настройка окружения для тестирования

Для начала необходимо подготовить проект с Vue 3 и Naive UI, а также установить инструменты для тестирования:

npm install @vue/test-utils jest vue-jest @testing-library/vue

@vue/test-utils позволяет рендерить компоненты в тестовой среде и взаимодействовать с ними так, как это делает пользователь. Jest служит для запуска тестов и проверки результатов. @testing-library/vue обеспечивает удобные методы для поиска элементов и симуляции событий.

Структура тестов

Тестирование пользовательских сценариев строится вокруг нескольких ключевых принципов:

Рендер компонента Перед любыми действиями необходимо создать инстанс компонента в тестовой среде. Для Naive UI важно учитывать, что многие компоненты используют провайдер темы, поэтому часто требуется обернуть компонент в NConfigProvider:

import { mount } from '@vue/test-utils';
import { NConfigProvider, NButton } from 'naive-ui';

const wrapper = mount({
  template: `Click`,
  setup() {
    const count = ref(0);
    const increment = () => count.value++;
    return { count, increment };
  }
});

Симуляция действий пользователя Для имитации кликов, ввода текста или выбора опций используется trigger или fireEvent:

await wrapper.findComponent(NButton).trigger('click');
expect(wrapper.vm.count).toBe(1);

Проверка состояния интерфейса После взаимодействия с компонентом важно проверить его визуальное или логическое состояние:

expect(wrapper.html()).toContain('Click'); // Проверка текста кнопки
expect(wrapper.vm.count).toBe(1);         // Проверка логики

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

Naive UI предоставляет множество интерактивных элементов: кнопки, селекты, модальные окна, таблицы и т.д. Особое внимание уделяется компонентам с асинхронным поведением.

Пример: модальное окно

import { NModal, NButton } from 'naive-ui';

const wrapper = mount({
  template: `
    
      Open
      Content
    
  `,
  setup() {
    const show = ref(false);
    return { show };
  }
});

await wrapper.findComponent(NButton).trigger('click');
expect(wrapper.findComponent(NModal).props('show')).toBe(true);

Ключевой момент: для тестирования модального окна используется двустороннее связывание v-model:show, что позволяет отслеживать состояние открытия/закрытия.

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

Naive UI поддерживает комплексные формы с валидаторами. Тестирование форм требует проверки:

Корректного отображения ошибок
Валидации данных при вводе
Отправки формы при выполнении всех условий

import { NForm, NFormItem, NInput, NButton } from 'naive-ui';

const wrapper = mount({
  template: `
    
      
        
      
      Submit
    
  `,
  setup() {
    const form = reactive({ name: '' });
    const rules = { name: [(v) => !!v || 'Required'] };
    const submit = () => form.name && console.log('Submitted');
    return { form, rules, submit };
  }
});

await wrapper.findComponent(NButton).trigger('click');
// Проверка ошибки валидации
expect(wrapper.find('.n-form-item-feedback').text()).toBe('Required');

Асинхронные сценарии и задержки

Некоторые компоненты, например, NSelect с поиском данных через API, требуют тестирования асинхронных сценариев. Для этого используется nextTick или await flushPromises():

import { flushPromises } from '@vue/test-utils';

await wrapper.find('input').setValue('test');
await flushPromises();
expect(wrapper.findAll('.n-base-select-option')).toHaveLength(3);

Стратегии тестирования

Тестирование “от пользователя” – взаимодействия симулируются так, как это делает реальный пользователь.
Тестирование логики компонента – проверка реактивных состояний, вычисляемых свойств и методов.
Тестирование визуальных изменений – проверка классов CSS, текста и состояния компонентов после событий.