Created Checkbox test

This commit is contained in:
Alejandro Celaya 2019-03-17 18:09:10 +01:00
parent f4dbd03c7e
commit 2e452993ff
2 changed files with 69 additions and 7 deletions

View file

@ -12,16 +12,11 @@ const propTypes = {
const Checkbox = ({ checked, onChange, className, children }) => {
const id = uuid();
const onChecked = (e) => onChange(e.target.checked, e);
return (
<span className={classNames('custom-control custom-checkbox', className)} style={{ display: 'inline' }}>
<input
type="checkbox"
className="custom-control-input"
id={id}
checked={checked}
onChange={(e) => onChange(e.target.checked, e)}
/>
<input type="checkbox" className="custom-control-input" id={id} checked={checked} onChange={onChecked} />
<label className="custom-control-label" htmlFor={id}>{children}</label>
</span>
);

View file

@ -0,0 +1,67 @@
import React from 'react';
import { mount, shallow } from 'enzyme';
import Checkbox from '../../src/utils/Checkbox';
import DateInput from './DateInput.test';
describe('<Checkbox />', () => {
let wrapped;
const createComponent = (props = {}) => {
wrapped = mount(<Checkbox {...props} />);
return wrapped;
};
afterEach(() => wrapped && wrapped.unmount());
it('includes extra class names when provided', () => {
const classNames = [ 'foo', 'bar', 'baz' ];
const checked = false;
const onChange = () => {};
expect.assertions(classNames.length);
classNames.forEach((className) => {
const wrapped = createComponent({ className, checked, onChange });
expect(wrapped.prop('className')).toContain(className);
});
});
it('marks input as checked if defined', () => {
const checkeds = [ true, false ];
const onChange = () => {};
expect.assertions(checkeds.length);
checkeds.forEach((checked) => {
const wrapped = createComponent({ checked, onChange });
const input = wrapped.find('input');
expect(input.prop('checked')).toEqual(checked);
});
});
it('renders provided children inside the label', () => {
const labels = [ 'foo', 'bar', 'baz' ];
const checked = false;
const onChange = () => {};
expect.assertions(labels.length);
labels.forEach((children) => {
const wrapped = createComponent({ children, checked, onChange });
const label = wrapped.find('label');
expect(label.text()).toEqual(children);
});
});
it('changes checked status on input change', () => {
const onChange = jest.fn();
const e = { target: { checked: false } };
const wrapped = createComponent({ checked: true, onChange });
const input = wrapped.find('input');
input.prop('onChange')(e);
expect(onChange).toHaveBeenCalledWith(false, e);
});
});