Resolve "Override squash commit message"

7 files changed, 367 insertions, 58 deletions

diff --git a/spec/features/merge_request/user_accepts_merge_request_spec.rb b/spec/features/merge_request/user_accepts_merge_request_spec.rb
index 00ac7c72a11..5fa23dbb998 100644
--- a/spec/features/merge_request/user_accepts_merge_request_spec.rb
+++ b/spec/features/merge_request/user_accepts_merge_request_spec.rb
@@ -80,8 +80,8 @@ describe 'User accepts a merge request', :js do
     end
 
     it 'accepts a merge request' do
-      click_button('Modify commit message')
-      fill_in('Commit message', with: 'wow such merge')
+      find('.js-mr-widget-commits-count').click
+      fill_in('merge-message-edit', with: 'wow such merge')
 
       click_button('Merge')
 
diff --git a/spec/features/merge_request/user_customizes_merge_commit_message_spec.rb b/spec/features/merge_request/user_customizes_merge_commit_message_spec.rb
index 8d2d4279d3c..c6b11fce388 100644
--- a/spec/features/merge_request/user_customizes_merge_commit_message_spec.rb
+++ b/spec/features/merge_request/user_customizes_merge_commit_message_spec.rb
@@ -13,7 +13,7 @@ describe 'Merge request < User customizes merge commit message', :js do
       description: "Description\n\nclosing #{issue_1.to_reference}, #{issue_2.to_reference}"
     )
   end
