Add i18n and update specs for ShaMismatch vue component

app/assets/javascripts/vue_merge_request_widget/components/states/sha_mismatch.vue

@@ -17,8 +17,8 @@ export default {
     />
     <div class="media-body space-children">
       <span class="bold">
-        The source branch HEAD has recently changed.
-        Please reload the page and review the changes before merging.
+        {{ s__(`mrWidget|The source branch HEAD has recently changed.
+Please reload the page and review the changes before merging`) }}
       </span>
     </div>
   </div>

changelogs/unreleased/update-unresolved-discussions-vue-component.yml

+---
+title: Add i18n and update specs for ShaMismatch vue component
+merge_request: 17870
+author: George Tsiolis
+type: performance

spec/javascripts/helpers/vue_component_helper.js

+export default function removeBreakLine (data) {
+  return data.replace(/\r?\n|\r/g, ' ');
+}

spec/javascripts/vue_mr_widget/components/states/mr_widget_conflicts_spec.js

 import Vue from 'vue';
 import conflictsComponent from '~/vue_merge_request_widget/components/states/mr_widget_conflicts.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import removeBreakLine from 'spec/helpers/vue_component_helper';
 
 describe('MRWidgetConflicts', () => {
   let Component;
@@ -78,8 +79,9 @@ describe('MRWidgetConflicts', () => {
     });
 
     it('should tell you to rebase locally', () => {
-      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toContain('Fast-forward merge is not possible.');
-      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toContain('To merge this request, first rebase locally');
+      expect(
+        removeBreakLine(vm.$el.textContent).trim(),
+      ).toContain('Fast-forward merge is not possible. To merge this request, first rebase locally.');
     });
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_pipeline_blocked_spec.js

 import Vue from 'vue';
 import pipelineBlockedComponent from '~/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import removeBreakLine from 'spec/helpers/vue_component_helper';
 
 describe('MRWidgetPipelineBlocked', () => {
   let vm;
@@ -18,6 +19,8 @@ describe('MRWidgetPipelineBlocked', () => {
   });
 
   it('renders information text', () => {
-    expect(vm.$el.textContent.trim().replace(/[\r\n]+/g, ' ')).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed');
+    expect(
+      removeBreakLine(vm.$el.textContent).trim(),
+    ).toContain('Pipeline blocked. The pipeline for this merge request requires a manual action to proceed');
   });
 });

spec/javascripts/vue_mr_widget/components/states/mr_widget_sha_mismatch_spec.js

 import Vue from 'vue';
 import ShaMismatch from '~/vue_merge_request_widget/components/states/sha_mismatch.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import removeBreakLine from 'spec/helpers/vue_component_helper';
 
 describe('ShaMismatch', () => {
-  describe('template', () => {
+  let vm;
+
+  beforeEach(() => {
     const Component = Vue.extend(ShaMismatch);
-    const vm = new Component({
-      el: document.createElement('div'),
+    vm = mountComponent(Component);
   });
-    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.');
-      expect(vm.$el.innerText).toContain('Please reload the page and review the changes before merging.');
+
+  afterEach(() => {
+    vm.$destroy();
   });
+
+  it('should render information message', () => {
+    expect(vm.$el.querySelector('button').disabled).toEqual(true);
+
+    expect(
+      removeBreakLine(vm.$el.textContent).trim(),
+    ).toContain('The source branch HEAD has recently changed. Please reload the page and review the changes before merging');
   });
 });