From c5ab58c09d90dad34fbab72bab88a06dd4d6e271 Mon Sep 17 00:00:00 2001
From: Josh Pollock <josh@calderawp.com>
Date: Thu, 26 Jul 2018 09:24:35 -0400
Subject: [PATCH] add button field #19

---
 src/components/fields/button/Button.js        |  68 +++++++++++
 src/components/fields/button/Button.test.js   | 108 ++++++++++++++++++
 .../button/__snapshots__/Button.test.js.snap  |  28 +++++
 3 files changed, 204 insertions(+)
 create mode 100644 src/components/fields/button/Button.js
 create mode 100644 src/components/fields/button/Button.test.js
 create mode 100644 src/components/fields/button/__snapshots__/Button.test.js.snap

diff --git a/src/components/fields/button/Button.js b/src/components/fields/button/Button.js
new file mode 100644
index 0000000..33d44d4
--- /dev/null
+++ b/src/components/fields/button/Button.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import {fieldPropTypes} from '../propTypes';
+import classNames from 'classnames';
+import {RenderGroup} from '../../RenderGroup';
+import PropTypes from 'prop-types';
+
+
+export const Button = (props) => {
+	/**
+	 * Get the className prop for inputs
+	 *
+	 * @return {String}
+	 */
+	function inputClassName() {
+		return classNames(
+			props.fieldClassName,
+			RenderGroup.classNames.input
+		);
+	}
+
+	if ('submit' === props.inputType) {
+		return (
+			<input
+				type={'submit'}
+				id={props.id}
+				className={inputClassName()}
+				aria-describedby={props.ariaDescribedbyAttr}
+				required={props.isRequired}
+				onClick={props.onClick}
+				value={props.value}
+				disabled={props.disabled}
+				onBlur={props.onBlur}
+				onFocus={props.onFocus}
+			/>
+		);
+	}
+
+	return (
+		<button
+			id={props.id}
+			className={inputClassName()}
+			aria-describedby={props.ariaDescribedbyAttr}
+			onClick={props.onClick}
+			disabled={props.disabled}
+			onBlur={props.onBlur}
+			onFocus={props.onFocus}
+		>
+			{props.value}
+		</button>
+	);
+};
+
+let propTypes = fieldPropTypes;
+delete fieldPropTypes.onValueChange;
+
+/**
+ * Prop type definitions for Button Component
+ * @type {{id: (*), fieldClassName: (*), help: shim, value: shim, onValueChange: (*), inputType: shim, onClick: *}}
+ */
+Button.propTypes = {
+	...propTypes,
+	innerType: PropTypes.oneOf(['submit','button'] ),
+	onClick: PropTypes.func.isRequired,
+};
+
+Button.defaultProps = {
+	inputType: 'submit'
+}
\ No newline at end of file
diff --git a/src/components/fields/button/Button.test.js b/src/components/fields/button/Button.test.js
new file mode 100644
index 0000000..2b9a306
--- /dev/null
+++ b/src/components/fields/button/Button.test.js
@@ -0,0 +1,108 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import {shallow} from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import {Button} from "./Button";
+
+Enzyme.configure({adapter: new Adapter()});
+
+describe('Button component', () => {
+	function genericChangeHandler() {
+	}
+
+	describe( 'props', () => {
+		it('snapshot for submit', () => {
+			const component = renderer.create(
+				<Button
+					onClick={genericChangeHandler}
+					id={'button-1'}
+					fieldClassName={'foo'}
+				/>
+			);
+			expect(component.toJSON()).toMatchSnapshot();
+
+		});
+
+		it('snapshot for button', () => {
+			const component = renderer.create(
+				<Button
+					onClick={genericChangeHandler}
+					inputType={'button'}
+					id={'button-2'}
+					fieldClassName={'foo'}
+				/>
+			);
+			expect(component.toJSON()).toMatchSnapshot();
+
+		});
+	});
+
+	describe( 'clicks', () => {
+
+		it('Has a submit button by default', () => {
+			const component = shallow(
+				<Button
+					onClick={genericChangeHandler}
+					id={'button-3'}
+					fieldClassName={'foo'}
+				/>
+			);
+			expect(component.find('input').length).toEqual(1);
+		});
+
+
+		it('Handler called when submit click', () => {
+			let clicked = false;
+			const component = shallow(
+				<Button
+					onClick={() => {
+						clicked = true;
+					}}
+					id={'button-4'}
+					fieldClassName={'foo'}
+				/>
+			);
+
+			component.find('input').simulate('click');
+			expect(clicked).toEqual(true);
+
+		});
+
+		it('Has a button when inputType is button', () => {
+			const component = shallow(
+				<Button
+					onClick={genericChangeHandler}
+					id={'button-5'}
+					fieldClassName={'foo'}
+					inputType={'button'}
+				/>
+			);
+
+			expect(component.find('button').length).toEqual(1);
+		});
+
+
+		it('Handler called when submit click', () => {
+			let clicked = false;
+			const component = shallow(
+				<Button
+					onClick={() => {
+						clicked = true;
+					}}
+					id={'button-4'}
+					fieldClassName={'foo'}
+					inputType={'button'}
+
+				/>
+			);
+			component.find('button').simulate('click');
+			expect(clicked).toEqual(true);
+
+
+		});
+
+	});
+
+
+});
\ No newline at end of file
diff --git a/src/components/fields/button/__snapshots__/Button.test.js.snap b/src/components/fields/button/__snapshots__/Button.test.js.snap
new file mode 100644
index 0000000..b27dd22
--- /dev/null
+++ b/src/components/fields/button/__snapshots__/Button.test.js.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button component props snapshot for button 1`] = `
+<button
+  aria-describedby={undefined}
+  className="foo field-config"
+  disabled={undefined}
+  id="button-2"
+  onBlur={undefined}
+  onClick={[Function]}
+  onFocus={undefined}
+/>
+`;
+
+exports[`Button component props snapshot for submit 1`] = `
+<input
+  aria-describedby={undefined}
+  className="foo field-config"
+  disabled={undefined}
+  id="button-1"
+  onBlur={undefined}
+  onClick={[Function]}
+  onFocus={undefined}
+  required={undefined}
+  type="submit"
+  value={undefined}
+/>
+`;