Unable to update input value via keydown/keyup/keypress

[metacurb]

Version

1.0.0-beta.10
Jest 22.0.4

Reproduction link

https://jsfiddle.net/xvL6q27m/

Steps to reproduce

Test attached component using Jest, and vue-test-utils

What is expected?

The value inside the data of the component should update, and be a.

What is actually happening?

Nothing, the value doesn't change, and the input.element.value is also empty. The test always fails.

Expected value to be (using Object.is):
  "a"
Received:
  ""

---

I tested this with beta.9, and then again with beta.11 (not on the list)

[eddyerburgh]

Hi @BeauAgst, thanks for the bug report.

Can you make a reproduction using this JSFiddle as a base: https://jsfiddle.net/eddyerburgh/sghur81m/3/

[metacurb]

@eddyerburgh apologies - https://jsfiddle.net/xvL6q27m/

I've updated the original issue to this link

[eddyerburgh]

No problem! It takes a bit of setup in JSFiddle. Thanks for the reproduction.

With a value, you need to set it on the element:

wrapper.element.value = ''

Then you can trigger an event that uses the value:

wrapper.trigger('keydown')

However, there's a problem with v-model, where changing the value isn't picked up by the model value—#345. We're working on a fix

[metacurb]

Thanks for the prompt reply @eddyerburgh

That's fine, and how I was originally doing it for my @keyup method. However, I have since added @keydown (to validate keys being pressed and prevent them from being entered if they don't match a regex string)

What would your recommendation be on how to test that method? Am I correct to assume I won't be able to test it until that bug is fixed? Thanks!

For example: https://jsfiddle.net/bj81bhwo/
I am passing the event to this method, and checking for the key that was pressed.

[eddyerburgh]

Yeah sorry, there isn't currently a way to test that.

One method I can think of is to allow you to pass a custom Event to trigger, then you could test that preventDefault was prevented.

If you'd like to use this feature, please make a feature-request issue 😀

[ankitsinghaniyaz]

Is there a way to test this now?

I'm using vue-testing-libarary and saw a reference that the dom inputs cannot be updated due to a bug in vue-test-utils.

https://github.com/dfcook/vue-testing-library/blob/master/tests/__tests__/form.js

Edit

I'm also curious to know why the update to the dom node doesn't update the state? Because the values changed in the application via a browser does work fine.