Call dispatchEvent directly for design todos

Addessing reviewer feedback. Tests have been updated
to mock and check dispatchEvent appropriately

app/assets/javascripts/design_management/components/design_todo_button.vue

@@ -5,7 +5,7 @@ import createDesignTodoMutation from '../graphql/mutations/create_design_todo.mu
 import TodoButton from '~/vue_shared/components/todo_button.vue';
 import allVersionsMixin from '../mixins/all_versions';
 import { updateStoreAfterDeleteDesignTodo } from '../utils/cache_update';
-import { findIssueId, dispatchDocumentEvent } from '../utils/design_management_utils';
+import { findIssueId } from '../utils/design_management_utils';
 import { CREATE_DESIGN_TODO_ERROR, DELETE_DESIGN_TODO_ERROR } from '../utils/error_messages';
 
 export default {
@@ -61,12 +61,13 @@ export default {
   methods: {
     updateGlobalTodoCount(additionalTodoCount) {
       const currentCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
-
-      dispatchDocumentEvent('todo:toggle', {
+      const todoToggleEvent = new CustomEvent('todo:toggle', {
         detail: {
           count: Math.max(currentCount + additionalTodoCount, 0),
         },
       });
+
+      document.dispatchEvent(todoToggleEvent);
     },
     incrementGlobalTodoCount() {
       this.updateGlobalTodoCount(1);

app/assets/javascripts/design_management/utils/design_management_utils.js

@@ -167,12 +167,3 @@ export const createPendingTodo = todoId => {
     id: createTodoGid(todoId),
   };
 };
-
-/**
- * Dispatch an event on the document
- * @param {String} eventName
- * @param {Object} eventData
- */
-export const dispatchDocumentEvent = (eventName, eventData) => {
-  document.dispatchEvent(new CustomEvent(eventName, eventData));
-};

spec/frontend/design_management/components/design_todo_button_spec.js

@@ -4,7 +4,6 @@ import DesignTodoButton from '~/design_management/components/design_todo_button.
 import createDesignTodoMutation from '~/design_management/graphql/mutations/create_design_todo.mutation.graphql';
 import todoMarkDoneMutation from '~/graphql_shared/mutations/todo_mark_done.mutation.graphql';
 import mockDesign from '../mock_data/design';
-import * as utils from '~/design_management/utils/design_management_utils';
 
 const mockDesignWithPendingTodos = {
   ...mockDesign,
@@ -70,8 +69,10 @@ describe('Design management design todo button', () => {
     });
 
     describe('when clicked', () => {
+      let dispatchEventSpy;
+
       beforeEach(() => {
-        utils.dispatchDocumentEvent = jest.fn();
+        dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
         jest.spyOn(document, 'querySelector').mockReturnValue({
           innerText: 2,
         });
@@ -95,12 +96,11 @@ describe('Design management design todo button', () => {
       });
 
       it('calls dispatchDocumentEvent to update global To-Do counter correctly', () => {
-        expect(utils.dispatchDocumentEvent).toHaveBeenCalledTimes(1);
-        expect(utils.dispatchDocumentEvent).toHaveBeenCalledWith('todo:toggle', {
-          detail: {
-            count: 1,
-          },
-        });
+        const dispatchedEvent = dispatchEventSpy.mock.calls[0][0];
+
+        expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
+        expect(dispatchedEvent.detail).toEqual({ count: 1 });
+        expect(dispatchedEvent.type).toBe('todo:toggle');
       });
     });
   });
@@ -115,8 +115,10 @@ describe('Design management design todo button', () => {
     });
 
     describe('when clicked', () => {
+      let dispatchEventSpy;
+
       beforeEach(() => {
-        utils.dispatchDocumentEvent = jest.fn();
+        dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
         jest.spyOn(document, 'querySelector').mockReturnValue({
           innerText: 2,
         });
@@ -144,12 +146,11 @@ describe('Design management design todo button', () => {
       });
 
       it('calls dispatchDocumentEvent to update global To-Do counter correctly', () => {
-        expect(utils.dispatchDocumentEvent).toHaveBeenCalledTimes(1);
-        expect(utils.dispatchDocumentEvent).toHaveBeenCalledWith('todo:toggle', {
-          detail: {
-            count: 3,
-          },
-        });
+        const dispatchedEvent = dispatchEventSpy.mock.calls[0][0];
+
+        expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
+        expect(dispatchedEvent.detail).toEqual({ count: 3 });
+        expect(dispatchedEvent.type).toBe('todo:toggle');
       });
     });
   });