Commit a5b7a4fb by Sarah Fischmann

wrote several tests for checkbox; made some small edits in component

parent 141d0a25
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>
`;
import React from 'react';
import { shallow } from 'enzyme';
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
......@@ -14,8 +32,67 @@ describe('<CheckBox />', () => {
);
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={true}
/>,
);
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);
});
});
......@@ -8,6 +8,10 @@ class CheckBox extends React.Component {
super(props);
this.handleClick = this.handleClick.bind(this);
if (this.props.onChange) {
this.onChange = this.props.onChange.bind(this);
}
if (props.checked === 'true') {
this.state = {
checked: true,
......@@ -29,8 +33,8 @@ class CheckBox extends React.Component {
checked: true,
});
}
if (this.props.onChange) {
this.props.onChange();
if(this.onChange) {
this.onChange();
}
}
......@@ -39,12 +43,12 @@ class CheckBox extends React.Component {
const props = { ...this.props };
return (
<label htmlFor={props.checkLabel}>
<label>
<input
name={props.name}
type="checkbox"
defaultChecked={this.state.checked}
aria-describedby={props.describedby}
aria-describedby={props.describedBy}
aria-checked={this.state.checked}
tabIndex="0"
onClick={this.handleClick}
......
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