diff --git a/src/forms/redux-form/TogglePill.jsx b/src/forms/redux-form/TogglePill.jsx new file mode 100644 index 000000000..28207da16 --- /dev/null +++ b/src/forms/redux-form/TogglePill.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import TogglePill from '../TogglePill'; + +/** + * @param {Object} props - props passed in from parent and redux-form + * @description wraps standard TogglePill web component for use with redux-form + * deconstructs props that redux-forms sets and sets them on TogglePill + * + * NOTE: redux-form expects checkboxes value to be true/false and will set them as so + * https://github.com/erikras/redux-form/issues/2922, therefore using the value here to + * set isActive + * + * @return {Component} TogglePill + */ +const ReduxFormTogglePill = props => { + // not adding meta error to TogglePill prop for now + // since TogglePills should function in a group with one error + const { + meta, // eslint-disable-line no-unused-vars + input, + ...other + } = props; + + return ; +}; + +ReduxFormTogglePill.displayName = 'ReduxFormTogglePill'; + +export default ReduxFormTogglePill; + diff --git a/src/forms/redux-form/__snapshots__/togglePill.test.jsx.snap b/src/forms/redux-form/__snapshots__/togglePill.test.jsx.snap new file mode 100644 index 000000000..0f189224b --- /dev/null +++ b/src/forms/redux-form/__snapshots__/togglePill.test.jsx.snap @@ -0,0 +1,10 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`redux-form TogglePill renders a TogglePill component with expected attributes from mock data 1`] = ` + +`; diff --git a/src/forms/redux-form/togglePill.test.jsx b/src/forms/redux-form/togglePill.test.jsx new file mode 100644 index 000000000..c6f968227 --- /dev/null +++ b/src/forms/redux-form/togglePill.test.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import ReduxFormTogglePill from './TogglePill'; + +describe('redux-form TogglePill', function() { + + // props given in the structure that + // redux form would + const togglePillProps = { + input: { + label: 'Parenting', + name: 'parenting', + value: false, // as a checkbox, redux form will pass true / false for values + } + }; + + it('renders a TogglePill component with expected attributes from mock data', () => { + const component = shallow(); + expect(component).toMatchSnapshot(); + }); + + it('renders a TogglePill with isActive prop as false when value is false', () => { + const component = mount(); + expect(component.find('TogglePill').prop('isActive')).toBe(false); + }); + + it('renders a TogglePill with isActive prop as true when value is true', () => { + togglePillProps.input.value = true; + const component = mount(); + expect(component.find('TogglePill').prop('isActive')).toBe(false); + }); + +}); +