Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to test NumericInput key events with 'react-testing-library' #3454

Open
j5bot opened this issue Mar 29, 2019 · 5 comments
Open

Unable to test NumericInput key events with 'react-testing-library' #3454

j5bot opened this issue Mar 29, 2019 · 5 comments

Comments

@j5bot
Copy link

j5bot commented Mar 29, 2019

Environment

  • @blueprintjs/core 3.14.1
  • Chrome 72.0.3626.121 (Official Build) (64-bit) on macOS Mojave 10.14.3 (18D109)

If possible, ink to a minimal repro:
https://codesandbox.io/s/w20nqx93pk

Steps to reproduce

  1. Create jest mock function for onValueChange
  2. Render NumericInput with data-testid attribute and onValueChange handler using 'react-testing-library' render
  3. Locate the input element using 'react-testing-library' getByTestId
  4. Fire keyPress / keyDown / keyUp event on the input using 'react-testing-library' fireEvent simulating numeric key press (options { key: '3' })

Also

  1. Locate the element with class bp3-input-group
  2. Fire keyPress / keyDown / keyUp event on that element, as above

Actual behavior

  1. keyEvent does not trigger onValueChange handler
  2. keyEvent does not change input element value

Expected behavior

  1. keyEvent will trigger onValueChange handler
  2. keyEvent will change input element value

Possible solution

Evaluate the way that event handlers are attached and try to find where these events are getting 'lost'.

Test event handlers in unit tests.

@j5bot
Copy link
Author

j5bot commented Mar 29, 2019

Apparently this might be related to browsers (and thus perhaps js-dom or whatever is underlying the fireEvent function) not allowing keyboard events to be triggered programmatically.

https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically

@j5bot
Copy link
Author

j5bot commented Mar 29, 2019

Also, isTrusted property of Events: https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted . Don't know if this stuff is related. Will also report to 'react-testing-library'.

@j5bot
Copy link
Author

j5bot commented Mar 29, 2019

Issue opened against react-testing-library: testing-library/react-testing-library#336

@j5bot
Copy link
Author

j5bot commented Apr 4, 2019

I found this, which seems to put a nail in the coffin of trying to test the effects of keyboard events: jsdom/jsdom#2102

"No, there are no user actions in jsdom."

While keyboard event listeners will be triggered, the event will not act like a user typing and change the value of an input, and will not trigger a change event handler.

@adidahiya
Copy link
Contributor

It seems like you are trying to test the functionality of NumericInput itself, which is usually the responsibility of Blueprint's test suites, not yours. What are you actually trying to test?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants