Fix emitting of events in jest

Some of the internal changes of jsdom seem to have an effect on events.
Especially with click events on links. These refactors those events to
be triggered by Vue.

In other cases we were manually dispatching events, when it is easier to
just trigger an event directly.

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

@@ -63,7 +63,6 @@ describe('PackagesApp', () => {
       stubs: {
         ...stubChildren(PackagesApp),
         GlDeprecatedButton: false,
-        GlLink: false,
         GlModal: false,
         GlTab: false,
         GlTabs: false,
@@ -278,7 +277,8 @@ describe('PackagesApp', () => {
 
     it(`file download link call event with ${TrackingActions.PULL_PACKAGE}`, () => {
       createComponent({ packageEntity: conanPackage });
-      firstFileDownloadLink().trigger('click');
+
+      firstFileDownloadLink().vm.$emit('click');
       expect(eventSpy).toHaveBeenCalledWith(
         category,
         TrackingActions.PULL_PACKAGE,

ee/spec/frontend/packages/list/coming_soon/packages_coming_soon_spec.js

@@ -56,6 +56,7 @@ describe('packages_coming_soon', () => {
       },
       stubs: {
         ApolloQuery,
+        GlLink: true,
       },
       mocks: {
         $apolloData,
@@ -115,7 +116,7 @@ describe('packages_coming_soon', () => {
     it('tracks when an issue title link is clicked', () => {
       eventSpy.mockClear();
 
-      findIssueTitleLink().trigger('click');
+      findIssueTitleLink().vm.$emit('click');
 
       expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_LIST, {
         label: firstIssue.title,
@@ -126,7 +127,7 @@ describe('packages_coming_soon', () => {
     it('tracks when an issue id link is clicked', () => {
       eventSpy.mockClear();
 
-      findIssueIdLink().trigger('click');
+      findIssueIdLink().vm.$emit('click');
 
       expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_LIST, {
         label: firstIssue.title,

spec/frontend/tracking_spec.js

@@ -121,11 +121,6 @@ describe('Tracking', () => {
   describe('tracking interface events', () => {
     let eventSpy;
 
-    const trigger = (selector, eventName = 'click') => {
-      const event = new Event(eventName, { bubbles: true });
-      document.querySelector(selector).dispatchEvent(event);
-    };
-
     beforeEach(() => {
       eventSpy = jest.spyOn(Tracking, 'event');
       Tracking.bindDocument('_category_'); // only happens once
@@ -140,7 +135,7 @@ describe('Tracking', () => {
     });
 
     it('binds to clicks on elements matching [data-track-event]', () => {
-      trigger('[data-track-event="click_input1"]');
+      document.querySelector('[data-track-event="click_input1"]').click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input1', {
         label: '_label_',
@@ -149,13 +144,13 @@ describe('Tracking', () => {
     });
 
     it('does not bind to clicks on elements without [data-track-event]', () => {
-      trigger('[data-track-eventbogus="click_bogusinput"]');
+      document.querySelector('[data-track-eventbogus="click_bogusinput"]').click();
 
       expect(eventSpy).not.toHaveBeenCalled();
     });
 
     it('allows value override with the data-track-value attribute', () => {
-      trigger('[data-track-event="click_input2"]');
+      document.querySelector('[data-track-event="click_input2"]').click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'click_input2', {
         value: '_value_override_',
@@ -163,13 +158,15 @@ describe('Tracking', () => {
     });
 
     it('handles checkbox values correctly', () => {
-      trigger('[data-track-event="toggle_checkbox"]'); // checking
+      const checkbox = document.querySelector('[data-track-event="toggle_checkbox"]');
+
+      checkbox.click(); // unchecking
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', {
         value: false,
       });
 
-      trigger('[data-track-event="toggle_checkbox"]'); // unchecking
+      checkbox.click(); // checking
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_checkbox', {
         value: '_value_',
@@ -177,17 +174,19 @@ describe('Tracking', () => {
     });
 
     it('handles bootstrap dropdowns', () => {
-      trigger('[data-track-event="toggle_dropdown"]', 'show.bs.dropdown'); // showing
+      const dropdown = document.querySelector('[data-track-event="toggle_dropdown"]');
+
+      dropdown.dispatchEvent(new Event('show.bs.dropdown', { bubbles: true }));
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_show', {});
 
-      trigger('[data-track-event="toggle_dropdown"]', 'hide.bs.dropdown'); // hiding
+      dropdown.dispatchEvent(new Event('hide.bs.dropdown', { bubbles: true }));
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'toggle_dropdown_hide', {});
     });
 
     it('handles nested elements inside an element with tracking', () => {
-      trigger('span.nested', 'click');
+      document.querySelector('span.nested').click();
 
       expect(eventSpy).toHaveBeenCalledWith('_category_', 'nested_event', {});
     });

spec/frontend/vue_shared/components/diff_viewer/viewers/renamed_spec.js

@@ -274,7 +274,7 @@ describe('Renamed Diff Viewer', () => {
         expect(link.text()).toEqual(linkText);
         expect(link.attributes('href')).toEqual(DIFF_FILE_VIEW_PATH);
 
-        link.trigger('click');
+        link.vm.$emit('click');
 
         expect(clickMock).toHaveBeenCalled();
       },