Merge branch '217052-empty-time-value-on-alerts-list' into 'master'

Handle empty endDate case

See merge request gitlab-org/gitlab!31469

app/assets/javascripts/alert_management/components/alert_management_list.vue

@@ -197,11 +197,11 @@ export default {
         </template>
 
         <template #cell(startedAt)="{ item }">
-          <time-ago :time="item.startedAt" />
+          <time-ago v-if="item.startedAt" :time="item.startedAt" />
         </template>
 
         <template #cell(endedAt)="{ item }">
-          <time-ago :time="item.endedAt" />
+          <time-ago v-if="item.endedAt" :time="item.endedAt" />
         </template>
 
         <template #cell(title)="{ item }">

spec/frontend/alert_management/components/alert_management_list_spec.js

@@ -9,6 +9,7 @@ import {
   GlIcon,
   GlTab,
 } from '@gitlab/ui';
+import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import AlertManagementList from '~/alert_management/components/alert_management_list.vue';
 import { ALERTS_STATUS_TABS } from '../../../../app/assets/javascripts/alert_management/constants';
 
@@ -24,6 +25,7 @@ describe('AlertManagementList', () => {
   const findStatusDropdown = () => wrapper.find(GlNewDropdown);
   const findStatusFilterTabs = () => wrapper.findAll(GlTab);
   const findNumberOfAlertsBadge = () => wrapper.findAll(GlBadge);
+  const findDateFields = () => wrapper.findAll(TimeAgo);
 
   function mountComponent({
     props = {
@@ -198,5 +200,45 @@ describe('AlertManagementList', () => {
         ).toBe(true);
       });
     });
+
+    describe('handle date fields', () => {
+      it('should display time ago dates when values provided', () => {
+        mountComponent({
+          props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+          data: {
+            alerts: [
+              {
+                iid: 1,
+                startedAt: '2020-03-17T23:18:14.996Z',
+                endedAt: '2020-04-17T23:18:14.996Z',
+                severity: 'high',
+              },
+            ],
+            errored: false,
+          },
+          loading: false,
+        });
+        expect(findDateFields().length).toBe(2);
+      });
+
+      it('should not display time ago dates when values not provided', () => {
+        mountComponent({
+          props: { alertManagementEnabled: true, userCanEnableAlertManagement: true },
+          data: {
+            alerts: [
+              {
+                iid: 1,
+                startedAt: null,
+                endedAt: null,
+                severity: 'high',
+              },
+            ],
+            errored: false,
+          },
+          loading: false,
+        });
+        expect(findDateFields().exists()).toBe(false);
+      });
+    });
   });
 });