Commit ab49f9e3 by Tyler Hallada Committed by GitHub

Fix the CheckBox component's onChange parameters (#26)

* Fix the CheckBox component's onChange parameters

* Fix lint error
parent 11388501
......@@ -60,6 +60,12 @@ Paragon uses [Jest](https://facebook.github.io/jest/) with [Enzyme](https://gith
Paragon also uses Airbnb's [Enzyme](http://airbnb.io/enzyme/) library to help render our components within unit tests. Enzyme comes with a number of utilities for shallow rendering, mounting components, querying the DOM, simulating DOM events, and querying React components themselves. Read [the docs](http://airbnb.io/enzyme/docs/api/index.html) for more details.
To run the unit tests, run:
```
yarn run test
```
To add unit tests for a component, create a file in your component's directory named `<ComponentName>.test.js`. Jest will automatically pick up this file and run the tests as part of the suite. Take a look at [Dropdown.test.jsx](https://github.com/edx/paragon/blob/master/src/Dropdown/Dropdown.test.jsx) or [CheckBox.test.jsx](https://github.com/edx/paragon/blob/master/src/CheckBox/CheckBox.test.jsx) for examples of good component unit tests.
### Snapshot Testing
......
......@@ -48,8 +48,14 @@ describe('<CheckBox />', () => {
);
expect(spy).toHaveBeenCalledTimes(0);
wrapper.find('input').simulate('change');
// check
wrapper.find('input').simulate('change', { target: { checked: true, type: 'checkbox' } });
expect(spy).toHaveBeenCalledTimes(1);
expect(spy).toHaveBeenLastCalledWith(true, 'checkbox');
// uncheck
wrapper.find('input').simulate('change', { target: { checked: false, type: 'checkbox' } });
expect(spy).toHaveBeenCalledTimes(2);
expect(spy).toHaveBeenLastCalledWith(false, 'checkbox');
});
it('checks if start state can be set to checked', () => {
......
......@@ -10,6 +10,7 @@ The following parameters can optionally be passed into a checkbox component:
* `checked` (`Boolean`): `true` if the default state should be checked, `false` otherwise
* `disabled` (`Boolean`): `true` if the checkbox should be disabled, `false` otherwise
* `onChange`: function to be called when the checkbox changes state
* Function will be called with the arguments: `checked` (`Boolean`), `name` (`String`)
The implementation of the checkbox contains the following functions:
* `constructor()`: The constructor sets the `id` for the checkbox and sets whether the initial state should be checked or unchecked
......
......@@ -80,7 +80,10 @@ const asInput = (WrappedComponent, labelFirst = true) => {
handleChange(event) {
this.setState({ value: event.target.value });
this.props.onChange(event.target.value, this.props.name);
this.props.onChange(
event.target.type === 'checkbox' ? event.target.checked : event.target.value,
this.props.name,
);
}
render() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment