1 files changed, 40 insertions, 35 deletions
diff --git a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
index ca05461c8cf..88463d781ee 100644
--- a/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
+++ b/spec/frontend/monitoring/components/date_time_picker/date_time_picker_spec.js
@@ -18,7 +18,10 @@ describe('DateTimePicker', () => {
   const cancelButtonElement = () => dateTimePicker.find('button.btn-secondary').element;
   const fillInputAndBlur = (input, val) => {
     dateTimePicker.find(input).setValue(val);
-    dateTimePicker.find(input).trigger('blur');
+    return dateTimePicker.vm.$nextTick().then(() => {
+      dateTimePicker.find(input).trigger('blur');
+      return dateTimePicker.vm.$nextTick();
+    });
   };
 
   const createComponent = props => {
@@ -103,52 +106,54 @@ describe('DateTimePicker', () => {
 
   it('displays inline error message if custom time range inputs are invalid', done => {
     createComponent();
-    fillInputAndBlur('#custom-time-from', '2019-10-01abc');
-    fillInputAndBlur('#custom-time-to', '2019-10-10abc');
-
-    dateTimePicker.vm.$nextTick(() => {
-      expect(dateTimePicker.findAll('.invalid-feedback').length).toBe(2);
-      done();
-    });
+    fillInputAndBlur('#custom-time-from', '2019-10-01abc')
+      .then(() => fillInputAndBlur('#custom-time-to', '2019-10-10abc'))
+      .then(() => {
+        expect(dateTimePicker.findAll('.invalid-feedback').length).toBe(2);
+        done();
+      })
+      .catch(done);
   });
 
   it('keeps apply button disabled with invalid custom time range inputs', done => {
     createComponent();
-    fillInputAndBlur('#custom-time-from', '2019-10-01abc');
-    fillInputAndBlur('#custom-time-to', '2019-09-19');
-
-    dateTimePicker.vm.$nextTick(() => {
-      expect(applyButtonElement().getAttribute('disabled')).toBe('disabled');
-      done();
-    });
+    fillInputAndBlur('#custom-time-from', '2019-10-01abc')
+      .then(() => fillInputAndBlur('#custom-time-to', '2019-09-19'))
+      .then(() => {
+        expect(applyButtonElement().getAttribute('disabled')).toBe('disabled');
+        done();
+      })
+      .catch(done);
   });
 
   it('enables apply button with valid custom time range inputs', done => {
     createComponent();
-    fillInputAndBlur('#custom-time-from', '2019-10-01');
-    fillInputAndBlur('#custom-time-to', '2019-10-19');
-
-    dateTimePicker.vm.$nextTick(() => {
-      expect(applyButtonElement().getAttribute('disabled')).toBeNull();
-      done();
-    });
+    fillInputAndBlur('#custom-time-from', '2019-10-01')
+      .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
+      .then(() => {
+        dateTimePicker.vm.$nextTick(() => {
+          expect(applyButtonElement().getAttribute('disabled')).toBeNull();
+          done();
+        });
+      })
+      .catch(done);
   });
 
   it('returns an object when apply is clicked', done => {
     createComponent();
-    fillInputAndBlur('#custom-time-from', '2019-10-01');
-    fillInputAndBlur('#custom-time-to', '2019-10-19');
-
-    dateTimePicker.vm.$nextTick(() => {
-      jest.spyOn(dateTimePicker.vm, '$emit');
-      applyButtonElement().click();
-
-      expect(dateTimePicker.vm.$emit).toHaveBeenCalledWith('onApply', {
-        end: '2019-10-19T00:00:00Z',
-        start: '2019-10-01T00:00:00Z',
-      });
-      done();
-    });
+    fillInputAndBlur('#custom-time-from', '2019-10-01')
+      .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
+      .then(() => {
+        jest.spyOn(dateTimePicker.vm, '$emit');
+        applyButtonElement().click();
+
+        expect(dateTimePicker.vm.$emit).toHaveBeenCalledWith('onApply', {
+          end: '2019-10-19T00:00:00Z',
+          start: '2019-10-01T00:00:00Z',
+        });
+        done();
+      })
+      .catch(done);
   });
 
   it('hides the popover with cancel button', done => {