Merge branch 'xanf-vtu-30-trigger' into 'master'

Wrap trigger into nextTick calls

Closes #192019

See merge request gitlab-org/gitlab!22324

ee/spec/frontend/analytics/cycle_analytics/components/add_stage_button_spec.js

@@ -27,8 +27,10 @@ describe('AddStageButton', () => {
       wrapper = createComponent();
       expect(wrapper.emitted().showform).toBeUndefined();
       wrapper.trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().showform.length).toBe(1);
       });
+    });
 
     it('does not have the active class', () => {
       expect(wrapper.classes('active')).toBe(false);

ee/spec/frontend/analytics/cycle_analytics/components/custom_stage_form_spec.js

@@ -362,6 +362,7 @@ describe('CustomStageForm', () => {
 
         return Vue.nextTick(() => {
           selectDropdownOption(wrapper, sel.endEvent, 1);
+          return Vue.nextTick();
         });
       });
 
@@ -394,9 +395,14 @@ describe('CustomStageForm', () => {
 
           selectDropdownOption(wrapper, sel.startEvent, startEventIndex);
 
-          return Vue.nextTick(() => {
+          return Vue.nextTick()
+            .then(() => {
               selectDropdownOption(wrapper, sel.endEvent, stopEventIndex);
+              return Vue.nextTick();
+            })
+            .then(() => {
               wrapper.find(sel.name).setValue('Cool stage');
+              return Vue.nextTick();
             });
         });
 
@@ -437,11 +443,13 @@ describe('CustomStageForm', () => {
           ];
 
           wrapper.find(sel.submit).trigger('click');
+          return Vue.nextTick().then(() => {
             event = findEvent(STAGE_ACTIONS.CREATE);
             expect(event[0]).toEqual(res);
           });
         });
       });
+    });
 
     describe('Cancel button', () => {
       beforeEach(() => {

ee/spec/frontend/analytics/cycle_analytics/components/labels_selector_spec.js

@@ -50,9 +50,11 @@ describe('Cycle Analytics LabelsSelector', () => {
         const elem = wrapper.findAll('.dropdown-item').at(2);
         elem.trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted('selectLabel').length > 0).toBe(true);
           expect(wrapper.emitted('selectLabel')[0]).toContain(groupLabels[1].id);
         });
+      });
 
       it('will emit the "clearLabel" event if it is the default item', () => {
         expect(wrapper.emitted('clearLabel')).toBeUndefined();
@@ -60,10 +62,12 @@ describe('Cycle Analytics LabelsSelector', () => {
         const elem = wrapper.findAll('.dropdown-item').at(0);
         elem.trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted('clearLabel').length > 0).toBe(true);
         });
       });
     });
