Fix empty unit display of time metrics

The unit should only display when we
have a value > 0

Added changelog entry

ee/app/assets/javascripts/analytics/shared/components/metric_card.vue

@@ -25,7 +25,7 @@ export default {
   methods: {
     valueText(metric) {
       const { value = null, unit = null } = metric;
-      if (!value) return '-';
+      if (!value || value === '-') return '-';
       return unit && value ? `${value} ${unit}` : value;
     },
   },

ee/changelogs/unreleased/fix-empty-cycle-time-analytics-content.yml

+---
+title: Fix empty unit display of time metrics
+merge_request: 32388
+author:
+type: fixed

ee/spec/frontend/analytics/shared/components/metric_card_spec.js

@@ -2,14 +2,17 @@ import { mount } from '@vue/test-utils';
 import { GlSkeletonLoading } from '@gitlab/ui';
 import MetricCard from 'ee/analytics/shared/components/metric_card.vue';
 
+const metrics = [
+  { key: 'first_metric', value: 10, label: 'First metric', unit: 'days' },
+  { key: 'second_metric', value: 20, label: 'Yet another metric' },
+  { key: 'third_metric', value: null, label: 'Null metric without value', unit: 'parsecs' },
+  { key: 'fourth_metric', value: '-', label: 'Metric without value', unit: 'parsecs' },
+];
+
 const defaultProps = {
   title: 'My fancy title',
-  metrics: [
-    { key: 'first_metric', value: 10, label: 'First metric', unit: 'days' },
-    { key: 'second_metric', value: 20, label: 'Yet another metric' },
-    { key: 'third_metric', value: null, label: 'Metric without value', unit: 'parsecs' },
-  ],
   isLoading: false,
+  metrics,
 };
 
 describe('MetricCard', () => {
@@ -68,47 +71,22 @@ describe('MetricCard', () => {
       });
 
       it('renders two metrics', () => {
-        expect(findMetricItem()).toHaveLength(3);
+        expect(findMetricItem()).toHaveLength(metrics.length);
       });
 
       describe.each`
-        columnIndex | label                     | value
-        ${0}        | ${'First metric'}         | ${10}
-        ${1}        | ${'Yet another metric'}   | ${20}
-        ${2}        | ${'Metric without value'} | ${'-'}
-      `('metric columns', ({ columnIndex, label, value }) => {
-        it(`renders "${label}" as label`, () => {
+        columnIndex | label                          | value  | unit
+        ${0}        | ${'First metric'}              | ${10}  | ${' days'}
+        ${1}        | ${'Yet another metric'}        | ${20}  | ${''}
+        ${2}        | ${'Null metric without value'} | ${'-'} | ${''}
+        ${3}        | ${'Metric without value'}      | ${'-'} | ${''}
+      `('metric columns', ({ columnIndex, label, value, unit }) => {
+        it(`renders ${value}${unit} ${label}`, () => {
           expect(
             findMetricItem()
               .at(columnIndex)
               .text(),
-          ).toContain(label);
-        });
-
-        it(`renders ${value} as value`, () => {
-          expect(
-            findMetricItem()
-              .at(columnIndex)
-              .text(),
-          ).toContain(value);
-        });
-      });
-
-      describe('units', () => {
-        it(`renders when there is a value`, () => {
-          expect(
-            findMetricItem()
-              .at(0)
-              .text(),
-          ).toContain('10 days');
-        });
-
-        it(`does not render without a value`, () => {
-          expect(
-            findMetricItem()
-              .at(2)
-              .text(),
-          ).toContain('-');
+          ).toEqual(`${value}${unit} ${label}`);
         });
       });
     });