Issue with Vue config keyCode aliases and triggering keydown events

[tbcorr]

Version

1.0.0-beta.29

Reproduction link

https://github.com/tbcorr/vue-test-utils-issue

Steps to reproduce

Run the unit tests and look at the failing tests.

What is expected?

I would expect keydown event handlers bound to specific keyCode aliases would only be called when the specific key is pressed.

What is actually happening?

It appears that keydown event handlers bound to keydown events with custom keyCode aliases are being called for all keydown events, regardless of the key which triggered the event.

---

I'm not sure if this is only related to triggering keydown events. It just so happens I noticed this issue while testing keydown events. I'm also not sure if this is only related to the keys I was testing which are Home, End, Page Up, Page Down. Also, in browser I get the expected behavior which makes me think this is related to vue-test-utils.

[aholzner]

This seems to be working with me.

import { shallowMount } from '@vue/test-utils';
import App from '@/App';

describe('App', () => {
  describe('when pressing the home key', () => {
    let wrapper;

    beforeAll(() => {
      wrapper = shallowMount(App);

      wrapper.find('.keys').trigger('keydown', {
        key: 'home',
      });
    });

    it('should update homePressed', () => {
      expect(wrapper.vm.homePressed).toBe(true);
    });

    it('should not update endPressed', () => {
      expect(wrapper.vm.endPressed).toBe(false);
    });

    it('should not update upPressed', () => {
      expect(wrapper.vm.upPressed).toBe(false);
    });

    it('should not update downPressed', () => {
      expect(wrapper.vm.downPressed).toBe(false);
    });

    it('should not update pageUpPressed', () => {
      expect(wrapper.vm.pageUpPressed).toBe(false);
    });

    it('should not update pageDownPressed', () => {
      expect(wrapper.vm.pageUpPressed).toBe(false);
    });
  });
});

I also noticed that supplying key code doesn't work.

[tbcorr]

@aholzner thanks for the comment! I modified my tests to to match how you triggered the keydown event and my tests are now passing, which is great!

I guess the issue only manifests when using the vue-test-utils key aliases vs specifying the key in the event options.

[aholzner]

@tbcorr Awesome! 👍

[phegman]

I am still running into this issue in v1.0.3. @tbcorr reproduction link is very useful and for me the tests are still failing. This workaround works for @keydown.home but not for @keydown.left, @keydown.right, @keydown.up, @keydown.down. Also using keyCode described here doesn't work.

Can we consider re-opening this issue? Thanks!

[phegman]

I simplified the example to just the up key here: https://github.com/phegman/vue-test-utils-issue

As you will see I have tried trigger("keydown.up"), trigger("keydown", {keyCode: 38}), and trigger("keydown", {key: "up"}) and neither of them work 😢

[dobromir-hristov]

Use "key" instead

[phegman]

@dobromir-hristov ahhhh okay, trigger("keydown", {key: "ArrowUp"}) works! 🎉 Thanks!

I still think it may make sense to re-open this issue as it seems like trigger("keydown.up") does not work as it should according to the docs