Блог

В настоящее время я использую vueuse/core датчик onKeyStroke событий.

 onKeyStroke(
      'c',
      (e) => {
        e.preventDefault()
        showAsterisms.value = false
        showConstellations.value = !showConstellations.value
      },
      {
        target: document
      }
    )
 

Я хочу протестировать эту функциональность со следующими функциями:

 it('Constellations Should Be Visible', async () => {
    wrapper.trigger('keydown', {
      key: 'c'
    })

    await wrapper.vm.$nextTick()

    const canvas = wrapper.find('canvas')

    const canvasAttributes = canvas.attributes()

    expect(canvasAttributes['data-constellations']).toBe('true')
  })
 

Где обертка является смонтированным компонентом:

 const wrapper = mount(MyComponent, {
  props: {
    ...
  }
})
 

Затем у меня есть следующее связанное свойство на холсте:

 <canvas :data-constellations="showConstellations" />
 

Однако при такой настройке кажется, что в этой конкретной настройке атрибут data-constellations на элементе canvas всегда имеет значение по умолчанию false, и после нажатия клавиши он не обновляется …

Не мог бы кто-нибудь посоветовать мне, пожалуйста, что мне нужно сделать, чтобы это сработало?

Вы onKeyStroke прикрепляете прослушиватель событий к документу (с помощью { target: document } опции), поэтому тест должен отправить keydown событие в документе:

 it('Constellations Should Be Visible', async () => {
  const wrapper = shallowMount(MyComponent)

  // simulate keypress on document
  const event = new KeyboardEvent('keydown', { key: 'c' })
  document.dispatchEvent(event)

  await wrapper.vm.$nextTick()
  const canvas = wrapper.find('canvas')
  const canvasAttributes = canvas.attributes()
  expect(canvasAttributes['data-constellations']).toBe('true')
})
 

ДЕМОНСТРАЦИЯ