Как я могу вызвать событие «размытие» при тестировании v-autocomplete с использованием библиотеки тестирования Vue?
Я пишу тест для компонента оболочки Vuetify v-autocomplete, который проверяет отображаемое сообщение об ошибке при размытии. Однако вывод ошибки показывает, что выбор ввода остается открытым, а базовый элемент имеет класс фокуса. Я не могу понять, что я делаю неправильно. Код теста выглядит так:
it('should display error if field is empty', async () => {
const { queryByLabelText, queryByText } = renderWithVuetify(MyComponent);
await fireEvent.click(queryByLabelText('Label')); // Open v-autocomplete input select
await fireEvent.click(document); // Should 'blur' input. Tried different elements here like document.body, Vuetify app root etc. Even dummy element next to v-autocomplete
expect(queryByText('This field is required')).not.toBeNull();
});
2 ответа
Вы можете использовать:
document.activeElement.blur();
чтобы удалить все сфокусированные элементы.
Оказалось, что в старой версии Vuetify директива ClickOutside проверяет свойство isTrusted события, которое, очевидно, имеет значение false, если событие отправляется программно. Обновление vuetify или взлом addEventListener решает проблему.