Add latest changes from gitlab-org/gitlab@master

1 files changed, 59 insertions, 35 deletions

diff --git a/spec/frontend/branches/components/delete_branch_modal_spec.js b/spec/frontend/branches/components/delete_branch_modal_spec.js
index dd5b7fca564..404431ea5d8 100644
--- a/spec/frontend/branches/components/delete_branch_modal_spec.js
+++ b/spec/frontend/branches/components/delete_branch_modal_spec.js
@@ -7,6 +7,8 @@ import DeleteBranchModal from '~/branches/components/delete_branch_modal.vue';
 import eventHub from '~/branches/event_hub';
 
 let wrapper;
+let showMock;
+let hideMock;
 
 const branchName = 'test_modal';
 const defaultBranchName = 'default';
@@ -14,23 +16,20 @@ const deletePath = '/path/to/branch';
 const merged = false;
 const isProtectedBranch = false;
 
-const createComponent = (data = {}) => {
+const createComponent = () => {
+  showMock = jest.fn();
+  hideMock = jest.fn();
+
   wrapper = extendedWrapper(
     shallowMount(DeleteBranchModal, {
-      data() {
-        return {
-          branchName,
-          deletePath,
-          defaultBranchName,
-          merged,
-          isProtectedBranch,
-          ...data,
-        };
-      },
       stubs: {
         GlModal: stubComponent(GlModal, {
           template:
             '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+          methods: {
+            show: showMock,
+            hide: hideMock,
+          },
         }),
         GlButton,
         GlFormInput,
@@ -46,21 +45,36 @@ const findDeleteButton = () => wrapper.findByTestId('delete-branch-confirmation-
 const findCancelButton = () => wrapper.findByTestId('delete-branch-cancel-button');
 const findFormInput = () => wrapper.findComponent(GlFormInput);
 const findForm = () => wrapper.find('form');
-const submitFormSpy = () => jest.spyOn(wrapper.vm.$refs.form, 'submit');
+const createSubmitFormSpy = () => jest.spyOn(findForm().element, 'submit');
+
+const emitOpenModal = (data = {}) =>
+  eventHub.$emit('openModal', {
+    isProtectedBranch,
+    branchName,
+    defaultBranchName,
+    deletePath,
+    merged,
+    ...data,
+  });
 
 describe('Delete branch modal', () => {
   const expectedUnmergedWarning =
     "This branch hasn't been merged into default. To avoid data loss, consider merging this branch before deleting it.";
 
+  beforeEach(() => {
+    createComponent();
+
+    emitOpenModal();
+
+    showMock.mockClear();
+    hideMock.mockClear();
+  });
+
   describe('Deleting a regular branch', () => {
     const expectedTitle = 'Delete branch. Are you ABSOLUTELY SURE?';
     const expectedWarning = "You're about to permanently delete the branch test_modal.";
     const expectedMessage = `${expectedWarning} ${expectedUnmergedWarning}`;
 
-    beforeEach(() => {
-      createComponent();
-    });
-
     it('renders the modal correctly', () => {
       expect(findModal().props('title')).toBe(expectedTitle);
       expect(findModalMessage().text()).toMatchInterpolatedText(expectedMessage);
@@ -70,32 +84,30 @@ describe('Delete branch modal', () => {
     });
 
     it('submits the form when the delete button is clicked', () => {
+      const submitSpy = createSubmitFormSpy();
+
+      expect(submitSpy).not.toHaveBeenCalled();
+
       findDeleteButton().trigger('click');
 
       expect(findForm().attributes('action')).toBe(deletePath);
-      expect(submitFormSpy()).toHaveBeenCalled();
+      expect(submitSpy).toHaveBeenCalled();
     });
 
     it('calls show on the modal when a `openModal` event is received through the event hub', async () => {
-      const showSpy = jest.spyOn(wrapper.vm.$refs.modal, 'show');
-
-      eventHub.$emit('openModal', {
-        isProtectedBranch,
-        branchName,
-        defaultBranchName,
-        deletePath,
-        merged,
-      });
+      expect(showMock).not.toHaveBeenCalled();
+
+      emitOpenModal();
 
-      expect(showSpy).toHaveBeenCalled();
+      expect(showMock).toHaveBeenCalled();
     });
 
     it('calls hide on the modal when cancel button is clicked', () => {
-      const closeModalSpy = jest.spyOn(wrapper.vm.$refs.modal, 'hide');
+      expect(hideMock).not.toHaveBeenCalled();
 
       findCancelButton().trigger('click');
 
-      expect(closeModalSpy).toHaveBeenCalled();
+      expect(hideMock).toHaveBeenCalled();
     });
   });
 
@@ -108,7 +120,9 @@ describe('Delete branch modal', () => {
       'After you confirm and select Yes, delete protected branch, you cannot recover this branch. Please type the following to confirm: test_modal';
 
     beforeEach(() => {
-      createComponent({ isProtectedBranch: true });
+      emitOpenModal({
+        isProtectedBranch: true,
+      });
     });
 
     describe('rendering the modal correctly for a protected branch', () => {
@@ -138,8 +152,11 @@ describe('Delete branch modal', () => {
 
       await waitForPromises();
 
+      const submitSpy = createSubmitFormSpy();
+
       findDeleteButton().trigger('click');
-      expect(submitFormSpy()).not.toHaveBeenCalled();
+
+      expect(submitSpy).not.toHaveBeenCalled();
     });
 
     it('opens with the delete button disabled and enables it when branch name is confirmed and fires submit', async () => {
@@ -151,16 +168,23 @@ describe('Delete branch modal', () => {
 
       expect(findDeleteButton().props('disabled')).not.toBe(true);
 
+      const submitSpy = createSubmitFormSpy();
+
+      expect(submitSpy).not.toHaveBeenCalled();
+
       findDeleteButton().trigger('click');
-      expect(submitFormSpy()).toHaveBeenCalled();
+
+      expect(submitSpy).toHaveBeenCalled();
     });
   });
 
   describe('Deleting a merged branch', () => {
-    it('does not include the unmerged branch warning when merged is true', () => {
-      createComponent({ merged: true });
+    beforeEach(() => {
+      emitOpenModal({ merged: true });
+    });
 
-      expect(findModalMessage().html()).not.toContain(expectedUnmergedWarning);
+    it('does not include the unmerged branch warning when merged is true', () => {
+      expect(findModalMessage().text()).not.toContain(expectedUnmergedWarning);
     });
   });
 });