fix(Button|Menu|List|Step): fix behaviour of onClick when is disabl…

…ed (#2006)

src/collections/Menu/MenuItem.js

@@ -86,9 +86,9 @@ export default class MenuItem extends Component {
   }
 
   handleClick = (e) => {
-    const { onClick } = this.props
+    const { disabled } = this.props
 
-    if (onClick) onClick(e, this.props)
+    if (!disabled) _.invoke(this.props, 'onClick', e, this.props)
   }
 
   render() {

src/elements/List/ListItem.js

@@ -87,9 +87,9 @@ class ListItem extends Component {
   }
 
   handleClick = (e) => {
-    const { onClick } = this.props
+    const { disabled } = this.props
 
-    if (onClick) onClick(e, this.props)
+    if (!disabled) _.invoke(this.props, 'onClick', e, this.props)
   }
 
   render() {

src/elements/Step/Step.js

@@ -1,4 +1,5 @@
 import cx from 'classnames'
+import _ from 'lodash'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -79,9 +80,9 @@ export default class Step extends Component {
   static Title = StepTitle
 
   handleClick = (e) => {
-    const { onClick } = this.props
+    const { disabled } = this.props
 
-    if (onClick) onClick(e, this.props)
+    if (!disabled) _.invoke(this.props, 'onClick', e, this.props)
   }
 
   render() {

test/specs/collections/Menu/MenuItem-test.js

@@ -61,21 +61,24 @@ describe('MenuItem', () => {
   })
 
   describe('onClick', () => {
-    it('omitted when not defined', () => {
-      const click = () => shallow(<MenuItem />).simulate('click')
-      expect(click).to.not.throw()
-    })
-
-    it('is called with (e, { name, index }) when clicked', () => {
-      const spy = sandbox.spy()
+    it('is called with (e, data) when clicked', () => {
+      const onClick = sandbox.spy()
       const event = { target: null }
       const props = { name: 'home', index: 0 }
 
-      shallow(<MenuItem onClick={spy} {...props} />)
+      shallow(<MenuItem onClick={onClick} {...props} />)
         .simulate('click', event)
 
-      spy.should.have.been.calledOnce()
-      spy.should.have.been.calledWithMatch(event, props)
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithMatch(event, props)
+    })
+
+    it('is not called when is disabled', () => {
+      const onClick = sandbox.spy()
+
+      shallow(<MenuItem disabled onClick={onClick} />)
+        .simulate('click')
+      onClick.should.have.callCount(0)
     })
 
     it('renders an `a` tag', () => {

test/specs/elements/Button/Button-test.js

@@ -209,22 +209,22 @@ describe('Button', () => {
   })
 
   describe('onClick', () => {
-    it('is called when clicked', () => {
-      const handleClick = sandbox.spy()
+    it('is called with (e, data) when clicked', () => {
+      const onClick = sandbox.spy()
 
-      shallow(<Button type='submit' onClick={handleClick} />)
+      shallow(<Button onClick={onClick} />)
         .simulate('click', syntheticEvent)
 
-      handleClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledOnce()
+      onClick.should.have.been.calledWithExactly(syntheticEvent, { onClick, as: 'button' })
     })
 
-    it('is not called when button is disabled', () => {
-      const handleClick = sandbox.spy()
+    it('is not called when is disabled', () => {
+      const onClick = sandbox.spy()
 
-      shallow(<Button type='submit' disabled onClick={handleClick} />)
+      shallow(<Button disabled onClick={onClick} />)
         .simulate('click', syntheticEvent)
-
-      handleClick.should.not.have.been.calledOnce()
+      onClick.should.have.callCount(0)
     })
   })
 

test/specs/elements/List/ListItem-test.js

@@ -22,12 +22,7 @@ describe('ListItem', () => {
   })
 
   describe('onClick', () => {
-    it('can be omitted', () => {
-      const click = () => shallow(<ListItem />).simulate('click')
-      expect(click).to.not.throw()
-    })
-
-    it('is called with (e, props) when clicked', () => {
+    it('is called with (e, data) when clicked', () => {
       const onClick = sandbox.spy()
       const event = { target: null }
       const props = { onClick, 'data-foo': 'bar' }
@@ -38,6 +33,14 @@ describe('ListItem', () => {
       onClick.should.have.been.calledOnce()
       onClick.should.have.been.calledWithExactly(event, props)
     })
+
+    it('is not called when is disabled', () => {
+      const onClick = sandbox.spy()
+
+      shallow(<ListItem disabled onClick={onClick} />)
+        .simulate('click')
+      onClick.should.have.callCount(0)
+    })
   })
 
   describe('value', () => {

test/specs/elements/Step/Step-test.js

@@ -53,20 +53,28 @@ describe('Step', () => {
     })
 
     describe('onClick prop', () => {
-      it('omitted when not defined', () => {
-        const click = () => shallow(<Step />).simulate('click')
-        expect(click).to.not.throw()
+      it('is called with (e, data) when clicked', () => {
+        const event = { target: null }
+        const onClick = sandbox.spy()
+
+        shallow(<Step onClick={onClick} />)
+          .simulate('click', event)
+
+        onClick.should.have.been.calledOnce()
+        onClick.should.have.been.calledWithMatch(event, { onClick })
       })
 
-      it('renders <a> and handles click', () => {
-        const handleClick = sandbox.spy()
-        const wrapper = mount(<Step onClick={handleClick} />)
+      it('is not called when is disabled', () => {
+        const onClick = sandbox.spy()
 
-        wrapper.should.have.tagName('a')
-        wrapper.simulate('click')
+        shallow(<Step disabled onClick={onClick} />)
+          .simulate('click')
+        onClick.should.have.callCount(0)
+      })
 
-        handleClick.should.have.been.calledOnce()
-        handleClick.should.have.been.calledWithMatch({})
+      it('renders an `a` tag', () => {
+        shallow(<Step onClick={() => null} />)
+          .should.have.tagName('a')
       })
     })
   })