Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

12 files changed, 244 insertions, 470 deletions

diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
index eadf07e54fb..115f21d8b35 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
@@ -34,7 +34,7 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 12,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
+            targetBranch: 'main',
             statusPath: 'abc',
           },
         });
@@ -48,7 +48,7 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 0,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
+            targetBranch: 'main',
             statusPath: 'abc',
           },
         });
@@ -64,14 +64,14 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 1,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
-            targetBranchPath: '/foo/bar/master',
+            targetBranch: 'main',
+            targetBranchPath: '/foo/bar/main',
             statusPath: 'abc',
           },
         });
 
         expect(wrapper.vm.commitsBehindText).toBe(
-          'The source branch is <a href="/foo/bar/master">1 commit behind</a> the target branch',
+          'The source branch is <a href="/foo/bar/main">1 commit behind</a> the target branch',
         );
       });
 
@@ -81,14 +81,14 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 2,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
-            targetBranchPath: '/foo/bar/master',
+            targetBranch: 'main',
+            targetBranchPath: '/foo/bar/main',
             statusPath: 'abc',
           },
         });
 
         expect(wrapper.vm.commitsBehindText).toBe(
-          'The source branch is <a href="/foo/bar/master">2 commits behind</a> the target branch',
+          'The source branch is <a href="/foo/bar/main">2 commits behind</a> the target branch',
         );
       });
     });
@@ -105,7 +105,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
@@ -125,7 +125,7 @@ describe('MRWidgetHeader', () => {
       });
 
       it('renders target branch', () => {
-        expect(wrapper.find('.js-target-branch').text().trim()).toBe('master');
+        expect(wrapper.find('.js-target-branch').text().trim()).toBe('main');
       });
     });
 
