Merge branch 'fl-more-mr-widget' into 'master'

Moves status icon into a vue file and adds tests

See merge request gitlab-org/gitlab-ce!16703

26 files changed, 189 insertions, 117 deletions

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
index d48f3a01420..d174a900f63 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
@@ -2,7 +2,7 @@ import { getTimeago } from '~/lib/utils/datetime_utility';
 import { visitUrl } from '../../lib/utils/url_utility';
 import Flash from '../../flash';
 import MemoryUsage from './mr_widget_memory_usage';
-import StatusIcon from './mr_widget_status_icon';
+import StatusIcon from './mr_widget_status_icon.vue';
 import MRWidgetService from '../services/mr_widget_service';
 
 export default {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
deleted file mode 100644
index eeb990908f6..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import ciIcon from '../../vue_shared/components/ci_icon.vue';
-import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-
-export default {
-  props: {
-    status: { type: String, required: true },
-    showDisabledButton: { type: Boolean, required: false },
-  },
-  components: {
-    ciIcon,
-    loadingIcon,
-  },
-  computed: {
-    statusObj() {
-      return {
-        group: this.status,
-        icon: `status_${this.status}`,
-      };
-    },
-  },
-  template: `
-    <div class="space-children flex-container-block append-right-10">
-      <div v-if="status === 'loading'" class="mr-widget-icon">
-        <loading-icon />
-      </div>
-      <ci-icon v-else :status="statusObj" />
-      <button
-        v-if="showDisabledButton"
-        type="button"
-        class="js-disabled-merge-button btn btn-success btn-sm"
-        disabled="true">
-        Merge
-      </button>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
new file mode 100644
index 00000000000..1fdc3218671
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue
@@ -0,0 +1,57 @@
+<script>
+  import ciIcon from '../../vue_shared/components/ci_icon.vue';
+  import loadingIcon from '../../vue_shared/components/loading_icon.vue';
+
+  export default {
+    components: {
+      ciIcon,
+      loadingIcon,
+    },
+    props: {
+      status: {
+        type: String,
+        required: true,
+      },
+      showDisabledButton: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      isLoading() {
+        return this.status === 'loading';
+      },
+      statusObj() {
+        return {
+          group: this.status,
+          icon: `status_${this.status}`,
+        };
+      },
+    },
+  };
+</script>
+<template>
+  <div class="space-children flex-container-block append-right-10">
+    <div
+      v-if="isLoading"
+      class="mr-widget-icon"
+    >
+      <loading-icon />
+    </div>
+
+    <ci-icon
+      v-else
+      :status="statusObj"
+    />
+
+    <button
+      v-if="showDisabledButton"
+      type="button"
+      class="js-disabled-merge-button btn btn-success btn-sm"
+      disabled="true"
+    >
+      {{ s__("mrWidget|Merge") }}
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
index afa9cc57544..cfbd44d41b2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_archived.vue
@@ -1,5 +1,5 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetArchived',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
index 77dd243d617..40c3cb500bb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_auto_merge_failed.vue
@@ -1,7 +1,7 @@
 <script>
   import loadingIcon from '~/vue_shared/components/loading_icon.vue';
   import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetAutoMergeFailed',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
index 04e1766b8c7..caeaac75b45 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_checking.vue
@@ -1,5 +1,5 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetChecking',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 8c0ce43c76c..71bfdaf801e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,6 +1,6 @@
 <script>
   import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetClosed',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
index 13b07f82330..dad4b0fe49d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_conflicts.vue
@@ -1,5 +1,5 @@
 <script>
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
 
   export default {
     name: 'MRWidgetConflicts',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
index fc5f18695b7..76b0235af1b 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_failed_to_merge.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
index bd349111bbd..357485b9e78 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.js
@@ -1,5 +1,5 @@
 import Flash from '../../../flash';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import MRWidgetAuthor from '../../components/mr_widget_author';
 import eventHub from '../../event_hub';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
index ba9681680ef..7f8d78cab73 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merged.js
@@ -2,7 +2,7 @@ import Flash from '../../../flash';
 import mrWidgetAuthorTime from '../../components/mr_widget_author_time';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.js
deleted file mode 100644
index f6d1a4feeb2..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import statusIcon from '../mr_widget_status_icon';
-
-export default {
-  name: 'MRWidgetMerging',
-  props: {
-    mr: { type: Object, required: true },
-  },
-  components: {
-    statusIcon,
-  },
-  template: `
-    <div class="mr-widget-body mr-state-locked media">
-      <status-icon status="loading" />
-      <div class="media-body">
-        <h4>
-          This merge request is in the process of being merged
-        </h4>
-        <section class="mr-info-list">
-          <p>
-            The changes will be merged into
-            <span class="label-branch">
-              <a :href="mr.targetBranchPath">{{mr.targetBranch}}</a>
-            </span>
-          </p>
-        </section>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
new file mode 100644
index 00000000000..953ddf40a51
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merging.vue
@@ -0,0 +1,35 @@
+<script>
+  import statusIcon from '../mr_widget_status_icon.vue';
+
+  export default {
+    name: 'MRWidgetMerging',
+    components: {
+      statusIcon,
+    },
+    props: {
+      mr: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+    },
+  };
+</script>
+<template>
+  <div class="mr-widget-body mr-state-locked media">
+    <status-icon status="loading" />
+    <div class="media-body">
+      <h4>
+        {{ s__("mrWidget|This merge request is in the process of being merged") }}
+      </h4>
+      <section class="mr-info-list">
+        <p>
+          {{ s__("mrWidget|The changes will be merged into") }}
+          <span class="label-branch">
+            <a :href="mr.targetBranchPath">{{ mr.targetBranch }}</a>
+          </span>
+        </p>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
index 16ff1109e3f..303877d6fbf 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_missing_branch.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import mrWidgetMergeHelp from '../../components/mr_widget_merge_help';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
index 00047718201..cea3d97fa88 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_not_allowed.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetNotAllowed',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
index 2c84f423ee2..e66ce071ab4 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_blocked.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetPipelineBlocked',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
index cbaa73deffa..4d9a2ca530f 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_failed.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetPipelineBlocked',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index e51eef07093..7ba6c29006a 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -3,7 +3,7 @@ import warningSvg from 'icons/_icon_status_warning.svg';
 import simplePoll from '~/lib/utils/simple_poll';
 import MergeRequest from '../../../merge_request';
 import Flash from '../../../flash';
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import eventHub from '../../event_hub';
 
 export default {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
index 52dd0245ff0..2968af0d5cb 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_rebase.vue
@@ -1,7 +1,7 @@
 <script>
   import simplePoll from '../../../lib/utils/simple_poll';
   import eventHub from '../../event_hub';
-  import statusIcon from '../mr_widget_status_icon';
+  import statusIcon from '../mr_widget_status_icon.vue';
   import loadingIcon from '../../../vue_shared/components/loading_icon.vue';
   import Flash from '../../../flash';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
index 46687cc85e1..142ddf477f1 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_sha_mismatch.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetSHAMismatch',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
index 97b1940f4be..67b271c69ca 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 
 export default {
   name: 'MRWidgetUnresolvedDiscussions',
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
index b4b0f00445c..bbca641f65e 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_wip.js
@@ -1,4 +1,4 @@
-import statusIcon from '../mr_widget_status_icon';
+import statusIcon from '../mr_widget_status_icon.vue';
 import tooltip from '../../../vue_shared/directives/tooltip';
 import eventHub from '../../event_hub';
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 5e8e251428a..8651945a3da 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -19,7 +19,7 @@ export { default as WidgetRelatedLinks } from './components/mr_widget_related_li
 export { default as MergedState } from './components/states/mr_widget_merged';
 export { default as FailedToMerge } from './components/states/mr_widget_failed_to_merge';
 export { default as ClosedState } from './components/states/mr_widget_closed.vue';
-export { default as MergingState } from './components/states/mr_widget_merging';
+export { default as MergingState } from './components/states/mr_widget_merging.vue';
 export { default as WipState } from './components/states/mr_widget_wip';
 export { default as ArchivedState } from './components/states/mr_widget_archived.vue';
 export { default as ConflictsState } from './components/states/mr_widget_conflicts.vue';
diff --git a/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js b/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js
new file mode 100644
index 00000000000..c39fcda0071
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/mr_widget_status_icon_spec.js
@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import mrStatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('MR widget status icon component', () => {
+  let vm;
+  let Component;
+
+  beforeEach(() => {
+    Component = Vue.extend(mrStatusIcon);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('while loading', () => {
+    it('renders loading icon', () => {
+      vm = mountComponent(Component, { status: 'loading' });
+      expect(vm.$el.querySelector('.mr-widget-icon i').classList).toContain('fa-spinner');
+    });
+  });
+
+  describe('with status icon', () => {
+    it('renders ci status icon', () => {
+      vm = mountComponent(Component, { status: 'failed' });
+      expect(vm.$el.querySelector('.js-ci-status-icon-failed')).not.toBeNull();
+    });
+  });
+
+  describe('with disabled button', () => {
+    it('renders a disabled button', () => {
+      vm = mountComponent(Component, { status: 'failed', showDisabledButton: true });
+      expect(vm.$el.querySelector('.js-disabled-merge-button').textContent.trim()).toEqual('Merge');
+    });
+  });
+
+  describe('without disabled button', () => {
+    it('does not render a disabled button', () => {
+      vm = mountComponent(Component, { status: 'failed' });
+      expect(vm.$el.querySelector('.js-disabled-merge-button')).toBeNull();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js
deleted file mode 100644
index 237035648cf..00000000000
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_locked_spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import Vue from 'vue';
-import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging';
-
-describe('MRWidgetMerging', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr } = mergingComponent.props;
-
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-    });
-  });
-
-  describe('template', () => {
-    it('should have correct elements', () => {
-      const Component = Vue.extend(mergingComponent);
-      const mr = {
-        targetBranchPath: '/branch-path',
-        targetBranch: 'branch',
-      };
-      const el = new Component({
-        el: document.createElement('div'),
-        propsData: { mr },
-      }).$el;
-
-      expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('This merge request is in the process of being merged');
-      expect(el.innerText).toContain('changes will be merged into');
-      expect(el.querySelector('.label-branch a').getAttribute('href')).toEqual(mr.targetBranchPath);
-      expect(el.querySelector('.label-branch a').textContent).toContain(mr.targetBranch);
-    });
-  });
-});
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js
new file mode 100644
index 00000000000..0b2ed2d4086
--- /dev/null
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_merging_spec.js
@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import mergingComponent from '~/vue_merge_request_widget/components/states/mr_widget_merging.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('MRWidgetMerging', () => {
+  let vm;
+  beforeEach(() => {
+    const Component = Vue.extend(mergingComponent);
+
+    vm = mountComponent(Component, { mr: {
+      targetBranchPath: '/branch-path',
+      targetBranch: 'branch',
+    } });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders information about merge request being merged', () => {
+    expect(
+      vm.$el.querySelector('.media-body').textContent.trim().replace(/\s\s+/g, ' ').replace(/[\r\n]+/g, ' '),
+    ).toContain('This merge request is in the process of being merged');
+  });
+
+  it('renders branch information', () => {
+    expect(
+      vm.$el.querySelector('.mr-info-list').textContent.trim().replace(/\s\s+/g, ' ').replace(/[\r\n]+/g, ' '),
+    ).toEqual('The changes will be merged into branch');
+    expect(
+      vm.$el.querySelector('a').getAttribute('href'),
+    ).toEqual('/branch-path');
+  });
+});