1 files changed, 43 insertions, 26 deletions

diff --git a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
index e36f5c79e3e..5fd61b25edc 100644
--- a/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_reply_form_spec.js
@@ -1,16 +1,10 @@
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import Autosave from '~/autosave';
+import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 
-const showModal = jest.fn();
-
-const GlModal = {
-  template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>',
-  methods: {
-    show: showModal,
-  },
-};
+jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
 
 describe('Design reply form component', () => {
   let wrapper;
@@ -19,7 +13,6 @@ describe('Design reply form component', () => {
   const findTextarea = () => wrapper.find('textarea');
   const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' });
   const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' });
-  const findModal = () => wrapper.findComponent({ ref: 'cancelCommentModal' });
 
   function createComponent(props = {}, mountOptions = {}) {
     wrapper = mount(DesignReplyForm, {
@@ -29,7 +22,6 @@ describe('Design reply form component', () => {
         noteableId: 'gid://gitlab/DesignManagement::Design/6',
         ...props,
       },
-      stubs: { GlModal },
       ...mountOptions,
     });
   }
@@ -42,6 +34,7 @@ describe('Design reply form component', () => {
   afterEach(() => {
     wrapper.destroy();
     window.gon = originalGon;
+    confirmAction.mockReset();
   });
 
   it('textarea has focus after component mount', () => {
@@ -102,7 +95,7 @@ describe('Design reply form component', () => {
     });
 
     it('submit button is disabled', () => {
-      expect(findSubmitButton().attributes().disabled).toBeTruthy();
+      expect(findSubmitButton().attributes().disabled).toBe('disabled');
     });
 
     it('does not emit submitForm event on textarea ctrl+enter keydown', async () => {
@@ -111,7 +104,7 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeFalsy();
+      expect(wrapper.emitted('submit-form')).toBeUndefined();
     });
 
     it('does not emit submitForm event on textarea meta+enter keydown', async () => {
@@ -120,13 +113,13 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeFalsy();
+      expect(wrapper.emitted('submit-form')).toBeUndefined();
     });
 
     it('emits cancelForm event on pressing escape button on textarea', () => {
       findTextarea().trigger('keyup.esc');
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('emits cancelForm event on clicking Cancel button', () => {
@@ -144,7 +137,7 @@ describe('Design reply form component', () => {
     });
 
     it('submit button is enabled', () => {
-      expect(findSubmitButton().attributes().disabled).toBeFalsy();
+      expect(findSubmitButton().attributes().disabled).toBeUndefined();
     });
 
     it('emits submitForm event on Comment button click', async () => {
@@ -153,7 +146,7 @@ describe('Design reply form component', () => {
       findSubmitButton().vm.$emit('click');
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeTruthy();
+      expect(wrapper.emitted('submit-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
@@ -165,7 +158,7 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeTruthy();
+      expect(wrapper.emitted('submit-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
@@ -177,7 +170,7 @@ describe('Design reply form component', () => {
       });
 
       await nextTick();
-      expect(wrapper.emitted('submit-form')).toBeTruthy();
+      expect(wrapper.emitted('submit-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
 
@@ -185,13 +178,13 @@ describe('Design reply form component', () => {
       findTextarea().setValue('test2');
 
       await nextTick();
-      expect(wrapper.emitted('input')).toBeTruthy();
+      expect(wrapper.emitted('input')).toEqual([['test'], ['test2']]);
     });
 
     it('emits cancelForm event on Escape key if text was not changed', () => {
       findTextarea().trigger('keyup.esc');
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('opens confirmation modal on Escape key when text has changed', async () => {
@@ -199,13 +192,13 @@ describe('Design reply form component', () => {
 
       await nextTick();
       findTextarea().trigger('keyup.esc');
-      expect(showModal).toHaveBeenCalled();
+      expect(confirmAction).toHaveBeenCalled();
     });
 
     it('emits cancelForm event on Cancel button click if text was not changed', () => {
       findCancelButton().trigger('click');
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
     });
 
     it('opens confirmation modal on Cancel button click when text has changed', async () => {
@@ -213,17 +206,41 @@ describe('Design reply form component', () => {
 
       await nextTick();
       findCancelButton().trigger('click');
-      expect(showModal).toHaveBeenCalled();
+      expect(confirmAction).toHaveBeenCalled();
     });
 
-    it('emits cancelForm event on modal Ok button click', () => {
+    it('emits cancelForm event when confirmed', async () => {
+      confirmAction.mockResolvedValueOnce(true);
       const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
 
+      wrapper.setProps({ value: 'test3' });
+      await nextTick();
+
       findTextarea().trigger('keyup.esc');
-      findModal().vm.$emit('ok');
+      await nextTick();
+
+      expect(confirmAction).toHaveBeenCalled();
+      await nextTick();
 
-      expect(wrapper.emitted('cancel-form')).toBeTruthy();
+      expect(wrapper.emitted('cancel-form')).toHaveLength(1);
       expect(autosaveResetSpy).toHaveBeenCalled();
     });
+
+    it("doesn't emit cancelForm event when not confirmed", async () => {
+      confirmAction.mockResolvedValueOnce(false);
+      const autosaveResetSpy = jest.spyOn(wrapper.vm.autosaveDiscussion, 'reset');
+
+      wrapper.setProps({ value: 'test3' });
+      await nextTick();
+
+      findTextarea().trigger('keyup.esc');
+      await nextTick();
+
+      expect(confirmAction).toHaveBeenCalled();
+      await nextTick();
+
+      expect(wrapper.emitted('cancel-form')).toBeUndefined();
+      expect(autosaveResetSpy).not.toHaveBeenCalled();
+    });
   });
 });