From ea350c9ff9e12b21eb2f628b1a2f413c64df3a63 Mon Sep 17 00:00:00 2001
From: bomu <ruiqing.piao@thoughtworks.com>
Date: Tue, 16 Apr 2024 10:41:22 +0800
Subject: [PATCH] ADM-889:[frontend] fix: fix title unit and test

---
 .../Common/ReportForThreeColumns.test.tsx          |  8 +++++---
 .../Common/ReportForThreeColumns/index.tsx         |  6 +-----
 .../Common/ReportForTwoColumns/index.tsx           | 14 +++++++++++++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx b/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx
index 2f4d95aa3a..752d4f60c7 100644
--- a/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx
+++ b/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx
@@ -1,6 +1,6 @@
 import ReportForThreeColumns from '@src/components/Common/ReportForThreeColumns';
+import { LEAD_TIME_FOR_CHANGES, LOADING, VELOCITY } from '../../fixtures';
 import { render, screen } from '@testing-library/react';
-import { LOADING, VELOCITY } from '../../fixtures';
 
 describe('Report for three columns', () => {
   it('should show loading when data is empty', () => {
@@ -17,9 +17,11 @@ describe('Report for three columns', () => {
       { id: 2, name: 'name3', valuesList: [{ name: 'test3', value: '3' }] },
     ];
 
-    render(<ReportForThreeColumns title={VELOCITY} fieldName='fieldName' listName='listName' data={mockData} />);
+    render(
+      <ReportForThreeColumns title={LEAD_TIME_FOR_CHANGES} fieldName='fieldName' listName='listName' data={mockData} />,
+    );
 
-    expect(screen.getByTestId(VELOCITY)).toBeInTheDocument();
+    expect(screen.getByTestId(LEAD_TIME_FOR_CHANGES)).toBeInTheDocument();
   });
 
   it('should show table when data name contains emoji', () => {
diff --git a/frontend/src/components/Common/ReportForThreeColumns/index.tsx b/frontend/src/components/Common/ReportForThreeColumns/index.tsx
index b5ea98f58c..c85e059a54 100644
--- a/frontend/src/components/Common/ReportForThreeColumns/index.tsx
+++ b/frontend/src/components/Common/ReportForThreeColumns/index.tsx
@@ -83,11 +83,7 @@ export const ReportForThreeColumns = ({
     });
 
   const getTitleUnit = (title: string) => {
-    return title === METRICS_TITLE.LEAD_TIME_FOR_CHANGES || title === METRICS_TITLE.DEV_MEAN_TIME_TO_RECOVERY
-      ? REPORT_SUFFIX_UNITS.HOURS
-      : title === METRICS_TITLE.DEPLOYMENT_FREQUENCY
-        ? REPORT_SUFFIX_UNITS.DEPLOYMENTS_DAY
-        : '';
+    return title === METRICS_TITLE.LEAD_TIME_FOR_CHANGES ? REPORT_SUFFIX_UNITS.HOURS : '';
   };
 
   const renderLoading = () => (
diff --git a/frontend/src/components/Common/ReportForTwoColumns/index.tsx b/frontend/src/components/Common/ReportForTwoColumns/index.tsx
index 0f2b807867..cc668b12df 100644
--- a/frontend/src/components/Common/ReportForTwoColumns/index.tsx
+++ b/frontend/src/components/Common/ReportForTwoColumns/index.tsx
@@ -8,6 +8,7 @@ import {
 import { ReportDataWithTwoColumns } from '@src/hooks/reportMapper/reportUIDataStructure';
 import { EmojiWrap, StyledAvatar, StyledTypography } from '@src/constants/emojis/style';
 import { getEmojiUrls, removeExtraEmojiName } from '@src/constants/emojis/emoji';
+import { METRICS_TITLE, REPORT_SUFFIX_UNITS } from '@src/constants/resources';
 import { ReportSelectionTitle } from '@src/containers/MetricsStep/style';
 import { Table, TableBody, TableHead, TableRow } from '@mui/material';
 import React, { Fragment } from 'react';
@@ -65,7 +66,7 @@ export const ReportForTwoColumns = ({ title, data }: ReportForTwoColumnsProps) =
           <TableHead>
             <TableRow id={title}>
               <StyledTableCell>Name</StyledTableCell>
-              <StyledTableCell>Value</StyledTableCell>
+              <StyledTableCell>{`Value${getTitleUnit(title)}`}</StyledTableCell>
             </TableRow>
           </TableHead>
           <TableBody key={title}>{renderRows()}</TableBody>
@@ -75,4 +76,15 @@ export const ReportForTwoColumns = ({ title, data }: ReportForTwoColumnsProps) =
   );
 };
 
+const getTitleUnit = (title: string) => {
+  switch (title) {
+    case METRICS_TITLE.DEV_MEAN_TIME_TO_RECOVERY:
+      return REPORT_SUFFIX_UNITS.HOURS;
+    case METRICS_TITLE.DEPLOYMENT_FREQUENCY:
+      return REPORT_SUFFIX_UNITS.DEPLOYMENTS_DAY;
+    default:
+      return '';
+  }
+};
+
 export default ReportForTwoColumns;