Add i18n and update specs for UnresolvedDiscussions vue component

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

@@ -7,7 +7,10 @@ export default {
     statusIcon,
   },
   props: {
-    mr: { type: Object, required: true },
+    mr: {
+      type: Object,
+      required: true,
+    },
   },
 };
 </script>
@@ -20,13 +23,14 @@ export default {
     />
     <div class="media-body space-children">
       <span class="bold">
-        There are unresolved discussions. Please resolve these discussions
+        {{ s__("mrWidget|There are unresolved discussions. Please resolve these discussions") }}
       </span>
       <a
         v-if="mr.createIssueToResolveDiscussionsPath"
         :href="mr.createIssueToResolveDiscussionsPath"
-        class="btn btn-default btn-xs js-create-issue">
-        Create an issue to resolve them later
+        class="btn btn-default btn-xs js-create-issue"
+      >
+        {{ s__("mrWidget|Create an issue to resolve them later") }}
       </a>
     </div>
   </div>

changelogs/unreleased/unresolved-discussions-vue-component-i18n-and-tests.yml

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

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

 import Vue from 'vue';
 import UnresolvedDiscussions from '~/vue_merge_request_widget/components/states/unresolved_discussions.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('UnresolvedDiscussions', () => {
-  describe('props', () => {
-    it('should have props', () => {
-      const { mr } = UnresolvedDiscussions.props;
+  const Component = Vue.extend(UnresolvedDiscussions);
+  let vm;
 
-      expect(mr.type instanceof Object).toBeTruthy();
-      expect(mr.required).toBeTruthy();
-    });
+  afterEach(() => {
+    vm.$destroy();
   });
 
-  describe('template', () => {
-    let el;
-    let vm;
-    const path = 'foo/bar';
-
+  describe('with discussions path', () => {
     beforeEach(() => {
-      const Component = Vue.extend(UnresolvedDiscussions);
-      const mr = {
-        createIssueToResolveDiscussionsPath: path,
-      };
-      vm = new Component({
-        el: document.createElement('div'),
-        propsData: { mr },
-      });
-      el = vm.$el;
+      vm = mountComponent(Component, { mr: {
+        createIssueToResolveDiscussionsPath: gl.TEST_HOST,
+      } });
     });
 
     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('Create an issue to resolve them later');
-      expect(el.querySelector('.js-create-issue').getAttribute('href')).toEqual(path);
+      expect(vm.$el.innerText).toContain('There are unresolved discussions. Please resolve these discussions');
+      expect(vm.$el.innerText).toContain('Create an issue to resolve them later');
+      expect(vm.$el.querySelector('.js-create-issue').getAttribute('href')).toEqual(gl.TEST_HOST);
+    });
   });
 
-    it('should not show create issue button if user cannot create issue', (done) => {
-      vm.mr.createIssueToResolveDiscussionsPath = '';
-
-      Vue.nextTick(() => {
-        expect(el.querySelector('.js-create-issue')).toEqual(null);
-        done();
+  describe('without discussions path', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, { mr: {} });
     });
+
+    it('should not show create issue link if user cannot create issue', () => {
+      expect(vm.$el.innerText).toContain('There are unresolved discussions. Please resolve these discussions');
+      expect(vm.$el.querySelector('.js-create-issue')).toEqual(null);
     });
   });
 });