Simulating click does not honor the disabled attribute
- Dominant language
- JavaScript
- Stars
- 19.8k
- Forks
- 2k
- PR merge metrics
- No merged PRs in 30d
Description
There seems to be a difference in behaviour between shallow/mount and react-addons-test-utils when it comes to simulating a click on an element with the `disabled` attribute. React and react-addons-test-utils does not call the onClick handler when the disabled attribute is present but shallow/mount does.
Component under test:
```
export const DisabledButton = React.createClass({
getInitialState (){
return {
clicks: 0
}
},
handleClick () {
console.log(`the click was registered`)
this.setState({
clicks: ++this.state.clicks
})
},
render () {
return (
Clicks: {this.state.clicks}
Click Me!
)
}
})
```
All tests pass using `react-addons-test-utils`:
```
import TestUtils from 'react-addons-test-utils'
import ReactDOM from 'react-dom'
describe(' TestUtils', function () {
it('should start with zero clicks', () => {
const component = TestUtils.renderIntoDocument(
)
const p = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(component, 'p'))
expect(p.textContent).toContain('0')
})
it('should not do anything when clicked because the button is disabled', () => {
const component = TestUtils.renderIntoDocument(
)
TestUtils.Simulate.click(TestUtils.findRenderedDOMComponentWithTag(component, 'button'))
const p = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(component, 'p'))
expect(p.textContent).toContain('0')
})
})
```
Using `shallow` the second test will fail:
```
import { shallow } from 'enzyme'
describe(' shallow', function () {
it('should start with zero clicks', () => {
const wrapper = shallow(
)
expect(wrapper.find('p').text()).toContain('0')
})
it('should not do anything when clicked because the button is disabled', () => {
const wrapper = shallow(
)
wrapper.find('button').simulate('click')
expect(wrapper.find('p').text()).toContain('0')
})
})
```
Using `mount` the second test will fail:
```
import { mount } from 'enzyme'
describe(' mount', function () {
it('should start with zero clicks', () => {
const wrapper = mount(
)
expect(wrapper.find('p').text()).toContain('0')
})
it('should not do anything when clicked because the button is disabled', () => {
const wrapper = shallow(
)
wrapper.find('button').simulate('click')
expect(wrapper.find('p').text()).toContain('0')
})
})
```
Contributor guide
Research direction
Reproduce the discrepancy with the shown shallow and mount examples, then compare their button simulate('click') behavior with React TestUtils.Simulate.click on a disabled button. Trace the shallow and mount simulation entry points. Done means disabled buttons no longer invoke onClick, while the existing enabled-click behavior remains intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 38/100