Merge pull request #3 from edx/sarahkf/checkbox

Set up checkbox

.eslintrc.json

@@ -7,5 +7,8 @@
   },
   "settings": {
     "import/resolver": "webpack"
+  },
+  "env": {
+    "jest": true
   }
 }

.storybook/__storyshots__/CheckBox.shot

+exports[`basic usage`] = `
+<label>
+  <input
+    aria-checked={false}
+    aria-describedby="checkbox"
+    defaultChecked={false}
+    disabled={undefined}
+    name="checkbox"
+    onClick={[Function]}
+    tabIndex="0"
+    type="checkbox" />
+  check me out!
+</label>
+`;
+
+exports[`call a function`] = `
+<label>
+  <input
+    aria-checked={false}
+    aria-describedby="checkbox"
+    defaultChecked={false}
+    disabled={undefined}
+    name="checkbox"
+    onClick={[Function]}
+    tabIndex="0"
+    type="checkbox" />
+  check out the console
+</label>
+`;
+
+exports[`default checked`] = `
+<label>
+  <input
+    aria-checked={true}
+    aria-describedby="checkbox"
+    defaultChecked={true}
+    disabled={undefined}
+    name="checkbox"
+    onClick={[Function]}
+    tabIndex="0"
+    type="checkbox" />
+  (un)check me out
+</label>
+`;
+
+exports[`disabled`] = `
+<label>
+  <input
+    aria-checked={false}
+    aria-describedby="checkbox"
+    defaultChecked={false}
+    disabled="true"
+    name="checkbox"
+    onClick={[Function]}
+    tabIndex="0"
+    type="checkbox" />
+  you cannot check me out
+</label>
+`;

__tests__/checkbox-test.jsx

+/* eslint-disable no-console */
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import CheckBox from '../src/CheckBox';
+
+describe('<CheckBox />', () => {
+  it('attributes are set correctly', () => {
+    const wrapper = shallow(
+      <CheckBox
+        name="checkbox"
+        describedBy="this is a checkbox"
+        label="check me out!"
+        checked="false"
+      />,
+  );
+
+    expect(wrapper.find('[name="checkbox"]').exists()).toEqual(true);
+    expect(wrapper.find('[type="checkbox"]').exists()).toEqual(true);
+    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-describedby="this is a checkbox"]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    expect(wrapper.find('[tabIndex="0"]').exists()).toEqual(true);
+  });
+
+  it('aria-label changes after click', () => {
+    const wrapper = shallow(
+      <CheckBox
+        name="checkbox"
+        descibedBy="checkbox"
+        label="check me out!"
+        checked="false"
+      />,
+      );
+
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+
+    wrapper.find('input').simulate('click');
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(false);
+    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
+
+    wrapper.find('input').simulate('click');
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(false);
+  });
+
+  it('check that callback function is triggered when clicked', () => {
+    const wrapper = shallow(
+      <CheckBox
+        name="checkbox"
+        descibedBy="checkbox"
+        label="check me out!"
+        checked="false"
+        onChange={() => console.log('the checkbox changed state')}
+      />,
+    );
+    const spy = jest.spyOn(wrapper.instance(), 'onChange');
+
+    expect(spy).toHaveBeenCalledTimes(0);
+    wrapper.find('input').simulate('click');
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+
+  it('checks if start state can be set to checked', () => {
+    const wrapper = shallow(
+      <CheckBox
+        name="checkbox"
+        describedBy="checkbox"
+        label="I start checked"
+        checked="true"
+      />,
+    );
+
+    expect(wrapper.find('[defaultChecked=true]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-checked=true]').exists()).toEqual(true);
+
+    wrapper.find('input').simulate('click');
+    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+  });
+
+  it('checkbox can be disabled', () => {
+    const wrapper = mount(
+      <CheckBox
+        name="checkbox"
+        describedBy="checkbox"
+        label="I am disabled"
+        checked="false"
+        disabled
+      />,
+    );
+
+    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+
+    wrapper.find('input').simulate('click');
+    expect(wrapper.find('[defaultChecked=false]').exists()).toEqual(true);
+    expect(wrapper.find('[aria-checked=false]').exists()).toEqual(true);
+  });
+});

package.json

@@ -16,10 +16,13 @@
     "test-storybook": "storyshots"
   },
   "dependencies": {
+    "babel-jest": "^20.0.3",
+    "babel-preset-es2015": "^6.24.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.6.1",
     "react-transition-group": "^1.1.2",
     "reactstrap": "^4.6.2"
   },
@@ -33,6 +36,7 @@
     "babel-preset-babili": "^0.0.12",
     "babel-preset-env": "^1.4.0",
     "babel-preset-react": "^6.24.1",
+    "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
     "eslint-config-edx": "^2.0.1",

src/CheckBox.jsx

+import React from 'react';
+
+import { inputProps } from './utils/asInput';
+import newId from './utils/newId';
+
+
+class CheckBox extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.handleClick = this.handleClick.bind(this);
+    if (this.props.onChange) {
+      this.onChange = this.props.onChange.bind(this);
+    }
+
+    const id = newId('checkbox');
+    if (props.checked === 'true') {
+      this.state = {
+        id,
+        checked: true,
+      };
+    } else {
+      this.state = {
+        id,
+        checked: false,
+      };
+    }
+  }
+
+  handleClick() {
+    if (this.state.checked === true) {
+      this.setState({
+        checked: false,
+      });
+    } else {
+      this.setState({
+        checked: true,
+      });
+    }
+    if (this.onChange) {
+      this.onChange();
+    }
+  }
+
+
+  render() {
+    const props = { ...this.props };
+
+    return (
+      <label htmlFor={this.state.id}>
+        <input
+          id={this.state.id}
+          name={props.name}
+          type="checkbox"
+          defaultChecked={this.state.checked}
+          aria-describedby={props.describedBy}
+          aria-checked={this.state.checked}
+          tabIndex="0"
+          onClick={this.handleClick}
+          disabled={props.disabled}
+        />
+        {props.label}
+      </label>
+    );
+  }
+}
+
+CheckBox.propTypes = inputProps;
+
+export default CheckBox;

stories/index.jsx

 /* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable no-console */
 import React from 'react';
 import { storiesOf, linkTo } from '@kadira/storybook';
 
 import TextInput from '../src/TextInput';
 import SelectInput from '../src/SelectInput';
+import CheckBox from '../src/CheckBox';
 import Welcome from './Welcome';
 
 storiesOf('Welcome', module)
@@ -124,3 +126,39 @@ storiesOf('SelectInput', module)
       }}
     />
   ));
+
+storiesOf('CheckBox', module)
+  .add('basic usage', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="check me out!"
+      checked="false"
+    />
+  ))
+  .add('disabled', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="you cannot check me out"
+      checked="false"
+      disabled
+    />
+  ))
+  .add('default checked', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="(un)check me out"
+      checked="true"
+    />
+  ))
+  .add('call a function', () => (
+    <CheckBox
+      name="checkbox"
+      describedBy="checkbox"
+      label="check out the console"
+      checked="false"
+      onChange={() => console.log('the checkbox changed state')}
+    />
+  ));