mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2025-01-09 09:47:28 +03:00
Created Checkbox test
This commit is contained in:
parent
f4dbd03c7e
commit
2e452993ff
2 changed files with 69 additions and 7 deletions
|
@ -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>
|
||||
);
|
||||
|
|
67
test/utils/Checkbox.test.js
Normal file
67
test/utils/Checkbox.test.js
Normal 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);
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue