1

我有一个 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()，它是带有 test-id 的输入元素，所以它是正确的。

  • 如果我登录document.activeElement.outerHTML测试，它是身体，所以我的期望当然失败了。

  • 我试过了queryByTestId，没有任何区别

老实说，我的想法已经不多了。

4

0 回答 0