Тест на "фокус" на элементе ввода не работает в vue -testing-library - PullRequest
Новая
       55

Тест на "фокус" на элементе ввода не работает в vue -testing-library

0 голосов
/ 21 марта 2020

У меня есть компонент Vue (модальный), который удаляет фокус с активного элемента, если он есть на монтировании, и, если элемент input, фокусирует первый найденный вход. Код работает, и у меня есть рабочий тест для первого случая.

Мой тест на то, что элемент ввода сфокусирован, не работает, и я не могу найти свою ошибку.

Соответствующие части кода vue -компонента: 

  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, и это не имело никакого значения

У меня заканчиваются идеи, если честно.

...