Unable to enter numbers in an input using `trigger()`

Version

1.0.0-beta.12

Reproduction link

https://codesandbox.io/s/n768kwm6wj note: the dummy VueInput component and the spec code is correct, but I can’t make vue-test-utils work there

Steps to reproduce

Following the keyboard example from the documentation, I’m trying to input arbitrary keys into an input.

1. Have a component VueInput that generated a top level input DOM element <vue-input type='text'>
2. With vue-test-utils, try to enter the keys home then 1 using:

describe('Dummy VueInput.vue', () => {
    it('should accept number keys', () => {
        const wrapper = mount(VueInput);
        const input = wrapper.find('input');
        expect(input.element.value).toEqual('');

        // Test inputting a number
        input.trigger('click'); //FIXME Is this really needed? Isn't the focus already on the input since it's the generated DOM element?
        input.trigger('keydown.home');
        input.trigger('keydown', { //FIXME Fails
            key: '1',
            keyCode: 49,
            which: 49,
        });
        expect(input.is('input')).toBe(true);
        expect(input.element.value).toEqual('1');
    });
});

What is expected?

The input element value should be 1.

What is actually happening?

The input element value is unchanged and still equal to "".

Bonus question:

Do we need to manually (and painfully) convert each key we want to enter to its keyCode (which value), or is there a quicker and better way to enter multiple keys one after another in one go (like 1, then 5, then 8, perhaps using something like wrapper.keys('158')? (see how it’s done in Selenium-based webdriver.io in that example)).

[pierremanceaux]

+1 @AlexandreBonneau , I’m currently facing exactly the same issue.

[AlexandreBonneau]

I’m not seeing how “You can test those things by changing the value” in a case where masking is involved.

For instance with the vue-autoNumeric component, setting the input.value directly (using input.value = 'foo') is managed differently than when changing the input value manually.

In the former case, a watch on the value is used, while on the latter the keydown, keypress, keyup events are closely monitored by the AutoNumeric library.

Moreover, setting the value directly cannot allows to test some keys that do not produce a change in the input value; for instance when you have the default settings on a vue-autonumeric component and the value 1,234,567.89 in it, if the caret is placed here 1,234,5|67.89 and you enter a single ArrowLeft key, then the result should be 1,234|,567.89 (not 1,234,|567.89).

I guess if vue-test-utils trigger() function does not simulate key* events, all this is untestable.

Could you please confirm?