Add latest changes from gitlab-org/gitlab@13-0-stable-ee

4 files changed, 222 insertions, 75 deletions

diff --git a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js
index a25aba61516..ff780939026 100644
--- a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js
@@ -7,27 +7,32 @@ import { file } from '../../helpers';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
+const TEST_FILE_PATH = 'test/file/path';
+
 describe('IDE commit editor header', () => {
   let wrapper;
-  let f;
   let store;
 
-  const findDiscardModal = () => wrapper.find({ ref: 'discardModal' });
-  const findDiscardButton = () => wrapper.find({ ref: 'discardButton' });
-
-  beforeEach(() => {
-    f = file('file');
-    store = createStore();
-
+  const createComponent = (fileProps = {}) => {
     wrapper = mount(EditorHeader, {
       store,
       localVue,
       propsData: {
-        activeFile: f,
+        activeFile: {
+          ...file(TEST_FILE_PATH),
+          staged: true,
+          ...fileProps,
+        },
       },
     });
+  };
 
-    jest.spyOn(wrapper.vm, 'discardChanges').mockImplementation();
+  const findDiscardModal = () => wrapper.find({ ref: 'discardModal' });
+  const findDiscardButton = () => wrapper.find({ ref: 'discardButton' });
+
+  beforeEach(() => {
+    store = createStore();
+    jest.spyOn(store, 'dispatch').mockImplementation();
   });
 
   afterEach(() => {
@@ -35,29 +40,38 @@ describe('IDE commit editor header', () => {
     wrapper = null;
   });
 
-  it('renders button to discard', () => {
-    expect(wrapper.vm.$el.querySelectorAll('.btn')).toHaveLength(1);
+  it.each`
+    fileProps                            | shouldExist
+    ${{ staged: false, changed: false }} | ${false}
+    ${{ staged: true, changed: false }}  | ${true}
+    ${{ staged: false, changed: true }}  | ${true}
+    ${{ staged: true, changed: true }}   | ${true}
+  `('with $fileProps, show discard button is $shouldExist', ({ fileProps, shouldExist }) => {
+    createComponent(fileProps);
+
+    expect(findDiscardButton().exists()).toBe(shouldExist);
   });
 
   describe('discard button', () => {
-    let modal;
-
     beforeEach(() => {
-      modal = findDiscardModal();
+      createComponent();
 
+      const modal = findDiscardModal();
       jest.spyOn(modal.vm, 'show');
 
       findDiscardButton().trigger('click');
     });
 
     it('opens a dialog confirming discard', () => {
-      expect(modal.vm.show).toHaveBeenCalled();
+      expect(findDiscardModal().vm.show).toHaveBeenCalled();
     });
 
     it('calls discardFileChanges if dialog result is confirmed', () => {
-      modal.vm.$emit('ok');
+      expect(store.dispatch).not.toHaveBeenCalled();
+
+      findDiscardModal().vm.$emit('ok');
 
-      expect(wrapper.vm.discardChanges).toHaveBeenCalledWith(f.path);
+      expect(store.dispatch).toHaveBeenCalledWith('discardFileChanges', TEST_FILE_PATH);
     });
   });
 });
diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js
index dfde69ab2df..129180bb46e 100644
--- a/spec/frontend/ide/components/commit_sidebar/form_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js
@@ -1,6 +1,5 @@
 import Vue from 'vue';
 import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
-import waitForPromises from 'helpers/wait_for_promises';
 import { projectData } from 'jest/ide/mock_data';
 import store from '~/ide/stores';
 import CommitForm from '~/ide/components/commit_sidebar/form.vue';
@@ -31,10 +30,10 @@ describe('IDE commit form', () => {
   });
 
   describe('compact', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       vm.isCompact = true;
 
-      vm.$nextTick(done);
+      return vm.$nextTick();
     });
 
     it('renders commit button in compact mode', () => {
@@ -46,95 +45,84 @@ describe('IDE commit form', () => {
       expect(vm.$el.querySelector('form')).toBeNull();
     });
 
-    it('renders overview text', done => {
+    it('renders overview text', () => {
       vm.$store.state.stagedFiles.push('test');
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('p').textContent).toContain('1 changed file');
-        done();
       });
     });
 
-    it('shows form when clicking commit button', done => {
+    it('shows form when clicking commit button', () => {
       vm.$el.querySelector('.btn-primary').click();
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.$el.querySelector('form')).not.toBeNull();
-
-        done();
       });
     });
 
-    it('toggles activity bar view when clicking commit button', done => {
+    it('toggles activity bar view when clicking commit button', () => {
       vm.$el.querySelector('.btn-primary').click();
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
-
-        done();
       });
     });
 
-    it('collapses if lastCommitMsg is set to empty and current view is not commit view', done => {
+    it('collapses if lastCommitMsg is set to empty and current view is not commit view', () => {
       store.state.lastCommitMsg = 'abc';
       store.state.currentActivityView = leftSidebarViews.edit.name;
 
-      vm.$nextTick(() => {
-        // if commit message is set, form is uncollapsed
-        expect(vm.isCompact).toBe(false);
+      return vm
+        .$nextTick()
+        .then(() => {
+          // if commit message is set, form is uncollapsed
+          expect(vm.isCompact).toBe(false);
 
-        store.state.lastCommitMsg = '';
+          store.state.lastCommitMsg = '';
 
-        vm.$nextTick(() => {
+          return vm.$nextTick();
+        })
+        .then(() => {
           // collapsed when set to empty
           expect(vm.isCompact).toBe(true);
-
-          done();
         });
-      });
     });
   });
 
   describe('full', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       vm.isCompact = false;
 
-      vm.$nextTick(done);
+      return vm.$nextTick();
     });
 
-    it('updates commitMessage in store on input', done => {
+    it('updates commitMessage in store on input', () => {
       const textarea = vm.$el.querySelector('textarea');
 
       textarea.value = 'testing commit message';
 
       textarea.dispatchEvent(new Event('input'));
 
-      waitForPromises()
-        .then(() => {
-          expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
-        })
-        .then(done)
-        .catch(done.fail);
+      return vm.$nextTick().then(() => {
+        expect(vm.$store.state.commit.commitMessage).toBe('testing commit message');
+      });
     });
 
-    it('updating currentActivityView not to commit view sets compact mode', done => {
+    it('updating currentActivityView not to commit view sets compact mode', () => {
       store.state.currentActivityView = 'a';
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(vm.isCompact).toBe(true);
-
-        done();
       });
     });
 
-    it('always opens itself in full view current activity view is not commit view when clicking commit button', done => {
+    it('always opens itself in full view current activity view is not commit view when clicking commit button', () => {
       vm.$el.querySelector('.btn-primary').click();
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name);
         expect(vm.isCompact).toBe(false);
-
-        done();
       });
     });
 
@@ -143,41 +131,54 @@ describe('IDE commit form', () => {
         expect(vm.$el.querySelector('.btn-default').textContent).toContain('Collapse');
       });
 
-      it('resets commitMessage when clicking discard button', done => {
+      it('resets commitMessage when clicking discard button', () => {
         vm.$store.state.commit.commitMessage = 'testing commit message';
 
-        waitForPromises()
+        return vm
+          .$nextTick()
           .then(() => {
             vm.$el.querySelector('.btn-default').click();
           })
-          .then(Vue.nextTick)
+          .then(() => vm.$nextTick())
           .then(() => {
             expect(vm.$store.state.commit.commitMessage).not.toBe('testing commit message');
-          })
-          .then(done)
-          .catch(done.fail);
+          });
       });
     });
 
     describe('when submitting', () => {
       beforeEach(() => {
-        jest.spyOn(vm, 'commitChanges').mockImplementation(() => {});
+        jest.spyOn(vm, 'commitChanges');
+
         vm.$store.state.stagedFiles.push('test');
+        vm.$store.state.commit.commitMessage = 'testing commit message';
       });
 
-      it('calls commitChanges', done => {
-        vm.$store.state.commit.commitMessage = 'testing commit message';
+      it('calls commitChanges', () => {
+        vm.commitChanges.mockResolvedValue({ success: true });
+
+        return vm.$nextTick().then(() => {
+          vm.$el.querySelector('.btn-success').click();
+
+          expect(vm.commitChanges).toHaveBeenCalled();
+        });
+      });
+
+      it('opens new branch modal if commitChanges throws an error', () => {
+        vm.commitChanges.mockRejectedValue({ success: false });
 
-        waitForPromises()
+        jest.spyOn(vm.$refs.createBranchModal, 'show').mockImplementation();
+
+        return vm
+          .$nextTick()
           .then(() => {
             vm.$el.querySelector('.btn-success').click();
+
+            return vm.$nextTick();
           })
-          .then(Vue.nextTick)
           .then(() => {
-            expect(vm.commitChanges).toHaveBeenCalled();
-          })
-          .then(done)
-          .catch(done.fail);
+            expect(vm.$refs.createBranchModal.show).toHaveBeenCalled();
+          });
       });
     });
   });
diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js
index ee209487665..2b5664ffc4e 100644
--- a/spec/frontend/ide/components/commit_sidebar/list_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js
@@ -21,8 +21,6 @@ describe('Multi-file editor commit sidebar list', () => {
       keyPrefix: 'staged',
     });
 
-    vm.$store.state.rightPanelCollapsed = false;
-
     vm.$mount();
   });
 
diff --git a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
new file mode 100644
index 00000000000..ac80ba58056
--- /dev/null
+++ b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js
@@ -0,0 +1,134 @@
+import Vue from 'vue';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { resetStore } from 'jest/ide/helpers';
+import store from '~/ide/stores';
+import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
+
+describe('IDE commit sidebar radio group', () => {
+  let vm;
+
+  beforeEach(done => {
+    const Component = Vue.extend(radioGroup);
+
+    store.state.commit.commitAction = '2';
+
+    vm = createComponentWithStore(Component, store, {
+      value: '1',
+      label: 'test',
+      checked: true,
+    });
+
+    vm.$mount();
+
+    Vue.nextTick(done);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('uses label if present', () => {
+    expect(vm.$el.textContent).toContain('test');
+  });
+
+  it('uses slot if label is not present', done => {
+    vm.$destroy();
+
+    vm = new Vue({
+      components: {
+        radioGroup,
+      },
+      store,
+      render: createElement =>
+        createElement('radio-group', { props: { value: '1' } }, 'Testing slot'),
+    });
+
+    vm.$mount();
+
+    Vue.nextTick(() => {
+      expect(vm.$el.textContent).toContain('Testing slot');
+
+      done();
+    });
+  });
+
+  it('updates store when changing radio button', done => {
+    vm.$el.querySelector('input').dispatchEvent(new Event('change'));
+
+    Vue.nextTick(() => {
+      expect(store.state.commit.commitAction).toBe('1');
+
+      done();
+    });
+  });
+
+  describe('with input', () => {
+    beforeEach(done => {
+      vm.$destroy();
+
+      const Component = Vue.extend(radioGroup);
+
+      store.state.commit.commitAction = '1';
+      store.state.commit.newBranchName = 'test-123';
+
+      vm = createComponentWithStore(Component, store, {
+        value: '1',
+        label: 'test',
+        checked: true,
+        showInput: true,
+      });
+
+      vm.$mount();
+
+      Vue.nextTick(done);
+    });
+
+    it('renders input box when commitAction matches value', () => {
+      expect(vm.$el.querySelector('.form-control')).not.toBeNull();
+    });
+
+    it('hides input when commitAction doesnt match value', done => {
+      store.state.commit.commitAction = '2';
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.form-control')).toBeNull();
+        done();
+      });
+    });
+
+    it('updates branch name in store on input', done => {
+      const input = vm.$el.querySelector('.form-control');
+      input.value = 'testing-123';
+      input.dispatchEvent(new Event('input'));
+
+      Vue.nextTick(() => {
+        expect(store.state.commit.newBranchName).toBe('testing-123');
+
+        done();
+      });
+    });
+
+    it('renders newBranchName if present', () => {
+      const input = vm.$el.querySelector('.form-control');
+
+      expect(input.value).toBe('test-123');
+    });
+  });
+
+  describe('tooltipTitle', () => {
+    it('returns title when disabled', () => {
+      vm.title = 'test title';
+      vm.disabled = true;
+
+      expect(vm.tooltipTitle).toBe('test title');
+    });
+
+    it('returns blank when not disabled', () => {
+      vm.title = 'test title';
+
+      expect(vm.tooltipTitle).not.toBe('test title');
+    });
+  });
+});