From 23c15ad9f30b144eb1471c88eeebadef309d3b69 Mon Sep 17 00:00:00 2001 From: bomu Date: Mon, 15 Apr 2024 10:45:08 +0800 Subject: [PATCH 1/7] ADM-889:[frontend] fix: remove name column --- frontend/src/clients/report/dto/response.ts | 6 ++-- .../ReportStep/ReportDetail/dora.tsx | 17 +++++++---- .../hooks/reportMapper/deploymentFrequency.ts | 25 ++++------------- .../reportMapper/devChangeFailureRate.ts | 28 ++++--------------- .../reportMapper/devMeanTimeToRecovery.ts | 25 ++++------------- 5 files changed, 30 insertions(+), 71 deletions(-) diff --git a/frontend/src/clients/report/dto/response.ts b/frontend/src/clients/report/dto/response.ts index c9b1b7e64f..535a33404d 100644 --- a/frontend/src/clients/report/dto/response.ts +++ b/frontend/src/clients/report/dto/response.ts @@ -166,9 +166,9 @@ export interface ReportResponse { cycleTimeList?: ReportDataWithTwoColumns[] | null; reworkList?: ReportDataWithTwoColumns[] | null; classification?: ReportDataWithThreeColumns[] | null; - deploymentFrequencyList?: ReportDataWithThreeColumns[] | null; - devMeanTimeToRecoveryList?: ReportDataWithThreeColumns[] | null; + deploymentFrequencyList?: ReportDataWithTwoColumns[] | null; + devMeanTimeToRecoveryList?: ReportDataWithTwoColumns[] | null; leadTimeForChangesList?: ReportDataWithThreeColumns[] | null; - devChangeFailureRateList?: ReportDataWithThreeColumns[] | null; + devChangeFailureRateList?: ReportDataWithTwoColumns[] | null; exportValidityTimeMin?: number | null; } diff --git a/frontend/src/containers/ReportStep/ReportDetail/dora.tsx b/frontend/src/containers/ReportStep/ReportDetail/dora.tsx index 1ca30a04ce..4078e0dd0c 100644 --- a/frontend/src/containers/ReportStep/ReportDetail/dora.tsx +++ b/frontend/src/containers/ReportStep/ReportDetail/dora.tsx @@ -1,6 +1,7 @@ -import { ReportDataWithThreeColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; +import { ReportDataWithThreeColumns, ReportDataWithTwoColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; import ReportForThreeColumns from '@src/components/Common/ReportForThreeColumns'; import { METRICS_TITLE, NAME, PIPELINE_STEP } from '@src/constants/resources'; +import ReportForTwoColumns from '@src/components/Common/ReportForTwoColumns'; import { ReportResponseDTO } from '@src/clients/report/dto/response'; import { reportMapper } from '@src/hooks/reportMapper/report'; import { Optional } from '@src/utils/types'; @@ -11,7 +12,11 @@ interface Property { data: ReportResponseDTO; onBack: () => void; } -const showSection = (title: string, value: Optional) => + +const showTwoColumnSection = (title: string, value: Optional) => + value && ; + +const showThreeColumnSection = (title: string, value: Optional) => value && ; export const DoraDetail = withGoBack(({ data }: Property) => { @@ -19,10 +24,10 @@ export const DoraDetail = withGoBack(({ data }: Property) => { return ( <> - {showSection(METRICS_TITLE.DEPLOYMENT_FREQUENCY, mappedData.deploymentFrequencyList)} - {showSection(METRICS_TITLE.LEAD_TIME_FOR_CHANGES, mappedData.leadTimeForChangesList)} - {showSection(METRICS_TITLE.DEV_CHANGE_FAILURE_RATE, mappedData.devChangeFailureRateList)} - {showSection(METRICS_TITLE.DEV_MEAN_TIME_TO_RECOVERY, mappedData.devMeanTimeToRecoveryList)} + {showTwoColumnSection(METRICS_TITLE.DEPLOYMENT_FREQUENCY, mappedData.deploymentFrequencyList)} + {showThreeColumnSection(METRICS_TITLE.LEAD_TIME_FOR_CHANGES, mappedData.leadTimeForChangesList)} + {showTwoColumnSection(METRICS_TITLE.DEV_CHANGE_FAILURE_RATE, mappedData.devChangeFailureRateList)} + {showTwoColumnSection(METRICS_TITLE.DEV_MEAN_TIME_TO_RECOVERY, mappedData.devMeanTimeToRecoveryList)} ); }); diff --git a/frontend/src/hooks/reportMapper/deploymentFrequency.ts b/frontend/src/hooks/reportMapper/deploymentFrequency.ts index df4689bd44..0445616891 100644 --- a/frontend/src/hooks/reportMapper/deploymentFrequency.ts +++ b/frontend/src/hooks/reportMapper/deploymentFrequency.ts @@ -1,30 +1,17 @@ -import { ReportDataWithThreeColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; +import { ReportDataWithTwoColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; import { DeploymentFrequencyResponse } from '@src/clients/report/dto/response'; -import { DEPLOYMENT_FREQUENCY_NAME } from '@src/constants/resources'; -export const deploymentFrequencyMapper = ({ - avgDeploymentFrequency, - deploymentFrequencyOfPipelines, -}: DeploymentFrequencyResponse) => { - const mappedDeploymentFrequencyValue: ReportDataWithThreeColumns[] = []; +export const deploymentFrequencyMapper = ({ deploymentFrequencyOfPipelines }: DeploymentFrequencyResponse) => { + const mappedDeploymentFrequencyValue: ReportDataWithTwoColumns[] = []; deploymentFrequencyOfPipelines.map((item, index) => { - const deploymentFrequencyValue: ReportDataWithThreeColumns = { + const deploymentFrequencyValue: ReportDataWithTwoColumns = { id: index, name: `${item.name}/${item.step}`, - valuesList: [{ name: DEPLOYMENT_FREQUENCY_NAME, value: `${item.deploymentFrequency.toFixed(2)}` }], + valueList: [{ value: `${item.deploymentFrequency.toFixed(2)}` }], }; mappedDeploymentFrequencyValue.push(deploymentFrequencyValue); }); - mappedDeploymentFrequencyValue.push({ - id: mappedDeploymentFrequencyValue.length, - name: avgDeploymentFrequency.name, - valuesList: [ - { - name: DEPLOYMENT_FREQUENCY_NAME, - value: `${avgDeploymentFrequency.deploymentFrequency.toFixed(2)}`, - }, - ], - }); + return mappedDeploymentFrequencyValue; }; diff --git a/frontend/src/hooks/reportMapper/devChangeFailureRate.ts b/frontend/src/hooks/reportMapper/devChangeFailureRate.ts index 7dd9a0375b..682384b996 100644 --- a/frontend/src/hooks/reportMapper/devChangeFailureRate.ts +++ b/frontend/src/hooks/reportMapper/devChangeFailureRate.ts @@ -1,38 +1,20 @@ -import { ReportDataWithThreeColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; +import { ReportDataWithTwoColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; import { DevChangeFailureRateResponse } from '@src/clients/report/dto/response'; -import { DEV_FAILURE_RATE_NAME } from '@src/constants/resources'; -export const devChangeFailureRateMapper = ({ - avgDevChangeFailureRate, - devChangeFailureRateOfPipelines, -}: DevChangeFailureRateResponse) => { - const mappedDevChangeFailureRateValue: ReportDataWithThreeColumns[] = []; +export const devChangeFailureRateMapper = ({ devChangeFailureRateOfPipelines }: DevChangeFailureRateResponse) => { + const mappedDevChangeFailureRateValue: ReportDataWithTwoColumns[] = []; devChangeFailureRateOfPipelines.map((item, index) => { - const devChangeFailureRateValue: ReportDataWithThreeColumns = { + const devChangeFailureRateValue: ReportDataWithTwoColumns = { id: index, name: `${item.name}/${item.step}`, - valuesList: [ + valueList: [ { - name: DEV_FAILURE_RATE_NAME, value: `${(item.failureRate * 100).toFixed(2)}%(${item.failedTimesOfPipeline}/${item.totalTimesOfPipeline})`, }, ], }; mappedDevChangeFailureRateValue.push(devChangeFailureRateValue); }); - mappedDevChangeFailureRateValue.push({ - id: mappedDevChangeFailureRateValue.length, - name: avgDevChangeFailureRate.name, - valuesList: [ - { - name: DEV_FAILURE_RATE_NAME, - value: `${(avgDevChangeFailureRate.failureRate * 100).toFixed(2)}%(${avgDevChangeFailureRate.totalFailedTimes}/${ - avgDevChangeFailureRate.totalTimes - })`, - }, - ], - }); - return mappedDevChangeFailureRateValue; }; diff --git a/frontend/src/hooks/reportMapper/devMeanTimeToRecovery.ts b/frontend/src/hooks/reportMapper/devMeanTimeToRecovery.ts index 086063de94..597b727173 100644 --- a/frontend/src/hooks/reportMapper/devMeanTimeToRecovery.ts +++ b/frontend/src/hooks/reportMapper/devMeanTimeToRecovery.ts @@ -1,11 +1,7 @@ -import { ReportDataWithThreeColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; +import { ReportDataWithTwoColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; import { DevMeanTimeToRecoveryResponse } from '@src/clients/report/dto/response'; -import { DEV_MEAN_TIME_TO_RECOVERY_NAME } from '@src/constants/resources'; -export const devMeanTimeToRecoveryMapper = ({ - avgDevMeanTimeToRecovery, - devMeanTimeToRecoveryOfPipelines, -}: DevMeanTimeToRecoveryResponse) => { +export const devMeanTimeToRecoveryMapper = ({ devMeanTimeToRecoveryOfPipelines }: DevMeanTimeToRecoveryResponse) => { const minutesPerHour = 60; const milliscondMinute = 60000; const formatDuration = (duration: number) => { @@ -13,31 +9,20 @@ export const devMeanTimeToRecoveryMapper = ({ return (minutesDuration / minutesPerHour).toFixed(2); }; - const mappedDevMeanTimeToRecoveryValue: ReportDataWithThreeColumns[] = []; + const mappedDevMeanTimeToRecoveryValue: ReportDataWithTwoColumns[] = []; devMeanTimeToRecoveryOfPipelines.map((item, index) => { - const devMeanTimeToRecoveryValue: ReportDataWithThreeColumns = { + const devMeanTimeToRecoveryValue: ReportDataWithTwoColumns = { id: index, name: `${item.name}/${item.step}`, - valuesList: [ + valueList: [ { - name: DEV_MEAN_TIME_TO_RECOVERY_NAME, value: formatDuration(item.timeToRecovery), }, ], }; mappedDevMeanTimeToRecoveryValue.push(devMeanTimeToRecoveryValue); }); - mappedDevMeanTimeToRecoveryValue.push({ - id: mappedDevMeanTimeToRecoveryValue.length, - name: avgDevMeanTimeToRecovery.name, - valuesList: [ - { - name: DEV_MEAN_TIME_TO_RECOVERY_NAME, - value: formatDuration(avgDevMeanTimeToRecovery.timeToRecovery), - }, - ], - }); return mappedDevMeanTimeToRecoveryValue; }; From 52970ec6067b0c1a166e9eedd53e6d974831f753 Mon Sep 17 00:00:00 2001 From: bomu Date: Mon, 15 Apr 2024 10:54:12 +0800 Subject: [PATCH 2/7] ADM-889:[frontend] fix: rename column title as 'subtitle' --- frontend/src/constants/resources.ts | 2 +- frontend/src/containers/ReportStep/ReportDetail/dora.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/constants/resources.ts b/frontend/src/constants/resources.ts index 34e1041d09..5fc7294886 100644 --- a/frontend/src/constants/resources.ts +++ b/frontend/src/constants/resources.ts @@ -244,7 +244,7 @@ export const DEV_MEAN_TIME_TO_RECOVERY_NAME = 'Dev mean time to recovery'; export const PIPELINE_STEP = 'Pipeline/step'; -export const NAME = 'Name'; +export const SUBTITLE = 'Subtitle'; export const AVERAGE_FIELD = 'Average'; diff --git a/frontend/src/containers/ReportStep/ReportDetail/dora.tsx b/frontend/src/containers/ReportStep/ReportDetail/dora.tsx index 4078e0dd0c..cc4d0519bf 100644 --- a/frontend/src/containers/ReportStep/ReportDetail/dora.tsx +++ b/frontend/src/containers/ReportStep/ReportDetail/dora.tsx @@ -1,6 +1,6 @@ import { ReportDataWithThreeColumns, ReportDataWithTwoColumns } from '@src/hooks/reportMapper/reportUIDataStructure'; +import { METRICS_TITLE, PIPELINE_STEP, SUBTITLE } from '@src/constants/resources'; import ReportForThreeColumns from '@src/components/Common/ReportForThreeColumns'; -import { METRICS_TITLE, NAME, PIPELINE_STEP } from '@src/constants/resources'; import ReportForTwoColumns from '@src/components/Common/ReportForTwoColumns'; import { ReportResponseDTO } from '@src/clients/report/dto/response'; import { reportMapper } from '@src/hooks/reportMapper/report'; @@ -17,7 +17,7 @@ const showTwoColumnSection = (title: string, value: Optional; const showThreeColumnSection = (title: string, value: Optional) => - value && ; + value && ; export const DoraDetail = withGoBack(({ data }: Property) => { const mappedData = reportMapper(data); From a8cfb6065be31deba433f42f43dc0e2d03f0a6dc Mon Sep 17 00:00:00 2001 From: bomu Date: Mon, 15 Apr 2024 12:12:42 +0800 Subject: [PATCH 3/7] ADM-889:[frontend] fix: add transformEmoji fun --- .../Common/ReportForTwoColumns/index.tsx | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Common/ReportForTwoColumns/index.tsx b/frontend/src/components/Common/ReportForTwoColumns/index.tsx index 427258a4af..0f2b807867 100644 --- a/frontend/src/components/Common/ReportForTwoColumns/index.tsx +++ b/frontend/src/components/Common/ReportForTwoColumns/index.tsx @@ -6,6 +6,8 @@ import { StyledTableCell, } from '@src/components/Common/ReportForTwoColumns/style'; 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 { ReportSelectionTitle } from '@src/containers/MetricsStep/style'; import { Table, TableBody, TableHead, TableRow } from '@mui/material'; import React, { Fragment } from 'react'; @@ -16,11 +18,32 @@ interface ReportForTwoColumnsProps { } export const ReportForTwoColumns = ({ title, data }: ReportForTwoColumnsProps) => { + const transformEmoji = (row: ReportDataWithTwoColumns) => { + if (typeof row.name != 'string') { + return row.name; + } + const name = row.name as string; + const emojiUrls: string[] = getEmojiUrls(name); + if (name.includes(':') && emojiUrls.length > 0) { + const [prefix, suffix] = name.split('/'); + return ( + + {prefix}/ + {emojiUrls.map((url) => ( + + ))} + {removeExtraEmojiName(suffix)} + + ); + } + return {name}; + }; + const renderRows = () => { return data.map((row) => ( - {row.name} + {transformEmoji(row)} {row.valueList[0]?.unit ? `${row.valueList[0].value}${row.valueList[0].unit}` : row.valueList[0].value} From 42eee48b463fd0c2de3d1f0eadfa0ab4832cced9 Mon Sep 17 00:00:00 2001 From: bomu Date: Mon, 15 Apr 2024 15:03:52 +0800 Subject: [PATCH 4/7] ADM-889:[frontend] fix: fix test --- .../ReportStep/ReportDetail/dora.test.tsx | 12 ++--- .../reportMapper/changeFailureRate.test.tsx | 13 +----- .../reportMapper/deploymentFrequency.test.tsx | 13 +----- .../reportMapper/meanTimeToRecovery.test.tsx | 39 ++-------------- .../hooks/reportMapper/report.test.tsx | 45 +++---------------- 5 files changed, 16 insertions(+), 106 deletions(-) diff --git a/frontend/__tests__/containers/ReportStep/ReportDetail/dora.test.tsx b/frontend/__tests__/containers/ReportStep/ReportDetail/dora.test.tsx index a847b689c4..bb8e7ebd90 100644 --- a/frontend/__tests__/containers/ReportStep/ReportDetail/dora.test.tsx +++ b/frontend/__tests__/containers/ReportStep/ReportDetail/dora.test.tsx @@ -20,13 +20,13 @@ describe('DoraDetail', () => { describe('Deployment Frequency', () => { it('should show deploymentFrequencyList when deploymentFrequencyList data is existing', () => { (reportMapper as jest.Mock).mockReturnValue({ - deploymentFrequencyList: [{ id: 0, name: 'name1', valuesList: [{ name: 'test1', value: 1 }] }], + deploymentFrequencyList: [{ id: 0, name: 'name1', valueList: [{ value: 1 }] }], }); render(); const deploymentFrequencyTable = screen.getByTestId('Deployment Frequency'); expect(screen.getByText('Deployment Frequency')).toBeInTheDocument(); expect(deploymentFrequencyTable).toBeInTheDocument(); - expect(within(deploymentFrequencyTable).queryAllByTestId('tr').length).toBe(2); + expect(within(deploymentFrequencyTable).queryAllByTestId('tr').length).toBe(1); }); it('should not show deploymentFrequencyList when deploymentFrequencyList data is not existing', () => { @@ -62,13 +62,13 @@ describe('DoraDetail', () => { describe('Dev Change Failure Rate', () => { it('should show devChangeFailureRateList when devChangeFailureRateList data is existing', () => { (reportMapper as jest.Mock).mockReturnValue({ - devChangeFailureRateList: [{ id: 0, name: 'name1', valuesList: [{ name: 'test1', value: 1 }] }], + devChangeFailureRateList: [{ id: 0, name: 'name1', valueList: [{ value: 1 }] }], }); render(); const devChangeFailureRateTable = screen.getByTestId('Dev Change Failure Rate'); expect(screen.getByText('Dev Change Failure Rate')).toBeInTheDocument(); expect(devChangeFailureRateTable).toBeInTheDocument(); - expect(within(devChangeFailureRateTable).queryAllByTestId('tr').length).toBe(2); + expect(within(devChangeFailureRateTable).queryAllByTestId('tr').length).toBe(1); }); it('should not show devChangeFailureRateList when devChangeFailureRateList data is not existing', () => { @@ -83,13 +83,13 @@ describe('DoraDetail', () => { describe('Dev Mean Time To Recovery', () => { it('should show devMeanTimeToRecoveryList when devMeanTimeToRecoveryList data is existing', () => { (reportMapper as jest.Mock).mockReturnValue({ - devMeanTimeToRecoveryList: [{ id: 0, name: 'name1', valuesList: [{ name: 'test1', value: 1 }] }], + devMeanTimeToRecoveryList: [{ id: 0, name: 'name1', valueList: [{ value: 1 }] }], }); render(); const devMeanTimeToRecoveryTable = screen.getByTestId('Dev Mean Time To Recovery'); expect(screen.getByText('Dev Mean Time To Recovery')).toBeInTheDocument(); expect(devMeanTimeToRecoveryTable).toBeInTheDocument(); - expect(within(devMeanTimeToRecoveryTable).queryAllByTestId('tr').length).toBe(2); + expect(within(devMeanTimeToRecoveryTable).queryAllByTestId('tr').length).toBe(1); }); it('should not show devMeanTimeToRecoveryList when devMeanTimeToRecoveryList data is not existing', () => { diff --git a/frontend/__tests__/hooks/reportMapper/changeFailureRate.test.tsx b/frontend/__tests__/hooks/reportMapper/changeFailureRate.test.tsx index f8ae3f238e..05dfd09e3b 100644 --- a/frontend/__tests__/hooks/reportMapper/changeFailureRate.test.tsx +++ b/frontend/__tests__/hooks/reportMapper/changeFailureRate.test.tsx @@ -23,23 +23,12 @@ describe('dev change failure rate data mapper', () => { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ + valueList: [ { - name: 'Dev change failure rate', value: '0.00%(0/3)', }, ], }, - { - id: 1, - name: 'Average', - valuesList: [ - { - name: 'Dev change failure rate', - value: '0.00%(0/12)', - }, - ], - }, ]; const mappedDevChangeFailureRate = devChangeFailureRateMapper(mockDevChangeFailureRateRes); diff --git a/frontend/__tests__/hooks/reportMapper/deploymentFrequency.test.tsx b/frontend/__tests__/hooks/reportMapper/deploymentFrequency.test.tsx index 4583784366..a3bc1023f8 100644 --- a/frontend/__tests__/hooks/reportMapper/deploymentFrequency.test.tsx +++ b/frontend/__tests__/hooks/reportMapper/deploymentFrequency.test.tsx @@ -33,23 +33,12 @@ describe('deployment frequency data mapper', () => { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ + valueList: [ { - name: 'Deployment frequency', value: '0.30', }, ], }, - { - id: 1, - name: 'Average', - valuesList: [ - { - name: 'Deployment frequency', - value: '0.40', - }, - ], - }, ]; const mappedDeploymentFrequency = deploymentFrequencyMapper(mockDeploymentFrequencyRes); diff --git a/frontend/__tests__/hooks/reportMapper/meanTimeToRecovery.test.tsx b/frontend/__tests__/hooks/reportMapper/meanTimeToRecovery.test.tsx index 7605c059e4..451e76d164 100644 --- a/frontend/__tests__/hooks/reportMapper/meanTimeToRecovery.test.tsx +++ b/frontend/__tests__/hooks/reportMapper/meanTimeToRecovery.test.tsx @@ -19,19 +19,8 @@ describe('dev mean time to recovery data mapper', () => { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ + valueList: [ { - name: 'Dev mean time to recovery', - value: '45.03', - }, - ], - }, - { - id: 1, - name: 'Average', - valuesList: [ - { - name: 'Dev mean time to recovery', value: '45.03', }, ], @@ -60,19 +49,8 @@ describe('dev mean time to recovery data mapper', () => { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ + valueList: [ { - name: 'Dev mean time to recovery', - value: '0.00', - }, - ], - }, - { - id: 1, - name: 'Average', - valuesList: [ - { - name: 'Dev mean time to recovery', value: '0.00', }, ], @@ -101,19 +79,8 @@ describe('dev mean time to recovery data mapper', () => { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ - { - name: 'Dev mean time to recovery', - value: '0.00', - }, - ], - }, - { - id: 1, - name: 'Average', - valuesList: [ + valueList: [ { - name: 'Dev mean time to recovery', value: '0.00', }, ], diff --git a/frontend/__tests__/hooks/reportMapper/report.test.tsx b/frontend/__tests__/hooks/reportMapper/report.test.tsx index 6a9b084fb3..56e745f02f 100644 --- a/frontend/__tests__/hooks/reportMapper/report.test.tsx +++ b/frontend/__tests__/hooks/reportMapper/report.test.tsx @@ -42,31 +42,19 @@ export const EXPECTED_REPORT_VALUES = { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ + valueList: [ { - name: 'Deployment frequency', value: '0.30', }, ], }, - { - id: 1, - name: 'Average', - valuesList: [ - { - name: 'Deployment frequency', - value: '0.40', - }, - ], - }, ], devMeanTimeToRecoveryList: [ { id: 0, name: 'Heartbeat/:react: Build Frontend', - valuesList: [ + valueList: [ { - name: 'Dev mean time to recovery', value: '4.32', }, ], @@ -74,9 +62,8 @@ export const EXPECTED_REPORT_VALUES = { { id: 1, name: 'Heartbeat/:cloudformation: Deploy infra', - valuesList: [ + valueList: [ { - name: 'Dev mean time to recovery', value: '0.00', }, ], @@ -84,23 +71,12 @@ export const EXPECTED_REPORT_VALUES = { { id: 2, name: 'Heartbeat/:rocket: Run e2e', - valuesList: [ + valueList: [ { - name: 'Dev mean time to recovery', value: '7.67', }, ], }, - { - id: 3, - name: 'Average', - valuesList: [ - { - name: 'Dev mean time to recovery', - value: '4.00', - }, - ], - }, ], leadTimeForChangesList: [ { @@ -126,23 +102,12 @@ export const EXPECTED_REPORT_VALUES = { { id: 0, name: 'fs-platform-onboarding/ :shipit: deploy to PROD', - valuesList: [ + valueList: [ { - name: 'Dev change failure rate', value: '0.00%(0/2)', }, ], }, - { - id: 1, - name: 'Average', - valuesList: [ - { - name: 'Dev change failure rate', - value: '0.00%(0/6)', - }, - ], - }, ], exportValidityTimeMin: 30, reworkList: [ From e8c57a844950d154b91b0a175a7c187ffbc27952 Mon Sep 17 00:00:00 2001 From: bomu Date: Mon, 15 Apr 2024 16:17:23 +0800 Subject: [PATCH 5/7] ADM-889:[frontend] fix: fix e2e test --- frontend/e2e/pages/metrics/report-step.ts | 25 ++++++++++++----------- 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/frontend/e2e/pages/metrics/report-step.ts b/frontend/e2e/pages/metrics/report-step.ts index 28d5c890d2..71b3d6515c 100644 --- a/frontend/e2e/pages/metrics/report-step.ts +++ b/frontend/e2e/pages/metrics/report-step.ts @@ -38,6 +38,7 @@ export class ReportStep { readonly classificationRows: Locator; readonly leadTimeForChangesRows: Locator; readonly devChangeFailureRateRows: Locator; + readonly deploymentFrequencyRows: Locator; readonly devMeanTimeToRecoveryRows: Locator; readonly reworkRows: Locator; @@ -72,10 +73,14 @@ export class ReportStep { this.homeIcon = page.getByLabel('Home'); this.velocityRows = this.page.getByTestId('Velocity').locator('tbody').getByRole('row'); this.cycleTimeRows = this.page.getByTestId('Cycle Time').locator('tbody').getByRole('row'); + this.deploymentFrequencyRows = this.page.getByTestId('Deployment Frequency').locator('tbody').getByRole('row'); this.classificationRows = this.page.getByTestId('Classification').locator('tbody').getByRole('row'); this.leadTimeForChangesRows = this.page.getByTestId('Lead Time For Changes').getByRole('row'); - this.devChangeFailureRateRows = this.page.getByTestId('Dev Change Failure Rate').getByRole('row'); - this.devMeanTimeToRecoveryRows = this.page.getByTestId('Dev Mean Time To Recovery').getByRole('row'); + this.devChangeFailureRateRows = this.page.getByTestId('Dev Change Failure Rate').locator('tbody').getByRole('row'); + this.devMeanTimeToRecoveryRows = this.page + .getByTestId('Dev Mean Time To Recovery') + .locator('tbody') + .getByRole('row'); this.reworkRows = this.page.getByTestId('Rework').getByRole('row'); } combineStrings(arr: string[]): string { @@ -91,9 +96,8 @@ export class ReportStep { } async checkDoraMetricsReportDetails() { - await expect(this.page.getByTestId('Deployment Frequency').getByRole('row').nth(2)).toContainText( - this.combineStrings(['Deployment frequency', '6.60']), - ); + await expect(this.deploymentFrequencyRows.getByRole('cell').nth(0)).toContainText('Heartbeat/ Deploy prod'); + await expect(this.deploymentFrequencyRows.getByRole('cell').nth(1)).toContainText('6.60'); await expect(this.leadTimeForChangesRows.nth(2)).toContainText(this.combineStrings(['PR Lead Time', '6.12'])); await expect(this.leadTimeForChangesRows.nth(3)).toContainText(this.combineStrings(['Pipeline Lead Time', '0.50'])); @@ -101,13 +105,10 @@ export class ReportStep { await expect(this.leadTimeForChangesRows.nth(4)).toContainText(this.combineStrings(['Total Lead Time', '6.62'])); - await expect(this.devChangeFailureRateRows.nth(2)).toContainText( - this.combineStrings(['Dev change failure rate', '17.50%(7/40)']), - ); - - await expect(this.devMeanTimeToRecoveryRows.nth(2)).toContainText( - this.combineStrings(['Dev mean time to recovery', '1.90']), - ); + await expect(this.devChangeFailureRateRows.getByRole('cell').nth(0)).toContainText('Heartbeat/ Deploy prod'); + await expect(this.devChangeFailureRateRows.getByRole('cell').nth(1)).toContainText('17.50%(7/40)'); + await expect(this.devMeanTimeToRecoveryRows.getByRole('cell').nth(0)).toContainText('Heartbeat/ Deploy prod'); + await expect(this.devMeanTimeToRecoveryRows.getByRole('cell').nth(1)).toContainText('1.90'); } async checkDoraMetricsDetails(projectCreationType: ProjectCreationType) { From 3967a68ae79f9f7db4fa47ab3a16d9169d699e98 Mon Sep 17 00:00:00 2001 From: bomu Date: Tue, 16 Apr 2024 09:52:43 +0800 Subject: [PATCH 6/7] ADM-889:[frontend] fix: add test to fix coverage --- .../Common/ReportForThreeColumns.test.tsx | 13 ++++++++- .../Common/ReportForTwoColumns.test.tsx | 29 +++++++++++++++++++ 2 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 frontend/__tests__/components/Common/ReportForTwoColumns.test.tsx diff --git a/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx b/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx index 3cb975f8da..2f4d95aa3a 100644 --- a/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx +++ b/frontend/__tests__/components/Common/ReportForThreeColumns.test.tsx @@ -1,7 +1,6 @@ import ReportForThreeColumns from '@src/components/Common/ReportForThreeColumns'; import { render, screen } from '@testing-library/react'; import { LOADING, VELOCITY } from '../../fixtures'; -import React from 'react'; describe('Report for three columns', () => { it('should show loading when data is empty', () => { @@ -23,6 +22,18 @@ describe('Report for three columns', () => { expect(screen.getByTestId(VELOCITY)).toBeInTheDocument(); }); + it('should show table when data name contains emoji', () => { + const mockData = [ + { id: 0, name: 'name1/:rocket: Deploy prod', valuesList: [{ name: 'test1', value: '1' }] }, + { id: 1, name: 'name2/:rocket: Deploy prod', valuesList: [{ name: 'test2', value: '2' }] }, + { id: 2, name: 'name3/:rocket: Deploy prod', valuesList: [{ name: 'test3', value: '3' }] }, + ]; + + render(); + + expect(screen.getByTestId(VELOCITY)).toBeInTheDocument(); + }); + it('should show default value when valuesList is empty', () => { const mockData = [{ id: 0, name: 'name1', valuesList: [] }]; diff --git a/frontend/__tests__/components/Common/ReportForTwoColumns.test.tsx b/frontend/__tests__/components/Common/ReportForTwoColumns.test.tsx new file mode 100644 index 0000000000..91cdda2aeb --- /dev/null +++ b/frontend/__tests__/components/Common/ReportForTwoColumns.test.tsx @@ -0,0 +1,29 @@ +import ReportForTwoColumns from '@src/components/Common/ReportForTwoColumns'; +import { REPORT_SUFFIX_UNITS } from '@src/constants/resources'; +import { render, screen } from '@testing-library/react'; +import { CYCLE_TIME, VELOCITY } from '../../fixtures'; + +describe('Report for two columns', () => { + it('should show table when data is not empty', () => { + const mockData = [ + { id: 0, name: 'name1', valueList: [{ value: '1' }] }, + { id: 1, name: 'name2', valueList: [{ value: '2' }] }, + { id: 2, name: 'name3', valueList: [{ value: '3' }] }, + ]; + + render(); + + expect(screen.getByTestId(VELOCITY)).toBeInTheDocument(); + }); + + it('should show table when data with Units is not empty', () => { + const mockData = [ + { id: 0, name: 'name1', valueList: [{ value: 1, units: REPORT_SUFFIX_UNITS.PER_CARD }] }, + { id: 1, name: 'name2', valueList: [{ value: 2, units: REPORT_SUFFIX_UNITS.PER_CARD }] }, + ]; + + render(); + + expect(screen.getByTestId(CYCLE_TIME)).toBeInTheDocument(); + }); +}); From ea350c9ff9e12b21eb2f628b1a2f413c64df3a63 Mon Sep 17 00:00:00 2001 From: bomu Date: Tue, 16 Apr 2024 10:41:22 +0800 Subject: [PATCH 7/7] 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(); + render( + , + ); - 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) = Name - Value + {`Value${getTitleUnit(title)}`} {renderRows()} @@ -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;