clean up the message component in magic field gorup #1

CalderaWP · Jul 7, 2018 · 410d17b · 410d17b
1 parent 53c3522
commit 410d17b
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 6 deletions.
diff --git a/src/components/fields/magic-select/MagicFieldGroup.js b/src/components/fields/magic-select/MagicFieldGroup.js
@@ -167,10 +167,11 @@ export class MagicFieldGroup extends React.PureComponent {
 					id={this.props.id}
 					label={this.props.label}
 				/>
-
-				<Message
-					message={this.props.message}
-				/>
+				{this.props.message.message &&
+					<Message
+						message={this.props.message}
+					/>
+				}
 				{this.state.isOpen &&
 					<ButtonGroup
 						onChange={this.onChangeListType}

diff --git a/src/components/fields/magic-select/MagicFieldGroup.test.js b/src/components/fields/magic-select/MagicFieldGroup.test.js
@@ -12,7 +12,7 @@ const genericChangeHandler = () => {
 describe('MagicFieldGroup component', () => {
 
 
-	it( 'matches snapshot', () => {
+	it( 'matches snapshot with no message', () => {
 		const component = renderer.create(
 			<MagicFieldGroup
 				id={'magic-3'}
@@ -35,6 +35,33 @@ describe('MagicFieldGroup component', () => {
 		expect(component.toJSON() ).toMatchSnapshot();
 	});
 
+	it( 'matches snapshot with message', () => {
+		const component = renderer.create(
+			<MagicFieldGroup
+				id={'magic-3'}
+				label={'Hi Roy'}
+				fieldClassName={'magic'}
+				onValueChange={genericChangeHandler}
+				options={[
+					{
+						label: 'HTML',
+						value: 'html'
+					},
+					{
+						label: 'Plain Text',
+						value: 'plain'
+					}
+				]}
+				isOpen={false}
+				message={{
+					message: 'Hi Roy',
+					error: false,
+				}}
+			/>
+		);
+		expect(component.toJSON() ).toMatchSnapshot();
+	});
+
 	describe( 'Inner input', () => {
 		it('Has inner input', () => {
 			const component = mount(

diff --git a/src/components/fields/magic-select/__snapshots__/MagicFieldGroup.test.js.snap b/src/components/fields/magic-select/__snapshots__/MagicFieldGroup.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MagicFieldGroup component matches snapshot 1`] = `
+exports[`MagicFieldGroup component matches snapshot with message 1`] = `
 <div
   className="caldera-magic-select-group caldera-config-field"
 >
@@ -9,6 +9,46 @@ exports[`MagicFieldGroup component matches snapshot 1`] = `
   >
     Hi Roy
   </label>
+  <div
+    className="caldera-components-message caldera-components-not-error"
+  >
+    Hi Roy
+  </div>
+  <div
+    style={
+      Object {
+        "display": "inline-block",
+      }
+    }
+  >
+    <input
+      aria-autocomplete="list"
+      aria-expanded={false}
+      autoComplete="off"
+      className="caldera-magic-input caldera-magic-input-magic-3 magic"
+      id="magic-3"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      role="combobox"
+      value=""
+    />
+  </div>
+</div>
+`;
+
+exports[`MagicFieldGroup component matches snapshot with no message 1`] = `
+<div
+  className="caldera-magic-select-group caldera-config-field"
+>
+  <label
+    htmlFor="magic-3"
+  >
+    Hi Roy
+  </label>
+  
   <div
     style={
       Object {