diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx index 24a5316c3ef..63f54d1747d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx @@ -12,7 +12,12 @@ */ import { act, queryByAttribute, render, screen } from '@testing-library/react'; +import { + DUMMY_GRAPH_DATA, + DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY, +} from 'mocks/DataInsight.mock'; import React from 'react'; +import { getGraphDataByEntityType } from 'utils/DataInsightUtils'; import { INITIAL_CHART_FILTER } from '../../constants/DataInsight.constants'; import DescriptionInsight from './DescriptionInsight'; @@ -21,44 +26,18 @@ jest.mock('../../utils/DataInsightUtils', () => ({ renderLegend: jest .fn() .mockReturnValue(), - getGraphDataByEntityType: jest.fn().mockImplementation(() => ({ - data: [ - { - timestamp: '27/Oct', - Table: 0.5674, - Topic: 0.0453, - Database: 0.9874, - Pipeline: 0.5432, - Messaging: 0.3215, - }, - { - timestamp: '25/Oct', - Table: 0.3674, - Topic: 0.0353, - Database: 0.9874, - Pipeline: 0.4432, - Messaging: 0.3115, - }, - { - timestamp: '24/Oct', - Table: 0.3374, - Topic: 0.0353, - Database: 0.9774, - Pipeline: 0.4482, - Messaging: 0.3105, - }, - ], - entities: ['Table', 'Topic', 'Database', 'Pipeline', 'Messaging'], - latestData: { - timestamp: '24/Oct', - Table: 0.3374, - Topic: 0.0353, - Database: 0.9774, - Pipeline: 0.4482, - Messaging: 0.3105, - }, - })), + getGraphDataByEntityType: jest + .fn() + .mockImplementation(() => DUMMY_GRAPH_DATA), })); +jest.mock('./DataInsightProgressBar', () => { + return jest.fn().mockImplementation(({ startValue, successValue }) => ( +
+ DataInsightProgressBar.component +

{startValue}

+
+ )); +}); jest.mock('react-i18next', () => ({ useTranslation: jest.fn().mockReturnValue({ @@ -88,4 +67,32 @@ describe('Test DescriptionInsight Component', () => { expect(graph).toBeInTheDocument(); }); }); + + it('Should render the graph and progress bar even if one entity dont have values', async () => { + (getGraphDataByEntityType as jest.Mock).mockImplementationOnce( + () => DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY + ); + await act(async () => { + const { container } = render( + + ); + const card = screen.getByTestId('entity-description-percentage-card'); + + const graph = queryByAttribute( + 'id', + container, + 'description-summary-graph' + ); + const missingEntityValue = await screen.findByTestId('Table'); + + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); + expect(missingEntityValue).toBeInTheDocument(); + expect(missingEntityValue.textContent).toBe('0'); + }); + }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx index 5b669dc5296..47c3746496b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx @@ -13,7 +13,7 @@ import { Card, Col, Row, Typography } from 'antd'; import { AxiosError } from 'axios'; -import { isEmpty, uniqueId } from 'lodash'; +import { isEmpty, round, uniqueId } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { @@ -232,7 +232,7 @@ const DescriptionInsight: FC = ({ chartFilter, kpi, selectedDays }) => { showEndValueAsLabel progress={latestData[entity]} showLabel={false} - startValue={latestData[entity].toFixed(2)} + startValue={round(latestData[entity] || 0, 2)} successValue={entity} suffix={isPercentageGraph ? '%' : ''} /> diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx new file mode 100644 index 00000000000..f3bc3a4f537 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.test.tsx @@ -0,0 +1,90 @@ +/* + * Copyright 2022 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 { act, queryByAttribute, render, screen } from '@testing-library/react'; +import { + DUMMY_GRAPH_DATA, + DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY, +} from 'mocks/DataInsight.mock'; +import React from 'react'; +import { getGraphDataByEntityType } from 'utils/DataInsightUtils'; +import { INITIAL_CHART_FILTER } from '../../constants/DataInsight.constants'; + +import OwnerInsight from './OwnerInsight'; + +jest.mock('../../utils/DataInsightUtils', () => ({ + renderLegend: jest + .fn() + .mockReturnValue(), + getGraphDataByEntityType: jest + .fn() + .mockImplementation(() => DUMMY_GRAPH_DATA), +})); +jest.mock('./DataInsightProgressBar', () => { + return jest.fn().mockImplementation(({ startValue, successValue }) => ( +
+ DataInsightProgressBar.component +

{startValue}

+
+ )); +}); + +jest.mock('react-i18next', () => ({ + useTranslation: jest.fn().mockReturnValue({ + t: (label: string) => label, + }), +})); + +describe('Test DescriptionInsight Component', () => { + it('Should render the graph', async () => { + await act(async () => { + const { container } = render( + + ); + const card = screen.getByTestId('entity-summary-card-percentage'); + + const graph = queryByAttribute('id', container, 'owner-summary-graph'); + + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); + }); + }); + + it('Should render the graph and progress bar even if one entity dont have values', async () => { + (getGraphDataByEntityType as jest.Mock).mockImplementationOnce( + () => DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY + ); + await act(async () => { + const { container } = render( + + ); + const card = screen.getByTestId('entity-summary-card-percentage'); + + const graph = queryByAttribute('id', container, 'owner-summary-graph'); + const missingEntityValue = await screen.findByTestId('Table'); + + expect(card).toBeInTheDocument(); + expect(graph).toBeInTheDocument(); + expect(missingEntityValue).toBeInTheDocument(); + expect(missingEntityValue.textContent).toBe('0'); + }); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx index dac30d55aed..32140d326b0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx @@ -13,7 +13,7 @@ import { Card, Col, Row, Typography } from 'antd'; import { AxiosError } from 'axios'; -import { isEmpty, uniqueId } from 'lodash'; +import { isEmpty, round, uniqueId } from 'lodash'; import React, { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { @@ -151,7 +151,10 @@ const OwnerInsight: FC = ({ chartFilter, kpi, selectedDays }) => { {data.length ? ( - + = ({ chartFilter, kpi, selectedDays }) => { showEndValueAsLabel progress={latestData[entity]} showLabel={false} - startValue={latestData[entity].toFixed(2)} + startValue={round(latestData[entity] || 0, 2)} successValue={entity} suffix={isPercentageGraph ? '%' : ''} /> diff --git a/openmetadata-ui/src/main/resources/ui/src/mocks/DataInsight.mock.ts b/openmetadata-ui/src/main/resources/ui/src/mocks/DataInsight.mock.ts new file mode 100644 index 00000000000..e088f43b2db --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/mocks/DataInsight.mock.ts @@ -0,0 +1,86 @@ +/* + * 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. + */ + +export const DUMMY_GRAPH_DATA = { + data: [ + { + timestamp: '27/Oct', + Table: 0.5674, + Topic: 0.0453, + Database: 0.9874, + Pipeline: 0.5432, + Messaging: 0.3215, + }, + { + timestamp: '25/Oct', + Table: 0.3674, + Topic: 0.0353, + Database: 0.9874, + Pipeline: 0.4432, + Messaging: 0.3115, + }, + { + timestamp: '24/Oct', + Table: 0.3374, + Topic: 0.0353, + Database: 0.9774, + Pipeline: 0.4482, + Messaging: 0.3105, + }, + ], + entities: ['Table', 'Topic', 'Database', 'Pipeline', 'Messaging'], + latestData: { + timestamp: '24/Oct', + Table: 0.3374, + Topic: 0.0353, + Database: 0.9774, + Pipeline: 0.4482, + Messaging: 0.3105, + }, +}; +export const DUMMY_GRAPH_DATA_WITH_MISSING_ENTITY = { + data: [ + { + timestamp: '27/Oct', + Table: 0.5674, + Topic: 0.0453, + Database: 0.9874, + Pipeline: 0.5432, + Messaging: 0.3215, + }, + { + timestamp: '25/Oct', + Table: 0.3674, + Topic: 0.0353, + Database: 0.9874, + Pipeline: 0.4432, + Messaging: 0.3115, + }, + { + timestamp: '24/Oct', + Table: 0.3374, + Topic: 0.0353, + Database: 0.9774, + Pipeline: 0.4482, + Messaging: 0.3105, + }, + ], + entities: ['Table', 'Topic', 'Database', 'Pipeline', 'Messaging'], + latestData: { + timestamp: '24/Oct', + Topic: 0.0353, + Database: 0.9774, + Pipeline: 0.4482, + Messaging: 0.3105, + }, +};