Minor: fixed KPI was showing success even the target did not met (#14220)

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResultsV1.test.tsx

@@ -0,0 +1,87 @@
+/*
+ *  Copyright 2023 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { findByTestId, render, screen } from '@testing-library/react';
+import React from 'react';
+import { UIKpiResult } from '../../interface/data-insight.interface';
+import KPILatestResultsV1 from './KPILatestResultsV1';
+
+const mockProps = {
+  'description-coverage-completed-description-fraction': {
+    timestamp: 1701396413075,
+    kpiFqn: 'description-coverage-completed-description-fraction',
+    targetResult: [
+      {
+        name: 'completedDescriptionFraction',
+        value: '0.011024667232034217',
+        targetMet: false,
+      },
+    ],
+    target: '0.5',
+    metricType: 'PERCENTAGE',
+    startDate: 1682578800000,
+    endDate: 1701417599999,
+    displayName: 'Description coverage',
+  },
+  'ownership-coverage-has-owner-fraction': {
+    timestamp: 1701657483456,
+    kpiFqn: 'ownership-coverage-has-owner-fraction',
+    targetResult: [
+      {
+        name: 'hasOwnerFraction',
+        value: '0.65',
+        targetMet: true,
+      },
+    ],
+    target: '0.6',
+    metricType: 'PERCENTAGE',
+    startDate: 1696876200000,
+    endDate: 1706725799999,
+    displayName: 'Ownership Coverage',
+  },
+} as Record<string, UIKpiResult>;
+
+describe('KPILatestResultsV1', () => {
+  it('Component. should render', async () => {
+    render(<KPILatestResultsV1 kpiLatestResultsRecord={mockProps} />);
+
+    const [descriptionKPI, ownerKPI] = Object.keys(mockProps);
+
+    expect(
+      await screen.findByTestId('kpi-latest-result-container')
+    ).toBeInTheDocument();
+    expect(await screen.findByTestId(descriptionKPI)).toBeInTheDocument();
+    expect(await screen.findByTestId(ownerKPI)).toBeInTheDocument();
+  });
+
+  it('If target is not met withing the time frame, it should show the 0 days left', async () => {
+    render(<KPILatestResultsV1 kpiLatestResultsRecord={mockProps} />);
+    const [descriptionKPI] = Object.keys(mockProps);
+    const kpi = await screen.findByTestId(descriptionKPI);
+
+    expect(kpi).toBeInTheDocument();
+
+    expect(await findByTestId(kpi, 'kpi-days-remaining')).toHaveTextContent(
+      '0'
+    );
+  });
+
+  it('If target is met withing the time frame, it should show the success icon', async () => {
+    render(<KPILatestResultsV1 kpiLatestResultsRecord={mockProps} />);
+    const [, ownerKip] = Object.keys(mockProps);
+    const kpi = await screen.findByTestId(ownerKip);
+
+    expect(kpi).toBeInTheDocument();
+
+    expect(await findByTestId(kpi, 'kpi-success')).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResultsV1.tsx

@@ -37,7 +37,11 @@ const KPILatestResultsV1: FC<Props> = ({ kpiLatestResultsRecord }) => {
   }, [kpiLatestResultsRecord]);
 
   return (
-    <Space className="w-full p-t-lg p-r-xs" direction="vertical" size={48}>
+    <Space
+      className="w-full p-t-lg p-r-xs"
+      data-testid="kpi-latest-result-container"
+      direction="vertical"
+      size={48}>
       {latestResultsList.map((result, index) => {
         const name = result[0];
         const resultData = result[1];
@@ -65,7 +69,7 @@ const KPILatestResultsV1: FC<Props> = ({ kpiLatestResultsRecord }) => {
         const isTargetMet = targetResult.targetMet;
 
         return (
-          <Row key={name}>
+          <Row data-testid={name} key={name}>
             <Col className="d-flex items-center" span={24}>
               <div
                 className="kpi-days-section"
@@ -73,16 +77,20 @@ const KPILatestResultsV1: FC<Props> = ({ kpiLatestResultsRecord }) => {
                   color: KPI_WIDGET_GRAPH_COLORS[index],
                   backgroundColor: KPI_WIDGET_GRAPH_BG_COLORS[index],
                 }}>
-                {daysLeft <= 0 ? (
+                {isTargetMet ? (
                   <>
-                    <Typography.Text className="days-remaining">
+                    <Typography.Text
+                      className="days-remaining"
+                      data-testid="kpi-success">
                       <CheckCircleOutlined style={{ fontSize: '20px' }} />
                     </Typography.Text>
                   </>
                 ) : (
                   <>
-                    <Typography.Text className="days-remaining">
+                    <Typography.Text
-                      {daysLeft}
+                      className="days-remaining"
+                      data-testid="kpi-days-remaining">
+                      {daysLeft <= 0 ? 0 : daysLeft}
                     </Typography.Text>
                     <Typography.Text className="days-left">
                       {t('label.day-left', { day: 'days' })}