From db1587956b5af988cf5789f83e0eaef3b357a042 Mon Sep 17 00:00:00 2001
From: Josh Pollock <josh@calderawp.com>
Date: Thu, 26 Jul 2018 09:57:15 -0400
Subject: [PATCH] #19 get buttons in RenderGroups sort of working, failing
 tests indicate work to be done

---
 src/components/RenderGroup.js                 |   1 +
 .../__snapshots__/renderGroup.test.js.snap    |  61 +++++++++
 src/components/fields/FieldInner.js           |  86 +++++++------
 src/components/fields/button/Button.js        |   3 +-
 .../button/__snapshots__/Button.test.js.snap  |   4 +-
 .../fields/factories/prepareFieldConfig.js    |  30 +++--
 src/components/renderGroup.test.js            | 118 ++++++++++++++++++
 7 files changed, 257 insertions(+), 46 deletions(-)

diff --git a/src/components/RenderGroup.js b/src/components/RenderGroup.js
index 2f559d9..e3113d9 100644
--- a/src/components/RenderGroup.js
+++ b/src/components/RenderGroup.js
@@ -108,5 +108,6 @@ RenderGroup.classNames = {
 	fieldGroup: 'caldera-config-group',
 	fieldWrapper: 'caldera-config-field',
 	input: 'field-config',
+	button: 'caldera-config-button',
 
 };