+  });
 
   describe('with selectedLabelId set', () => {
     beforeEach(() => {

ee/spec/frontend/analytics/cycle_analytics/components/stage_dropdown_filter_spec.js

@@ -62,6 +62,7 @@ describe('StageDropdownFilter component', () => {
 
         item.trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([
             {
               name: 'selected',
@@ -70,6 +71,7 @@ describe('StageDropdownFilter component', () => {
           ]);
         });
       });
+    });
 
     describe('clicking a deselected stage', () => {
       it('should add to selection', () => {
@@ -77,10 +79,15 @@ describe('StageDropdownFilter component', () => {
           .at(0)
           .trigger('click');
 
+        return wrapper.vm
+          .$nextTick()
+          .then(() => {
             findDropdownItems()
               .at(0)
               .trigger('click');
-
+            return wrapper.vm.$nextTick();
+          })
+          .then(() => {
             expect(wrapper.emittedByOrder()).toEqual([
               {
                 name: 'selected',
@@ -94,4 +101,5 @@ describe('StageDropdownFilter component', () => {
           });
       });
     });
+  });
 });

ee/spec/frontend/analytics/shared/components/daterange_spec.js

@@ -57,6 +57,7 @@ describe('Daterange component', () => {
         input.setValue('2019-01-01');
         input.trigger('change');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([
             {
               name: 'change',
@@ -66,6 +67,7 @@ describe('Daterange component', () => {
         });
       });
     });
+  });
 
   describe('computed', () => {
     describe('dateRange', () => {

ee/spec/frontend/analytics/shared/components/groups_dropdown_filter_spec.js

@@ -142,6 +142,7 @@ describe('GroupsDropdownFilter component', () => {
         .at(0)
         .trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emittedByOrder()).toEqual([
           {
             name: 'selected',
@@ -149,12 +150,14 @@ describe('GroupsDropdownFilter component', () => {
           },
         ]);
       });
+    });
 
     it('should change selection when new group is clicked', () => {
       findDropdownItems()
         .at(1)
         .trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emittedByOrder()).toEqual([
           {
             name: 'selected',
@@ -162,6 +165,7 @@ describe('GroupsDropdownFilter component', () => {
           },
         ]);
       });
+    });
 
     it('renders an avatar in the dropdown button when the group has an avatar_url', done => {
       findDropdownItems()

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -175,6 +175,7 @@ describe('ProjectsDropdownFilter component', () => {
           .at(0)
           .trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([
             {
               name: 'selected',
@@ -182,12 +183,14 @@ describe('ProjectsDropdownFilter component', () => {
             },
           ]);
         });
+      });
 
       it('should change selection when new project is clicked', () => {
         findDropdownItems()
           .at(1)
           .trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([
             {
               name: 'selected',
@@ -195,12 +198,14 @@ describe('ProjectsDropdownFilter component', () => {
             },
           ]);
         });
+      });
 
       it('selection should be emptied when a project is deselected', () => {
         const project = findDropdownItems().at(0);
         project.trigger('click');
         project.trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([
             {
               name: 'selected',
@@ -212,6 +217,7 @@ describe('ProjectsDropdownFilter component', () => {
             },
           ]);
         });
+      });
 
       it('renders an avatar in the dropdown button when the project has an avatar_url', done => {
         findDropdownItems()
@@ -294,10 +300,15 @@ describe('ProjectsDropdownFilter component', () => {
           .at(0)
           .trigger('click');
 
+        return wrapper.vm
+          .$nextTick()
+          .then(() => {
             findDropdownItems()
               .at(1)
               .trigger('click');
-
+            return wrapper.vm.$nextTick();
+          })
+          .then(() => {
             expect(wrapper.emittedByOrder()).toEqual([
               {
                 name: 'selected',
@@ -309,6 +320,7 @@ describe('ProjectsDropdownFilter component', () => {
               },
             ]);
           });
+      });
 
       it('should remove from selection when clicked again', () => {
         const item = findDropdownItems().at(0);
@@ -316,6 +328,7 @@ describe('ProjectsDropdownFilter component', () => {
         item.trigger('click');
         item.trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([
             {
               name: 'selected',
@@ -327,17 +340,21 @@ describe('ProjectsDropdownFilter component', () => {
             },
           ]);
         });
+      });
 
       it('renders the correct placeholder text when multiple projects are selected', done => {
         findDropdownItems()
           .at(0)
           .trigger('click');
-
+        return wrapper.vm
+          .$nextTick()
+          .then(() => {
             findDropdownItems()
               .at(1)
               .trigger('click');
-
-        wrapper.vm.$nextTick(() => {
+            return wrapper.vm.$nextTick();
+          })
+          .then(() => {
             expect(findDropdownButton().text()).toBe('2 projects selected');
             done();
           });

ee/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js

@@ -45,17 +45,21 @@ describe('Design reply form component', () => {
         ctrlKey: true,
       });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('submitForm')).toBeFalsy();
       });
+    });
 
     it('does not emit submitForm event on textarea meta+enter keydown', () => {
       findTextarea().trigger('keydown.enter', {
         metaKey: true,
       });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('submitForm')).toBeFalsy();
       });
     });
+  });
 
   describe('when form has text', () => {
     beforeEach(() => {
@@ -71,35 +75,45 @@ describe('Design reply form component', () => {
     it('emits submitForm event on button click', () => {
       findSubmitButton().trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('submitForm')).toBeTruthy();
       });
+    });
 
     it('emits submitForm event on textarea ctrl+enter keydown', () => {
       findTextarea().trigger('keydown.enter', {
         ctrlKey: true,
       });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('submitForm')).toBeTruthy();
       });
+    });
 
     it('emits submitForm event on textarea meta+enter keydown', () => {
       findTextarea().trigger('keydown.enter', {
         metaKey: true,
       });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('submitForm')).toBeTruthy();
       });
+    });
 
     it('emits input event on changing textarea content', () => {
       findTextarea().setValue('test2');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('input')).toBeTruthy();
       });
+    });
 
     it('emits cancelForm event on pressing escape button on textarea', () => {
       findTextarea().trigger('keyup.esc');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('cancelForm')).toBeTruthy();
       });
     });
+  });
 });

ee/spec/frontend/design_management/components/design_overlay_spec.js

@@ -53,8 +53,10 @@ describe('Design overlay component', () => {
     createComponent();
     wrapper.find('.image-diff-overlay-add-comment').trigger('click', { offsetX: 10, offsetY: 10 });
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('openCommentForm')).toEqual([[{ x: 10, y: 10 }]]);
     });
