Vue Test Utils & Vue 3: How to effectively test onKeyStroke() event

user_10412414 0
Viewed 186

I'm currently utilising vueuse/core's onKeyStroke event sensor.

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

I'm looking to test this functionality with the following:

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')
  })

Where the wrapper is a mounted component:

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

I then have the following bound property on the canvas:

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

However, with this setup, it seems that this particular setup the data-constellations attribute on the canvas elmenent is always set to the default false, and after the keyPress it is not updated ...

Could someone advise me please on what I need to do to get this working?

vuejs3 vue.js jestjs
1 Answers

Your onKeyStroke attaches the event listener to the document (via the { target: document } option), so the test has to dispatch the keydown event on the document:

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')
})

demo

user_62771510
Related