Replace event_hub_factory with Vue impl

- Also add specs to harden the expected API
  from this function

app/assets/javascripts/helpers/event_hub_factory.js

-import mitt from 'mitt';
+import Vue from 'vue';
 
+/**
+ * Return a Vue like event hub
+ *
+ * - $on
+ * - $off
+ * - $once
+ * - $emit
+ *
+ * Please note, this was once implemented with `mitt`, but since then has been reverted
+ * because of some API issues. https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35074
+ *
+ * We'd like to shy away from using a full fledged Vue instance from this in the future.
+ */
 export default () => {
-  const emitter = mitt();
-
-  emitter.once = (event, handler) => {
-    const wrappedHandler = evt => {
-      handler(evt);
-      emitter.off(event, wrappedHandler);
-    };
-    emitter.on(event, wrappedHandler);
-  };
-
-  emitter.$on = emitter.on;
-  emitter.$once = emitter.once;
-  emitter.$off = emitter.off;
-  emitter.$emit = emitter.emit;
-
-  return emitter;
+  return new Vue();
 };

spec/frontend/helpers/event_hub_factory_spec.js

 import createEventHub from '~/helpers/event_hub_factory';
 
+const TEST_EVENT = 'foobar';
+
 describe('event bus factory', () => {
   let eventBus;
+  let handler;
 
   beforeEach(() => {
     eventBus = createEventHub();
+    handler = jest.fn();
   });
 
   afterEach(() => {
     eventBus = null;
   });
 
-  describe('underlying module', () => {
-    let mitt;
+  describe('instance', () => {
+    it.each`
+      method
+      ${'$on'}
+      ${'$once'}
+      ${'$off'}
+      ${'$emit'}
+    `('has $method method', ({ method }) => {
+      expect(eventBus[method]).toEqual(expect.any(Function));
+    });
+  });
 
+  describe('$on', () => {
     beforeEach(() => {
-      jest.resetModules();
-      jest.mock('mitt');
-
-      // eslint-disable-next-line global-require
-      mitt = require('mitt');
-      mitt.mockReturnValue(() => ({}));
-
-      const createEventHubActual = jest.requireActual('~/helpers/event_hub_factory').default;
-      eventBus = createEventHubActual();
+      eventBus.$on(TEST_EVENT, handler);
     });
 
-    it('creates an emitter', () => {
-      expect(mitt).toHaveBeenCalled();
+    it('calls handler when event is emitted', () => {
+      eventBus.$emit(TEST_EVENT);
+      expect(handler).toHaveBeenCalledWith();
     });
+
+    it('calls handler with multiple args', () => {
+      eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3');
+      expect(handler).toHaveBeenCalledWith('arg1', 'arg2', 'arg3');
     });
 
-  describe('instance', () => {
-    it.each`
-      method
-      ${'on'}
-      ${'once'}
-      ${'off'}
-      ${'emit'}
-    `('binds $$method to $method ', ({ method }) => {
-      expect(typeof eventBus[method]).toBe('function');
-      expect(eventBus[method]).toBe(eventBus[`$${method}`]);
+    it('calls handler multiple times', () => {
+      eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3');
+      eventBus.$emit(TEST_EVENT, 'arg1', 'arg2', 'arg3');
+
+      expect(handler).toHaveBeenCalledTimes(2);
     });
+
+    it('does not call handler after $off with handler', () => {
+      eventBus.$off(TEST_EVENT, handler);
+
+      eventBus.$emit(TEST_EVENT);
+
+      expect(handler).not.toHaveBeenCalled();
     });
 
-  describe('once', () => {
-    const event = 'foobar';
-    let handler;
+    it('does not call handler after $off', () => {
+      eventBus.$off(TEST_EVENT);
 
-    beforeEach(() => {
-      jest.spyOn(eventBus, 'on');
-      jest.spyOn(eventBus, 'off');
-      handler = jest.fn();
-      eventBus.once(event, handler);
+      eventBus.$emit(TEST_EVENT);
+
+      expect(handler).not.toHaveBeenCalled();
+    });
   });
 
-    it('calls on internally', () => {
-      expect(eventBus.on).toHaveBeenCalled();
+  describe('$once', () => {
+    beforeEach(() => {
+      eventBus.$once(TEST_EVENT, handler);
     });
 
     it('calls handler when event is emitted', () => {
-      eventBus.emit(event);
+      eventBus.$emit(TEST_EVENT);
       expect(handler).toHaveBeenCalled();
     });
 
-    it('calls off when event is emitted', () => {
-      eventBus.emit(event);
-      expect(eventBus.off).toHaveBeenCalled();
-    });
-
     it('calls the handler only once when event is emitted multiple times', () => {
-      eventBus.emit(event);
-      eventBus.emit(event);
+      eventBus.$emit(TEST_EVENT);
+      eventBus.$emit(TEST_EVENT);
       expect(handler).toHaveBeenCalledTimes(1);
     });
 
@@ -80,14 +87,18 @@ describe('event bus factory', () => {
         handler = jest.fn().mockImplementation(() => {
           throw new Error();
         });
-        eventBus.once(event, handler);
+        eventBus.$once(TEST_EVENT, handler);
       });
 
       it('calls off when event is emitted', () => {
         expect(() => {
-          eventBus.emit(event);
+          eventBus.$emit(TEST_EVENT);
         }).toThrow();
-        expect(eventBus.off).toHaveBeenCalled();
+        expect(() => {
+          eventBus.$emit(TEST_EVENT);
+        }).not.toThrow();
+
+        expect(handler).toHaveBeenCalledTimes(1);
       });
     });
   });