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

Map lowercase mouse events in #simulate #77

Merged
merged 1 commit into from
Jan 14, 2016
Merged

Map lowercase mouse events in #simulate #77

merged 1 commit into from
Jan 14, 2016

Conversation

jackfranklin
Copy link
Contributor

React camelcases a bunch of events that JS has in all lower case. This
PR adds a map of them so people can call simulate with either the
React version or the native event version.

Fixes #29.

Thought I'd take a stab at the fix - let me know what you think!

@@ -294,6 +295,7 @@ export default class ReactWrapper {
* @returns {ReactWrapper}
*/
simulate(event, ...args) {
event = mapNativeMouseEvent(event);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this approach seems both brittle and only will work on mouse events. There's lots of other kinds of events, like "dragstart", "touchstart", "keypress", etc that this could impact.

What about an explicit whitelist - just an object mapping lowercase names to react-cased ones?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That thought had crossed my mind - happy to do that instead 👍

@mattpage
Copy link

mattpage commented Jan 6, 2016

+1

I've been bit by this.

something.simulate('mouseover');

Generates this not-so-helpful error:

TypeError: Cannot read property 'apply' of undefined
      at ReactWrapper.<anonymous> (node_modules/enzyme/build/ReactWrapper.js:351:44)
      at ReactWrapper.single (node_modules/enzyme/build/ReactWrapper.js:739:17)
      at ReactWrapper.simulate (node_modules/enzyme/build/ReactWrapper.js:350:12)

@jackfranklin
Copy link
Contributor Author

@ljharb just updated it - let me know what you think!

@ljharb
Copy link
Member

ljharb commented Jan 7, 2016

This looks great as far as covering lowercase names - it would be nice to also have a nicer, more explicit error message when the event name wasn't valid (#79) - but that doesn't have to happen as part of this PR.

The tests appear to be failing in most (but not all) of the React 0.13 builds, though.

@jackfranklin
Copy link
Contributor Author

@ljharb happy to tackle #79 in a follow up PR 👍

I found this from the React 0.14 release notes:

Add-Ons: When using the test utils, Simulate.mouseEnter and Simulate.mouseLeave now work.

Also see: facebook/react#1297

So it seemed that mouseEnter and mouseLeave just didn't work pre 0.14. I'm tempted to just swap the test over to using a different event to avoid this?

I could also in this or a follow up PR add an error message that's shown in the user is React 0.13 and they try to use mouseEnter or mouseLeave.

Let me know what you think is best!

@ljharb
Copy link
Member

ljharb commented Jan 7, 2016

@jackfranklin Could you conditionally have mouseEnter/mouseLeave to the object based on which react version is being used?

@jackfranklin
Copy link
Contributor Author

@ljharb 👍 will make that change now

const wrapper = mount(<Foo />);

wrapper.simulate('mouseenter');
expect(spy.calledOnce).to.be.true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You'll need to pull from master and changes these assertions to be to.equal(true). A change was merged that causes a linting error with these types of assertions!

@jackfranklin
Copy link
Contributor Author

@ljharb I've just tidied this up with a rebase and everything looks fine locally - I'm not entirely sure why the last Travis rebuild said test coverage had dropped so significantly mind. I think if I can fix that ( might need a little pointer in the right direction ) I hope this is now finally in a state where it could be merged.

@jackfranklin
Copy link
Contributor Author

Also I'll squish the commits down when you're happy 👍

@ljharb
Copy link
Member

ljharb commented Jan 13, 2016

Awesome - I wouldn't worry too much about the coverage, it's still a bit flaky for some reason. This LGTM (pending a rebase) but I'll let @lelandrichardson look it over first.

@lelandrichardson
Copy link
Collaborator

👍 this looks great. if you rebase, i'll merge this in and push out a release this afternoon.

@lelandrichardson
Copy link
Collaborator

@jackfranklin can you rebase + squash so I can get this in? thanks!

React camelcases a bunch of events that JS has in all lower case. This
PR adds a map of them so people can call `simulate` with either the
React version or the native event version.

Fixes #29.
@jackfranklin
Copy link
Contributor Author

@lelandrichardson done!

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

Successfully merging this pull request may close these issues.

.simulate('mouseenter') doesn't work, but .simulate('mouseEnter') does
5 participants