Fix EE only karma and jest specs

- Fix nth-child selector weirdness in karma tests
- Refactor alert widget tests to use proper waiting instead of
  Vue.nextTick
- Fix modal selector in review bar test
- Fix jest tests by mocking methods correctly
- Adjust event firing for custom dropdown

ee/app/assets/javascripts/security_dashboard/components/filter.vue

@@ -48,8 +48,8 @@ export default {
     isSelected(option) {
       return this.selection.has(option.id);
     },
-    closeDropdown(event) {
-      this.$root.$emit('clicked::link', event);
+    closeDropdown() {
+      this.$refs.dropdown.$children[0].hide(true);
     },
   },
 };
@@ -58,7 +58,7 @@ export default {
 <template>
   <div class="dashboard-filter">
     <strong class="js-name">{{ filter.name }}</strong>
-    <gl-dropdown class="d-block mt-1" menu-class="dropdown-extended-height">
+    <gl-dropdown ref="dropdown" class="d-block mt-1" menu-class="dropdown-extended-height">
       <template slot="button-content">
         <span class="text-truncate">
           {{ selectedOptionText.firstOption }}

ee/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js

@@ -12,6 +12,7 @@ describe('custom metrics form fields component', () => {
   const validQueryResponse = { data: { success: true, query: { valid: true, error: '' } } };
   const csrfToken = 'mockToken';
   const formOperation = 'post';
+  const debouncedValidateQueryMock = jest.fn();
   const makeFormData = (data = {}) => ({
     formData: {
       title: '',
@@ -32,6 +33,9 @@ describe('custom metrics form fields component', () => {
       },
       csrfToken,
       sync: false,
+      methods: {
+        debouncedValidateQuery: debouncedValidateQueryMock,
+      },
     });
   };
 
@@ -120,18 +124,14 @@ describe('custom metrics form fields component', () => {
       jest.runAllTimers();
     });
 
-    it('checks validity on user input', done => {
+    it('checks validity on user input', () => {
       const query = 'changedQuery';
       mountComponent();
-      const spy = jest.spyOn(component.vm, 'debouncedValidateQuery');
-      const queryInput = getNamedInput(name);
-      queryInput.value = query;
-      queryInput.dispatchEvent(new Event('input'));
-
-      component.vm.$nextTick(() => {
-        expect(spy).toHaveBeenCalledWith(query);
-        done();
-      });
+      const queryInput = component.find(`input[name="${name}"]`);
+      queryInput.setValue(query);
+      queryInput.trigger('input');
+
+      expect(debouncedValidateQueryMock).toHaveBeenCalledWith(query);
     });
 
     describe('when query is invalid', () => {

ee/spec/javascripts/batch_comments/components/review_bar_spec.js

@@ -42,7 +42,9 @@ describe('Batch comments review bar component', () => {
       vm.$el.querySelector('.btn.btn-align-content').click();
 
       vm.$nextTick(() => {
-        vm.$el.querySelector('.modal .btn-danger').click();
+        const modal = document.querySelector('#discard-draft-review');
+
+        modal.querySelector('.btn-danger').click();
 
         expect(vm.$store.dispatch).toHaveBeenCalled();
 

ee/spec/javascripts/license_management/components/license_management_row_spec.js

@@ -17,6 +17,9 @@ describe('LicenseManagementRow', () => {
   let store;
   let actions;
 
+  const findNthDropdown = num => [...vm.$el.querySelectorAll('.dropdown-item')][num];
+  const findNthDropdownIcon = num => findNthDropdown(num).querySelector('svg');
+
   beforeEach(() => {
     actions = {
       setLicenseInModal: jasmine.createSpy('setLicenseInModal'),
@@ -60,13 +63,13 @@ describe('LicenseManagementRow', () => {
 
     describe('template', () => {
       it('first dropdown element should have a visible icon', () => {
-        const firstOption = vm.$el.querySelector('.dropdown-item:nth-child(1) svg');
+        const firstOption = findNthDropdownIcon(0);
 
         expect(firstOption.classList).toContain(visibleClass);
       });
 
       it('second dropdown element should have no visible icon', () => {
-        const secondOption = vm.$el.querySelector('.dropdown-item:nth-child(2) svg');
+        const secondOption = findNthDropdownIcon(1);
 
         expect(secondOption.classList).toContain(invisibleClass);
       });
@@ -95,13 +98,13 @@ describe('LicenseManagementRow', () => {
 
     describe('template', () => {
       it('first dropdown element should have no visible icon', () => {
-        const firstOption = vm.$el.querySelector('.dropdown-item:nth-child(1) svg');
+        const firstOption = findNthDropdownIcon(0);
 
         expect(firstOption.classList).toContain(invisibleClass);
       });
 
       it('second dropdown element should have a visible icon', () => {
-        const secondOption = vm.$el.querySelector('.dropdown-item:nth-child(2) svg');
+        const secondOption = findNthDropdownIcon(1);
 
         expect(secondOption.classList).toContain(visibleClass);
       });
@@ -117,14 +120,14 @@ describe('LicenseManagementRow', () => {
     });
 
     it('triggering approveLicense by clicking the first dropdown option', () => {
-      const linkEl = vm.$el.querySelector('.dropdown-item:nth-child(1)');
+      const linkEl = findNthDropdown(0);
       linkEl.click();
 
       expect(actions.approveLicense).toHaveBeenCalled();
     });
 
     it('triggering approveLicense blacklistLicense by clicking the second dropdown option', () => {
-      const linkEl = vm.$el.querySelector('.dropdown-item:nth-child(2)');
+      const linkEl = findNthDropdown(1);
       linkEl.click();
 
       expect(actions.blacklistLicense).toHaveBeenCalled();
@@ -166,12 +169,12 @@ describe('LicenseManagementRow', () => {
 
       expect(dropdownEl).not.toBeNull();
 
-      const firstOption = dropdownEl.querySelector('.dropdown-item:nth-child(1)');
+      const firstOption = findNthDropdown(0);
 
       expect(firstOption).not.toBeNull();
       expect(firstOption.innerText.trim()).toBe('Approved');
 
-      const secondOption = dropdownEl.querySelector('.dropdown-item:nth-child(2)');
+      const secondOption = findNthDropdown(1);
 
       expect(secondOption).not.toBeNull();
       expect(secondOption.innerText.trim()).toBe('Blacklisted');

ee/spec/javascripts/monitoring/alert_widget_spec.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
 import AlertsService from 'ee/monitoring/services/alerts_service';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import waitForPromises from 'spec/helpers/wait_for_promises';
 
 describe('AlertWidget', () => {
   let AlertWidgetComponent;
@@ -184,10 +185,13 @@ describe('AlertWidget', () => {
     vm.$refs.widgetForm.$emit('create', alertParams);
 
     expect(AlertsService.prototype.createAlert).toHaveBeenCalledWith(alertParams);
-    Vue.nextTick(() => {
-      expect(vm.isLoading).toEqual(false);
-      done();
-    });
+
+    waitForPromises()
+      .then(() => {
+        expect(vm.isLoading).toEqual(false);
+        done();
+      })
+      .catch(done.fail);
   });
 
   it('updates an alert with an appropriate handler', done => {
@@ -195,7 +199,9 @@ describe('AlertWidget', () => {
     const newAlertParams = { operator: '=', threshold: 12 };
 
     spyOn(AlertsService.prototype, 'readAlert').and.returnValue(Promise.resolve(alertParams));
-    spyOn(AlertsService.prototype, 'updateAlert').and.returnValue(Promise.resolve({}));
+    spyOn(AlertsService.prototype, 'updateAlert').and.returnValue(
+      Promise.resolve({ ...alertParams, ...newAlertParams }),
+    );
 
     vm = mountComponent(AlertWidgetComponent, propsWithAlertData);
     vm.$on('setAlerts', mockSetAlerts);
@@ -207,10 +213,12 @@ describe('AlertWidget', () => {
     });
 
     expect(AlertsService.prototype.updateAlert).toHaveBeenCalledWith(alertPath, newAlertParams);
-    Vue.nextTick(() => {
-      expect(vm.isLoading).toEqual(false);
-      done();
-    });
+    waitForPromises()
+      .then(() => {
+        expect(vm.isLoading).toEqual(false);
+        done();
+      })
+      .catch(done.fail);
   });
 
   it('deletes an alert with an appropriate handler', done => {
@@ -225,10 +233,12 @@ describe('AlertWidget', () => {
     vm.$refs.widgetForm.$emit('delete', { alert: alertPath });
 
     expect(AlertsService.prototype.deleteAlert).toHaveBeenCalledWith(alertPath);
-    Vue.nextTick(() => {
-      expect(vm.isLoading).toEqual(false);
-      expect(vm.alertSummary).toBeFalsy();
-      done();
-    });
+    waitForPromises()
+      .then(() => {
+        expect(vm.isLoading).toEqual(false);
+        expect(vm.alertSummary).toBeFalsy();
+        done();
+      })
+      .catch(done.fail);
   });
 });