Add latest changes from gitlab-org/gitlab@master

3 files changed, 289 insertions, 0 deletions

diff --git a/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
new file mode 100644
index 00000000000..6aab3b51806
--- /dev/null
+++ b/spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap
@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Delete merged branches component Delete merged branches confirmation modal matches snapshot 1`] = `
+<div>
+  <b-button-stub
+    class="gl-mr-3 gl-button btn-danger-secondary"
+    data-qa-selector="delete_merged_branches_button"
+    size="md"
+    tag="button"
+    type="button"
+    variant="danger"
+  >
+    <!---->
+     
+    <!---->
+      
+    <span
+      class="gl-button-text"
+    >
+      Delete merged branches
+  
+    </span>
+  </b-button-stub>
+   
+  <div>
+    <form
+      action="/namespace/project/-/merged_branches"
+      method="post"
+    >
+      <p>
+        You are about to 
+        <strong>
+          delete all branches
+        </strong>
+         that were merged into 
+        <code>
+          master
+        </code>
+        .
+      </p>
+       
+      <p>
+        
+        This may include merged branches that are not visible on the current screen.
+      
+      </p>
+       
+      <p>
+        
+        A branch won't be deleted if it is protected or associated with an open merge request.
+      
+      </p>
+       
+      <p>
+        This bulk action is 
+        <strong>
+          permanent and cannot be undone or recovered
+        </strong>
+        .
+      </p>
+       
+      <p>
+        Plese type the following to confirm: 
+        <code>
+          delete
+        </code>
+        . 
+        <b-form-input-stub
+          aria-labelledby="input-label"
+          autocomplete="off"
+          class="gl-form-input gl-mt-2 gl-form-input-sm"
+          data-qa-selector="delete_merged_branches_input"
+          debounce="0"
+          formatter="[Function]"
+          type="text"
+          value=""
+        />
+      </p>
+       
+      <input
+        name="_method"
+        type="hidden"
+        value="delete"
+      />
+       
+      <input
+        name="authenticity_token"
+        type="hidden"
+        value="mock-csrf-token"
+      />
+    </form>
+    <div
+      class="gl-display-flex gl-flex-direction-row gl-justify-content-end gl-flex-wrap gl-m-0 gl-mr-3"
+    >
+      <b-button-stub
+        class="gl-button"
+        data-testid="delete-merged-branches-cancel-button"
+        size="md"
+        tag="button"
+        type="button"
+        variant="default"
+      >
+        <!---->
+         
+        <!---->
+          
+        <span
+          class="gl-button-text"
+        >
+          
+          Cancel
+        
+        </span>
+      </b-button-stub>
+       
+      <b-button-stub
+        class="gl-button"
+        data-qa-selector="delete_merged_branches_confirmation_button"
+        data-testid="delete-merged-branches-confirmation-button"
+        disabled="true"
+        size="md"
+        tag="button"
+        type="button"
+        variant="danger"
+      >
+        <!---->
+         
+        <!---->
+          
+        <span
+          class="gl-button-text"
+        >
+          Delete merged branches
+        </span>
+      </b-button-stub>
+    </div>
+  </div>
+</div>
+`;
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();
+    });
+  });
+});
diff --git a/spec/frontend/branches/mock_data.js b/spec/frontend/branches/mock_data.js
new file mode 100644
index 00000000000..9e8839d8ce9
--- /dev/null
+++ b/spec/frontend/branches/mock_data.js
@@ -0,0 +1,7 @@
+export const formPath = '/namespace/project/-/merged_branches';
+const defaultBranch = 'master';
+
+export const propsDataMock = {
+  formPath,
+  defaultBranch,
+};