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

Material-ui FloatingActionButton simulate click doesn't call onClick method #780

Closed
ghost opened this issue Jan 21, 2017 · 6 comments
Closed

Comments

@ghost
Copy link

ghost commented Jan 21, 2017

I admit testing material-ui is a headache generator.
The code is the same from #778 with shallow changed to mount.
The test is:

it('should enable TextField on click', () => {
       const props = {
           ongoingApi: false
       };
       const wrapper = mount(<TestComponent {...props}/>, testContext);
       wrapper.find('FloatingActionButton').simulate('click');
       assert.equal(wrapper.find('LockOpen').nodes.length, 1);
       assert.isFalse(wrapper.find('TextField').nodes.props.disabled);
   });

I checked and the onClick method of the FloatingActionButton is never called.
Thank you for your time

@ljharb
Copy link
Member

ljharb commented Jan 21, 2017

simulate does not work on "not a DOM node", so I wouldn't expect this to work unless FloatingActionButton renders a DOM node that has onClick={this.props.onClick}. What's the implementation of FloatingActionButton?

If you want to test FloatingActionButton, then shallow-render <FloatingActionButton />. If you're testing TestComponent, then all you need to assert is that it renders a FloatingActionButton with the right props.

In other words, I think you're trying to test too much in one file.

@ghost
Copy link
Author

ghost commented Jan 21, 2017

I am sorry I didn't explain. FloatingActionButton, TexField are material-ui component. The only component I try to test is InputLocker. The TestComponent is just a wrapper to be able to render the TextField as InputLocker's child.
FloatingActionButton has a "onClick" prop. Here is it's implementation material-ui/FloatingActionButton
I will take a closer look inside it also. I was hoping some other issue was related to mine and this could be solved with a quick fix that someone in the enzyme crew might now about.
Could it be something related to the "onTouchTap" implementation.
I added this in my test setup file:

import injectTapEventPlugin from "react-tap-event-plugin";
injectTapEventPlugin()

Thank you again.

@ljharb
Copy link
Member

ljharb commented Jan 21, 2017

You don't need to test material-ui's components, that's material-ui's job. All you need to test is that you're rendering its components with the correct props.

@ghost
Copy link
Author

ghost commented Jan 21, 2017

The props are definitely correct as long as rendered in the browser the component works perfect.

@ghost
Copy link
Author

ghost commented Jan 22, 2017

So, for everyone having problems with enzyme's simulate method on material-ui FloatingActionButtons components: simulate('click') does not work probably because the component is wrapped in a div which doesn't respond to an onClick event.
But if you do wrapper.find('FloatingActionButton').find('button').simulate('click') it does.

@ljharb ljharb closed this as completed Jan 22, 2017
@gibbok
Copy link

gibbok commented Sep 27, 2017

I was able to simulate on click on a material-ui component using the following code. I hope it can help others.

  it('should simulate click event on material-ui FlatButton', () => {
    const onSearchClick = sinon.spy()
    const wrapper = shallow(<LocationFinderSearch onSearchClick={onSearchClick} />)
    wrapper.find(FlatButton).simulate('click')
    expect(onSearchClick.called).toEqual(true)
  })

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

No branches or pull requests

2 participants