2 files changed, 47 insertions, 52 deletions

diff --git a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
index d203a8ea0e0..c7293b00adf 100644
--- a/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
+++ b/spec/frontend/pages/admin/users/components/delete_user_modal_spec.js
@@ -1,5 +1,5 @@
-import { shallowMount } from '@vue/test-utils';
 import { GlButton, GlFormInput } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import DeleteUserModal from '~/pages/admin/users/components/delete_user_modal.vue';
 import ModalStub from './stubs/modal_stub';
 
diff --git a/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js b/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js
index 6df2efd624d..3669bc40d7e 100644
--- a/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js
+++ b/spec/frontend/pages/admin/users/components/user_modal_manager_spec.js
@@ -3,6 +3,8 @@ import UserModalManager from '~/pages/admin/users/components/user_modal_manager.
 import ModalStub from './stubs/modal_stub';
 
 describe('Users admin page Modal Manager', () => {
+  let wrapper;
+
   const modalConfiguration = {
     action1: {
       title: 'action1',
@@ -14,11 +16,12 @@ describe('Users admin page Modal Manager', () => {
     },
   };
 
-  let wrapper;
+  const findModal = () => wrapper.find({ ref: 'modal' });
 
   const createComponent = (props = {}) => {
     wrapper = mount(UserModalManager, {
       propsData: {
+        selector: '.js-delete-user-modal-button',
         modalConfiguration,
         csrfToken: 'dummyCSRF',
         ...props,
@@ -37,7 +40,7 @@ describe('Users admin page Modal Manager', () => {
   describe('render behavior', () => {
     it('does not renders modal when initialized', () => {
       createComponent();
-      expect(wrapper.find({ ref: 'modal' }).exists()).toBeFalsy();
+      expect(findModal().exists()).toBeFalsy();
     });
 
     it('throws if action has no proper configuration', () => {
@@ -55,7 +58,7 @@ describe('Users admin page Modal Manager', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        const modal = wrapper.find({ ref: 'modal' });
+        const modal = findModal();
         expect(modal.exists()).toBeTruthy();
         expect(modal.vm.$attrs.csrfToken).toEqual('dummyCSRF');
         expect(modal.vm.$attrs.extraProp).toEqual('extraPropValue');
@@ -64,68 +67,60 @@ describe('Users admin page Modal Manager', () => {
     });
   });
 
-  describe('global listener', () => {
+  describe('click handling', () => {
+    let button;
+    let button2;
+
+    const createButtons = () => {
+      button = document.createElement('button');
+      button2 = document.createElement('button');
+      button.setAttribute('class', 'js-delete-user-modal-button');
+      button.setAttribute('data-username', 'foo');
+      button.setAttribute('data-gl-modal-action', 'action1');
+      button.setAttribute('data-block-user-url', '/block');
+      button.setAttribute('data-delete-user-url', '/delete');
+      document.body.appendChild(button);
+      document.body.appendChild(button2);
+    };
+    const removeButtons = () => {
+      button.remove();
+      button = null;
+      button2.remove();
+      button2 = null;
+    };
+
     beforeEach(() => {
-      jest.spyOn(document, 'addEventListener');
-      jest.spyOn(document, 'removeEventListener');
+      createButtons();
+      createComponent();
     });
 
-    afterAll(() => {
-      jest.restoreAllMocks();
+    afterEach(() => {
+      removeButtons();
     });
 
-    it('registers global listener on mount', () => {
-      createComponent();
-      expect(document.addEventListener).toHaveBeenCalledWith('click', expect.any(Function));
-    });
+    it('renders the modal when the button is clicked', async () => {
+      button.click();
 
-    it('removes global listener on destroy', () => {
-      createComponent();
-      wrapper.destroy();
-      expect(document.removeEventListener).toHaveBeenCalledWith('click', expect.any(Function));
+      await wrapper.vm.$nextTick();
+
+      expect(findModal().exists()).toBe(true);
     });
-  });
 
-  describe('click handling', () => {
-    let node;
+    it('does not render the modal when a misconfigured button is clicked', async () => {
+      button.removeAttribute('data-gl-modal-action');
+      button.click();
 
-    beforeEach(() => {
-      node = document.createElement('div');
-      document.body.appendChild(node);
-    });
+      await wrapper.vm.$nextTick();
 
-    afterEach(() => {
-      node.remove();
-      node = null;
+      expect(findModal().exists()).toBe(false);
     });
 
-    it('ignores wrong clicks', () => {
-      createComponent();
-      const event = new window.MouseEvent('click', {
-        bubbles: true,
-        cancellable: true,
-      });
-      jest.spyOn(event, 'preventDefault');
-      node.dispatchEvent(event);
-      expect(event.preventDefault).not.toHaveBeenCalled();
-    });
+    it('does not render the modal when a button without the selector class is clicked', async () => {
+      button2.click();
 
-    it('captures click with glModalAction', () => {
-      createComponent();
-      node.dataset.glModalAction = 'action1';
-      const event = new window.MouseEvent('click', {
-        bubbles: true,
-        cancellable: true,
-      });
-      jest.spyOn(event, 'preventDefault');
-      node.dispatchEvent(event);
+      await wrapper.vm.$nextTick();
 
-      expect(event.preventDefault).toHaveBeenCalled();
-      return wrapper.vm.$nextTick().then(() => {
-        const modal = wrapper.find({ ref: 'modal' });
-        expect(modal.exists()).toBeTruthy();
-        expect(modal.vm.showWasCalled).toBeTruthy();
-      });
+      expect(findModal().exists()).toBe(false);
     });
   });
 });