File field update value test

src/App.js

@@ -185,13 +185,12 @@ class App extends Component {
 				<div>
 					<h2>File Field</h2>
 					<FileFieldGroup
-						id={'file-5'}
+					id={'file-1'}
 						label={'File Field'}
 						className={'file'}
 						onValueChange={(newValue) => {
 							magicFieldValue = newValue;
 					} }	
-						isOpen={true}
 						value={fileFieldValue}
 					/>
 				</div>

src/components/fields/FieldGroup.js

@@ -11,7 +11,6 @@ import {Message} from './messages/Message';
 import {messageObjectFactory} from './messages/messageObjectFactory';
 import {fieldsetCheckboxHandler} from './field-group-change-handlers/fieldsetCheckboxHandler';
 import {MagicFieldGroup} from './magic-select/MagicFieldGroup';
-import {FileFieldGroup} from './file-field/FileFieldGroup';
 
 /**
  * Represents one configField -- wrapper, label and input.
@@ -32,7 +31,7 @@ export const FieldGroup = (props) => {
 	function idAttrForHelpElement() {
 		return ariaDescribedbyAttr(props.id, props.help);
 	}
-
+ 
 
 	/**
 	 * Based on type, render the field.

src/components/fields/file-field/FileFieldGroup.js

@@ -2,7 +2,6 @@ import React from 'react';
 import classNames from 'classnames';
 import {RenderGroup} from '../../RenderGroup';
 import {Message} from '../messages/Message';
-import {FieldGroup} from '../FieldGroup';
 import {FileSelect} from './FileSelect';
 import {fieldGroupPropTypes} from '../propTypes';
 
@@ -18,13 +17,8 @@ export class FileFieldGroup extends React.PureComponent {
 	 */
 	constructor(props) {
 		super(props);
-		this.state = {
-			isOpen: props.isOpen,
-		};
 		this.onChange = this.onChange.bind(this);
 		this.onSelect = this.onSelect.bind(this);
-		this.onInputFocus = this.onInputFocus.bind(this);
-		this.onInputBlur = this.onInputBlur.bind(this);
 	}
 
 	/**
@@ -35,27 +29,12 @@ export class FileFieldGroup extends React.PureComponent {
 		this.props.onValueChange(newValue);
 	}
 
-	/**
-	 * Handle when the field gets focus
-	 */
-	onInputFocus() {
-		this.setState({isOpen: true});
-	}
-
-	/**
-	 * Handle when the field is blurred
-	 */
-	onInputBlur() {
-		this.setState({isOpen: false});
-	}
-
 	/**
 	 * Handle when the option is chosen
 	 * @param {String|number} value
 	 */
 	onSelect(value) {
 		this.props.onValueChange(value);
-		this.setState({isOpen: false});
 	}
 
 	/**
@@ -72,23 +51,20 @@ export class FileFieldGroup extends React.PureComponent {
 				)
 				}
 			>
+			{this.props.message.message &&
+				<Message
+					message={this.props.message}
+				/>
+			}
 				<label
 					htmlFor={this.props.id}
 				>{this.props.label}</label>
-				{this.props.message.message &&
-					<Message
-						message={this.props.message}
-					/>
-				}
-
+
 				<FileSelect
 					id={this.props.id}
 					onValueChange={this.props.onValueChange}
 					value={this.props.value}
 					isRequired={this.props.isRequired}
-					isOpen={this.state.isOpen}
-					onBlur={this.onInputBlur}
-					onFocus={this.onInputFocus}
 					className={this.props.fieldClassName}
 					attachToMailer={this.props.attachToMailer}
 					saveInLibrary={this.props.saveInLibrary}
@@ -113,7 +89,6 @@ FileFieldGroup.defaultProps = {
 		error: false,
 		message: ''
 	},
-	isOpen: false,
 	attachToMailer: false,
 	saveInLibrary: false,
 	type: 'file',

src/components/fields/file-field/FileFieldGroup.test.js

@@ -25,6 +25,22 @@ describe('FileFieldGroup component', () => {
 		expect(component.toJSON()).toMatchSnapshot();
 	});
 
+	it('matches snapshot with message', () => {
+		const component = renderer.create(
+			<FileFieldGroup
+				id={'file-3'}
+				label={'Upload file'}
+				fieldClassName={'file'}
+				onValueChange={genericChangeHandler}
+				message={{
+					message: 'Hi Roy',
+					error: false,
+				}}
+			/>
+		);
+		expect(component.toJSON()).toMatchSnapshot();
+	});
+
 	describe('Inner input', () => {
 		it('Has inner input', () => {
 			const component = mount(
@@ -40,6 +56,24 @@ describe('FileFieldGroup component', () => {
 		});
 	});
 
-
+	describe('Value', () => {
+		it('Passes updated value properly through the onChange handler', () => {
+			let updatedValue = null;
+			const component = mount(
+				<FileFieldGroup
+					id={'file-9'}
+					fieldClassName={'file'}
+					label={'Upload file'}
+					onValueChange={(newValue) => {
+						updatedValue = newValue;
+					}}
+					value={'file1.jpg'}
+				/>
+			);
+
+			component.instance().onChange('file2.jpg');
+			expect(updatedValue).toEqual('file2.jpg');
+		});
+	});
 
 });

src/components/fields/file-field/FileSelect.js

@@ -19,8 +19,6 @@ export class FileSelect extends React.PureComponent {
 		return (
             <ReactS3Uploader
 				id={this.props.id}
-				value={this.props.value}
-				onSelect={this.onSelect}
                 signingUrl={this.props.signingUrl}
                 signingUrlMethod={this.props.signingUrlMethod}
                 accept={this.props.accept}
@@ -62,7 +60,6 @@ FileSelect.propTypes = {
  */
 FileSelect.defaultProps = {
 	fieldClassName: "caldera-file-select",
-	isOpen: false,
 	signingUrl: "/s3/sign",
 	signingUrlMethod: "GET",
 	accept: "image/*",

src/components/fields/file-field/__snapshots__/FileFieldGroup.test.js.snap

@@ -1,22 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FileFieldGroup component matches snapshot with no message 1`] = `
+exports[`FileFieldGroup component matches snapshot with message 1`] = `
 <div
   className="caldera-file-select-group caldera-config-field"
 >
+  <div
+    className="caldera-components-message caldera-components-not-error"
+  >
+    Hi Roy
+  </div>
   <label
     htmlFor="file-3"
   >
     Upload file
   </label>
+  <input
+    accept="image/*"
+    id="file-3"
+    onChange={[Function]}
+    type="file"
+  />
+</div>
+`;
+
+exports[`FileFieldGroup component matches snapshot with no message 1`] = `
+<div
+  className="caldera-file-select-group caldera-config-field"
+>
   
+  <label
+    htmlFor="file-3"
+  >
+    Upload file
+  </label>
   <input
     accept="image/*"
     id="file-3"
     onChange={[Function]}
-    onSelect={undefined}
     type="file"
-    value={undefined}
   />
 </div>
 `;

src/components/fields/file-field/__snapshots__/FileSelect.test.js.snap

@@ -5,8 +5,6 @@ exports[`FileSelect component Matches snapshot 1`] = `
   accept="image/*"
   id="file-1"
   onChange={[Function]}
-  onSelect={undefined}
   type="file"
-  value={undefined}
 />
 `;