+  });
 
   describe('when has notes', () => {
     beforeEach(() => {

ee/spec/frontend/design_management/pages/index_spec.js

@@ -322,11 +322,17 @@ describe('Design management index page', () => {
       findDesignCheckboxes()
         .at(0)
         .trigger('click');
+
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
           findDesignCheckboxes()
             .at(1)
             .trigger('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
           expect(findDeleteButton().exists()).toBe(true);
           expect(findSelectAllButton().text()).toBe('Deselect all');
           findDeleteButton().vm.$emit('deleteSelectedDesigns');
@@ -352,9 +358,13 @@ describe('Design management index page', () => {
       findDesignCheckboxes()
         .at(0)
         .trigger('click');
-      findSelectAllButton().vm.$emit('click');
 
-      return wrapper.vm.$nextTick().then(() => {
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          findSelectAllButton().vm.$emit('click');
+        })
+        .then(() => {
           expect(findDeleteButton().props().hasSelectedDesigns).toBe(false);
           expect(findSelectAllButton().text()).toBe('Select all');
           expect(wrapper.vm.selectedDesigns).toEqual([]);

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

@@ -109,6 +109,7 @@ describe('dashboard', () => {
     describe('project selector modal', () => {
       beforeEach(() => {
         wrapper.find(GlButton).trigger('click');
+        return wrapper.vm.$nextTick();
       });
 
       it('should fire the add projects action on ok', () => {

ee/spec/frontend/epic/components/sidebar_items/sidebar_date_picker_spec.js

@@ -200,8 +200,11 @@ describe('SidebarDatePicker', () => {
     createComponent({ canUpdate: true });
 
     wrapper.find('input').trigger('click');
+
+    return wrapper.vm.$nextTick(() => {
       expect(wrapper.emitted().toggleDateType).toStrictEqual([[true]]);
     });
+  });
 
   it('emits `toggleCollapse` event when toggle-sidebar emits `toggle` event', () => {
     createComponent({ showToggleSidebar: true });

ee/spec/frontend/feature_flags/components/form_spec.js

@@ -303,25 +303,33 @@ describe('feature flag form', () => {
       it('should emit handleSubmit with the updated data', () => {
         wrapper.find('#feature-flag-name').setValue('feature_flag_2');
 
+        return wrapper.vm
+          .$nextTick()
+          .then(() => {
             wrapper
               .find('.js-new-scope-name')
               .find(EnvironmentsDropdown)
               .vm.$emit('selectEnvironment', 'review');
 
+            return wrapper.vm.$nextTick();
+          })
+          .then(() => {
             wrapper
               .find('.js-add-new-scope')
               .find(ToggleButton)
               .vm.$emit('change', true);
-
+          })
+          .then(() => {
             wrapper.find(ToggleButton).vm.$emit('change', true);
-
-        return wrapper.vm
-          .$nextTick()
+            return wrapper.vm.$nextTick();
+          })
 
           .then(() => {
             selectFirstRolloutStrategyOption(0);
+            return wrapper.vm.$nextTick();
+          })
+          .then(() => {
             selectFirstRolloutStrategyOption(2);
-
             return wrapper.vm.$nextTick();
           })
           .then(() => {

ee/spec/frontend/ide/components/terminal/session_spec.js

@@ -66,10 +66,12 @@ describe('EE IDE TerminalSession', () => {
       const button = wrapper.find('button');
       button.trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(button.text()).toEqual('Stop Terminal');
         expect(actions.stopSession).toHaveBeenCalled();
       });
     });
+  });
 
   [STOPPING, STOPPED].forEach(status => {
     it(`show stop button when status is ${status}`, () => {
@@ -79,8 +81,10 @@ describe('EE IDE TerminalSession', () => {
       const button = wrapper.find('button');
       button.trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(button.text()).toEqual('Restart Terminal');
         expect(actions.restartSession).toHaveBeenCalled();
       });
     });
+  });
 });

ee/spec/frontend/packages/details/components/maven_installation_spec.js

@@ -102,11 +102,16 @@ describe('MavenInstallation', () => {
 
     it('should track when the installation tab is clicked', () => {
       setupTab().trigger('click');
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
           installationTab().trigger('click');
-
+        })
+        .then(() => {
           expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
             label,
           });
         });
     });
+  });
 });

ee/spec/frontend/packages/details/components/npm_installation_spec.js

@@ -97,11 +97,17 @@ describe('NpmInstallation', () => {
 
     it('should track when the installation tab is clicked', () => {
       setupTab().trigger('click');
-      installationTab().trigger('click');
 
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
+          installationTab().trigger('click');
+        })
+        .then(() => {
           expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.INSTALLATION, {
             label,
           });
         });
     });
+  });
 });

ee/spec/frontend/related_issues/components/related_issuable_input_spec.js

@@ -81,9 +81,11 @@ describe('RelatedIssuableInput', () => {
 
       wrapper.find('li').trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(document.activeElement).toBe(wrapper.find({ ref: 'input' }).element);
       });
     });
+  });
 
   describe('when filling in the input', () => {
     it('emits addIssuableFormInput with data', () => {

ee/spec/frontend/security_dashboard/components/project_list_spec.js

@@ -95,7 +95,9 @@ describe('Project List component', () => {
 
     getFirstRemoveButton().trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('projectRemoved')).toHaveLength(1);
       expect(wrapper.emitted('projectRemoved')).toEqual([[projectData]]);
     });
+  });
 });

ee/spec/frontend/vue_mr_widget/components/approvals/approvals_footer_spec.js

@@ -146,9 +146,11 @@ describe('EE MRWidget approvals footer', () => {
 
         button.trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emittedByOrder()).toEqual([{ name: 'input', args: [true] }]);
         });
       });