@@ -138,7 +138,7 @@ describe('MRWidgetHeader', () => {
         sourceBranchRemoved: false,
         targetBranchPath: 'foo/bar/commits-path',
         targetBranchTreePath: 'foo/bar/tree/path',
-        targetBranch: 'master',
+        targetBranch: 'main',
         isOpen: true,
         canPushToSourceBranch: true,
         emailPatchesPath: '/mr/email-patches',
@@ -227,7 +227,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: false,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
@@ -257,7 +257,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
@@ -281,7 +281,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
index e5862df5dda..ac20487c55f 100644
--- a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
+++ b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_auto_merge_enabled_spec.js.snap
@@ -16,7 +16,6 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
     >
       <span
         class="gl-mr-3"
-        data-qa-selector="merge_request_status_content"
       >
         <span
           class="js-status-text-before-author"
@@ -40,13 +39,14 @@ exports[`MRWidgetAutoMergeEnabled when graphql is disabled template should have
        
       <a
         class="btn btn-sm btn-default js-cancel-auto-merge"
+        data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
         href="#"
         role="button"
       >
         <!---->
         
-          Cancel automatic merge
+          Cancel
         
       </a>
     </h4>
@@ -108,7 +108,6 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
     >
       <span
         class="gl-mr-3"
-        data-qa-selector="merge_request_status_content"
       >
         <span
           class="js-status-text-before-author"
@@ -132,13 +131,14 @@ exports[`MRWidgetAutoMergeEnabled when graphql is enabled template should have c
        
       <a
         class="btn btn-sm btn-default js-cancel-auto-merge"
+        data-qa-selector="cancel_auto_merge_button"
         data-testid="cancelAutomaticMergeButton"
         href="#"
         role="button"
       >
         <!---->
         
-          Cancel automatic merge
+          Cancel
         
       </a>
     </h4>
diff --git a/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap
new file mode 100644
index 00000000000..cef1dff3335
--- /dev/null
+++ b/spec/frontend/vue_mr_widget/components/states/__snapshots__/mr_widget_ready_to_merge_spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReadyToMerge with a mismatched SHA warns the user to refresh to review 1`] = `"<gl-sprintf-stub message=\\"New changes were added. %{linkStart}Reload the page to review them%{linkEnd}\\"></gl-sprintf-stub>"`;
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
index 1af96717b56..0110a76e722 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js
@@ -192,15 +192,13 @@ describe('MRWidgetAutoMergeEnabled', () => {
         });
 
         describe('cancelButtonText', () => {
-          it('should return "Cancel automatic merge" if MWPS is selected', () => {
+          it('should return "Cancel" if MWPS is selected', () => {
             factory({
               ...defaultMrProps(),
               autoMergeStrategy: MWPS_MERGE_STRATEGY,
             });
 
-            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe(
-              'Cancel automatic merge',
-            );
+            expect(wrapper.findByTestId('cancelAutomaticMergeButton').text()).toBe('Cancel');
           });
         });
       });
@@ -329,7 +327,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
           expect(statusText).toBe('to be merged automatically when the pipeline succeeds');
         });
 
-        it('should render the cancel button as "Cancel automatic merge" if MWPS is selected', () => {
+        it('should render the cancel button as "Cancel" if MWPS is selected', () => {
           factory({
             ...defaultMrProps(),
             autoMergeStrategy: MWPS_MERGE_STRATEGY,
@@ -337,7 +335,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
           const cancelButtonText = trimText(wrapper.find('.js-cancel-auto-merge').text());
 
-          expect(cancelButtonText).toBe('Cancel automatic merge');
+          expect(cancelButtonText).toBe('Cancel');
         });
       });
     });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
index e4123b2ca83..b31a75f30d3 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
@@ -8,7 +8,7 @@ describe('Commits header component', () => {
     wrapper = shallowMount(CommitsHeader, {
       propsData: {
         isSquashEnabled: false,
-        targetBranch: 'master',
+        targetBranch: 'main',
         commitsCount: 5,
         isFastForwardEnabled: false,
         ...props,
@@ -94,7 +94,7 @@ describe('Commits header component', () => {
     it('has correct target branch displayed', () => {
       createComponent();
 
-      expect(findTargetBranchMessage().text()).toBe('master');
+      expect(findTargetBranchMessage().text()).toBe('main');
     });
 
     it('does has merge commit part of the message', () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js
index b16fb5171e7..b6c16958993 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_merging_spec.js
@@ -4,6 +4,7 @@ import MrWidgetMerging from '~/vue_merge_request_widget/components/states/mr_wid
 describe('MRWidgetMerging', () => {
   let wrapper;
 
+  const GlEmoji = { template: '<img />' };
   beforeEach(() => {
     wrapper = shallowMount(MrWidgetMerging, {
       propsData: {
@@ -12,6 +13,9 @@ describe('MRWidgetMerging', () => {
           targetBranch: 'branch',
         },
       },
+      stubs: {
+        GlEmoji,
+      },
     });
   });
 
@@ -27,7 +31,7 @@ describe('MRWidgetMerging', () => {
         .trim()
         .replace(/\s\s+/g, ' ')
         .replace(/[\r\n]+/g, ' '),
-    ).toContain('This merge request is in the process of being merged');
+    ).toContain('Merging!');
   });
 
   it('renders branch information', () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 983e4a35078..85a42946325 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -1,13 +1,13 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlSprintf } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
-import { refreshUserMergeRequestCounts } from '~/commons/nav/user_merge_requests';
 import simplePoll from '~/lib/utils/simple_poll';
 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 CommitsHeader from '~/vue_merge_request_widget/components/states/commits_header.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 { MWPS_MERGE_STRATEGY, MTWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
+import { MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
 import eventHub from '~/vue_merge_request_widget/event_hub';
 
 jest.mock('~/lib/utils/simple_poll', () =>
@@ -42,7 +42,7 @@ const createTestMr = (customConfig) => {
     commitMessageWithDescription,
     shouldRemoveSourceBranch: true,
     canRemoveSourceBranch: false,
-    targetBranch: 'master',
+    targetBranch: 'main',
     preferredAutoMergeStrategy: MWPS_MERGE_STRATEGY,
     availableAutoMergeStrategies: [MWPS_MERGE_STRATEGY],
     mergeImmediatelyDocsPath: 'path/to/merge/immediately/docs',
@@ -58,11 +58,9 @@ const createTestService = () => ({
   poll: jest.fn().mockResolvedValue(),
 });
 
+let wrapper;
 const createComponent = (customConfig = {}) => {
-  const Component = Vue.extend(ReadyToMerge);
-
-  return new Component({
-    el: document.createElement('div'),
+  wrapper = shallowMount(ReadyToMerge, {
     propsData: {
       mr: createTestMr(customConfig),
       service: createTestService(),
@@ -71,277 +69,207 @@ const createComponent = (customConfig = {}) => {
 };
 
 describe('ReadyToMerge', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
   afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr, service } = ReadyToMerge.props;
-
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-
-      expect(service.type instanceof Object).toBeTruthy();
-      expect(service.required).toBeTruthy();
-    });
-  });
-
-  describe('data', () => {
-    it('should have default data', () => {
-      expect(vm.mergeWhenBuildSucceeds).toBeFalsy();
-      expect(vm.useCommitMessageWithDescription).toBeFalsy();
-      expect(vm.showCommitMessageEditor).toBeFalsy();
-      expect(vm.isMakingRequest).toBeFalsy();
-      expect(vm.isMergingImmediately).toBeFalsy();
-      expect(vm.commitMessage).toBe(vm.mr.commitMessage);
-    });
+    wrapper.destroy();
   });
 
   describe('computed', () => {
     describe('isAutoMergeAvailable', () => {
       it('should return true when at least one merge strategy is available', () => {
-        vm.mr.availableAutoMergeStrategies = [MWPS_MERGE_STRATEGY];
+        createComponent();
 
-        expect(vm.isAutoMergeAvailable).toBe(true);
+        expect(wrapper.vm.isAutoMergeAvailable).toBe(true);
       });
 
       it('should return false when no merge strategies are available', () => {
-        vm.mr.availableAutoMergeStrategies = [];
+        createComponent({ mr: { availableAutoMergeStrategies: [] } });
 
-        expect(vm.isAutoMergeAvailable).toBe(false);
+        expect(wrapper.vm.isAutoMergeAvailable).toBe(false);
       });
     });
 
     describe('status', () => {
       it('defaults to success', () => {
-        Vue.set(vm.mr, 'pipeline', true);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
+        createComponent({ mr: { pipeline: true, availableAutoMergeStrategies: [] } });
 
-        expect(vm.status).toEqual('success');
+        expect(wrapper.vm.status).toEqual('success');
       });
 
       it('returns failed when MR has CI but also has an unknown status', () => {
-        Vue.set(vm.mr, 'hasCI', true);
+        createComponent({ mr: { hasCI: true } });
 
-        expect(vm.status).toEqual('failed');
+        expect(wrapper.vm.status).toEqual('failed');
       });
 
       it('returns default when MR has no pipeline', () => {
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
+        createComponent({ mr: { availableAutoMergeStrategies: [] } });
 
-        expect(vm.status).toEqual('success');
+        expect(wrapper.vm.status).toEqual('success');
       });
 
       it('returns pending when pipeline is active', () => {
-        Vue.set(vm.mr, 'pipeline', {});
-        Vue.set(vm.mr, 'isPipelineActive', true);
+        createComponent({ mr: { pipeline: {}, isPipelineActive: true } });
 
-        expect(vm.status).toEqual('pending');
+        expect(wrapper.vm.status).toEqual('pending');
       });
 
       it('returns failed when pipeline is failed', () => {
-        Vue.set(vm.mr, 'pipeline', {});
-        Vue.set(vm.mr, 'isPipelineFailed', true);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
+        createComponent({
+          mr: { pipeline: {}, isPipelineFailed: true, availableAutoMergeStrategies: [] },
+        });
 
-        expect(vm.status).toEqual('failed');
+        expect(wrapper.vm.status).toEqual('failed');
       });
     });
 
     describe('mergeButtonVariant', () => {
       it('defaults to success class', () => {
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
+        createComponent({
+          mr: { availableAutoMergeStrategies: [] },
+        });
 
-        expect(vm.mergeButtonVariant).toEqual('success');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('success');
       });
 
       it('returns success class for success status', () => {
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
-        Vue.set(vm.mr, 'pipeline', true);
+        createComponent({
+          mr: { availableAutoMergeStrategies: [], pipeline: true },
+        });
 
-        expect(vm.mergeButtonVariant).toEqual('success');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('success');
       });
 
       it('returns info class for pending status', () => {
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', [MTWPS_MERGE_STRATEGY]);
+        createComponent();
 
-        expect(vm.mergeButtonVariant).toEqual('info');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('info');
       });
 
       it('returns danger class for failed status', () => {
-        vm.mr.hasCI = true;
+        createComponent({ mr: { hasCI: true } });
 
-        expect(vm.mergeButtonVariant).toEqual('danger');
+        expect(wrapper.vm.mergeButtonVariant).toEqual('danger');
       });
     });
 
     describe('status icon', () => {
       it('defaults to tick icon', () => {
-        expect(vm.iconClass).toEqual('success');
+        createComponent();
+
+        expect(wrapper.vm.iconClass).toEqual('success');
       });
 
       it('shows tick for success status', () => {
-        vm.mr.pipeline = true;
+        createComponent({ mr: { pipeline: true } });
 
-        expect(vm.iconClass).toEqual('success');
+        expect(wrapper.vm.iconClass).toEqual('success');
       });
 
       it('shows tick for pending status', () => {
-        vm.mr.pipeline = {};
-        vm.mr.isPipelineActive = true;
+        createComponent({ mr: { pipeline: {}, isPipelineActive: true } });
 
-        expect(vm.iconClass).toEqual('success');
-      });
-
-      it('shows warning icon for failed status', () => {
-        vm.mr.hasCI = true;
-
-        expect(vm.iconClass).toEqual('warning');
-      });
-
-      it('shows warning icon for merge not allowed', () => {
-        vm.mr.hasCI = true;
-
-        expect(vm.iconClass).toEqual('warning');
+        expect(wrapper.vm.iconClass).toEqual('success');
       });
     });
 
     describe('mergeButtonText', () => {
       it('should return "Merge" when no auto merge strategies are available', () => {
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
+        createComponent({ mr: { availableAutoMergeStrategies: [] } });
 
-        expect(vm.mergeButtonText).toEqual('Merge');
+        expect(wrapper.vm.mergeButtonText).toEqual('Merge');
       });
 
-      it('should return "Merge in progress"', () => {
-        Vue.set(vm, 'isMergingImmediately', true);
+      it('should return "Merge in progress"', async () => {
+        createComponent();
+
+        wrapper.setData({ isMergingImmediately: true });
+
+        await Vue.nextTick();
 
-        expect(vm.mergeButtonText).toEqual('Merge in progress');
+        expect(wrapper.vm.mergeButtonText).toEqual('Merge in progress');
       });
 
       it('should return "Merge when pipeline succeeds" when the MWPS auto merge strategy is available', () => {
-        Vue.set(vm, 'isMergingImmediately', false);
-        Vue.set(vm.mr, 'preferredAutoMergeStrategy', MWPS_MERGE_STRATEGY);
+        createComponent({
+          mr: { isMergingImmediately: false, preferredAutoMergeStrategy: MWPS_MERGE_STRATEGY },
+        });
 
-        expect(vm.mergeButtonText).toEqual('Merge when pipeline succeeds');
+        expect(wrapper.vm.mergeButtonText).toEqual('Merge when pipeline succeeds');
       });
     });
 
     describe('autoMergeText', () => {
       it('should return Merge when pipeline succeeds', () => {
-        Vue.set(vm.mr, 'preferredAutoMergeStrategy', MWPS_MERGE_STRATEGY);
+        createComponent({ mr: { preferredAutoMergeStrategy: MWPS_MERGE_STRATEGY } });
 
-        expect(vm.autoMergeText).toEqual('Merge when pipeline succeeds');
+        expect(wrapper.vm.autoMergeText).toEqual('Merge when pipeline succeeds');
       });
     });
 
     describe('shouldShowMergeImmediatelyDropdown', () => {
       it('should return false if no pipeline is active', () => {
-        Vue.set(vm.mr, 'isPipelineActive', false);
-        Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', false);
+        createComponent({
+          mr: { isPipelineActive: false, onlyAllowMergeIfPipelineSucceeds: false },
+        });
 
-        expect(vm.shouldShowMergeImmediatelyDropdown).toBe(false);
+        expect(wrapper.vm.shouldShowMergeImmediatelyDropdown).toBe(false);
       });
 
       it('should return false if "Pipelines must succeed" is enabled for the current project', () => {
-        Vue.set(vm.mr, 'isPipelineActive', true);
-        Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', true);
+        createComponent({ mr: { isPipelineActive: true, onlyAllowMergeIfPipelineSucceeds: true } });
 
-        expect(vm.shouldShowMergeImmediatelyDropdown).toBe(false);
-      });
-
-      it('should return true if the MR\'s pipeline is active and "Pipelines must succeed" is not enabled for the current project', () => {
-        Vue.set(vm.mr, 'isPipelineActive', true);
-        Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', false);
-
-        expect(vm.shouldShowMergeImmediatelyDropdown).toBe(true);
+        expect(wrapper.vm.shouldShowMergeImmediatelyDropdown).toBe(false);
       });
     });
 
     describe('isMergeButtonDisabled', () => {
       it('should return false with initial data', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', true);
+        createComponent({ mr: { isMergeAllowed: true } });
 
-        expect(vm.isMergeButtonDisabled).toBe(false);
+        expect(wrapper.vm.isMergeButtonDisabled).toBe(false);
       });
 
       it('should return true when there is no commit message', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', true);
-        Vue.set(vm, 'commitMessage', '');
+        createComponent({ mr: { isMergeAllowed: true, commitMessage: '' } });
 
-        expect(vm.isMergeButtonDisabled).toBe(true);
+        expect(wrapper.vm.isMergeButtonDisabled).toBe(true);
       });
 
       it('should return true if merge is not allowed', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', false);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
-        Vue.set(vm.mr, 'onlyAllowMergeIfPipelineSucceeds', true);
+        createComponent({
+          mr: {
+            isMergeAllowed: false,
+            availableAutoMergeStrategies: [],
+            onlyAllowMergeIfPipelineSucceeds: true,
+          },
+        });
 
-        expect(vm.isMergeButtonDisabled).toBe(true);
+        expect(wrapper.vm.isMergeButtonDisabled).toBe(true);
       });
 
-      it('should return true when the vm instance is making request', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', true);
-        Vue.set(vm, 'isMakingRequest', true);
+      it('should return true when the vm instance is making request', async () => {
+        createComponent({ mr: { isMergeAllowed: true } });
 
-        expect(vm.isMergeButtonDisabled).toBe(true);
-      });
-    });
+        wrapper.setData({ isMakingRequest: true });
 
-    describe('isMergeImmediatelyDangerous', () => {
-      it('should always return false in CE', () => {
-        expect(vm.isMergeImmediatelyDangerous).toBe(false);
+        await Vue.nextTick();
+
+        expect(wrapper.vm.isMergeButtonDisabled).toBe(true);
       });
     });
   });
 
   describe('methods', () => {
-    describe('shouldShowMergeControls', () => {
-      it('should return false when an external pipeline is running and required to succeed', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', false);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
-
-        expect(vm.shouldShowMergeControls).toBe(false);
-      });
-
-      it('should return true when the build succeeded or build not required to succeed', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', true);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', []);
-
-        expect(vm.shouldShowMergeControls).toBe(true);
-      });
-
-      it('should return true when showing the MWPS button and a pipeline is running that needs to be successful', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', false);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', [MWPS_MERGE_STRATEGY]);
-
-        expect(vm.shouldShowMergeControls).toBe(true);
-      });
-
-      it('should return true when showing the MWPS button but not required for the pipeline to succeed', () => {
-        Vue.set(vm.mr, 'isMergeAllowed', true);
-        Vue.set(vm.mr, 'availableAutoMergeStrategies', [MWPS_MERGE_STRATEGY]);
-
-        expect(vm.shouldShowMergeControls).toBe(true);
-      });
-    });
-
     describe('updateMergeCommitMessage', () => {
       it('should revert flag and change commitMessage', () => {
-        expect(vm.commitMessage).toEqual(commitMessage);
-        vm.updateMergeCommitMessage(true);
+        createComponent();
+
+        wrapper.vm.updateMergeCommitMessage(true);
 
-        expect(vm.commitMessage).toEqual(commitMessageWithDescription);
-        vm.updateMergeCommitMessage(false);
+        expect(wrapper.vm.commitMessage).toEqual(commitMessageWithDescription);
+        wrapper.vm.updateMergeCommitMessage(false);
 
-        expect(vm.commitMessage).toEqual(commitMessage);
+        expect(wrapper.vm.commitMessage).toEqual(commitMessage);
       });
     });
 
@@ -356,23 +284,26 @@ describe('ReadyToMerge', () => {
         });
 
       it('should handle merge when pipeline succeeds', (done) => {
+        createComponent();
+
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
         jest
-          .spyOn(vm.service, 'merge')
+          .spyOn(wrapper.vm.service, 'merge')
           .mockReturnValue(returnPromise('merge_when_pipeline_succeeds'));
-        vm.removeSourceBranch = false;
-        vm.handleMergeButtonClick(true);
+        wrapper.setData({ removeSourceBranch: false });
+
+        wrapper.vm.handleMergeButtonClick(true);
 
         setImmediate(() => {
-          expect(vm.isMakingRequest).toBeTruthy();
+          expect(wrapper.vm.isMakingRequest).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
 
-          const params = vm.service.merge.mock.calls[0][0];
+          const params = wrapper.vm.service.merge.mock.calls[0][0];
 
           expect(params).toEqual(
             expect.objectContaining({
-              sha: vm.mr.sha,
-              commit_message: vm.mr.commitMessage,
+              sha: wrapper.vm.mr.sha,
+              commit_message: wrapper.vm.mr.commitMessage,
               should_remove_source_branch: false,
               auto_merge_strategy: 'merge_when_pipeline_succeeds',
             }),
@@ -382,15 +313,17 @@ describe('ReadyToMerge', () => {
       });
 
       it('should handle merge failed', (done) => {
+        createComponent();
+
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-        jest.spyOn(vm.service, 'merge').mockReturnValue(returnPromise('failed'));
-        vm.handleMergeButtonClick(false, true);
+        jest.spyOn(wrapper.vm.service, 'merge').mockReturnValue(returnPromise('failed'));
+        wrapper.vm.handleMergeButtonClick(false, true);
 
         setImmediate(() => {
-          expect(vm.isMakingRequest).toBeTruthy();
+          expect(wrapper.vm.isMakingRequest).toBeTruthy();
           expect(eventHub.$emit).toHaveBeenCalledWith('FailedToMerge', undefined);
 
-          const params = vm.service.merge.mock.calls[0][0];
+          const params = wrapper.vm.service.merge.mock.calls[0][0];
 
           expect(params.should_remove_source_branch).toBeTruthy();
           expect(params.auto_merge_strategy).toBeUndefined();
@@ -399,15 +332,17 @@ describe('ReadyToMerge', () => {
       });
 
       it('should handle merge action accepted case', (done) => {
-        jest.spyOn(vm.service, 'merge').mockReturnValue(returnPromise('success'));
-        jest.spyOn(vm, 'initiateMergePolling').mockImplementation(() => {});
-        vm.handleMergeButtonClick();
+        createComponent();
+
+        jest.spyOn(wrapper.vm.service, 'merge').mockReturnValue(returnPromise('success'));
+        jest.spyOn(wrapper.vm, 'initiateMergePolling').mockImplementation(() => {});
+        wrapper.vm.handleMergeButtonClick();
 
         setImmediate(() => {
-          expect(vm.isMakingRequest).toBeTruthy();
-          expect(vm.initiateMergePolling).toHaveBeenCalled();
+          expect(wrapper.vm.isMakingRequest).toBeTruthy();
+          expect(wrapper.vm.initiateMergePolling).toHaveBeenCalled();
 
-          const params = vm.service.merge.mock.calls[0][0];
+          const params = wrapper.vm.service.merge.mock.calls[0][0];
 
           expect(params.should_remove_source_branch).toBeTruthy();
           expect(params.auto_merge_strategy).toBeUndefined();
@@ -418,128 +353,31 @@ describe('ReadyToMerge', () => {
 
     describe('initiateMergePolling', () => {
       it('should call simplePoll', () => {
-        vm.initiateMergePolling();
+        createComponent();
+
+        wrapper.vm.initiateMergePolling();
 
         expect(simplePoll).toHaveBeenCalledWith(expect.any(Function), { timeout: 0 });
       });
 
       it('should call handleMergePolling', () => {
-        jest.spyOn(vm, 'handleMergePolling').mockImplementation(() => {});
-
-        vm.initiateMergePolling();
-
-        expect(vm.handleMergePolling).toHaveBeenCalled();
-      });
-    });
-
-    describe('handleMergePolling', () => {
-      const returnPromise = (state) =>
-        new Promise((resolve) => {
-          resolve({
-            data: {
-              state,
-              source_branch_exists: true,
-            },
-          });
-        });
-
-      beforeEach(() => {
-        loadFixtures('merge_requests/merge_request_of_current_user.html');
-      });
-
-      it('should call start and stop polling when MR merged', (done) => {
-        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-        jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged'));
-        jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {});
-
-        let cpc = false; // continuePollingCalled
-        let spc = false; // stopPollingCalled
-
-        vm.handleMergePolling(
-          () => {
-            cpc = true;
-          },
-          () => {
-            spc = true;
-          },
-        );
-        setImmediate(() => {
-          expect(vm.service.poll).toHaveBeenCalled();
-          expect(eventHub.$emit).toHaveBeenCalledWith('MRWidgetUpdateRequested');
-          expect(eventHub.$emit).toHaveBeenCalledWith('FetchActionsContent');
-          expect(vm.initiateRemoveSourceBranchPolling).toHaveBeenCalled();
-          expect(refreshUserMergeRequestCounts).toHaveBeenCalled();
-          expect(cpc).toBeFalsy();
-          expect(spc).toBeTruthy();
+        createComponent();
 
-          done();
-        });
-      });
-
-      it('updates status box', (done) => {
-        jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged'));
-        jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {});
-
-        vm.handleMergePolling(
-          () => {},
-          () => {},
-        );
-
-        setImmediate(() => {
-          const statusBox = document.querySelector('.status-box');
-
-          expect(statusBox.classList.contains('status-box-mr-merged')).toBeTruthy();
-          expect(statusBox.textContent).toContain('Merged');
-
-          done();
-        });
-      });
-
-      it('updates merge request count badge', (done) => {
-        jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('merged'));
-        jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {});
-
-        vm.handleMergePolling(
-          () => {},
-          () => {},
-        );
+        jest.spyOn(wrapper.vm, 'handleMergePolling').mockImplementation(() => {});
 
-        setImmediate(() => {
-          expect(document.querySelector('.js-merge-counter').textContent).toBe('0');
-
-          done();
-        });
-      });
-
-      it('should continue polling until MR is merged', (done) => {
-        jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise('some_other_state'));
-        jest.spyOn(vm, 'initiateRemoveSourceBranchPolling').mockImplementation(() => {});
-
-        let cpc = false; // continuePollingCalled
-        let spc = false; // stopPollingCalled
-
-        vm.handleMergePolling(
-          () => {
-            cpc = true;
-          },
-          () => {
-            spc = true;
-          },
-        );
-        setImmediate(() => {
-          expect(cpc).toBeTruthy();
-          expect(spc).toBeFalsy();
+        wrapper.vm.initiateMergePolling();
 
-          done();
-        });
+        expect(wrapper.vm.handleMergePolling).toHaveBeenCalled();
       });
     });
 
     describe('initiateRemoveSourceBranchPolling', () => {
       it('should emit event and call simplePoll', () => {
+        createComponent();
+
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
-        vm.initiateRemoveSourceBranchPolling();
+        wrapper.vm.initiateRemoveSourceBranchPolling();
 
         expect(eventHub.$emit).toHaveBeenCalledWith('SetBranchRemoveFlag', [true]);
         expect(simplePoll).toHaveBeenCalled();
@@ -557,13 +395,15 @@ describe('ReadyToMerge', () => {
         });
 
       it('should call start and stop polling when MR merged', (done) => {
+        createComponent();
+
         jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-        jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise(false));
+        jest.spyOn(wrapper.vm.service, 'poll').mockReturnValue(returnPromise(false));
 
         let cpc = false; // continuePollingCalled
         let spc = false; // stopPollingCalled
 
-        vm.handleRemoveBranchPolling(
+        wrapper.vm.handleRemoveBranchPolling(
           () => {
             cpc = true;
           },
@@ -572,7 +412,7 @@ describe('ReadyToMerge', () => {
           },
         );
         setImmediate(() => {
-          expect(vm.service.poll).toHaveBeenCalled();
+          expect(wrapper.vm.service.poll).toHaveBeenCalled();
 
           const args = eventHub.$emit.mock.calls[0];
 
@@ -590,12 +430,14 @@ describe('ReadyToMerge', () => {
       });
 
       it('should continue polling until MR is merged', (done) => {
-        jest.spyOn(vm.service, 'poll').mockReturnValue(returnPromise(true));
+        createComponent();
+
+        jest.spyOn(wrapper.vm.service, 'poll').mockReturnValue(returnPromise(true));
 
         let cpc = false; // continuePollingCalled
         let spc = false; // stopPollingCalled
 
-        vm.handleRemoveBranchPolling(
+        wrapper.vm.handleRemoveBranchPolling(
           () => {
             cpc = true;
           },
@@ -616,49 +458,26 @@ describe('ReadyToMerge', () => {
   describe('Remove source branch checkbox', () => {
     describe('when user can merge but cannot delete branch', () => {
       it('should be disabled in the rendered output', () => {
-        const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
+        createComponent();
 
-        expect(checkboxElement).toBeNull();
+        expect(wrapper.find('#remove-source-branch-input').exists()).toBe(false);
       });
     });
 
     describe('when user can merge and can delete branch', () => {
       beforeEach(() => {
-        vm = createComponent({
+        createComponent({
           mr: { canRemoveSourceBranch: true },
         });
       });
 
       it('isRemoveSourceBranchButtonDisabled should be false', () => {
-        expect(vm.isRemoveSourceBranchButtonDisabled).toBe(false);
-      });
-
-      it('removed source branch should be enabled in rendered output', () => {
-        const checkboxElement = vm.$el.querySelector('#remove-source-branch-input');
-
-        expect(checkboxElement).not.toBeNull();
+        expect(wrapper.find('#remove-source-branch-input').props('disabled')).toBe(undefined);
       });
     });
   });
 
   describe('render children components', () => {
-    let wrapper;
-    const localVue = createLocalVue();
-
-    const createLocalComponent = (customConfig = {}) => {
-      wrapper = shallowMount(localVue.extend(ReadyToMerge), {
-        localVue,
-        propsData: {
-          mr: createTestMr(customConfig),
-          service: createTestService(),
-        },
-      });
-    };
-
-    afterEach(() => {
-      wrapper.destroy();
-    });
-
     const findCheckboxElement = () => wrapper.find(SquashBeforeMerge);
     const findCommitsHeaderElement = () => wrapper.find(CommitsHeader);
     const findCommitEditElements = () => wrapper.findAll(CommitEdit);
@@ -667,7 +486,7 @@ describe('ReadyToMerge', () => {
 
     describe('squash checkbox', () => {
       it('should be rendered when squash before merge is enabled and there is more than 1 commit', () => {
-        createLocalComponent({
+        createComponent({
           mr: { commitsCount: 2, enableSquashBeforeMerge: true },
         });
 
@@ -675,13 +494,13 @@ describe('ReadyToMerge', () => {
       });
 
       it('should not be rendered when squash before merge is disabled', () => {
-        createLocalComponent({ mr: { commitsCount: 2, enableSquashBeforeMerge: false } });
+        createComponent({ 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 } });
+        createComponent({ mr: { commitsCount: 1, enableSquashBeforeMerge: true } });
 
         expect(findCheckboxElement().exists()).toBeFalsy();
       });
@@ -695,7 +514,7 @@ describe('ReadyToMerge', () => {
         `(
           'is $state when squashIsReadonly returns $expectation ',
           ({ squashState, prop, expectation }) => {
-            createLocalComponent({
+            createComponent({
               mr: { commitsCount: 2, enableSquashBeforeMerge: true, [squashState]: expectation },
             });
 
@@ -704,7 +523,7 @@ describe('ReadyToMerge', () => {
         );
 
         it('is not rendered for "Do not allow" option', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               commitsCount: 2,
               enableSquashBeforeMerge: true,
@@ -720,14 +539,14 @@ describe('ReadyToMerge', () => {
 
     describe('commits count collapsible header', () => {
       it('should be rendered when fast-forward is disabled', () => {
-        createLocalComponent();
+        createComponent();
 
         expect(findCommitsHeaderElement().exists()).toBeTruthy();
       });
 
       describe('when fast-forward is enabled', () => {
         it('should be rendered if squash and squash before are enabled and there is more than 1 commit', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               enableSquashBeforeMerge: true,
@@ -740,7 +559,7 @@ describe('ReadyToMerge', () => {
         });
 
         it('should not be rendered if squash before merge is disabled', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               enableSquashBeforeMerge: false,
@@ -753,7 +572,7 @@ describe('ReadyToMerge', () => {
         });
 
         it('should not be rendered if squash is disabled', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               squash: false,
@@ -766,7 +585,7 @@ describe('ReadyToMerge', () => {
         });
 
         it('should not be rendered if commits count is 1', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               squash: true,
@@ -783,7 +602,7 @@ describe('ReadyToMerge', () => {
     describe('commits edit components', () => {
       describe('when fast-forward merge is enabled', () => {
         it('should not be rendered if squash is disabled', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               squash: false,
@@ -796,7 +615,7 @@ describe('ReadyToMerge', () => {
         });
 
         it('should not be rendered if squash before merge is disabled', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               squash: true,
@@ -809,7 +628,7 @@ describe('ReadyToMerge', () => {
         });
 
         it('should not be rendered if there is only one commit', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               squash: true,
@@ -822,7 +641,7 @@ describe('ReadyToMerge', () => {
         });
 
         it('should have one edit component if squash is enabled and there is more than 1 commit', () => {
-          createLocalComponent({
+          createComponent({
             mr: {
               ffOnlyEnabled: true,
               squashIsSelected: true,
@@ -837,13 +656,13 @@ describe('ReadyToMerge', () => {
       });
 
       it('should have one edit component when squash is disabled', () => {
-        createLocalComponent();
+        createComponent();
 
         expect(findCommitEditElements().length).toBe(1);
       });
 
       it('should have two edit components when squash is enabled and there is more than 1 commit', () => {
-        createLocalComponent({
+        createComponent({
           mr: {
             commitsCount: 2,
             squashIsSelected: true,
@@ -855,7 +674,7 @@ describe('ReadyToMerge', () => {
       });
 
       it('should have one edit components when squash is enabled and there is 1 commit only', () => {
-        createLocalComponent({
+        createComponent({
           mr: {
             commitsCount: 1,
             squash: true,
@@ -867,13 +686,13 @@ describe('ReadyToMerge', () => {
       });
 
       it('should have correct edit merge commit label', () => {
-        createLocalComponent();
+        createComponent();
 
         expect(findFirstCommitEditLabel()).toBe('Merge commit message');
       });
 
       it('should have correct edit squash commit label', () => {
-        createLocalComponent({
+        createComponent({
           mr: {
             commitsCount: 2,
             squashIsSelected: true,
@@ -887,13 +706,13 @@ describe('ReadyToMerge', () => {
 
     describe('commits dropdown', () => {
       it('should not be rendered if squash is disabled', () => {
-        createLocalComponent();
+        createComponent();
 
         expect(findCommitDropdownElement().exists()).toBeFalsy();
       });
 
       it('should  be rendered if squash is enabled and there is more than 1 commit', () => {
-        createLocalComponent({
+        createComponent({
           mr: { enableSquashBeforeMerge: true, squashIsSelected: true, commitsCount: 2 },
         });
 
@@ -902,83 +721,38 @@ describe('ReadyToMerge', () => {
     });
   });
 
-  describe('Merge controls', () => {
-    describe('when allowed to merge', () => {
-      beforeEach(() => {
-        vm = createComponent({
-          mr: { isMergeAllowed: true, canRemoveSourceBranch: true },
-        });
-      });
-
-      it('shows remove source branch checkbox', () => {
-        expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).not.toBeNull();
-      });
-
-      it('shows modify commit message button', () => {
-        expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined();
-      });
-
-      it('does not show message about needing to resolve items', () => {
-        expect(vm.$el.querySelector('.js-resolve-mr-widget-items-message')).toBeNull();
-      });
-    });
-
-    describe('when not allowed to merge', () => {
-      beforeEach(() => {
-        vm = createComponent({
-          mr: { isMergeAllowed: false },
-        });
-      });
-
-      it('does not show remove source branch checkbox', () => {
-        expect(vm.$el.querySelector('.js-remove-source-branch-checkbox')).toBeNull();
-      });
-
-      it('shows message to resolve all items before being allowed to merge', () => {
-        expect(vm.$el.querySelector('.js-resolve-mr-widget-items-message')).toBeDefined();
-      });
-    });
-  });
-
   describe('Merge request project settings', () => {
     describe('when the merge commit merge method is enabled', () => {
       beforeEach(() => {
-        vm = createComponent({
+        createComponent({
           mr: { ffOnlyEnabled: false },
         });
       });
 
       it('should not show fast forward message', () => {
-        expect(vm.$el.querySelector('.mr-fast-forward-message')).toBeNull();
-      });
-
-      it('should show "Modify commit message" button', () => {
-        expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeDefined();
+        expect(wrapper.find('.mr-fast-forward-message').exists()).toBe(false);
       });
     });
 
     describe('when the fast-forward merge method is enabled', () => {
       beforeEach(() => {
-        vm = createComponent({
+        createComponent({
           mr: { ffOnlyEnabled: true },
         });
       });
 
       it('should show fast forward message', () => {
-        expect(vm.$el.querySelector('.mr-fast-forward-message')).toBeDefined();
-      });
-
-      it('should not show "Modify commit message" button', () => {
-        expect(vm.$el.querySelector('.js-modify-commit-message-button')).toBeNull();
+        expect(wrapper.find('.mr-fast-forward-message').exists()).toBe(true);
       });
     });
   });
 
   describe('with a mismatched SHA', () => {
-    const findMismatchShaBlock = () => vm.$el.querySelector('.js-sha-mismatch');
+    const findMismatchShaBlock = () => wrapper.find('.js-sha-mismatch');
+    const findMismatchShaTextBlock = () => findMismatchShaBlock().find(GlSprintf);
 
     beforeEach(() => {
-      vm = createComponent({
+      createComponent({
         mr: {
           isSHAMismatch: true,
           mergeRequestDiffsPath: '/merge_requests/1/diffs',
@@ -987,17 +761,11 @@ describe('ReadyToMerge', () => {
     });
 
     it('displays a warning message', () => {
-      expect(findMismatchShaBlock()).toExist();
+      expect(findMismatchShaBlock().exists()).toBe(true);
     });
 
     it('warns the user to refresh to review', () => {
-      expect(findMismatchShaBlock().textContent.trim()).toBe(
-        'New changes were added. Reload the page to review them',
-      );
-    });
-
-    it('displays link to the diffs tab', () => {
-      expect(findMismatchShaBlock().querySelector('a').href).toContain(vm.mr.mergeRequestDiffsPath);
+      expect(findMismatchShaTextBlock().element.outerHTML).toMatchSnapshot();
     });
   });
 });
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
index 6c0d69ea109..c6bfca4516f 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
@@ -42,9 +42,7 @@ describe('UnresolvedDiscussions', () => {
     });
 
     it('should have correct elements', () => {
-      expect(wrapper.element.innerText).toContain(
-        `Before this can be merged, one or more threads must be resolved.`,
-      );
+      expect(wrapper.element.innerText).toContain(`Merge blocked: all threads must be resolved.`);
 
       expect(wrapper.element.innerText).toContain('Jump to first unresolved thread');
       expect(wrapper.element.innerText).toContain('Resolve all threads in new issue');
@@ -56,9 +54,7 @@ describe('UnresolvedDiscussions', () => {
 
   describe('without threads path', () => {
     it('should not show create issue link if user cannot create issue', () => {
-      expect(wrapper.element.innerText).toContain(
-        `Before this can be merged, one or more threads must be resolved.`,
-      );
+      expect(wrapper.element.innerText).toContain(`Merge blocked: all threads must be resolved.`);
 
       expect(wrapper.element.innerText).toContain('Jump to first unresolved thread');
       expect(wrapper.element.innerText).not.toContain('Resolve all threads in new issue');
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js b/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js
index ff29022b75d..2083dc88681 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js
@@ -45,15 +45,15 @@ const deploymentMockData = {
   changes: [
     {
       path: 'index.html',
-      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+      external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/index.html',
     },
     {
       path: 'imgs/gallery.html',
-      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+      external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
     },
     {
       path: 'about/',
-      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+      external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/about/',
     },
   ],
 };
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js b/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
index a5d91468ef2..eb6e3711e2e 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_view_button_spec.js
@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils';
+import { GlDropdown, GlLink } from '@gitlab/ui';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import DeploymentViewButton from '~/vue_merge_request_widget/components/deployment/deployment_view_button.vue';
 import ReviewAppLink from '~/vue_merge_request_widget/components/review_app_link.vue';
 import { deploymentMockData } from './deployment_mock_data';
@@ -11,14 +12,14 @@ const appButtonText = {
 describe('Deployment View App button', () => {
   let wrapper;
 
-  const factory = (options = {}) => {
-    wrapper = mount(DeploymentViewButton, {
+  const createComponent = (options = {}) => {
+    wrapper = mountExtended(DeploymentViewButton, {
       ...options,
     });
   };
 
   beforeEach(() => {
-    factory({
+    createComponent({
       propsData: {
         deployment: deploymentMockData,
         appButtonText,
@@ -30,15 +31,21 @@ describe('Deployment View App button', () => {
     wrapper.destroy();
   });
 
+  const findReviewAppLink = () => wrapper.findComponent(ReviewAppLink);
+  const findMrWigdetDeploymentDropdown = () => wrapper.findComponent(GlDropdown);
+  const findMrWigdetDeploymentDropdownIcon = () =>
+    wrapper.findByTestId('mr-wigdet-deployment-dropdown-icon');
+  const findDeployUrlMenuItems = () => wrapper.findAllComponents(GlLink);
+
   describe('text', () => {
     it('renders text as passed', () => {
-      expect(wrapper.find(ReviewAppLink).text()).toContain(appButtonText.text);
+      expect(findReviewAppLink().props().display.text).toBe(appButtonText.text);
     });
   });
 
   describe('without changes', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: { ...deploymentMockData, changes: null },
           appButtonText,
@@ -47,13 +54,13 @@ describe('Deployment View App button', () => {
     });
 
     it('renders the link to the review app without dropdown', () => {
-      expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(false);
+      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
     });
   });
 
   describe('with a single change', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: { ...deploymentMockData, changes: [deploymentMockData.changes[0]] },
           appButtonText,
@@ -62,21 +69,20 @@ describe('Deployment View App button', () => {
     });
 
     it('renders the link to the review app without dropdown', () => {
-      expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(false);
+      expect(findMrWigdetDeploymentDropdown().exists()).toBe(false);
+      expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(false);
     });
 
     it('renders the link to the review app linked to to the first change', () => {
       const expectedUrl = deploymentMockData.changes[0].external_url;
-      const deployUrl = wrapper.find('.js-deploy-url');
 
-      expect(deployUrl.attributes().href).not.toBeNull();
-      expect(deployUrl.attributes().href).toEqual(expectedUrl);
+      expect(findReviewAppLink().attributes('href')).toBe(expectedUrl);
     });
   });
 
   describe('with multiple changes', () => {
     beforeEach(() => {
-      factory({
+      createComponent({
         propsData: {
           deployment: deploymentMockData,
           appButtonText,
@@ -85,18 +91,18 @@ describe('Deployment View App button', () => {
     });
 
     it('renders the link to the review app with dropdown', () => {
-      expect(wrapper.find('.js-mr-wigdet-deployment-dropdown').exists()).toBe(true);
+      expect(findMrWigdetDeploymentDropdown().exists()).toBe(true);
+      expect(findMrWigdetDeploymentDropdownIcon().exists()).toBe(true);
     });
 
     it('renders all the links to the review apps', () => {
-      const allUrls = wrapper.findAll('.js-deploy-url-menu-item').wrappers;
+      const allUrls = findDeployUrlMenuItems().wrappers;
       const expectedUrls = deploymentMockData.changes.map((change) => change.external_url);
 
       expectedUrls.forEach((expectedUrl, idx) => {
         const deployUrl = allUrls[idx];
 
-        expect(deployUrl.attributes().href).not.toBeNull();
-        expect(deployUrl.attributes().href).toEqual(expectedUrl);
+        expect(deployUrl.attributes('href')).toBe(expectedUrl);
       });
     });
   });
diff --git a/spec/frontend/vue_mr_widget/mock_data.js b/spec/frontend/vue_mr_widget/mock_data.js
index aa2345abccf..8e36a9225d6 100644
--- a/spec/frontend/vue_mr_widget/mock_data.js
+++ b/spec/frontend/vue_mr_widget/mock_data.js
@@ -48,7 +48,7 @@ export default {
   source_branch_link: 'daaaa',
   source_project_id: 19,
   source_project_full_path: '/group1/project1',
-  target_branch: 'master',
+  target_branch: 'main',
   target_project_id: 19,
   target_project_full_path: '/group2/project2',
   merge_request_add_ci_config_path: '/group2/project2/new/pipeline',
@@ -83,7 +83,7 @@ export default {
   diff_head_sha: '104096c51715e12e7ae41f9333e9fa35b73f385d',
   diff_head_commit_short_id: '104096c5',
   default_merge_commit_message:
-    "Merge branch 'daaaa' into 'master'\n\nUpdate README.md\n\nSee merge request !22",
+    "Merge branch 'daaaa' into 'main'\n\nUpdate README.md\n\nSee merge request !22",
   pipeline: {
     id: 172,
     user: {
@@ -173,8 +173,8 @@ export default {
       title: 'Update README.md',
       source_branch: 'feature-1',
       source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1',
-      target_branch: 'master',
-      target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
+      target_branch: 'main',
+      target_branch_path: '/root/detached-merge-request-pipelines/branches/main',
     },
     commit: {
       id: '104096c51715e12e7ae41f9333e9fa35b73f385d',
@@ -243,7 +243,7 @@ export default {
     head_path: 'blob_path',
   },
   codequality_help_path: 'code_quality.html',
-  target_branch_path: '/root/acets-app/branches/master',
+  target_branch_path: '/root/acets-app/branches/main',
   source_branch_path: '/root/acets-app/branches/daaaa',
   conflict_resolution_ui_path: '/root/acets-app/-/merge_requests/22/conflicts',
   remove_wip_path: '/root/acets-app/-/merge_requests/22/remove_wip',
@@ -264,7 +264,7 @@ export default {
   ci_environments_status_url: '/root/acets-app/-/merge_requests/22/ci_environments_status',
   project_archived: false,
   default_merge_commit_message_with_description:
-    "Merge branch 'daaaa' into 'master'\n\nUpdate README.md\n\nSee merge request !22",
+    "Merge branch 'daaaa' into 'main'\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,
diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index c4962b608e1..446cd2a1e2f 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -3,7 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
-import { securityReportDownloadPathsQueryResponse } from 'jest/vue_shared/security_reports/mock_data';
+import { securityReportMergeRequestDownloadPathsQueryResponse } from 'jest/vue_shared/security_reports/mock_data';
 import axios from '~/lib/utils/axios_utils';
 import { setFaviconOverlay } from '~/lib/utils/favicon';
 import notify from '~/lib/utils/notify';
@@ -12,7 +12,7 @@ import { SUCCESS } from '~/vue_merge_request_widget/components/deployment/consta
 import eventHub from '~/vue_merge_request_widget/event_hub';
 import MrWidgetOptions from '~/vue_merge_request_widget/mr_widget_options.vue';
 import { stateKey } from '~/vue_merge_request_widget/stores/state_maps';
-import securityReportDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_download_paths.query.graphql';
+import securityReportMergeRequestDownloadPathsQuery from '~/vue_shared/security_reports/queries/security_report_merge_request_download_paths.query.graphql';
 import { faviconDataUrl, overlayDataUrl } from '../lib/utils/mock_data';
 import mockData from './mock_data';
 
@@ -559,15 +559,15 @@ describe('MrWidgetOptions', () => {
       const changes = [
         {
           path: 'index.html',
-          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+          external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/index.html',
         },
         {
           path: 'imgs/gallery.html',
-          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+          external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
         },
         {
           path: 'about/',
-          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+          external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/about/',
         },
       ];
       const deploymentMockData = {
@@ -688,22 +688,22 @@ describe('MrWidgetOptions', () => {
               scheduled_actions: [],
             },
             ref: {
-              name: 'master',
-              path: '/root/ci-web-terminal/commits/master',
+              name: 'main',
+              path: '/root/ci-web-terminal/commits/main',
               tag: false,
               branch: true,
             },
             commit: {
               id: 'aa1939133d373c94879becb79d91828a892ee319',
               short_id: 'aa193913',
-              title: "Merge branch 'master-test' into 'master'",
+              title: "Merge branch 'main-test' into 'main'",
               created_at: '2018-10-22T11:41:33.000Z',
               parent_ids: [
                 '4622f4dd792468993003caf2e3be978798cbe096',
                 '76598df914cdfe87132d0c3c40f80db9fa9396a4',
               ],
               message:
-                "Merge branch 'master-test' into 'master'\n\nUpdate .gitlab-ci.yml\n\nSee merge request root/ci-web-terminal!1",
+                "Merge branch 'main-test' into 'main'\n\nUpdate .gitlab-ci.yml\n\nSee merge request root/ci-web-terminal!1",
               author_name: 'Administrator',
               author_email: 'admin@example.com',
               authored_date: '2018-10-22T11:41:33.000Z',
@@ -751,17 +751,16 @@ describe('MrWidgetOptions', () => {
                 changes: [
                   {
                     path: 'index.html',
-                    external_url:
-                      'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+                    external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/index.html',
                   },
                   {
                     path: 'imgs/gallery.html',
                     external_url:
-                      'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+                      'http://root-main-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
                   },
                   {
                     path: 'about/',
-                    external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+                    external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/about/',
                   },
                 ],
                 status: 'success',
@@ -831,8 +830,8 @@ describe('MrWidgetOptions', () => {
         return createComponent(mrData, {
           apolloProvider: createMockApollo([
             [
-              securityReportDownloadPathsQuery,
-              async () => ({ data: securityReportDownloadPathsQueryResponse }),
+              securityReportMergeRequestDownloadPathsQuery,
+              async () => ({ data: securityReportMergeRequestDownloadPathsQueryResponse }),
             ],
           ]),
         });