Add more tests

Author: jimbo

src/Field/__tests__/controlGroup.spec.js

@@ -1,4 +1,4 @@
-import { Fragment, createElement } from 'react';
+import { createElement } from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 
@@ -26,11 +26,11 @@ test('derives state from props', () => {
     expect(colorProps.value.every(v => checkedValues.has(v))).toBeTruthy;
 });
 
-test('renders a fragment', () => {
+test('renders a div', () => {
     const props = { ...colorProps };
     const wrapper = shallow(<ControlGroup {...props} />);
 
-    expect(wrapper.type()).toEqual(Fragment);
+    expect(wrapper.type()).toEqual('div');
 });
 
 test('renders a child for each option', () => {

src/Field/__tests__/field.spec.js

@@ -6,38 +6,48 @@ import Field from '../field';
 
 configure({ adapter: new Adapter() });
 
-test('renders a div', () => {
+test('renders a div by default', () => {
     const children = 'abc';
     const wrapper = shallow(<Field>{children}</Field>);
 
     expect(wrapper.type()).toEqual('div');
 });
 
-test('renders children and a message', () => {
-    const props = { children: 'a', message: 'b' };
+test('renders a label when `singular` is `true`', () => {
+    const children = 'abc';
+    const props = { children, singular: true };
     const wrapper = shallow(<Field {...props} />);
 
-    expect(wrapper.childAt(0).text()).toEqual(props.children);
-    expect(wrapper.childAt(1).text()).toEqual(props.message);
+    expect(wrapper.type()).toEqual('label');
 });
 
-test('renders an empty message element by default', () => {
-    const props = { children: 'a' };
-    const wrapper = shallow(<Field {...props} />);
+test('renders `label` as a span', () => {
+    const props = { children: 'a', label: 'b' };
+    const wrapper = shallow(<Field {...props} />).childAt(0);
 
-    expect(wrapper.childAt(1).type()).toEqual('p');
+    expect(wrapper.childAt(0).type()).toEqual('span');
+    expect(wrapper.childAt(0).text()).toEqual(props.label);
 });
 
-test('renders a control', () => {
-    const props = { type: 'text' };
-    const wrapper = shallow(<Field {...props} />);
+test('renders `message` as a paragraph', () => {
+    const props = { children: 'a', message: 'b' };
+    const wrapper = shallow(<Field {...props} />).childAt(0);
 
-    expect(wrapper.childAt(0).type()).toEqual('label');
+    expect(wrapper.childAt(2).type()).toEqual('p');
+    expect(wrapper.childAt(2).text()).toEqual(props.message);
 });
 
-test('renders a control group', () => {
-    const props = { options: [], type: 'radio' };
-    const wrapper = shallow(<Field {...props} />);
+test('renders `children` between label and message', () => {
+    const props = { children: 'a' };
+    const wrapper = shallow(<Field {...props} />).childAt(0);
+
+    expect(wrapper.childAt(1).text()).toEqual(props.children);
+});
+
+test('renders `children` as provided', () => {
+    const child = <span>abc</span>;
+    const field = <Field>{child}</Field>;
+    const wrapper = shallow(field).childAt(0);
 
-    expect(wrapper.childAt(0).type()).toEqual('div');
+    expect(wrapper.contains(child)).toBe(true);
 });

src/Field/controlGroup.js

@@ -1,4 +1,4 @@
-import { Component, Fragment, createElement } from 'react';
+import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 
 import Switch from './switch';
@@ -34,28 +34,34 @@ class ControlGroup extends Component {
         checkedValues: new Set()
     };
 
-    render() {
+    get children() {
         const { checkedValues } = this.state;
         const { classes, name, options, type } = this.props;
         const sharedProps = { name, type, onChange: this.handleChange };
 
-        const children = options.map(({ label, value, ...inputProps }) => {
+        return options.map(({ id, label, value, ...inputProps }) => {
             const isChecked = checkedValues.has(value);
 
             return (
-                <label key={value} className={classes.option}>
+                <label key={value} htmlFor={id} className={classes.option}>
                     <span className={classes.label}>{label}</span>
                     <Switch
                         {...sharedProps}
                         {...inputProps}
+                        id={id}
                         value={value}
                         checked={isChecked}
                     />
                 </label>
             );
         });
+    }
+
+    render() {
+        const { children, props } = this;
+        const { classes } = props;
 
-        return <Fragment>{children}</Fragment>;
+        return <div className={classes.root}>{children}</div>;
     }
 
     handleChange = (name, value, isChecked) => {

src/Field/field.js

@@ -1,90 +1,46 @@
-import { Component, createElement } from 'react';
+import { Component, Fragment, createElement } from 'react';
 import PropTypes from 'prop-types';
 
-import Control from './control';
-import ControlGroup from './controlGroup';
-
-const groupTypes = ['checkbox', 'radio'];
-const isGroupType = type => groupTypes.includes(type);
-
 class Field extends Component {
     static propTypes = {
         classes: PropTypes.shape({
-            control: PropTypes.string,
-            controls: PropTypes.string,
-            group: PropTypes.string,
             label: PropTypes.string,
             message: PropTypes.string,
             root: PropTypes.string
         }),
         label: PropTypes.node,
         message: PropTypes.node,
-        type: PropTypes.string,
-        value: PropTypes.any
+        singular: PropTypes.bool
     };
 
     static defaultProps = {
         classes: {}
     };
 
     get children() {
-        const { children, type } = this.props;
-
-        if (children) {
-            return children;
-        }
-
-        return isGroupType(type) ? this.controlGroup : this.control;
-    }
-
-    get control() {
-        const { classes, label, type, value } = this.props;
-        const controlProps = { type, value };
-
-        return (
-            <label className={classes.control}>
-                <span className={classes.label}>{label}</span>
-                <Control {...controlProps} onChange={this.handleChange} />
-            </label>
-        );
-    }
-
-    get controlGroup() {
-        const { classes, label, options, type, value } = this.props;
-        const controlProps = { options, type, value };
+        const { classes, children, label, message } = this.props;
 
         return (
-            <div className={classes.controls}>
-                <span className={classes.label}>{label}</span>
-                <div className={classes.group}>
-                    <ControlGroup
-                        {...controlProps}
-                        onChange={this.handleChange}
-                    />
-                </div>
-            </div>
+            <Fragment>
+                <span key={label} className={classes.label}>
+                    {label}
+                </span>
+                {children}
+                <p key={message} className={classes.message}>
+                    {message}
+                </p>
+            </Fragment>
         );
     }
 
     render() {
         const { children, props } = this;
-        const { classes, message } = props;
+        const { classes, singular } = props;
+        const elementType = singular ? 'label' : 'div';
+        const elementProps = { className: classes.root };
 
-        return (
-            <div className={classes.root}>
-                {children}
-                <p className={classes.message}>{message}</p>
-            </div>
-        );
+        return createElement(elementType, elementProps, children);
     }
-
-    handleChange = (name, value) => {
-        const { onChange } = this.props;
-
-        if (onChange) {
-            onChange(name, value);
-        }
-    };
 }
 
 export default Field;