#19 get buttons in RenderGroups sort of working, failing tests indica…

…te work to be done
CalderaWP · Jul 26, 2018 · db15879 · db15879
1 parent c5ab58c
commit db15879
Show file tree

Hide file tree

Showing 7 changed files with 257 additions and 46 deletions.
diff --git 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',
 
 };
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 };
diff --git 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);
+			});
+
+
+		});
+	});
 
 });