feat(lib): add stories + tests

packages/junipero/lib/RadioField/index.stories.js

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+
+import RadioField from './index';
+
+export default { title: 'junipero/RadioField' };
+
+export const basic = () => {
+  const [checked, setChecked] = useState(false);
+
+  const onChange = value => {
+    setChecked(value.checked);
+  };
+
+  return (
+    <>
+      <RadioField checked={checked}
+        onChange={value => onChange(value)}
+        label="Enabled"/>
+      <button onClick={() => setChecked(false)}>reset</button>
+    </>
+
+  );
+};
+
+export const disabled = () => {
+  return (
+    <RadioField label="Disabled" onChange={action('change')} disabled/>
+  );
+};
+
+export const active = () => {
+  return (
+    <RadioField label="Active" onChange={action('change')} checked/>
+  );
+};
+
+export const activeDisabled = () => {
+  return (
+    <RadioField
+      label="Active and disabled"
+      onChange={action('change')}
+      disabled
+      checked
+    />
+  );
+};
+
+export const withDescription = () => {
+  return (
+    <RadioField
+      label="Super title"
+      description="This is a description"
+      onChange={action('change')}
+      checked
+    />
+  );
+};
+
+export const withDescriptionAndUnchecked = () => {
+  return (
+    <RadioField
+      label="Super title"
+      description="This is a description"
+      onChange={action('change')}
+    />
+  );
+};
+
+export const withDescriptionButDisabled = () => {
+  return (
+    <RadioField
+      label="Super title"
+      description="This is a description"
+      onChange={action('change')}
+      disabled
+    />
+  );
+};
+
+export const withDescriptionChecked = () => {
+  return (
+    <RadioField
+      label="Super title"
+      description="This is a description"
+      onChange={action('change')}
+      checked
+    />
+  );
+};
+
+export const twoRadiosCombined = () => {
+  const [smart, setSmart] = useState(false);
+  const [strong, setStrong] = useState(false);
+
+  const onChange = (value, type) => {
+  };
+
+  return (
+    <>
+      <RadioField
+        label="This one's stronger"
+        description="This is a description"
+        onChange={value => onChange(value, 'strong')}
+        checked={strong}
+      />
+      <RadioField
+        label="This one's smarter"
+        description="This is a description"
+        onChange={value => onChange(value, 'smart')}
+        checked={smart}
+      />
+    </>
+  );
+};

packages/junipero/lib/RadioField/index.test.js

@@ -0,0 +1,31 @@
+import React, { createRef } from 'react';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+
+import RadioField from './';
+
+describe('<RadioField />', () => {
+
+  it('should render', () => {
+    const component = mount(
+      <RadioField label="Test" />
+    );
+    expect(component.find('.junipero.radio').length).toBe(1);
+  });
+
+  it('should provide some imperative handles', () => {
+    const ref = createRef();
+    const component = mount(<RadioField ref={ref} label="Test" />);
+    expect(ref.current.innerRef.current).toBeDefined();
+    expect(component.getDOMNode()).toBe(ref.current.innerRef.current);
+  });
+
+  it('should correctly fire onChange event', () => {
+    const onChange = sinon.spy();
+    const component = mount(<RadioField checked={true} onChange={onChange} />);
+    component.find('input').simulate('change', { target: { checked: true } });
+    expect(onChange.withArgs(sinon.match({ checked: true })).called)
+      .toBe(true);
+  });
+
+});