Break up the render method logic into functions

static_src/components/action.jsx

@@ -1,26 +1,23 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import style from 'cloudgov-style/css/cloudgov-style.css';
-
-import createStyler from '../util/create_styler';
-
+import classnames from 'classnames';
+import Link from './action/link.jsx';
+import Button from './action/button.jsx';
+
+const BUTTON_TYPES = {
+  BUTTON: 'button',
+  OUTLINE: 'outline',
+  LINK: 'link',
+  SUBMIT: 'submit'
+};
 const BUTTON_STYLES = [
   'warning',
   'primary',
   'finish',
   'base',
   'white'
 ];
-
-const BUTTON_TYPES = [
-  'button',
-  'outline',
-  'outline-inverse',
-  'link',
-  'submit'
-];
-
 const propTypes = {
   children: PropTypes.any,
   classes: PropTypes.array,
@@ -29,77 +26,75 @@ const propTypes = {
   href: PropTypes.string,
   label: PropTypes.string,
   style: PropTypes.oneOf(BUTTON_STYLES),
-  type: PropTypes.oneOf(BUTTON_TYPES)
+  type: React.PropTypes.oneOf(Object.keys(BUTTON_TYPES).map(key => BUTTON_TYPES[key]))
 };
-
 const defaultProps = {
   style: 'primary',
   classes: [],
   label: '',
   type: 'button',
   disabled: false,
-  clickHandler: () => true,
-  children: []
+  clickHandler: () => true
 };
 
 export default class Action extends React.Component {
-  constructor(props) {
-    super(props);
+  get baseClasses() {
+    return `action action-${this.props.style}`;
+  }
+
+  get classes() {
+    return this.props.classes.join(' ');
+  }
+
+  get buttonClasses() {
+    if (this.typeOfLink) return {};
+
+    return classnames({
+      'action-outline': this.props.type === BUTTON_TYPES.OUTLINE,
+      'usa-button-disabled': this.props.disabled
+    }, 'usa-button', `usa-button-${this.props.style}`);
+  }
+
+  get sharedProps() {
+    return {
+      className: classnames(this.baseClasses, this.classes, this.buttonClasses),
+      label: this.props.label,
+      clickHandler: this.props.clickHandler
+    };
+  }
+
+  get buttonProps() {
+    const htmlButtonType = this.props.type === BUTTON_TYPES.BUTTON ?
+      BUTTON_TYPES.BUTTON : BUTTON_TYPES.SUBMIT;
+
+    return { disabled: this.props.disabled, type: htmlButtonType };
+  }
+
+  get linkProps() {
+    return { href: this.props.href };
+  }
+
+  get typeOfLink() {
+    return this.props.type === BUTTON_TYPES.LINK;
+  }
+
+  get isLink() {
+    return this.props.href || this.typeOfLink;
+  }
 
-    this.styler = createStyler(style);
+  get component() {
+    return this.isLink ? Link : Button;
   }
 
   render() {
-    const styleClass = `usa-button-${this.props.style}`;
-    let classes = this.styler(...this.props.classes);
-    let content = <div></div>;
-    const classList = [...this.props.classes];
-
-    classList.push('action');
-    classList.push(`action-${this.props.style}`);
-
-    if (this.props.type !== 'link') {
-      if (this.props.disabled) {
-        classList.push('usa-button-disabled');
-      } else {
-        classList.push('usa-button');
-        classList.push(styleClass);
-        if (this.props.type === 'outline') classList.push('action-outline');
-      }
-      classes = this.styler(...classList);
-    }
-
-    if (this.props.type === 'link' || this.props.href) {
-      classList.push('action-link');
-
-      classes = this.styler(...classList);
-
-      content = (
-        <a
-          className={ classes }
-          title={ this.props.label }
-          onClick={ (ev) => this.props.clickHandler(ev) }
-          disabled={ this.props.disabled }
-          href={ this.props.href || '#' }
-        >
-          { this.props.children }
-        </a>
-      );
-    } else {
-      content = (
-        <button
-          className={ classes }
-          aria-label={ this.props.label }
-          onClick={ (ev) => this.props.clickHandler(ev) }
-          disabled={this.props.disabled}
-          type={ this.props.type === 'submit' ? this.props.type : null }
-        >
-          { this.props.children }
-        </button>
-      );
-    }
-
-    return content;
+    const Component = this.component;
+    const extraProps = this.isLink ? this.linkProps : this.buttonProps;
+
+    return (
+      <Component { ...this.sharedProps } { ...extraProps }>
+        { this.props.children }
+      </Component>
+    );
   }
 }
 

static_src/components/action/button.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const propTypes = {
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  clickHandler: React.PropTypes.func,
+  disabled: React.PropTypes.bool,
+  label: React.PropTypes.string,
+  type: React.PropTypes.string
+};
+
+const button = ({ className, label, clickHandler, disabled, type, children }) =>
+  <button
+    className={ className }
+    aria-label={ label }
+    onClick={ clickHandler }
+    disabled={ disabled }
+    type={type}
+  >
+    { children }
+  </button>;
+
+button.propTypes = propTypes;
+
+export default button;

static_src/components/action/link.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import classnames from 'classnames';
+
+const propTypes = {
+  children: React.PropTypes.any,
+  className: React.PropTypes.string,
+  clickHandler: React.PropTypes.func,
+  href: React.PropTypes.string,
+  label: React.PropTypes.string
+};
+const defaultHref = '#';
+
+const Link = ({ className, label, href, clickHandler, children }) =>
+  <a
+    className={ classnames(className, 'action-link') }
+    title={ label }
+    onClick={ clickHandler }
+    href={ href || defaultHref }
+  >
+    { children }
+  </a>;
+
+Link.propTypes = propTypes;
+
+export default Link;

static_src/test/unit/components/action.spec.jsx

@@ -2,59 +2,87 @@
 import '../../global_setup.js';
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import Action from '../../../components/action.jsx';
+import Link from '../../../components/action/link.jsx';
+import Button from '../../../components/action/button.jsx';
 
 describe('<Action />', function () {
-  let action, sandbox;
+  let action;
 
-  beforeEach(function () {
-    sandbox = sinon.sandbox.create();
-  });
+  describe('default behavior', () => {
+    it('returns a button', () => {
+      action = shallow(<Action />);
 
-  afterEach(function () {
-    sandbox.restore();
+      expect(action.find(Button).length).toBe(1);
+    });
   });
 
-  describe('given type is link', function () {
-    beforeEach(function () {
-      action = shallow(<Action type="link" />);
-    });
+  describe('component creation', () => {
+    describe('given type is link', function () {
+      beforeEach(function () {
+        action = shallow(<Action type="link" />);
+      });
 
-    it('renders as a link', function () {
-      expect(action.find('a').length).toBe(1);
-    });
+      it('renders as a <Link />', function () {
+        expect(action.find(Link).length).toBe(1);
+      });
+
+      it('does not render a button', function () {
+        expect(action.find('button').length).toBe(0);
+      });
+
+      describe('given an href', function () {
+        const href = 'https://example.com';
+
+        beforeEach(function () {
+          action = shallow(<Action type="link" href={href} />);
+        });
 
-    it('does not render a button', function () {
-      expect(action.find('button').length).toBe(0);
+        it('renders with the href', function () {
+          expect(action.find(Link).prop('href')).toBe(href);
+        });
+      });
     });
 
-    describe('given an href', function () {
-      beforeEach(function () {
-        action = shallow(<Action type="link" href="https://example.com" />);
+    describe('given any other kind of type', () => {
+      it('renders a button', () => {
+        action = shallow(<Action type="submit" />);
+        expect(action.find(Button).length).toBe(1);
+        action = shallow(<Action type="outline" />);
+        expect(action.find(Button).length).toBe(1);
       });
+    });
+
+    describe('with props passed', () => {
+      it('always passes `clickHandler`, `label`, and `className`', () => {
+        const buttonProps = { type: 'submit', label: 'my label', classes: ['k'] };
+        const actionButton = shallow(<Action {...buttonProps} />).find(Button);
+
+        expect(actionButton.prop('label')).toEqual(buttonProps.label);
+        expect(actionButton.prop('className')).toMatch(new RegExp(buttonProps.classes[0]));
+        expect(typeof actionButton.prop('clickHandler')).toBe('function');
 
-      it('renders with the href', function () {
-        expect(action.find('a').prop('href')).toBe('https://example.com');
+        const linkProps = { href: 'p.com', label: 'great label', classes: ['yii'] };
+        const actionLink = shallow(<Action {...linkProps} />).find(Link);
+
+        expect(actionLink.prop('label')).toEqual(linkProps.label);
+        expect(actionLink.prop('className')).toMatch(new RegExp(linkProps.classes[0]));
+        expect(typeof actionLink.prop('clickHandler')).toBe('function');
       });
     });
   });
 
-  describe('clickHandler', function () {
+  describe('clickHandler', () => {
     let clickHandlerSpy;
-    beforeEach(function () {
-      clickHandlerSpy = sandbox.spy();
-      action = shallow(<Action clickHandler={ clickHandlerSpy } />);
+    beforeEach(() => {
+      clickHandlerSpy = sinon.spy();
+      action = mount(<Action clickHandler={ clickHandlerSpy } />);
     });
 
-    describe('on click', function () {
-      beforeEach(function () {
-        action.simulate('click');
-      });
-
-      it('triggers clickHandler', function () {
-        expect(clickHandlerSpy).toHaveBeenCalledOnce();
-      });
+    it('triggers clickHandler', () => {
+      action.find(Button).simulate('click');
+      expect(clickHandlerSpy).toHaveBeenCalledOnce();
     });
   });
 });

static_src/test/unit/components/action/button.spec.jsx

@@ -0,0 +1,29 @@
+import '../../../global_setup.js';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Button from '../../../../components/action/button.jsx';
+
+describe('<Button/>', () => {
+  it('returns a button tag', () => {
+    expect(shallow(<Button />).find('button').length).toBe(1);
+  });
+
+  it('supplies the correct props to its child', () => {
+    const props = {
+      className: 'usa-button',
+      disabled: false,
+      clickHandler: () => true,
+      type: 'button',
+      label: 'my-button'
+    };
+    const button = shallow(<Button { ...props } />);
+    const actualProps = button.find('button').props();
+
+    expect(actualProps.className).toEqual(props.className);
+    expect(actualProps.disabled).toEqual(props.disabled);
+    expect(actualProps.onClick).toEqual(props.clickHandler);
+    expect(actualProps.type).toEqual(props.type);
+    expect(actualProps['aria-label']).toEqual(props.label);
+  });
+});

static_src/test/unit/components/action/link.spec.jsx

@@ -0,0 +1,26 @@
+import '../../../global_setup.js';
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import Link from '../../../../components/action/link.jsx';
+
+describe('<Link />', () => {
+  it('returns an `a` tag', () => {
+    expect(shallow(<Link />).find('a').length).toBe(1);
+  });
+
+  it('sets a default href', () => {
+    const link = shallow(<Link />);
+    expect(link.find('a').prop('href')).toBe('#');
+  });
+
+  it('sets a base class of `action-link`', () => {
+    expect(shallow(<Link />).find('a').hasClass('action-link')).toBe(true);
+  });
+
+  it('renders its children', () => {
+    const child = 'hi';
+    const link = shallow(<Link>{child}</Link>);
+    expect(link.find('a').prop('children')).toBe(child);
+  });
+});