#2766 tests to prove that the isRequired prop is not set correctly se…

…rver-side
CalderaWP · Nov 19, 2018 · 7ff3749 · 7ff3749
1 parent 9e33d6d
commit 7ff3749
Show file tree

Hide file tree

Showing 9 changed files with 290 additions and 215 deletions.
diff --git a/clients/render/build/index.min.js b/clients/render/build/index.min.js
@@ -2211,7 +2211,7 @@ var CalderaFormsFieldPropType = __WEBPACK_IMPORTED_MODULE_1_prop_types___default
 	fieldIdAttr: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string.isRequired,
 	fieldLabel: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string.isRequired,
 	fieldCaption: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string.isRequired,
-	required: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.bool,
+	isRequired: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.boola,
 	fieldPlaceHolder: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string.isRequired,
 	fieldDefault: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string,
 	fieldValue: __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.oneOfType([__WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.string, __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.number, __WEBPACK_IMPORTED_MODULE_1_prop_types___default.a.array])
@@ -25937,7 +25937,7 @@ var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
 	    fieldId = field.fieldId,
 	    fieldLabel = field.fieldLabel,
 	    fieldCaption = field.fieldCaption,
-	    required = field.required,
+	    isRequired = field.isRequired,
 	    fieldPlaceHolder = field.fieldPlaceHolder,
 	    fieldDefault = field.fieldDefault,
 	    fieldValue = field.fieldValue,
@@ -26050,6 +26050,25 @@ var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
 		);
 	}
 
+	/**
+  * Displays field required indicator
+  *
+  * @since 1.8.0
+  *
+  * @return {*}
+  * @constructor
+  */
+	function RequiredIndicator() {
+		var requiredStyle = {
+			color: '#ee0000'
+		};
+		return wp.element.createElement(
+			'span',
+			{ 'aria-hidden': 'true', role: 'presentation', className: 'field_required', style: requiredStyle },
+			'*'
+		);
+	}
+
 	var className = 'form-group cf2-field-group';
 	className = hasError ? className + ' has-error' : className;
 
@@ -26068,7 +26087,8 @@ var CalderaFormsFieldGroup = function CalderaFormsFieldGroup(props) {
 				htmlFor: fieldIdAttr,
 				id: fieldIdAttr + 'Label'
 			},