\ No newline at end of file
diff --git a/src/components/__snapshots__/renderGroup.test.js.snap b/src/components/__snapshots__/renderGroup.test.js.snap
index 8b46a0a..4c9b26b 100644
--- a/src/components/__snapshots__/renderGroup.test.js.snap
+++ b/src/components/__snapshots__/renderGroup.test.js.snap
@@ -1,5 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`The render group component Button fields inside render groups Button RenderGroup snapshots Renders a regular button 1`] = `
+<div
+  className="caldera-config-field-setup"
+>
+  <div
+    className="caldera-config-group"
+  >
+    <div
+      className="caldera-config-field"
+    >
+      <label
+        htmlFor="RendersARegularButtonSnapShotTest"
+      >
+        Submit
+      </label>
+      <button
+        aria-describedby={null}
+        className="field-config field-config caldera-config-button"
+        disabled={false}
+        id="RendersARegularButtonSnapShotTest"
+        onBlur={undefined}
+        onClick={undefined}
+        onFocus={undefined}
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`The render group component Button fields inside render groups Button RenderGroup snapshots Renders a submit button 1`] = `
+<div
+  className="caldera-config-field-setup"
+>
+  <div
+    className="caldera-config-group"
+  >
+    <div
+      className="caldera-config-field"
+    >
+      <label
+        htmlFor="cf-button-example"
+      >
+        Submit
+      </label>
+      <input
+        aria-describedby={null}
+        className="field-config field-config caldera-config-button"
+        disabled={false}
+        id="cf-button-example"
+        onBlur={undefined}
+        onClick={undefined}
+        onFocus={undefined}
+        required={undefined}
+        type="submit"
+        value={undefined}
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`The render group component Rendering with fields Does not error when passed empty array of fields 1`] = `
 <div
   className="caldera-config-field-setup"
diff --git a/src/components/fields/FieldInner.js b/src/components/fields/FieldInner.js
index 2892122..7b6e623 100644
--- a/src/components/fields/FieldInner.js
+++ b/src/components/fields/FieldInner.js
@@ -6,6 +6,8 @@ import {ariaDescribedbyAttr} from './util';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import {RenderGroup} from '../RenderGroup';
+import {Button} from "./button/Button";
+
 /**
  * Creates the field inside of a field group
  *
@@ -31,44 +33,58 @@ export const FieldInner = (props) => {
 	 */
 	function inputClassName() {
 		return classNames([
-			props.fieldClassName,
-			RenderGroup.classNames.input
-		]
+				props.fieldClassName,
+				RenderGroup.classNames.input
+			]
 		);
 	}
 
-	switch( props.type ){
-	case 'select':
-	case 'dropdown':
-		const options = Array.isArray(props.options) ? props.options : [];
-		return (
-			<SelectField
-				id={props.id}
-				fieldClassName={inputClassName()}
-				ariaDescribedbyAttr={ariaIdAttr()}
-				value={props.value}
-				onValueChange={props.onValueChange}
-				inputType={props.inputType}
-				options={options}
-				disabled={props.disabled}
-				onBlur={props.onBlur}
-				onFocus={props.onFocus}
-			/>
-		);
-	default:
-	case 'input':
-		return (
-			<Input
-				id={props.id}
-				fieldClassName={inputClassName()}
-				ariaDescribedbyAttr={ariaIdAttr()}
-				value={props.value}
-				onValueChange={props.onValueChange}
-				inputType={props.inputType}
-				disabled={props.disabled}
-				onBlur={props.onBlur}
-				onFocus={props.onFocus}
-			/>);
+	switch (props.type) {
+		case 'select':
+		case 'dropdown':
+			const options = Array.isArray(props.options) ? props.options : [];
+			return (
+				<SelectField
+					id={props.id}
+					fieldClassName={inputClassName()}
+					ariaDescribedbyAttr={ariaIdAttr()}
+					value={props.value}
+					onValueChange={props.onValueChange}
+					inputType={props.inputType}
+					options={options}
+					disabled={props.disabled}
+					onBlur={props.onBlur}
+					onFocus={props.onFocus}
+				/>
+			);
+		case 'button' :
+			return (
+				<Button
+					onClick={props.onClick}
+					id={props.id}
+					fieldClassName={inputClassName()}
+					ariaDescribedbyAttr={ariaIdAttr()}
+					value={props.value}
+					inputType={props.inputType}
+					disabled={props.disabled}
+					onBlur={props.onBlur}
+					onFocus={props.onFocus}
+				/>
+			);
+		default:
+		case 'input':
+			return (
+				<Input
+					id={props.id}
+					fieldClassName={inputClassName()}
+					ariaDescribedbyAttr={ariaIdAttr()}
+					value={props.value}
+					onValueChange={props.onValueChange}
+					inputType={props.inputType}
+					disabled={props.disabled}
+					onBlur={props.onBlur}
+					onFocus={props.onFocus}
+				/>);
 	}
 
 };
diff --git a/src/components/fields/button/Button.js b/src/components/fields/button/Button.js
index 33d44d4..c8d45d7 100644
--- a/src/components/fields/button/Button.js
+++ b/src/components/fields/button/Button.js
@@ -14,7 +14,8 @@ export const Button = (props) => {
 	function inputClassName() {
 		return classNames(
 			props.fieldClassName,
-			RenderGroup.classNames.input
+			RenderGroup.classNames.input,
+			RenderGroup.classNames.button
 		);
 	}
 
diff --git a/src/components/fields/button/__snapshots__/Button.test.js.snap b/src/components/fields/button/__snapshots__/Button.test.js.snap
index b27dd22..f7896b6 100644
--- a/src/components/fields/button/__snapshots__/Button.test.js.snap
+++ b/src/components/fields/button/__snapshots__/Button.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Button component props snapshot for button 1`] = `
 <button
   aria-describedby={undefined}
-  className="foo field-config"
+  className="foo field-config caldera-config-button"
   disabled={undefined}
   id="button-2"
   onBlur={undefined}
@@ -15,7 +15,7 @@ exports[`Button component props snapshot for button 1`] = `
 exports[`Button component props snapshot for submit 1`] = `
 <input
   aria-describedby={undefined}
-  className="foo field-config"
+  className="foo field-config caldera-config-button"
   disabled={undefined}
   id="button-1"
   onBlur={undefined}
diff --git a/src/components/fields/factories/prepareFieldConfig.js b/src/components/fields/factories/prepareFieldConfig.js
index 2b7fea9..013f146 100644
--- a/src/components/fields/factories/prepareFieldConfig.js
+++ b/src/components/fields/factories/prepareFieldConfig.js
@@ -1,4 +1,4 @@
-import {fieldGroupPropTypes,magicGroupPropTypes} from '../propTypes';
+import {fieldGroupPropTypes, magicGroupPropTypes} from '../propTypes';
 import {isValidHtml5type, toBoolean} from '../util';
 import {messageObjectFactory} from '../messages/messageObjectFactory';
 
@@ -11,6 +11,24 @@ import {messageObjectFactory} from '../messages/messageObjectFactory';
  * @returns {*}
  */
 export const prepareFieldConfig = (fieldArgs) => {
+	function addMessageArg(fieldArgs) {
+		fieldArgs.disabled = toBoolean(fieldArgs.disabled);
+		fieldArgs.message = 'object' === typeof  fieldArgs.message
+			? messageObjectFactory(fieldArgs.message)
+			: messageObjectFactory({message: null, error: false});
+		return fieldArgs;
+	}
+
+
+	if( 'button' === fieldArgs.type ) {
+		if ('submit' !== fieldArgs.inputType) {
+			fieldArgs.inputType = 'button';
+		}
+
+		return addMessageArg(fieldArgs);
+	}
+
+
 	/**
 	 * Pick whitelisted keys from object
 	 *
@@ -49,17 +67,13 @@ export const prepareFieldConfig = (fieldArgs) => {
 	}
 
 	let validators = [];
-	if( fieldArgs.hasOwnProperty('validators') && Array.isArray(fieldArgs.validators )){
+	if (fieldArgs.hasOwnProperty('validators') && Array.isArray(fieldArgs.validators)) {
 		validators = fieldArgs.validators;
 	}
 
-	const keys = 'magic' === fieldArgs.type  ? magicGroupPropTypes : fieldGroupPropTypes;
+	const keys = 'magic' === fieldArgs.type ? magicGroupPropTypes : fieldGroupPropTypes;
 	fieldArgs = pick(fieldArgs, Object.keys(keys));
-	fieldArgs.disabled = toBoolean(fieldArgs.disabled);
-	fieldArgs.message = 'object' === typeof  fieldArgs.message
-		? messageObjectFactory(fieldArgs.message)
-		: messageObjectFactory({message:null, error: false });
-
+	fieldArgs = addMessageArg(fieldArgs);
 	fieldArgs.validators = validators;
 	return fieldArgs;
 };
\ No newline at end of file
diff --git a/src/components/renderGroup.test.js b/src/components/renderGroup.test.js
index bf8d0c8..f26f512 100644
--- a/src/components/renderGroup.test.js
+++ b/src/components/renderGroup.test.js
@@ -4,6 +4,7 @@ import Enzyme from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import renderer from 'react-test-renderer';
+import {prepareFieldConfig} from "./fields/factories/prepareFieldConfig";
 
 Enzyme.configure({adapter: new Adapter()});
 
@@ -530,6 +531,123 @@ describe('The render group component', () => {
 
 	});
 
+	describe('Button fields inside render groups', () => {
+
+		const buttonField = {
+			id: 'cf-button-example',
+			type: 'button',
+			label: 'Submit',
+			onClick: genericHandler(),
+			inputType: 'submit'
+		};
+
+		it( 'Allows inputType of button', () => {
+			const field = {
+				...buttonField,
+				inputType: 'button'
+			};
+			expect(field.inputType).toBe('button');
+			const prepared = prepareFieldConfig(field);
+			expect(prepared.inputType).toBe('button');
+		});
+
+		it( 'Allows onClick prop to pass', () => {
+			const prepared = prepareFieldConfig(buttonField);
+			expect(typeof prepared.onClick ).toBe( 'function' );
+		});
+
+		describe( 'Button RenderGroup snapshots', () => {
+			it( 'Renders a submit button', ( ) => {
+				const component = renderer.create(
+					<RenderGroup
+						configFields={[buttonField]}
+					/>
+				);
+				expect(component.toJSON()).toMatchSnapshot();
+			});
+
+			it( 'Renders a regular button', ( ) => {
+				const component = renderer.create(
+					<RenderGroup
+						configFields={[{
+							...buttonField,
+							inputType: 'button',
+							id: 'RendersARegularButtonSnapShotTest'
+						}]}
+					/>
+				);
+				expect(component.toJSON()).toMatchSnapshot();
+
+
+			});
+		});
+
+
+
+		it( 'Renders a submit button', ( ) => {
+			const component = mount(
+				<RenderGroup
+					configFields={[buttonField]}
+				/>
+			);
+			expect(component.find('input').length).toBe(1);
+
+		});
+
+
+		it( 'Renders a regular button', ( ) => {
+			const component = mount(
+				<RenderGroup
+					configFields={[{
+						...buttonField,
+						inputType: 'button',
+						id: 'RendersARegularButton'
+					}]}
+				/>
+			);
+			expect(component.find('button').length).toBe(1);
+
+		});
+
+
+		describe( 'onClick callback', ( ) => {
+			it( 'Clicks submit inputs', () => {
+				let clicked = false;
+				const component = mount(
+					<RenderGroup
+						configFields={[{
+							...buttonField,
+							onClick: () => {
+								clicked = true;
+							}
+						}]}
+					/>
+				);
+				component.find( 'input' ).simulate('click' );
+				expect(clicked).toBe(true);
+			});
+
+
+			it( 'Clicks button inputs', () => {
+				let clicked = false;
+				const component = mount(
+					<RenderGroup
+						configFields={[{
+							...buttonField,
+							inputType: 'button',
+							onClick: () => {
+								clicked = true;
+							}
+						}]}
+					/>
+				);
+				component.find( 'button' ).simulate('click' );
+				expect(clicked).toBe(true);
+			});
+
+
+		});
+	});
 
 });