Skip to content

Commit

Permalink
#19 fix bad merge
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh Pollock committed Jul 26, 2018
1 parent 9ef727a commit c91fa95
Show file tree
Hide file tree
Showing 7 changed files with 186 additions and 59 deletions.
61 changes: 61 additions & 0 deletions src/components/__snapshots__/renderGroup.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -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"
disabled={false}
id="RendersARegularButtonSnapShotTest"
onBlur={undefined}
onClick={[Function]}
onFocus={undefined}
/>
</div>
</div>
</div>
`;

exports[`The render group component Button fields inside render groups Button RenderGroup snapshots Renders a submit input 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"
disabled={false}
id="cf-button-example"
onBlur={undefined}
onClick={[Function]}
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"
Expand Down
24 changes: 24 additions & 0 deletions src/components/export.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,29 @@ describe( 'conditionals export', () => {
});


describe( 'fields export', () => {
const {fields} = Components;
it( 'exports FieldGroup', () => {
expect( typeof fields.FieldGroup ).toEqual( 'function' );
});
it( 'exports SelectField', () => {
expect( typeof fields.SelectField ).toEqual( 'function' );
});
it( 'exports Input', () => {
expect( typeof fields.Input ).toEqual( 'function' );
});
it( 'exports Message', () => {
expect( typeof fields.Message ).toEqual( 'function' );
});
it( 'exports ButtonGroup', () => {
expect( typeof fields.ButtonGroup ).toEqual( 'function' );
});
it( 'exports Button', () => {
expect( typeof fields.Button ).toEqual( 'function' );
});
});



});

87 changes: 52 additions & 35 deletions src/components/fields/FieldInner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand All @@ -31,44 +33,59 @@ 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}
onValueChange={props.onValueChange}
fieldClassName={inputClassName()}
ariaDescribedbyAttr={ariaIdAttr()}
value={props.value}
onClick={props.onClick}
inputType={props.inputType}
disabled={props.disabled}
onBlur={props.onBlur}
onFocus={props.onFocus}
/>);
}

};
Expand Down
2 changes: 1 addition & 1 deletion src/components/fields/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const Button = (props) => {
};

let propTypes = fieldPropTypes;
delete fieldPropTypes.onValueChange;
delete propTypes.onValueChange;

/**
* Prop type definitions for Button Component
Expand Down
18 changes: 18 additions & 0 deletions src/components/fields/factories/prepareFieldConfig.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down
4 changes: 3 additions & 1 deletion src/components/fields/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import {SelectField} from './select/SelectField';
import {Input} from './input/Input';
import {Message} from './messages/Message';
import {ButtonGroup} from './button-group/ButtonGroup';
import {Button} from "./button/Button";

module.exports = {
FieldGroup,
SelectField: SelectField,
Input,
Message,
ButtonGroup
ButtonGroup,
Button
};
49 changes: 27 additions & 22 deletions src/components/renderGroup.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()});

Expand Down Expand Up @@ -513,17 +514,19 @@ describe('The render group component', () => {
it('Get values update ', () => {
let value = '1';
const component = mount(
<RenderGroup configFields={[
{
...magicField,
value,
onValueChange: (newValue) => {
value = newValue;
<RenderGroup
configFields={[
{
...magicField,
value,
onValueChange: (newValue) => {
value = newValue;
}
}
}
]}/>
]}
/>
);
component.find('input').simulate('change', { target: { value: 3 } });
component.find('input').simulate('change', {target: {value: 3}});

expect(value).toBe(3);
});
Expand All @@ -542,7 +545,7 @@ describe('The render group component', () => {
inputType: 'submit'
};

it( 'Allows inputType of button', () => {
it('Allows inputType of button', () => {
const field = {
...buttonField,
inputType: 'button'
Expand All @@ -552,23 +555,25 @@ describe('The render group component', () => {
expect(prepared.inputType).toBe('button');
});

it( 'Allows onClick prop to pass', () => {
it('Allows onClick prop to pass', () => {
const prepared = prepareFieldConfig(buttonField);
expect(typeof buttonField.onClick).toBe('function');
expect(typeof prepared.onClick ).toBe( 'function' );
expect(typeof prepared.onClick).toBe('function');
});

describe( 'Button RenderGroup snapshots', () => {
it( 'Renders a submit input', ( ) => {
describe('Button RenderGroup snapshots', () => {
it('Renders a submit input', () => {
const component = renderer.create(
<RenderGroup
configFields={[buttonField]}
onClick={() => {
}}
/>
);
expect(component.toJSON()).toMatchSnapshot();
});

it( 'Renders a regular button', ( ) => {
it('Renders a regular button', () => {
const component = renderer.create(
<RenderGroup
configFields={[{
Expand All @@ -583,7 +588,7 @@ describe('The render group component', () => {
});


it( 'Renders a submit button', ( ) => {
it('Renders a submit button', () => {
const component = mount(
<RenderGroup
configFields={[buttonField]}
Expand All @@ -594,7 +599,7 @@ describe('The render group component', () => {
});


it( 'Renders a regular button', ( ) => {
it('Renders a regular button', () => {
const component = mount(
<RenderGroup
configFields={[{
Expand All @@ -609,8 +614,8 @@ describe('The render group component', () => {
});


describe( 'onClick callback', ( ) => {
it( 'Clicks submit inputs', () => {
describe('onClick callback', () => {
it('Clicks submit inputs', () => {
let clicked = false;
const component = mount(
<RenderGroup
Expand All @@ -622,12 +627,12 @@ describe('The render group component', () => {
}]}
/>
);
component.find( 'input' ).simulate('click' );
component.find('input').simulate('click');
expect(clicked).toBe(true);
});


it( 'Clicks button inputs', () => {
it('Clicks button inputs', () => {
let clicked = false;
const component = mount(
<RenderGroup
Expand All @@ -640,7 +645,7 @@ describe('The render group component', () => {
}]}
/>
);
component.find( 'button' ).simulate('click' );
component.find('button').simulate('click');
expect(clicked).toBe(true);
});

Expand Down

0 comments on commit c91fa95

Please sign in to comment.