fix(deploy): display validation result only after first submission

Closes #1405
camunda · Jul 24, 2019 · 24248c4 · 24248c4
1 parent 354dc2c
commit 24248c4
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 11 deletions.
diff --git a/client/src/app/modals/deploy-diagram/View.js b/client/src/app/modals/deploy-diagram/View.js
@@ -53,8 +53,8 @@ class View extends PureComponent {
       initialValues,
       onClose,
       onDeploy,
-      onFocusChange,
-      validators
+      validators,
+      onFocusChange = noop
     } = this.props;
 
     const deployOpen = this.state.deployOpen;
@@ -191,7 +191,7 @@ function FormControl({
   label,
   onFocusChange,
   validated,
-  form: { touched, errors, isSubmitting },
+  form: { touched, errors, isSubmitting, submitCount },
   ...props
 }) {
   const { name } = field;
@@ -209,12 +209,12 @@ function FormControl({
           onBlur={ compose(onFocusChange, field.onBlur) }
           disabled={ isSubmitting }
           className={ validated && classnames({
-            valid: !errors[name] && touched[name],
-            invalid: errors[name] && touched[name]
+            valid: submitCount && !errors[name] && touched[name],
+            invalid: submitCount && errors[name] && touched[name]
           }) }
         />
 
-        { errors[name] && touched[name] ? (
+        { errors[name] && touched[name] && submitCount ? (
           <div className="hint error">{errors[name]}</div>
         ) : null}
 
@@ -303,3 +303,5 @@ function compose(...handlers) {
     handlers.forEach(handler => handler(...args));
   };
 }
+
+function noop() {}
diff --git a/client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js b/client/src/app/modals/deploy-diagram/__tests__/DeployDiagramModalSpec.js
@@ -520,32 +520,95 @@ describe('<DeployDiagramModal>', function() {
 
   describe('<View>', function() {
 
+    let wrapper;
+
+    afterEach(function() {
+      wrapper && wrapper.unmount();
+    });
+
     it('should render', function() {
       shallow(<View />);
     });
 
 
     it('should render error message', function() {
       // given
-      const wrapper = mount(<View validators={ { auth: {} } } error={ 'Error message' } />);
+      wrapper = mount(<View validators={ { auth: {} } } error={ 'Error message' } />);
 
       // then
       expect(wrapper.find('.deploy-message.error')).to.have.lengthOf(1);
-
-      wrapper.unmount();
     });
 
 
     it('should render success message', function() {
       // given
-      const wrapper = mount(<View validators={ { auth: {} } } success={ 'Success message' } />);
+      wrapper = mount(<View validators={ { auth: {} } } success={ 'Success message' } />);
 
       // then
       expect(wrapper.find('.deploy-message.success')).to.have.lengthOf(1);
+    });
 
-      wrapper.unmount();
+
+    it('should not display validation error before first submit', function(done) {
+      // given
+      wrapper = mount(<View
+        initialValues={ { deploymentName: '' } }
+        validators={ { deploymentName: () => 'Error', auth: {} } }
+      />);
+
+      // when
+      const input = wrapper.find('input[name="deploymentName"]');
+      input.simulate('change', {
+        target: {
+          name: 'deploymentName',
+          value: ''
+        }
+      });
+
+      // then
+      nextTickExpect(done, () => expect(wrapper.find('.invalid')).to.have.lengthOf(0));
+    });
+
+
+    it('should display validation error after first submit', function(done) {
+      // given
+      wrapper = mount(<View
+        initialValues={ { deploymentName: '' } }
+        validators={ { deploymentName: () => 'Error', auth: {} } }
+      />);
+
+      const input = wrapper.find('input[name="deploymentName"]');
+      input.simulate('change', {
+        target: {
+          name: 'deploymentName',
+          value: ''
+        }
+      });
+
+      // when
+      wrapper.find('form').simulate('submit');
+
+      // then
+      nextTickExpect(done, () =>{
+        expect(wrapper.find('.valid')).to.have.lengthOf(1);
+      });
     });
 
   });
 
 });
+
+
+
+// helper
+function nextTickExpect(done, fn) {
+  process.nextTick(() => {
+    try {
+      fn();
+    } catch (error) {
+      return done(error);
+    }
+
+    done();
+  });
+}