Merge branch '33095-mr-widget-ui' into 'master'

Merge Request widget Improvements

Closes #33095

See merge request !12601

19 files changed, 63 insertions, 94 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
index ab8a3f6c64c..7ee998c8fce 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_deployment_spec.js
@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import deploymentComponent from '~/vue_merge_request_widget/components/mr_widget_deployment';
 import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service';
-import { statusIconEntityMap } from '~/vue_shared/ci_status_icons';
 
 const deploymentMockData = [
   {
@@ -43,15 +42,6 @@ describe('MRWidgetDeployment', () => {
     });
   });
 
-  describe('computed', () => {
-    describe('svg', () => {
-      it('should have the proper SVG icon', () => {
-        const vm = createComponent(deploymentMockData);
-        expect(vm.svg).toEqual(statusIconEntityMap.icon_status_success);
-      });
-    });
-  });
-
   describe('methods', () => {
     let vm = createComponent();
     const deployment = deploymentMockData[0];
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
index 6adcbc73ed7..2ae3adc1f93 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_memory_usage_spec.js
@@ -52,10 +52,10 @@ const createComponent = () => {
 };
 
 const messages = {
-  loadingMetrics: 'Loading deployment statistics.',
+  loadingMetrics: 'Loading deployment statistics',
   hasMetrics: 'Memory usage unchanged from 0MB to 0MB',
-  loadFailed: 'Failed to load deployment statistics.',
-  metricsUnavailable: 'Deployment statistics are not available currently.',
+  loadFailed: 'Failed to load deployment statistics',
+  metricsUnavailable: 'Deployment statistics are not available currently',
 };
 
 describe('MemoryUsage', () => {
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
index 647b59520f8..c763487d12f 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_pipeline_spec.js
@@ -81,13 +81,12 @@ describe('MRWidgetPipeline', () => {
       expect(el.querySelectorAll('.ci-status-icon.ci-status-icon-success').length).toEqual(1);
       expect(el.querySelector('.pipeline-id').textContent).toContain(`#${pipeline.id}`);
       expect(el.innerText).toContain('passed');
-      expect(el.innerText).toContain('with stages');
       expect(el.querySelector('.pipeline-id').getAttribute('href')).toEqual(pipeline.path);
       expect(el.querySelectorAll('.stage-container').length).toEqual(2);
       expect(el.querySelector('.js-ci-error')).toEqual(null);
       expect(el.querySelector('.js-commit-link').getAttribute('href')).toEqual(pipeline.commit.commit_path);
       expect(el.querySelector('.js-commit-link').textContent).toContain(pipeline.commit.short_id);
-      expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%.`);
+      expect(el.querySelector('.js-mr-coverage').textContent).toContain(`Coverage ${pipeline.coverage}%`);
     });
 
     it('should list single stage', (done) => {
@@ -95,7 +94,6 @@ describe('MRWidgetPipeline', () => {
 
       Vue.nextTick(() => {
         expect(el.querySelectorAll('.stage-container button').length).toEqual(1);
-        expect(el.innerText).toContain('with stage');
         done();
       });
     });
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js
index f6e0c3dfb74..f86fb6a0b4b 100644
--- a/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_related_links_spec.js
@@ -22,15 +22,16 @@ describe('MRWidgetRelatedLinks', () => {
   });
 
   describe('computed', () => {
+    const data = {
+      relatedLinks: {
+        closing: '/foo',
+        mentioned: '/foo',
+        assignToMe: '/foo',
+      },
+    };
+
     describe('hasLinks', () => {
       it('should return correct value when we have links reference', () => {
-        const data = {
-          relatedLinks: {
-            closing: '/foo',
-            mentioned: '/foo',
-            assignToMe: '/foo',
-          },
-        };
         const vm = createComponent(data);
         expect(vm.hasLinks).toBeTruthy();
 
@@ -44,44 +45,24 @@ describe('MRWidgetRelatedLinks', () => {
         expect(vm.hasLinks).toBeFalsy();
       });
     });
-  });
-
-  describe('methods', () => {
-    const data = {
-      relatedLinks: {
-        closing: '<a href="#">#23</a> and <a>#42</a>',
-        mentioned: '<a href="#">#7</a>',
-      },
-    };
-    const vm = createComponent(data);
-
-    describe('hasMultipleIssues', () => {
-      it('should return true if the given text has multiple issues', () => {
-        expect(vm.hasMultipleIssues(data.relatedLinks.closing)).toBeTruthy();
-      });
-
-      it('should return false if the given text has one issue', () => {
-        expect(vm.hasMultipleIssues(data.relatedLinks.mentioned)).toBeFalsy();
-      });
-    });
 
-    describe('issueLabel', () => {
-      it('should return true if the given text has multiple issues', () => {
-        expect(vm.issueLabel('closing')).toEqual('issues');
-      });
-
-      it('should return false if the given text has one issue', () => {
-        expect(vm.issueLabel('mentioned')).toEqual('issue');
+    describe('closesText', () => {
+      it('returns correct text for open merge request', () => {
+        data.state = 'open';
+        const vm = createComponent(data);
+        expect(vm.closesText).toEqual('Closes');
       });
-    });
 
-    describe('verbLabel', () => {
-      it('should return true if the given text has multiple issues', () => {
-        expect(vm.verbLabel('closing')).toEqual('are');
+      it('returns correct text for closed merge request', () => {
+        data.state = 'closed';
+        const vm = createComponent(data);
+        expect(vm.closesText).toEqual('Did not close');
       });
 
-      it('should return false if the given text has one issue', () => {
-        expect(vm.verbLabel('mentioned')).toEqual('is');
+      it('returns correct tense for merged request', () => {
+        data.state = 'merged';
+        const vm = createComponent(data);
+        expect(vm.closesText).toEqual('Closed');
       });
     });
   });
@@ -95,8 +76,8 @@ describe('MRWidgetRelatedLinks', () => {
       });
       const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
 
-      expect(content).toContain('Closes issues #23 and #42');
-      expect(content).not.toContain('mentioned');
+      expect(content).toContain('Closes #23 and #42');
+      expect(content).not.toContain('Mentions');
     });
 
     it('should have only have mentioned issues text', () => {
@@ -106,8 +87,7 @@ describe('MRWidgetRelatedLinks', () => {
         },
       });
 
-      expect(vm.$el.innerText).toContain('issue #7');
-      expect(vm.$el.innerText).toContain('is mentioned but will not be closed.');
+      expect(vm.$el.innerText).toContain('Mentions #7');
       expect(vm.$el.innerText).not.toContain('Closes');
     });
 
@@ -120,9 +100,8 @@ describe('MRWidgetRelatedLinks', () => {
       });
       const content = vm.$el.textContent.replace(/\n(\s)+/g, ' ').trim();
 
-      expect(content).toContain('Closes issue #7.');
-      expect(content).toContain('issues #23 and #42');
-      expect(content).toContain('are mentioned but will not be closed.');
+      expect(content).toContain('Closes #7');
+      expect(content).toContain('Mentions #23 and #42');
     });
 
     it('should have assing issues link', () => {
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
index cac2f561a0b..4869fb17d96 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_archived_spec.js
@@ -12,7 +12,7 @@ describe('MRWidgetArchived', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
       expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('This project is archived, write access has been disabled.');
+      expect(el.innerText).toContain('This project is archived, write access has been disabled');
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js
index 47b4ba893e0..6042d7384d5 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_auto_merge_failed_spec.js
@@ -24,8 +24,8 @@ describe('MRWidgetAutoMergeFailed', () => {
 
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically.');
+      expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeFalsy();
+      expect(vm.$el.innerText).toContain('This merge request failed to be merged automatically');
       expect(vm.$el.innerText).toContain(mergeError);
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js
index 3be11d47227..6b7aa935ad3 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_checking_spec.js
@@ -12,7 +12,7 @@ describe('MRWidgetChecking', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').classList.contains('btn-success')).toBeTruthy();
       expect(el.querySelector('button').disabled).toBeTruthy();
-      expect(el.innerText).toContain('Checking ability to merge automatically.');
+      expect(el.innerText).toContain('Checking ability to merge automatically');
       expect(el.querySelector('i')).toBeDefined();
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
index e7ae85caec4..3b7b7d93662 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js
@@ -29,15 +29,16 @@ describe('MRWidgetConflicts', () => {
   describe('template', () => {
     it('should have correct elements', () => {
       const el = createComponent().$el;
-      const resolveButton = el.querySelectorAll('.btn-group .btn')[0];
-      const mergeLocallyButton = el.querySelectorAll('.btn-group .btn')[1];
+      const resolveButton = el.querySelector('.js-resolve-conflicts-button');
+      const mergeButton = el.querySelector('.mr-widget-body .btn');
+      const mergeLocallyButton = el.querySelector('.js-merge-locally-button');
 
-      expect(el.textContent).toContain('There are merge conflicts.');
+      expect(el.textContent).toContain('There are merge conflicts');
       expect(el.textContent).not.toContain('ask someone with write access');
       expect(el.querySelector('.btn-success').disabled).toBeTruthy();
-      expect(el.querySelectorAll('.btn-group .btn').length).toBe(2);
       expect(resolveButton.textContent).toContain('Resolve conflicts');
       expect(resolveButton.getAttribute('href')).toEqual(path);
+      expect(mergeButton.textContent).toContain('Merge');
       expect(mergeLocallyButton.textContent).toContain('Merge locally');
     });
 
@@ -59,8 +60,8 @@ describe('MRWidgetConflicts', () => {
       it('should not have action buttons', (done) => {
         Vue.nextTick(() => {
           expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
-          expect(vm.$el.querySelector('a.js-resolve-conflicts-button')).toEqual(null);
-          expect(vm.$el.querySelector('a.js-merge-locally-button')).toEqual(null);
+          expect(vm.$el.querySelector('.js-resolve-conflicts-button')).toEqual(null);
+          expect(vm.$el.querySelector('.js-merge-locally-button')).toEqual(null);
           done();
         });
       });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
index 587b83430d9..cef365eec8a 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_failed_to_merge_spec.js
@@ -94,7 +94,7 @@ describe('MRWidgetFailedToMerge', () => {
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-refresh-button').innerText).toContain('Refresh now');
       expect(el.querySelector('.js-refresh-label')).toEqual(null);
-      expect(el.innerText).not.toContain('Refreshing now...');
+      expect(el.innerText).not.toContain('Refreshing now');
       setTimeout(() => {
         expect(el.innerText).toContain('Refreshing in 9 seconds');
         done();
@@ -115,7 +115,7 @@ describe('MRWidgetFailedToMerge', () => {
       vm.refresh();
       Vue.nextTick(() => {
         expect(el.innerText).not.toContain('Merge failed. Refreshing');
-        expect(el.innerText).toContain('Refreshing now...');
+        expect(el.innerText).toContain('Refreshing now');
       });
     });
   });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
index 8d8b90cea16..9a71d0b47d7 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merge_when_pipeline_succeeds_spec.js
@@ -162,10 +162,10 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
 
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds.');
+      expect(el.innerText).toContain('to be merged automatically when the pipeline succeeds');
       expect(el.innerText).toContain('The changes will be merged into');
       expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch will not be removed.');
+      expect(el.innerText).toContain('The source branch will not be removed');
       expect(el.querySelector('.js-cancel-auto-merge').innerText).toContain('Cancel automatic merge');
       expect(el.querySelector('.js-cancel-auto-merge').getAttribute('disabled')).toBeFalsy();
       expect(el.querySelector('.js-remove-source-branch').innerText).toContain('Remove source branch');
@@ -186,8 +186,8 @@ describe('MRWidgetMergeWhenPipelineSucceeds', () => {
 
       Vue.nextTick(() => {
         const normalizedText = el.innerText.replace(/\s+/g, ' ');
-        expect(normalizedText).toContain('The source branch will be removed.');
-        expect(normalizedText).not.toContain('The source branch will not be removed.');
+        expect(normalizedText).toContain('The source branch will be removed');
+        expect(normalizedText).not.toContain('The source branch will not be removed');
         done();
       });
     });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
index 6628010112d..afaa750199a 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merged_spec.js
@@ -142,19 +142,19 @@ describe('MRWidgetMerged', () => {
       expect(el.querySelector('.js-mr-widget-author')).toBeDefined();
       expect(el.innerText).toContain('The changes were merged into');
       expect(el.innerText).toContain(targetBranch);
-      expect(el.innerText).toContain('The source branch has been removed.');
+      expect(el.innerText).toContain('The source branch has been removed');
       expect(el.innerText).toContain('Revert');
       expect(el.innerText).toContain('Cherry-pick');
-      expect(el.innerText).not.toContain('You can remove source branch now.');
-      expect(el.innerText).not.toContain('The source branch is being removed.');
+      expect(el.innerText).not.toContain('You can remove source branch now');
+      expect(el.innerText).not.toContain('The source branch is being removed');
     });
 
     it('should not show source branch removed text', (done) => {
       vm.mr.sourceBranchRemoved = false;
 
       Vue.nextTick(() => {
-        expect(el.innerText).toContain('You can remove source branch now.');
-        expect(el.innerText).not.toContain('The source branch has been removed.');
+        expect(el.innerText).toContain('You can remove source branch now');
+        expect(el.innerText).not.toContain('The source branch has been removed');
         done();
       });
     });
@@ -164,9 +164,9 @@ describe('MRWidgetMerged', () => {
       vm.mr.sourceBranchRemoved = false;
 
       Vue.nextTick(() => {
-        expect(el.innerText).toContain('The source branch is being removed.');
-        expect(el.innerText).not.toContain('You can remove source branch now.');
-        expect(el.innerText).not.toContain('The source branch has been removed.');
+        expect(el.innerText).toContain('The source branch is being removed');
+        expect(el.innerText).not.toContain('You can remove source branch now');
+        expect(el.innerText).not.toContain('The source branch has been removed');
         done();
       });
     });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
index 98674d12afb..720effb5c1c 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_missing_branch_spec.js
@@ -49,7 +49,7 @@ describe('MRWidgetMissingBranch', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(content).toContain('source branch does not exist.');
-      expect(content).toContain('Please restore the source branch or use a different source branch.');
+      expect(content).toContain('Please restore it or use a different source branch');
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js
index 61e00f4cf79..33f20ab132d 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_not_allowed_spec.js
@@ -11,7 +11,7 @@ describe('MRWidgetNotAllowed', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(vm.$el.innerText).toContain('Ready to be merged automatically.');
-      expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request.');
+      expect(vm.$el.innerText).toContain('Ask someone with write access to this repository to merge this request');
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js
index b293d118571..d0702f9f503 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js
@@ -10,7 +10,7 @@ describe('MRWidgetPipelineBlocked', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed.');
+      expect(vm.$el.innerText).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed');
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
index 807fba705d4..78bac1c61a5 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_failed_spec.js
@@ -10,7 +10,7 @@ describe('MRWidgetPipelineFailed', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure.');
+      expect(vm.$el.innerText).toContain('The pipeline for this merge request failed. Please retry the job or push a new commit to fix the failure');
     });
   });
 });
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 732b516badd..c607c9746a4 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
@@ -72,7 +72,7 @@ describe('MRWidgetReadyToMerge', () => {
       const withDesc = 'Include description in commit message';
       const withoutDesc = "Don't include description in commit message";
 
-      it('should return message wit description', () => {
+      it('should return message with description', () => {
         expect(vm.commitMessageLinkTitle).toEqual(withDesc);
       });
 
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
index 5fb1d69a8b3..4c67504b642 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js
@@ -10,7 +10,7 @@ describe('MRWidgetSHAMismatch', () => {
     it('should have correct elements', () => {
       expect(vm.$el.classList.contains('mr-widget-body')).toBeTruthy();
       expect(vm.$el.querySelector('button').getAttribute('disabled')).toBeTruthy();
-      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging.');
+      expect(vm.$el.innerText).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging');
     });
   });
 });
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js
index 45bd1a69964..2cb3aaa6951 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_wip_spec.js
@@ -78,7 +78,7 @@ describe('MRWidgetWIP', () => {
 
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('This merge request is currently Work In Progress and therefore unable to merge');
+      expect(el.innerText).toContain('This is a Work in Progress');
       expect(el.querySelector('button').getAttribute('disabled')).toBeTruthy();
       expect(el.querySelector('button').innerText).toContain('Merge');
       expect(el.querySelector('.js-remove-wip').innerText).toContain('Resolve WIP status');
diff --git a/spec/javascripts/vue_mr_widget/mock_data.js b/spec/javascripts/vue_mr_widget/mock_data.js
index e6f96d5588b..ad2f28b24f0 100644
--- a/spec/javascripts/vue_mr_widget/mock_data.js
+++ b/spec/javascripts/vue_mr_widget/mock_data.js
@@ -30,6 +30,7 @@ export default {
   "merge_user_id": null,
   "merge_when_pipeline_succeeds": false,
   "source_branch": "daaaa",
+  "source_branch_link": "daaaa",
   "source_project_id": 19,
   "target_branch": "master",
   "target_project_id": 19,