+    });
 
     it('renders avatar list', () => {
       const avatars = findAvatars();

ee/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js

@@ -223,16 +223,19 @@ describe('ReadyToMerge', () => {
       dialog.vm.show = jest.fn();
       vm.handleMergeButtonClick = jest.fn();
       findMergeButtonDropdown().trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
         findMergeImmediatelyButton().trigger('click');
+        return wrapper.vm.$nextTick();
+      });
     };
 
     it('should show a warning dialog asking for confirmation if the user is trying to skip the merge train', () => {
       factory({ preferredAutoMergeStrategy: MT_MERGE_STRATEGY });
-      clickMergeImmediately();
-
+      return clickMergeImmediately().then(() => {
         expect(dialog.vm.show).toHaveBeenCalled();
         expect(vm.handleMergeButtonClick).not.toHaveBeenCalled();
       });
+    });
 
     it('should perform the merge when the user confirms their intent to merge immediately', () => {
       factory({ preferredAutoMergeStrategy: MT_MERGE_STRATEGY });
@@ -245,12 +248,12 @@ describe('ReadyToMerge', () => {
 
     it('should not ask for confirmation in non-merge train scenarios', () => {
       factory({ isPipelineActive: true, onlyAllowMergeIfPipelineSucceeds: false });
-      clickMergeImmediately();
-
+      return clickMergeImmediately().then(() => {
         expect(dialog.vm.show).not.toHaveBeenCalled();
         expect(vm.handleMergeButtonClick).toHaveBeenCalled();
       });
     });
+  });
 
   describe('cannot merge', () => {
     describe('when isMergeAllowed=false', () => {

ee/spec/frontend/vue_shared/security_reports/components/dismiss_button_spec.js

@@ -23,8 +23,10 @@ describe('DismissalButton', () => {
 
     it('should emit dismiss vulnerabilty when clicked', () => {
       wrapper.find(LoadingButton).trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().dismissVulnerability).toBeTruthy();
       });
+    });
 
     it('should render the dismiss with comment button', () => {
       expect(wrapper.find('.js-dismiss-with-comment').exists()).toBe(true);
@@ -32,9 +34,11 @@ describe('DismissalButton', () => {
 
     it('should emit openDismissalCommentBox when clicked', () => {
       wrapper.find('.js-dismiss-with-comment').trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().openDismissalCommentBox).toBeTruthy();
       });
     });
+  });
 
   describe('with a dismissed vulnerability', () => {
     beforeEach(() => {
@@ -50,8 +54,10 @@ describe('DismissalButton', () => {
 
     it('should emit revertDismissVulnerabilty when clicked', () => {
       wrapper.find(LoadingButton).trigger('click');
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().revertDismissVulnerability).toBeTruthy();
       });
+    });
 
     it('should not render the dismiss with comment button', () => {
       expect(wrapper.find('.js-dismiss-with-comment').exists()).toBe(false);

ee/spec/frontend/vue_shared/security_reports/components/dismissal_comment_box_spec.js

@@ -23,8 +23,10 @@ describe('DismissalCommentBox', () => {
       metaKey: true,
     });
 
+    return wrapper.vm.$nextTick(() => {
       expect(wrapper.emitted().submit).toBeTruthy();
     });
+  });
 
   it('should render the error message', () => {
     const errorMessage = 'You did something wrong';

ee/spec/frontend/vue_shared/security_reports/components/dismissal_comment_modal_footer_spec.js

@@ -31,18 +31,23 @@ describe('DismissalCommentModalFooter', () => {
     it('should emit the "addCommentAndDismiss" event when clicked', () => {
       wrapper.find(LoadingButton).trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().addCommentAndDismiss).toBeTruthy();
         expect(Tracking.event).toHaveBeenCalledWith(
           '_track_category_',
           'click_add_comment_and_dismiss',
         );
       });
+    });
 
     it('should emit the cancel event when the cancel button is clicked', () => {
       wrapper.find('.js-cancel').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().cancel).toBeTruthy();
       });
     });
+  });
 
   describe('with an already dismissed vulnerability', () => {
     describe('and adding a comment', () => {
@@ -60,10 +65,12 @@ describe('DismissalCommentModalFooter', () => {
       it('should emit the "addCommentAndDismiss" event when clicked', () => {
         wrapper.find(LoadingButton).trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted().addDismissalComment).toBeTruthy();
           expect(Tracking.event).toHaveBeenCalledWith('_track_category_', 'click_add_comment');
         });
       });
+    });
 
     describe('and editing a comment', () => {
       beforeEach(() => {
@@ -81,9 +88,11 @@ describe('DismissalCommentModalFooter', () => {
       it('should emit the "addCommentAndDismiss" event when clicked', () => {
         wrapper.find(LoadingButton).trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted().addDismissalComment).toBeTruthy();
           expect(Tracking.event).toHaveBeenCalledWith('_track_category_', 'click_edit_comment');
         });
       });
     });
+  });
 });

ee/spec/frontend/vue_shared/security_reports/components/event_item_spec.js

@@ -84,10 +84,16 @@ describe('Event Item', () => {
     it('emits the button events when clicked', () => {
       const buttons = wrapper.findAll('.action-buttons > button');
       buttons.at(0).trigger('click');
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
           buttons.at(1).trigger('click');
-
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
           expect(wrapper.emitted().fooEvent.length).toEqual(1);
           expect(wrapper.emitted().barEvent.length).toEqual(1);
         });
     });
+  });
 });