-			fieldLabel
+			fieldLabel,
+			isRequired && wp.element.createElement(RequiredIndicator, null)
 		),
 		wp.element.createElement(Inside, null),
 		hasCaption && wp.element.createElement(
@@ -29983,6 +30003,10 @@ FileInput.fieldConfigToProps = function (fieldConfig) {
 		field: fieldConfig
 	};
 	var configOptionProps = ['multiple', 'multiUploadText', 'text'];
+
+	if (!props.field.hasOwnProperty('isRequired')) {
+		props.field.isRequired = false;
+	}
 	if (fieldConfig.hasOwnProperty('configOptions')) {
 		var configOptions = fieldConfig.configOptions;
 

diff --git a/clients/render/build/index.min.js.map b/clients/render/build/index.min.js.map
diff --git a/clients/render/components/CalderaFormsFieldGroup.js b/clients/render/components/CalderaFormsFieldGroup.js
@@ -22,7 +22,7 @@ export const CalderaFormsFieldGroup = (props) => {
 		fieldId,
 		fieldLabel,
 		fieldCaption,
-		required,
+		isRequired,
 		fieldPlaceHolder,
 		fieldDefault,
 		fieldValue,
@@ -124,6 +124,21 @@ export const CalderaFormsFieldGroup = (props) => {
 		</span>;
 	}
 
+	/**
+	 * Displays field required indicator
+	 *
+	 * @since 1.8.0
+	 *
+	 * @return {*}
+	 * @constructor
+	 */
+	function RequiredIndicator(){
+		const requiredStyle = {
+			color: '#ee0000'
+		};
+		return <span aria-hidden="true" role="presentation" className="field_required" style={requiredStyle}>*</span>;
+	}
+
 	let className = 'form-group cf2-field-group';
 	className = hasError ? className + ' has-error' : className;
 
@@ -140,6 +155,10 @@ export const CalderaFormsFieldGroup = (props) => {
 				id={`${fieldIdAttr}Label`}
 			>
 				{fieldLabel}
+				{isRequired &&
+					<RequiredIndicator/>
+
+				}
 			</label>
 			<Inside/>
 

diff --git a/clients/render/components/CalderaFormsFieldRender.js b/clients/render/components/CalderaFormsFieldRender.js
@@ -55,7 +55,7 @@ export const CalderaFormsFieldPropType = PropTypes.shape({
 	fieldIdAttr: PropTypes.string.isRequired,
 	fieldLabel: PropTypes.string.isRequired,
 	fieldCaption: PropTypes.string.isRequired,
-	required: PropTypes.bool,
+	isRequired: PropTypes.boola,
 	fieldPlaceHolder: PropTypes.string.isRequired,
 	fieldDefault: PropTypes.string,
 	fieldValue: PropTypes.oneOfType(

diff --git a/clients/render/components/Fields/FileInput.js b/clients/render/components/Fields/FileInput.js
@@ -197,6 +197,10 @@ FileInput.fieldConfigToProps = (fieldConfig) => {
 		'multiUploadText',
 		'text'
 	];
+
+	if( ! props.field.hasOwnProperty('isRequired' ) ){
+		props.field.isRequired = false;
+	}
 	if (fieldConfig.hasOwnProperty('configOptions')) {
 
 		const {configOptions} = fieldConfig;

diff --git a/clients/tests/unit/render/CalderaFormsFieldGroup.test.js b/clients/tests/unit/render/CalderaFormsFieldGroup.test.js
@@ -62,7 +62,21 @@ describe('CalderaFormsFieldGroup component', () => {
 
 		expect(testInstance.findByType('label').props.htmlFor).toBe(fieldIdAttr);
 		expect(testInstance.findByType('label').props.className).toBe('control-label');
-		expect(testInstance.findByType('label').props.children).toBe(fieldConfig.fieldLabel);
+
+
+	});
+
+	it('Creates the label with the right text', () => {
+		const testRenderer = mount(<CalderaFormsFieldGroup
+			onChange={handler}
+			field={fieldConfig}
+			shouldDiable={true}
+			getFieldConfig={getFieldConfig}
+		/>);
+		const testInstance = testRenderer.root;
+
+
+		expect(testRenderer.contains(fieldConfig.fieldLabel) ).toBe( true );
 
 
 	});

diff --git a/clients/tests/unit/render/Fields/FileInput.test.js b/clients/tests/unit/render/Fields/FileInput.test.js
@@ -76,10 +76,10 @@ describe('File Field ', () => {
 	});
 
 	it( 'Sets field.isRequired to false if not passed', () => {
-		let field = fileFieldConfigs.required_multiple_no_button_text;
+		let field = fileFieldConfigs.not_required_single;
 		delete field.isRequired;
 		const prepared = FileInput.fieldConfigToProps(field);
-		expect(prepared.isRequired).toEqual(true);
+		expect(prepared.field.isRequired).toEqual(false);
 	});
 
 	Object.keys(fileFieldConfigs).forEach(fieldId => {

diff --git a/clients/tests/unit/render/Fields/Mocks/MockFileRenderer.test.js b/clients/tests/unit/render/Fields/Mocks/MockFileRenderer.test.js
@@ -193,25 +193,4 @@ describe('DOM testing file components', () => {
 		expect(component.find('.btn').text()).toEqual("The Custom Text");
 	});
 
-	it('Shows * inside .field_required span when field is required', () => {
-		let prepared = FileInput.fieldConfigToProps(fileFieldConfigs.required_single_allow_png);
-		let field = prepared.field;
-		const {multiple, multiUploadText, inputProps} = prepared;
-
-		const component = shallow(
-			<FileInput
-				field={field}
-				multiple={multiple}
-				multiUploadText={multiUploadText}
-				onChange={() => {}}
-				inputProps={inputProps}
-			/>
-		);
-
-		expect( component.find( '.field_required').length ).toBe( 1 );
-		expect( component.contains( '*' ) ).toBe( true );
-
-	});
-
-
 });