-  let(:textbox) { page.find(:css, '.js-commit-message', visible: false) }
+  let(:textbox) { page.find(:css, '#merge-message-edit', visible: false) }
   let(:default_message) do
     [
       "Merge branch 'feature' into 'master'",
@@ -38,16 +38,16 @@ describe 'Merge request < User customizes merge commit message', :js do
   end
 
   it 'toggles commit message between message with description and without description' do
-    expect(page).not_to have_selector('.js-commit-message')
-    click_button "Modify commit message"
+    expect(page).not_to have_selector('#merge-message-edit')
+    first('.js-mr-widget-commits-count').click
     expect(textbox).to be_visible
     expect(textbox.value).to eq(default_message)
 
-    click_link "Include description in commit message"
+    check('Include merge request description')
 
     expect(textbox.value).to eq(message_with_description)
 
-    click_link "Don't include description in commit message"
+    uncheck('Include merge request description')
 
     expect(textbox.value).to eq(default_message)
   end
diff --git a/spec/javascripts/vue_mr_widget/components/states/commit_edit_spec.js b/spec/javascripts/vue_mr_widget/components/states/commit_edit_spec.js
new file mode 100644
index 00000000000..994d6255324
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/states/commit_edit_spec.js
@@ -0,0 +1,85 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
+
+const localVue = createLocalVue();
+const testCommitMessage = 'Test commit message';
+const testLabel = 'Test label';
+const testInputId = 'test-input-id';
+
+describe('Commits edit component', () => {
+  let wrapper;
+
+  const createComponent = (slots = {}) => {
+    wrapper = shallowMount(localVue.extend(CommitEdit), {
+      localVue,
+      sync: false,
+      propsData: {
+        value: testCommitMessage,
+        label: testLabel,
+        inputId: testInputId,
+      },
+      slots: {
+        ...slots,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findTextarea = () => wrapper.find('.form-control');
+
+  it('has a correct label', () => {
+    const labelElement = wrapper.find('.col-form-label');
+
+    expect(labelElement.text()).toBe(testLabel);
+  });
+
+  describe('textarea', () => {
+    it('has a correct ID', () => {
+      expect(findTextarea().attributes('id')).toBe(testInputId);
+    });
+
+    it('has a correct value', () => {
+      expect(findTextarea().element.value).toBe(testCommitMessage);
+    });
+
+    it('emits an input event and receives changed value', () => {
+      const changedCommitMessage = 'Changed commit message';
+
+      findTextarea().element.value = changedCommitMessage;
+      findTextarea().trigger('input');
+
+      expect(wrapper.emitted().input[0]).toEqual([changedCommitMessage]);
+      expect(findTextarea().element.value).toBe(changedCommitMessage);
+    });
+  });
+
+  describe('when slots are present', () => {
+    beforeEach(() => {
+      createComponent({
+        header: `<div class="test-header">${testCommitMessage}</div>`,
+        checkbox: `<label slot="checkbox" class="test-checkbox">${testLabel}</label >`,
+      });
+    });
+
+    it('renders header slot correctly', () => {
+      const headerSlotElement = wrapper.find('.test-header');
+
+      expect(headerSlotElement.exists()).toBe(true);
+      expect(headerSlotElement.text()).toBe(testCommitMessage);
+    });
+
+    it('renders checkbox slot correctly', () => {
+      const checkboxSlotElement = wrapper.find('.test-checkbox');
+
+      expect(checkboxSlotElement.exists()).toBe(true);
+      expect(checkboxSlotElement.text()).toBe(testLabel);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
new file mode 100644
index 00000000000..daf1cc2d98b
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_commit_message_dropdown_spec.js
@@ -0,0 +1,61 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlDropdownItem } from '@gitlab/ui';
+import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
+
+const localVue = createLocalVue();
+const commits = [
+  {
+    title: 'Commit 1',
+    short_id: '78d5b7',
+    message: 'Update test.txt',
+  },
+  {
+    title: 'Commit 2',
+    short_id: '34cbe28b',
+    message: 'Fixed test',
+  },
+  {
+    title: 'Commit 3',
+    short_id: 'fa42932a',
+    message: 'Added changelog',
+  },
+];
+
+describe('Commits message dropdown component', () => {
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(localVue.extend(CommitMessageDropdown), {
+      localVue,
+      sync: false,
+      propsData: {
+        commits,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
+  const findFirstDropdownElement = () => findDropdownElements().at(0);
+
+  it('should have 3 elements in dropdown list', () => {
+    expect(findDropdownElements().length).toBe(3);
+  });
+
+  it('should have correct message for the first dropdown list element', () => {
+    expect(findFirstDropdownElement().text()).toBe('78d5b7 Commit 1');
+  });
+
+  it('should emit a commit title on selecting commit', () => {
+    findFirstDropdownElement().vm.$emit('click');
+
+    expect(wrapper.emitted().input[0]).toEqual(['Update test.txt']);
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_commits_header_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
new file mode 100644
index 00000000000..5cf6408cf34
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
@@ -0,0 +1,110 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+const localVue = createLocalVue();
+
+describe('Commits header component', () => {
+  let wrapper;
+
+  const createComponent = props => {
+    wrapper = shallowMount(localVue.extend(CommitsHeader), {
+      localVue,
+      sync: false,
+      propsData: {
+        isSquashEnabled: false,
+        targetBranch: 'master',
+        commitsCount: 5,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findHeaderWrapper = () => wrapper.find('.js-mr-widget-commits-count');
+  const findCommitToggle = () => wrapper.find('.commit-edit-toggle');
+  const findIcon = () => wrapper.find(Icon);
+  const findCommitsCountMessage = () => wrapper.find('.commits-count-message');
+  const findTargetBranchMessage = () => wrapper.find('.label-branch');
+  const findModifyButton = () => wrapper.find('.modify-message-button');
+
+  describe('when collapsed', () => {
+    it('toggle has aria-label equal to Expand', () => {
+      createComponent();
+
+      expect(findCommitToggle().attributes('aria-label')).toBe('Expand');
+    });
+
+    it('has a chevron-right icon', () => {
+      createComponent();
+      wrapper.setData({ expanded: false });
+
+      expect(findIcon().props('name')).toBe('chevron-right');
+    });
+
+    describe('when squash is disabled', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('has commits count message showing correct amount of commits', () => {
+        expect(findCommitsCountMessage().text()).toBe('5 commits');
+      });
+
+      it('has button with modify merge commit message', () => {
+        expect(findModifyButton().text()).toBe('Modify merge commit');
+      });
+    });
+
+    describe('when squash is enabled', () => {
+      beforeEach(() => {
+        createComponent({ isSquashEnabled: true });
+      });
+
+      it('has commits count message showing one commit when squash is enabled', () => {
+        expect(findCommitsCountMessage().text()).toBe('1 commit');
+      });
+
+      it('has button with modify commit messages text', () => {
+        expect(findModifyButton().text()).toBe('Modify commit messages');
+      });
+    });
+
+    it('has correct target branch displayed', () => {
+      createComponent();
+
+      expect(findTargetBranchMessage().text()).toBe('master');
+    });
+  });
+
+  describe('when expanded', () => {
+    beforeEach(() => {
+      createComponent();
+      wrapper.setData({ expanded: true });
+    });
+
+    it('toggle has aria-label equal to collapse', done => {
+      wrapper.vm.$nextTick(() => {
+        expect(findCommitToggle().attributes('aria-label')).toBe('Collapse');
+        done();
+      });
+    });
+
+    it('has a chevron-down icon', done => {
+      wrapper.vm.$nextTick(() => {
+        expect(findIcon().props('name')).toBe('chevron-down');
+        done();
+      });
+    });
+
+    it('has a collapse text', done => {
+      wrapper.vm.$nextTick(() => {
+        expect(findHeaderWrapper().text()).toBe('Collapse');
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index e387367d1a2..631da202d1d 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -1,10 +1,14 @@
 import Vue from 'vue';
 import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue';
 import SquashBeforeMerge from '~/vue_merge_request_widget/components/states/squash_before_merge.vue';
+import CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.vue';
+import CommitEdit from '~/vue_merge_request_widget/components/states/commit_edit.vue';
+import CommitMessageDropdown from '~/vue_merge_request_widget/components/states/commit_message_dropdown.vue';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 
 const commitMessage = 'This is the commit message';
+const squashCommitMessage = 'This is the squash commit message';
 const commitMessageWithDescription = 'This is the commit message description';
 const createTestMr = customConfig => {
   const mr = {
@@ -19,9 +23,11 @@ const createTestMr = customConfig => {
     sha: '12345678',
     squash: false,
     commitMessage,
+    squashCommitMessage,
     commitMessageWithDescription,
     shouldRemoveSourceBranch: true,
     canRemoveSourceBranch: false,
+    targetBranch: 'master',
   };
 
   Object.assign(mr, customConfig.mr);
@@ -98,21 +104,6 @@ describe('ReadyToMerge', () => {
       });
     });
 
-    describe('commitMessageLinkTitle', () => {
-      const withDesc = 'Include description in commit message';
-      const withoutDesc = "Don't include description in commit message";
-
-      it('should return message with description', () => {
-        expect(vm.commitMessageLinkTitle).toEqual(withDesc);
-      });
-
-      it('should return message without description', () => {
-        vm.useCommitMessageWithDescription = true;
-
-        expect(vm.commitMessageLinkTitle).toEqual(withoutDesc);
-      });
-    });
-
     describe('status', () => {
       it('defaults to success', () => {
         vm.mr.pipeline = true;
@@ -279,55 +270,43 @@ describe('ReadyToMerge', () => {
         vm.mr.isMergeAllowed = false;
         vm.mr.isPipelineActive = false;
 
-        expect(vm.shouldShowMergeControls()).toBeFalsy();
+        expect(vm.shouldShowMergeControls).toBeFalsy();
       });
 
       it('should return true when the build succeeded or build not required to succeed', () => {
         vm.mr.isMergeAllowed = true;
         vm.mr.isPipelineActive = false;
 
-        expect(vm.shouldShowMergeControls()).toBeTruthy();
+        expect(vm.shouldShowMergeControls).toBeTruthy();
       });
 
       it('should return true when showing the MWPS button and a pipeline is running that needs to be successful', () => {
         vm.mr.isMergeAllowed = false;
         vm.mr.isPipelineActive = true;
 
-        expect(vm.shouldShowMergeControls()).toBeTruthy();
+        expect(vm.shouldShowMergeControls).toBeTruthy();
       });
 
       it('should return true when showing the MWPS button but not required for the pipeline to succeed', () => {
         vm.mr.isMergeAllowed = true;
         vm.mr.isPipelineActive = true;
 
-        expect(vm.shouldShowMergeControls()).toBeTruthy();
+        expect(vm.shouldShowMergeControls).toBeTruthy();
       });
     });
 
-    describe('updateCommitMessage', () => {
+    describe('updateMergeCommitMessage', () => {
       it('should revert flag and change commitMessage', () => {
-        expect(vm.useCommitMessageWithDescription).toBeFalsy();
         expect(vm.commitMessage).toEqual(commitMessage);
-        vm.updateCommitMessage();
+        vm.updateMergeCommitMessage(true);
 
-        expect(vm.useCommitMessageWithDescription).toBeTruthy();
         expect(vm.commitMessage).toEqual(commitMessageWithDescription);
-        vm.updateCommitMessage();
+        vm.updateMergeCommitMessage(false);
 
-        expect(vm.useCommitMessageWithDescription).toBeFalsy();
         expect(vm.commitMessage).toEqual(commitMessage);
       });
     });
 
-    describe('toggleCommitMessageEditor', () => {
-      it('should toggle showCommitMessageEditor flag', () => {
-        expect(vm.showCommitMessageEditor).toBeFalsy();
-        vm.toggleCommitMessageEditor();
-
-        expect(vm.showCommitMessageEditor).toBeTruthy();
-      });
-    });
-
     describe('handleMergeButtonClick', () => {
       const returnPromise = status =>
         new Promise(resolve => {
@@ -623,7 +602,7 @@ describe('ReadyToMerge', () => {
     });
   });
 
-  describe('Squash checkbox component', () => {
+  describe('render children components', () => {
     let wrapper;
     const localVue = createLocalVue();
 
@@ -642,25 +621,101 @@ describe('ReadyToMerge', () => {
     });
 
     const findCheckboxElement = () => wrapper.find(SquashBeforeMerge);
+    const findCommitsHeaderElement = () => wrapper.find(CommitsHeader);
+    const findCommitEditElements = () => wrapper.findAll(CommitEdit);
+    const findCommitDropdownElement = () => wrapper.find(CommitMessageDropdown);
+
+    describe('squash checkbox', () => {
+      it('should be rendered when squash before merge is enabled and there is more than 1 commit', () => {
+        createLocalComponent({
+          mr: { commitsCount: 2, enableSquashBeforeMerge: true },
+        });
 
-    it('should be rendered when squash before merge is enabled and there is more than 1 commit', () => {
-      createLocalComponent({
-        mr: { commitsCount: 2, enableSquashBeforeMerge: true },
+        expect(findCheckboxElement().exists()).toBeTruthy();
       });
 
-      expect(findCheckboxElement().exists()).toBeTruthy();
+      it('should not be rendered when squash before merge is disabled', () => {
+        createLocalComponent({ mr: { commitsCount: 2, enableSquashBeforeMerge: false } });
+
+        expect(findCheckboxElement().exists()).toBeFalsy();
+      });
+
+      it('should not be rendered when there is only 1 commit', () => {
+        createLocalComponent({ mr: { commitsCount: 1, enableSquashBeforeMerge: true } });
+
+        expect(findCheckboxElement().exists()).toBeFalsy();
+      });
     });
 
-    it('should not be rendered when squash before merge is disabled', () => {
-      createLocalComponent({ mr: { commitsCount: 2, enableSquashBeforeMerge: false } });
+    describe('commits count collapsible header', () => {
+      it('should be rendered if fast-forward is disabled', () => {
+        createLocalComponent();
 
-      expect(findCheckboxElement().exists()).toBeFalsy();
+        expect(findCommitsHeaderElement().exists()).toBeTruthy();
+      });
+
+      it('should not be rendered if fast-forward is enabled', () => {
+        createLocalComponent({ mr: { ffOnlyEnabled: true } });
+
+        expect(findCommitsHeaderElement().exists()).toBeFalsy();
+      });
     });
 
-    it('should not be rendered when there is only 1 commit', () => {
-      createLocalComponent({ mr: { commitsCount: 1, enableSquashBeforeMerge: true } });
+    describe('commits edit components', () => {
+      it('should have one edit component when squash is disabled', () => {
+        createLocalComponent();
+
+        expect(findCommitEditElements().length).toBe(1);
+      });
 
-      expect(findCheckboxElement().exists()).toBeFalsy();
+      const findFirstCommitEditLabel = () =>
+        findCommitEditElements()
+          .at(0)
+          .props('label');
+
+      it('should have two edit components when squash is enabled', () => {
+        createLocalComponent({
+          mr: {
+            commitsCount: 2,
+            squash: true,
+            enableSquashBeforeMerge: true,
+          },
+        });
+
+        expect(findCommitEditElements().length).toBe(2);
+      });
+
+      it('should have correct edit merge commit label', () => {
+        createLocalComponent();
+
+        expect(findFirstCommitEditLabel()).toBe('Merge commit message');
+      });
+
+      it('should have correct edit squash commit label', () => {
+        createLocalComponent({
+          mr: {
+            commitsCount: 2,
+            squash: true,
+            enableSquashBeforeMerge: true,
+          },
+        });
+
+        expect(findFirstCommitEditLabel()).toBe('Squash commit message');
+      });
+    });
+
+    describe('commits dropdown', () => {
+      it('should not be rendered if squash is disabled', () => {
+        createLocalComponent();
+
+        expect(findCommitDropdownElement().exists()).toBeFalsy();
+      });
+
+      it('should  be rendered if squash is enabled', () => {
+        createLocalComponent({ mr: { squash: true } });
+
+        expect(findCommitDropdownElement().exists()).toBeTruthy();
+      });
     });
   });
 
@@ -696,10 +751,6 @@ describe('ReadyToMerge', () => {
         expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).toBeNull();
       });
 
-      it('does not show  modify commit message button', () => {
-        expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeNull();
-      });
-
       it('shows message to resolve all items before being allowed to merge', () => {
         expect(vm.$el.querySelector('.js-resolve-mr-widget-items-message')).toBeDefined();
       });
@@ -712,7 +763,7 @@ describe('ReadyToMerge', () => {
         mr: { ffOnlyEnabled: false },
       });
 
-      expect(customVm.$el.querySelector('.js-fast-forward-message')).toBeNull();
+      expect(customVm.$el.querySelector('.mr-fast-forward-message')).toBeNull();
       expect(customVm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined();
     });
 
@@ -721,7 +772,7 @@ describe('ReadyToMerge', () => {
         mr: { ffOnlyEnabled: true },
       });
 
-      expect(customVm.$el.querySelector('.js-fast-forward-message')).toBeDefined();
+      expect(customVm.$el.querySelector('.mr-fast-forward-message')).toBeDefined();
       expect(customVm.$el.querySelector('.js-modify-commit-message-button')).toBeNull();
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index 75b197fb2ba..6ef07f81705 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -215,12 +215,14 @@ export default {
   project_archived: false,
   default_merge_commit_message_with_description:
     "Merge branch 'daaaa' into 'master'\n\nUpdate README.md\n\nSee merge request !22",
+  default_squash_commit_message: 'Test squash commit message',
   diverged_commits_count: 0,
   only_allow_merge_if_pipeline_succeeds: false,
   commit_change_content_path: '/root/acets-app/merge_requests/22/commit_change_content',
   merge_commit_path:
     'http://localhost:3000/root/acets-app/commit/53027d060246c8f47e4a9310fb332aa52f221775',
   troubleshooting_docs_path: 'help',
+  squash: true,
 };
 
 export const mockStore = {