ee/spec/frontend/vue_shared/security_reports/components/modal_footer_spec.js

@@ -32,9 +32,12 @@ describe('Security Reports modal footer', () => {
 
     it('emits createIssue when create issue button is clicked', () => {
       wrapper.find(LoadingButton).trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().createNewIssue).toBeTruthy();
       });
     });
+  });
 
   describe('can only create merge request', () => {
     beforeEach(() => {
@@ -52,9 +55,12 @@ describe('Security Reports modal footer', () => {
 
     it('emits createMergeRequest when create merge request button is clicked', () => {
       wrapper.find(LoadingButton).trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().createMergeRequest).toBeTruthy();
       });
     });
+  });
 
   describe('can download download patch', () => {
     beforeEach(() => {
@@ -72,9 +78,12 @@ describe('Security Reports modal footer', () => {
 
     it('emits downloadPatch when download patch button is clicked', () => {
       wrapper.find(LoadingButton).trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().downloadPatch).toBeTruthy();
       });
     });
+  });
 
   describe('can create merge request and issue', () => {
     beforeEach(() => {

spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js

@@ -61,10 +61,15 @@ describe('ClusterFormDropdown', () => {
 
     beforeEach(() => {
       vm.setProps({ items, multiple: true, value });
-      return vm.vm.$nextTick().then(() => {
+      return vm.vm
+        .$nextTick()
+        .then(() => {
           vm.findAll('.js-dropdown-item')
             .at(0)
             .trigger('click');
+          return vm.vm.$nextTick();
+        })
+        .then(() => {
           vm.findAll('.js-dropdown-item')
             .at(1)
             .trigger('click');

spec/frontend/cycle_analytics/stage_nav_item_spec.js

@@ -92,9 +92,11 @@ describe('StageNavItem', () => {
     it('emits the `select` event when clicked', () => {
       expect(wrapper.emitted().select).toBeUndefined();
       wrapper.trigger('click');
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.emitted().select.length).toBe(1);
       });
     });
+  });
 
   describe('User does not have access', () => {
     beforeEach(() => {

spec/frontend/diffs/components/diff_file_header_spec.js

@@ -117,8 +117,11 @@ describe('DiffFileHeader component', () => {
   it('when header is clicked emits toggleFile', () => {
     createComponent();
     findHeader().trigger('click');
+
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().toggleFile).toBeDefined();
     });
+  });
 
   it('when collapseIcon is clicked emits toggleFile', () => {
     createComponent({ collapsible: true });
@@ -129,8 +132,11 @@ describe('DiffFileHeader component', () => {
   it('when other element in header is clicked does not emits toggleFile', () => {
     createComponent({ collapsible: true });
     findTitleLink().trigger('click');
+
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().toggleFile).not.toBeDefined();
     });
+  });
 
   it('displays a copy to clipboard button', () => {
     createComponent();

spec/frontend/diffs/components/diff_gutter_avatars_spec.js

@@ -42,9 +42,11 @@ describe('DiffGutterAvatars', () => {
     it('should emit toggleDiscussions event on button click', () => {
       findCollapseButton().trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy();
       });
     });
+  });
 
   describe('when collapsed', () => {
     beforeEach(() => {
@@ -72,15 +74,19 @@ describe('DiffGutterAvatars', () => {
         .at(0)
         .trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy();
       });
+    });
 
     it('should emit toggleDiscussions event on more count text click', () => {
       findMoreCount().trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy();
       });
     });
+  });
 
   it('renders an empty more count string if there are no discussions', () => {
     createComponent({

spec/frontend/diffs/components/edit_button_spec.js

@@ -36,8 +36,10 @@ describe('EditButton', () => {
     });
     wrapper.trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('showForkMessage')).toBeTruthy();
     });
+  });
 
   it('doesnt emit a show fork message event if current user cannot fork', () => {
     createComponent({
@@ -46,8 +48,10 @@ describe('EditButton', () => {
     });
     wrapper.trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('showForkMessage')).toBeFalsy();
     });
+  });
 
   it('doesnt emit a show fork message event if current user can modify blob', () => {
     createComponent({
@@ -57,6 +61,8 @@ describe('EditButton', () => {
     });
     wrapper.trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('showForkMessage')).toBeFalsy();
     });
+  });
 });

spec/frontend/ide/components/error_message_spec.js

@@ -90,9 +90,14 @@ describe('IDE error message component', () => {
     it('does not dispatch action when already loading', () => {
       wrapper.find('button').trigger('click');
       actionMock.mockReset();
+      return wrapper.vm.$nextTick(() => {
         wrapper.find('button').trigger('click');
+
+        return wrapper.vm.$nextTick().then(() => {
           expect(actionMock).not.toHaveBeenCalled();
         });
+      });
+    });
 
     it('shows loading icon when loading', () => {
       let resolveAction;

spec/frontend/ide/components/file_templates/dropdown_spec.js

@@ -62,8 +62,10 @@ describe('IDE file templates dropdown component', () => {
     const item = findItemButtons().at(0);
     item.trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().click[0][0]).toBe(itemData);
     });
+  });
 
   it('renders dropdown title', () => {
     const title = 'Test title';

spec/frontend/ide/components/jobs/stage_spec.js

@@ -52,8 +52,11 @@ describe('IDE pipeline stage', () => {
     const id = 5;
     createComponent({ stage: { ...defaultProps.stage, id } });
     findHeader().trigger('click');
+
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().toggleCollapsed[0][0]).toBe(id);
     });
+  });
 
   it('emits clickViewLog entity with job', () => {
     const [job] = defaultProps.stage.jobs;

spec/frontend/issuables_list/components/issuable_spec.js

@@ -339,8 +339,10 @@ describe('Issuable component', () => {
 
         findBulkCheckbox().trigger('click');
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.emitted().select).toEqual([[{ issuable, selected: !selected }]]);
         });
       });
     });
+  });
 });

spec/frontend/jobs/components/log/collapsible_section_spec.js

@@ -68,6 +68,9 @@ describe('Job Log Collapsible Section', () => {
     });
 
     findCollapsibleLine().trigger('click');
+
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted('onClickCollapsibleLine').length).toBe(1);
     });
