fix separator for unresolved discussions button on MR widget33829-resolve-later

2 files changed, 12 insertions, 7 deletions

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 f4ab2d9fa58..b31a9b808a9 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
@@ -3,6 +3,12 @@ export default {
   props: {
     mr: { type: Object, required: true },
   },
+  computed: {
+    text() {
+      const sep = this.mr.createIssueToResolveDiscussionsPath ? ' or' : '.';
+      return `There are unresolved discussions. Please resolve these discussions${sep}`;
+    },
+  },
   template: `
     <div class="mr-widget-body">
       <button
@@ -11,11 +17,9 @@ export default {
         disabled="true">
         Merge
       </button>
-      <span class="bold">
-        There are unresolved discussions. Please resolve these discussions
-        <span v-if="mr.canCreateIssue">or</span>
-        <span v-else>.</span>
-      </span>
+      <strong>
+        {{text}}
+      </strong>
       <a
         v-if="mr.createIssueToResolveDiscussionsPath"
         :href="mr.createIssueToResolveDiscussionsPath"
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
index fe87f110354..07da2d66744 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_unresolved_discussions_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import unresolvedDiscussionsComponent from '~/vue_merge_request_widget/components/states/mr_widget_unresolved_discussions';
 
-describe('MRWidgetUnresolvedDiscussions', () => {
+fdescribe('MRWidgetUnresolvedDiscussions', () => {
   describe('props', () => {
     it('should have props', () => {
       const { mr } = unresolvedDiscussionsComponent.props;
@@ -30,7 +30,7 @@ describe('MRWidgetUnresolvedDiscussions', () => {
 
     it('should have correct elements', () => {
       expect(el.classList.contains('mr-widget-body')).toBeTruthy();
-      expect(el.innerText).toContain('There are unresolved discussions. Please resolve these discussions');
+      expect(el.innerText).toContain('There are unresolved discussions. Please resolve these discussions or');
       expect(el.innerText).toContain('Create an issue to resolve them later');
       expect(el.querySelector('.js-create-issue').getAttribute('href')).toEqual(path);
     });
@@ -40,6 +40,7 @@ describe('MRWidgetUnresolvedDiscussions', () => {
 
       Vue.nextTick(() => {
         expect(el.querySelector('.js-create-issue')).toEqual(null);
+        expect(el.innerText).toContain('There are unresolved discussions. Please resolve these discussions.');
         done();
       });
     });