Fixes merge request widget date tooltip inconsistencies

Previously the merge request widget would use the `updated_at` date as
the tooltip text for both closed & merged states. This is incorrect as
the `updated_at` date is actually changed when a user updates merge
request through commenting, description changes or anything else.

The widget states for merged & closed events now use their own event
object which holds their own `updated_at` date string. Also this text
has been correctly formatted through our date utilities to correctly
display the right timezone data in a user friendly way.

Closes #38545

2 files changed, 40 insertions, 11 deletions

diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
index 47303d1e80f..d23b558f4ea 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_closed_spec.js
@@ -4,11 +4,15 @@ import closedComponent from '~/vue_merge_request_widget/components/states/mr_wid
 const mr = {
   targetBranch: 'good-branch',
   targetBranchPath: '/good-branch',
-  closedBy: {
-    name: 'Fatih Acet',
-    username: 'fatihacet',
+  closedEvent: {
+    author: {
+      name: 'Fatih Acet',
+      username: 'fatihacet',
+    },
+    updatedAt: 'closedEventUpdatedAt',
+    formattedUpdatedAt: '',
   },
-  updatedAt: '2017-03-23T20:08:08.845Z',
+  updatedAt: 'mrUpdatedAt',
   closedAt: '1 day ago',
 };
 
@@ -18,7 +22,7 @@ const createComponent = () => {
   return new Component({
     el: document.createElement('div'),
     propsData: { mr },
-  }).$el;
+  });
 };
 
 describe('MRWidgetClosed', () => {
@@ -38,14 +42,30 @@ describe('MRWidgetClosed', () => {
   });
 
   describe('template', () => {
-    it('should have correct elements', () => {
-      const el = createComponent();
+    let vm;
+    let el;
 
+    beforeEach(() => {
+      vm = createComponent();
+      el = vm.$el;
+    });
+
+    afterEach(() => {
+      vm.$destroy();
+    });
+
+    it('should have correct elements', () => {
       expect(el.querySelector('h4').textContent).toContain('Closed by');
-      expect(el.querySelector('h4').textContent).toContain(mr.closedBy.name);
+      expect(el.querySelector('h4').textContent).toContain(mr.closedEvent.author.name);
       expect(el.textContent).toContain('The changes were not merged into');
       expect(el.querySelector('.label-branch').getAttribute('href')).toEqual(mr.targetBranchPath);
       expect(el.querySelector('.label-branch').textContent).toContain(mr.targetBranch);
     });
+
+    it('should use closedEvent updatedAt as tooltip title', () => {
+      expect(
+        el.querySelector('time').getAttribute('title'),
+      ).toBe('closedEventUpdatedAt');
+    });
   });
 });
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 afaa750199a..2714e8294fa 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
@@ -14,9 +14,12 @@ const createComponent = () => {
     canRevertInCurrentMR: true,
     canRemoveSourceBranch: true,
     sourceBranchRemoved: true,
-    mergedBy: {},
-    mergedAt: '',
-    updatedAt: '',
+    mergedEvent: {
+      author: {},
+      updatedAt: 'mergedUpdatedAt',
+      formattedUpdatedAt: '',
+    },
+    updatedAt: 'mrUpdatedAt',
     targetBranch,
   };
 
@@ -170,5 +173,11 @@ describe('MRWidgetMerged', () => {
         done();
       });
     });
+
+    it('should use mergedEvent updatedAt as tooltip title', () => {
+      expect(
+        el.querySelector('time').getAttribute('title'),
+      ).toBe('mergedUpdatedAt');
+    });
   });
 });