Тест на "фокус" на элементе ввода не работает в 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 и это не имело никакого значения

Честно говоря, у меня заканчиваются идеи.

0 ответов

Другие вопросы по тегам