Ответ
Тестирование Datepicker охватывает функциональность, валидацию, UX и интеграцию.
1. Функциональное тестирование:
- Открытие/закрытие: Клик по полю, иконке, с клавиатуры.
- Выбор даты: Клик по дню, месяц, году. Навигация стрелками.
- Ввод с клавиатуры: Корректный парсинг различных форматов (DD.MM.YYYY, YYYY-MM-DD).
- Очистка поля.
2. Тестирование валидации и бизнес-логики:
- Минимальная и максимальная дата (min/max): Должны быть заблокированы (disabled) даты вне диапазона.
- Невалидный ввод: Буквы, некорректные даты (31.02.2023).
- Особые кейсы: Високосные года, переход между месяцами/годами.
Пример теста для проверки minDate (React Testing Library):
import { render, screen, fireEvent } from '@testing-library/react';
test('Блокирует даты раньше minDate', () => {
const minDate = new Date('2023-01-15');
render(<Datepicker minDate={minDate} />);
// Открываем календарь
fireEvent.click(screen.getByRole('textbox'));
// Пытаемся выбрать дату раньше 15 января
const disabledDate = screen.getByRole('button', { name: '10' }); // 10 января
expect(disabledDate).toBeDisabled();
// Проверяем, что дата после minDate активна
const enabledDate = screen.getByRole('button', { name: '20' }); // 20 января
expect(enabledDate).not.toBeDisabled();
});3. UX/UI и кросс-платформенное тестирование:
- Отображение: Корректность локализации (дни недели, месяцы), адаптивность.
- Доступность: Управление с клавиатуры (Tab, стрелки, Enter, Escape), поддержка скринридеров (ARIA-атрибуты).
- Кросс-браузерность: Работа в Chrome, Firefox, Safari, мобильных браузерах.
4. Интеграционное тестирование:
- Корректная передача выбранного значения (например, в формате ISO 8601) в родительский компонент или на бэкенд.
- Обработка значений
null/undefined. - Синхронизация с другими элементами формы.