Тест на "фокус" на элементе ввода не работает в vue-testing-library
У меня есть компонент Vue (модальный), который удаляет фокус с активного элемента, если он есть на монтировании и, если есть input
элемент, сфокусируйтесь на первом найденном вводе. Код работает, и у меня есть рабочий тест для первого случая.
Мой тест на определение того, что элемент ввода сфокусирован, не работает, и я не могу найти свою ошибку.
Соответствующие части кода vue-component:
mounted() {
this.removeActiveFocusedElements()
if (this.autoFocusFirstInputElement) {
this.focusFirstInput()
}
}
removeActiveFocusedElements() {
if (document.activeElement) {
document.activeElement.blur()
}
}
focusFirstInput() {
const firstInput = this.$el.querySelector('input')
if (firstInput) {
firstInput.focus()
}
}
Соответствующая часть теста:
const wrapper = document.createElement('div')
const initialFocusedElement = document.createElement('button')
wrapper.appendChild(initialFocusedElement)
initialFocusedElement.setAttribute('data-testid', 'initial-focused-element')
const container = render(Modal, {
container: document.body.appendChild(wrapper),
slots: {
header: '<h2>Dialog</h2>',
body: '<div><input type="text" data-testid="first-input"/></div>'
}
})
const firstInput = container.getByTestId('first-input')
expect(firstInput).toHaveFocus()
expect(document.body).not.toHaveFocus()
Что я знаю / пробовал:
Если у меня нет элемента ввода и удалите
removeActiveFocusedElements()
из моего vue-компонентаinitialFocusedElement
сосредоточен, так что это работает, и у меня есть тест на это.<input type="text" data-testid="first-input"/>
находится в "DOM"focusFirstInput()
вызывается и находит элемент вводаЕсли я войду
document.activeElement.outerHTML
послеfirstInput.focus()
, это элемент ввода с идентификатором теста, поэтому он правильный.Если я войду
document.activeElement.outerHTML
Однако в тесте это тело, так что, конечно, мои ожидания не оправдались.Я пробовал это с
queryByTestId
и это не имело никакого значения
Честно говоря, у меня заканчиваются идеи.