+  });
 });

spec/frontend/jobs/components/log/line_header_spec.js

@@ -79,9 +79,11 @@ describe('Job Log Header Line', () => {
     it('emits toggleLine event', () => {
       wrapper.trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().toggleLine.length).toBe(1);
       });
     });
+  });
 
   describe('with duration', () => {
     beforeEach(() => {

spec/frontend/monitoring/components/date_time_picker/date_time_picker_input_spec.js

@@ -58,8 +58,9 @@ describe('DateTimePickerInput', () => {
   it('input event is emitted when focus is lost', () => {
     createComponent();
     jest.spyOn(wrapper.vm, '$emit');
-    wrapper.find('input').setValue(inputValue);
-    wrapper.find('input').trigger('blur');
+    const input = wrapper.find('input');
+    input.setValue(inputValue);
+    input.trigger('blur');
 
     expect(wrapper.vm.$emit).toHaveBeenCalledWith('input', inputValue);
   });

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);
+    return dateTimePicker.vm.$nextTick().then(() => {
       dateTimePicker.find(input).trigger('blur');
+      return dateTimePicker.vm.$nextTick();
+    });
   };
 
   const createComponent = props => {
@@ -103,43 +106,44 @@ 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(() => {
+    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(() => {
+    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');
-
+    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(() => {
+    fillInputAndBlur('#custom-time-from', '2019-10-01')
+      .then(() => fillInputAndBlur('#custom-time-to', '2019-10-19'))
+      .then(() => {
         jest.spyOn(dateTimePicker.vm, '$emit');
         applyButtonElement().click();
 
@@ -148,7 +152,8 @@ describe('DateTimePicker', () => {
           start: '2019-10-01T00:00:00Z',
         });
         done();
-    });
+      })
+      .catch(done);
   });
 
   it('hides the popover with cancel button', done => {

spec/frontend/notes/components/discussion_jump_to_next_button_spec.js

@@ -24,7 +24,9 @@ describe('JumpToNextDiscussionButton', () => {
 
     button.trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted().onClick).toBeTruthy();
       expect(wrapper.emitted().onClick.length).toBe(1);
     });
+  });
 });

spec/frontend/notes/components/discussion_reply_placeholder_spec.js

@@ -25,10 +25,12 @@ describe('ReplyPlaceholder', () => {
   it('emits onClick even on button click', () => {
     findButton().trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted()).toEqual({
         onClick: [[]],
       });
     });
+  });
 
   it('should render reply button', () => {
     expect(findButton().text()).toEqual(buttonText);

spec/frontend/notes/components/discussion_resolve_button_spec.js

@@ -33,10 +33,12 @@ describe('resolveDiscussionButton', () => {
 
     button.trigger('click');
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted()).toEqual({
         onClick: [[]],
       });
     });
+  });
 
   it('should contain the provided button title', () => {
     const button = wrapper.find({ ref: 'button' });

spec/frontend/notes/components/note_app_spec.js

@@ -290,9 +290,12 @@ describe('note_app', () => {
     it('should not render quick actions docs url', () => {
       wrapper.find('.js-note-edit').trigger('click');
       const { quickActionsDocsPath } = mockData.notesDataMock;
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.find(`.edit-note a[href="${quickActionsDocsPath}"]`).exists()).toBe(false);
       });
     });
+  });
 
   describe('emoji awards', () => {
     beforeEach(() => {

spec/frontend/performance_bar/components/add_request_spec.js

@@ -19,6 +19,7 @@ describe('add request form', () => {
   describe('when clicking the button', () => {
     beforeEach(() => {
       wrapper.find('button').trigger('click');
+      return wrapper.vm.$nextTick();
     });
 
     it('shows the form', () => {
@@ -28,6 +29,7 @@ describe('add request form', () => {
     describe('when pressing escape', () => {
       beforeEach(() => {
         wrapper.find('input').trigger('keyup.esc');
+        return wrapper.vm.$nextTick();
       });
 
       it('hides the input', () => {
@@ -38,7 +40,10 @@ describe('add request form', () => {
     describe('when submitting the form', () => {
       beforeEach(() => {
         wrapper.find('input').setValue('http://gitlab.example.com/users/root/calendar.json');
+        return wrapper.vm.$nextTick().then(() => {
           wrapper.find('input').trigger('keyup.enter');
+          return wrapper.vm.$nextTick();
+        });
       });
 
       it('emits an event to add the request', () => {
@@ -54,9 +59,10 @@ describe('add request form', () => {
 
       it('clears the value for next time', () => {
         wrapper.find('button').trigger('click');
-
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.find('input').text()).toEqual('');
         });
       });
     });
+  });
 });

spec/frontend/releases/list/components/evidence_block_spec.js

@@ -53,9 +53,12 @@ describe('Evidence Block', () => {
 
     it('renders the long sha after expansion', () => {
       wrapper.find('.js-text-expander-prepend').trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.find('.js-expanded').text()).toBe(release.evidence_sha);
       });
     });
+  });
 
   describe('copy to clipboard button', () => {
     it('renders button', () => {

spec/frontend/sidebar/assignees_spec.js

@@ -65,9 +65,11 @@ describe('Assignee component', () => {
       jest.spyOn(wrapper.vm, '$emit');
       wrapper.find('.assign-yourself .btn-link').trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('assign-self')).toBeTruthy();
       });
     });
+  });
 
   describe('One assignee/user', () => {
     it('displays one assignee icon when collapsed', () => {

spec/frontend/sidebar/todo_spec.js

@@ -60,8 +60,10 @@ describe('SidebarTodo', () => {
       createComponent();
       wrapper.find('button').trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().toggleTodo).toBeTruthy();
       });
+    });
 
     it('renders component container element with proper data attributes', () => {
       createComponent({

spec/frontend/vue_mr_widget/components/mr_collapsible_extension_spec.js

@@ -42,6 +42,7 @@ describe('Merge Request Collapsible Extension', () => {
     describe('onClick', () => {
       beforeEach(() => {
         wrapper.find('button').trigger('click');
+        return wrapper.vm.$nextTick();
       });
 
       it('rendes the provided slot', () => {

spec/frontend/vue_mr_widget/components/states/commit_edit_spec.js

@@ -55,10 +55,12 @@ describe('Commits edit component', () => {
       findTextarea().element.value = changedCommitMessage;
       findTextarea().trigger('input');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().input[0]).toEqual([changedCommitMessage]);
         expect(findTextarea().element.value).toBe(changedCommitMessage);
       });
     });
+  });
 
   describe('when slots are present', () => {
     beforeEach(() => {

spec/frontend/vue_shared/components/expand_button_spec.js

@@ -136,8 +136,11 @@ describe('Expand button', () => {
     it('clicking hides itself and shows prepend', () => {
       expect(expanderAppendEl().isVisible()).toBe(true);
       expanderAppendEl().trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(expanderPrependEl().isVisible()).toBe(true);
       });
+    });
 
     it('clicking hides expanded text', () => {
       expect(
@@ -147,6 +150,8 @@ describe('Expand button', () => {
           .trim(),
       ).toBe(text.expanded);
       expanderAppendEl().trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(
           wrapper
             .find(ExpandButton)
@@ -154,6 +159,7 @@ describe('Expand button', () => {
             .trim(),
         ).not.toBe(text.expanded);
       });
+    });
 
     describe('when short text is provided', () => {
       beforeEach(done => {
@@ -176,6 +182,8 @@ describe('Expand button', () => {
             .trim(),
         ).toBe(text.expanded);
         expanderAppendEl().trigger('click');
+
+        return wrapper.vm.$nextTick().then(() => {
           expect(
             wrapper
               .find(ExpandButton)
@@ -185,4 +193,5 @@ describe('Expand button', () => {
         });
       });
     });
+  });
 });

spec/frontend/vue_shared/components/issue/related_issuable_item_spec.js

@@ -192,10 +192,12 @@ describe('RelatedIssuableItem', () => {
     it('triggers onRemoveRequest when clicked', () => {
       removeBtn.trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         const { relatedIssueRemoveRequest } = wrapper.emitted();
 
         expect(relatedIssueRemoveRequest.length).toBe(1);
         expect(relatedIssueRemoveRequest[0]).toEqual([props.idKey]);
       });
     });
+  });
 });

spec/frontend/vue_shared/components/loading_button_spec.js

@@ -80,8 +80,10 @@ describe('LoadingButton', () => {
 
       wrapper.trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('click')).toBeTruthy();
       });
+    });
 
     it('does not call given callback when disabled because of loading', () => {
       buildWrapper({
@@ -90,7 +92,9 @@ describe('LoadingButton', () => {
 
       wrapper.trigger('click');
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('click')).toBeFalsy();
       });
     });
+  });
 });

spec/frontend/vue_shared/components/markdown/header_spec.js

@@ -66,12 +66,18 @@ describe('Markdown field header component', () => {
   it('emits toggle markdown event when clicking preview', () => {
     wrapper.find('.js-preview-link').trigger('click');
 
+    return wrapper.vm
+      .$nextTick()
+      .then(() => {
         expect(wrapper.emitted('preview-markdown').length).toEqual(1);
 
         wrapper.find('.js-write-link').trigger('click');
-
+        return wrapper.vm.$nextTick();
+      })
+      .then(() => {
         expect(wrapper.emitted('write-markdown').length).toEqual(1);
       });
+  });
 
   it('does not emit toggle markdown event when triggered from another form', () => {
     $(document).triggerHandler('markdown-preview:show', [

spec/frontend/vue_shared/components/modal_copy_button_spec.js

@@ -29,14 +29,20 @@ describe('modal copy button', () => {
         removeAllRanges: jest.fn(),
       }));
       wrapper.trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().success).not.toBeEmpty();
         expect(document.execCommand).toHaveBeenCalledWith('copy');
       });
+    });
     it("should propagate the clipboard error event if execCommand doesn't work", () => {
       document.execCommand = jest.fn(() => false);
       wrapper.trigger('click');
+
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().error).not.toBeEmpty();
         expect(document.execCommand).toHaveBeenCalledWith('copy');
       });
     });
+  });
 });