Starting tests for FileFieldGroup component

src/App.js

@@ -183,17 +183,19 @@ class App extends Component {
 				</div>
 
 				<div>
-					<h2>File field Select</h2>
+					<h2>File Field</h2>
 					<FileFieldGroup
-						id={'file-1'}
-						label={'File field'}
-						fieldClassName={'file'}
+						id={'file-5'}
+						label={'File Field'}
+						className={'file'}
 						onValueChange={(newValue) => {
 							magicFieldValue = newValue;
-						} }
+					} }	
+						isOpen={true}
 						value={fileFieldValue}
 					/>
 				</div>
+
 
 				<div>
 					<h2>Inputs</h2>
@@ -334,6 +336,9 @@ class App extends Component {
 								label: 'Two'
 							}
 						]}
+						onValueChange={(newValue) => {  //Added after test response, ask Josh if this was on purpose
+							selectFieldValue = newValue;
+						}}
 					/>
 
 				</div>

src/components/fields/FieldGroup.js

@@ -24,9 +24,6 @@ export const FieldGroup = (props) => {
 	if( 'magic' === props.type ){
 		return <MagicFieldGroup {...props} />;
 	}
-	if( 'file' === props.type ){
-		return <FileFieldGroup {...props} />;
-	}
 
 	/**
 	 * Creates the id attribute

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

@@ -4,6 +4,7 @@ import {RenderGroup} from '../../RenderGroup';
 import {Message} from '../messages/Message';
 import {FieldGroup} from '../FieldGroup';
 import {FileSelect} from './FileSelect';
+import {fieldGroupPropTypes} from '../propTypes';
 
 /**
  * Encapsulates a complete File field group
@@ -18,18 +19,12 @@ export class FileFieldGroup extends React.PureComponent {
 	constructor(props) {
 		super(props);
 		this.state = {
-			currentListType: props.defaultList,
 			isOpen: props.isOpen,
 		};
 		this.onChange = this.onChange.bind(this);
-		//this.items = this.items.bind(this);
-		this.onChange = this.onChange.bind(this);
 		this.onSelect = this.onSelect.bind(this);
 		this.onInputFocus = this.onInputFocus.bind(this);
-		//this.renderItem = this.renderItem.bind(this);
 		this.onInputBlur = this.onInputBlur.bind(this);
-		this.onChangeListType = this.onChangeListType.bind(this);
-		//this.listTypeOptions = this.listTypeOptions.bind(this);
 	}
 
 	/**
@@ -54,7 +49,6 @@ export class FileFieldGroup extends React.PureComponent {
 		this.setState({isOpen: false});
 	}
 
-
 	/**
 	 * Handle when the option is chosen
 	 * @param {String|number} value
@@ -64,17 +58,6 @@ export class FileFieldGroup extends React.PureComponent {
 		this.setState({isOpen: false});
 	}
 
-	/**
-	 * Update list of tags to show
-	 * @param {String}newType
-	 */
-	onChangeListType(newType){
-		if( ! this.state.isOpen ){
-			this.setState({isOpen:true});
-		}
-		this.setState({currentListType:newType});
-	}
-
 	/**
 	 * Render FileFieldGroup component
 	 * @return {*}
@@ -89,10 +72,9 @@ export class FileFieldGroup extends React.PureComponent {
 				)
 				}
 			>
-				<FieldGroup.Label
-					id={this.props.id}
-					label={this.props.label}
-				/>
+				<label
+					htmlFor={this.props.id}
+				>{this.props.label}</label>
 				{this.props.message.message &&
 					<Message
 						message={this.props.message}
@@ -101,32 +83,40 @@ export class FileFieldGroup extends React.PureComponent {
 
 				<FileSelect
 					id={this.props.id}
-					//options={this.items()}
 					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}
 				/>
 			</div>
 		);
 	}
 }
 
+/**
+ * Prop definitions for FileFieldGroup component
+ */
+FileFieldGroup.propTypes = fieldGroupPropTypes;
+
 /**
  * Default property values for FileFieldGroup component
  *
  * @type {{}}
  */
 FileFieldGroup.defaultProps = {
-	isOpen: false,
 	message: {
 		error: false,
 		message: ''
 	},
-	type: 'file'
+	isOpen: false,
+	attachToMailer: false,
+	saveInLibrary: false,
+	type: 'file',
 };
 
 /**

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

@@ -0,0 +1,63 @@
+import renderer from 'react-test-renderer';
+import React from 'react';
+import {mount, shallow} from 'enzyme';
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import {FileFieldGroup} from './FileFieldGroup';
+
+Enzyme.configure({adapter: new Adapter()});
+
+const genericChangeHandler = () => {
+};
+describe('FileFieldGroup component', () => {
+
+
+	it('matches snapshot with no message', () => {
+		const component = renderer.create(
+			<FileFieldGroup
+				id={'file-3'}
+				label={'Upload file'}
+				fieldClassName={'file'}
+				onValueChange={genericChangeHandler}
+				isOpen={false}
+			/>
+		);
+		expect(component.toJSON()).toMatchSnapshot();
+	});
+
+	describe('Inner input', () => {
+		it('Has inner input', () => {
+			const component = mount(
+				<FileFieldGroup
+					id={'file-1'}
+					fieldClassName={'file'}
+					label={'Upload file'}
+					onValueChange={genericChangeHandler}
+					isOpen={false}
+				/>
+			);
+			expect(component.find('input')).toHaveLength(1);
+		});
+	});
+
+	it('Receives updated value', () => {
+		let value = 'Fotolia_65093732_femme-mains-rites-automne-2.jpg';
+		const component = mount(
+			<FileFieldGroup
+				id={'file-5'}
+				fieldClassName={'file'}
+				label={'Upload file'}
+				onValueChange={(newValue) => {
+					value = newValue;
+				}}
+
+				value={value}
+				isOpen={true}
+			/>
+		);
+		component.find('input').simulate('focus');
+		component.find('input').simulate('change', {target: {value: 'Fotolia_65093732_femme-mains-rites-automne.jpg'}});
+		expect(value).toEqual('Fotolia_65093732_femme-mains-rites-automne.jpg');
+	});
+
+});