1 files changed, 143 insertions, 0 deletions
diff --git a/spec/frontend/branches/components/delete_merged_branches_spec.js b/spec/frontend/branches/components/delete_merged_branches_spec.js
new file mode 100644
index 00000000000..4f1e772f4a4
--- /dev/null
+++ b/spec/frontend/branches/components/delete_merged_branches_spec.js
@@ -0,0 +1,143 @@
+import { GlButton, GlModal, GlFormInput, GlSprintf } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
+import waitForPromises from 'helpers/wait_for_promises';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import DeleteMergedBranches, { i18n } from '~/branches/components/delete_merged_branches.vue';
+import { formPath, propsDataMock } from '../mock_data';
+
+jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
+
+let wrapper;
+
+const stubsData = {
+  GlModal: stubComponent(GlModal, {
+    template:
+      '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-footer"></slot></div>',
+  }),
+  GlButton,
+  GlFormInput,
+  GlSprintf,
+};
+
+const createComponent = (mountFn = shallowMountExtended, stubs = {}) => {
+  wrapper = mountFn(DeleteMergedBranches, {
+    propsData: {
+      ...propsDataMock,
+    },
+    directives: {
+      GlTooltip: createMockDirective(),
+    },
+    stubs,
+  });
+};
+
+const findDeleteButton = () => wrapper.findComponent(GlButton);
+const findModal = () => wrapper.findComponent(GlModal);
+const findConfirmationButton = () =>
+  wrapper.findByTestId('delete-merged-branches-confirmation-button');
+const findCancelButton = () => wrapper.findByTestId('delete-merged-branches-cancel-button');
+const findFormInput = () => wrapper.findComponent(GlFormInput);
+const findForm = () => wrapper.find('form');
+const submitFormSpy = () => jest.spyOn(wrapper.vm.$refs.form, 'submit');
+
+describe('Delete merged branches component', () => {
+  beforeEach(() => {
+    createComponent();
+  });
+
+  describe('Delete merged branches button', () => {
+    it('has correct attributes, text and tooltip', () => {
+      expect(findDeleteButton().attributes()).toMatchObject({
+        category: 'secondary',
+        variant: 'danger',
+      });
+
+      expect(findDeleteButton().text()).toBe(i18n.deleteButtonText);
+    });
+
+    it('displays a tooltip', () => {
+      const tooltip = getBinding(findDeleteButton().element, 'gl-tooltip');
+
+      expect(tooltip).toBeDefined();
+      expect(tooltip.value).toBe(wrapper.vm.buttonTooltipText);
+    });
+
+    it('opens modal when clicked', () => {
+      createComponent(mount);
+      jest.spyOn(wrapper.vm.$refs.modal, 'show');
+      findDeleteButton().trigger('click');
+
+      expect(wrapper.vm.$refs.modal.show).toHaveBeenCalled();
+    });
+  });
+
+  describe('Delete merged branches confirmation modal', () => {
+    beforeEach(() => {
+      createComponent(shallowMountExtended, stubsData);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('renders correct modal title and text', () => {
+      const modalText = findModal().text();
+      expect(findModal().props('title')).toBe(i18n.modalTitle);
+      expect(modalText).toContain(i18n.notVisibleBranchesWarning);
+      expect(modalText).toContain(i18n.protectedBranchWarning);
+    });
+
+    it('renders confirm and cancel buttons with correct text', () => {
+      expect(findConfirmationButton().text()).toContain(i18n.deleteButtonText);
+      expect(findCancelButton().text()).toContain(i18n.cancelButtonText);
+    });
+
+    it('renders form with correct attributes and hiden inputs', () => {
+      const form = findForm();
+      expect(form.attributes()).toEqual({
+        action: formPath,
+        method: 'post',
+      });
+      expect(form.find('input[name="_method"]').attributes('value')).toBe('delete');
+      expect(form.find('input[name="authenticity_token"]').attributes('value')).toBe(
+        'mock-csrf-token',
+      );
+    });
+
+    it('matches snapshot', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('has a disabled confirm button by default', () => {
+      expect(findConfirmationButton().props('disabled')).toBe(true);
+    });
+
+    it('keeps disabled state when wrong input is provided', async () => {
+      findFormInput().vm.$emit('input', 'hello');
+      await waitForPromises();
+      expect(findConfirmationButton().props('disabled')).toBe(true);
+      findConfirmationButton().trigger('click');
+
+      expect(submitFormSpy()).not.toHaveBeenCalled();
+      findFormInput().trigger('keyup.enter');
+
+      expect(submitFormSpy()).not.toHaveBeenCalled();
+    });
+
+    it('submits form when correct amount is provided and the confirm button is clicked', async () => {
+      findFormInput().vm.$emit('input', 'delete');
+      await waitForPromises();
+      expect(findDeleteButton().props('disabled')).not.toBe(true);
+      findConfirmationButton().trigger('click');
+      expect(submitFormSpy()).toHaveBeenCalled();
+    });
+
+    it('calls hide on the modal when cancel button is clicked', () => {
+      const closeModalSpy = jest.spyOn(wrapper.vm.$refs.modal, 'hide');
+      findCancelButton().trigger('click');
+      expect(closeModalSpy).toHaveBeenCalled();
+    });
+  });
+});