Add Unit tests for data insight component (#8469)

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

@@ -0,0 +1,53 @@
+/*
+ *  Copyright 2021 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 { render, screen } from '@testing-library/react';
+import React from 'react';
+import DataInsightSummary from './DataInsightSummary';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn().mockReturnValue({
+    t: (label: string) => label,
+  }),
+}));
+
+describe('Test DataInsightSummary Component', () => {
+  it('Should render the overview data', async () => {
+    render(<DataInsightSummary />);
+
+    const summaryCard = screen.getByTestId('summary-card');
+
+    const allEntityCount = screen.getByTestId('summary-item-All');
+    const usersCount = screen.getByTestId('summary-item-Users');
+    const sessionCount = screen.getByTestId('summary-item-Sessions');
+    const activityCount = screen.getByTestId('summary-item-Activity');
+    const activeUsersCount = screen.getByTestId('summary-item-ActiveUsers');
+    const tablesCount = screen.getByTestId('summary-item-Tables');
+    const topicsCount = screen.getByTestId('summary-item-Topics');
+    const dashboardCount = screen.getByTestId('summary-item-Dashboards');
+    const mlModelsCount = screen.getByTestId('summary-item-MlModels');
+    const testCasesCount = screen.getByTestId('summary-item-TestCases');
+
+    expect(summaryCard).toBeInTheDocument();
+    expect(allEntityCount).toBeInTheDocument();
+    expect(usersCount).toBeInTheDocument();
+    expect(sessionCount).toBeInTheDocument();
+    expect(activityCount).toBeInTheDocument();
+    expect(activeUsersCount).toBeInTheDocument();
+    expect(tablesCount).toBeInTheDocument();
+    expect(topicsCount).toBeInTheDocument();
+    expect(dashboardCount).toBeInTheDocument();
+    expect(mlModelsCount).toBeInTheDocument();
+    expect(testCasesCount).toBeInTheDocument();
+  });
+});

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

@@ -31,7 +31,10 @@ const DataInsightSummary = () => {
       }>
       <Row data-testid="summary-card-content" gutter={[16, 16]}>
         {OVERVIEW.map((summary, id) => (
-          <Col data-testid="summary-item" key={id} span={4}>
+          <Col
+            data-testid={`summary-item-${summary.entityType}`}
+            key={id}
+            span={4}>
             <Typography.Text>{summary.entityType}</Typography.Text>
             <Typography className="tw-font-semibold">
               {summary.count}

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

@@ -0,0 +1,79 @@
+/*
+ *  Copyright 2021 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 React from 'react';
+
+import DescriptionInsight from './DescriptionInsight';
+
+jest.mock('../../pages/DataInsightPage/DataInsight.mock', () => ({
+  getEntityDescriptionData: jest.fn().mockReturnValue({
+    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'],
+  }),
+}));
+
+jest.mock('../../utils/DataInsightUtils', () => ({
+  renderLegend: jest
+    .fn()
+    .mockReturnValue(<ul data-testid="graph-legend">Graph Legend</ul>),
+}));
+
+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(<DescriptionInsight />);
+      const card = screen.getByTestId('entity-description-percentage-card');
+
+      const graph = queryByAttribute(
+        'id',
+        container,
+        'description-summary-graph'
+      );
+
+      expect(card).toBeInTheDocument();
+      expect(graph).toBeInTheDocument();
+    });
+  });
+});

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

@@ -41,13 +41,13 @@ const DescriptionInsight = () => {
   return (
     <Card
       className="data-insight-card"
-      data-testid="entity-summary-card-percentage"
+      data-testid="entity-description-percentage-card"
       title={
         <Typography.Title level={5}>
           {t('label.data-insight-description-summary')}
         </Typography.Title>
       }>
-      <ResponsiveContainer minHeight={400}>
+      <ResponsiveContainer id="description-summary-graph" minHeight={400}>
         <BarChart data={data} margin={BAR_CHART_MARGIN}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis dataKey="timestamp" />

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx

@@ -43,7 +43,7 @@ const DropDownLabel = ({ children, ...rest }: { children: ReactNode }) => {
 const DataInsightPage = () => {
   return (
     <PageLayoutV1>
-      <Row data-testid="dataInsight-container" gutter={[16, 16]}>
+      <Row data-testid="data-insight-container" gutter={[16, 16]}>
         <Col span={24}>
           <Space className="w-full justify-end" size={12}>
             <Dropdown

openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.test.tsx

@@ -0,0 +1,100 @@
+/*
+ *  Copyright 2021 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 { render, screen } from '@testing-library/react';
+import React from 'react';
+import DataInsightPage from './DataInsightPage.component';
+
+jest.mock('../../components/containers/PageLayoutV1', () =>
+  jest.fn().mockImplementation(({ children }) => <>{children}</>)
+);
+
+jest.mock('../../components/DataInsightDetail/DataInsightSummary', () =>
+  jest
+    .fn()
+    .mockReturnValue(
+      <div data-testid="data-insight-summary">DataInsight Summary</div>
+    )
+);
+
+jest.mock('../../components/DataInsightDetail/DescriptionInsight', () =>
+  jest
+    .fn()
+    .mockReturnValue(
+      <div data-testid="description-insight">DescriptionInsight</div>
+    )
+);
+
+jest.mock('../../components/DataInsightDetail/OwnerInsight', () =>
+  jest.fn().mockReturnValue(<div data-testid="owner-insight">OwnerInsight</div>)
+);
+
+jest.mock('../../components/DataInsightDetail/TierInsight', () =>
+  jest.fn().mockReturnValue(<div data-testid="tier-insight">TierInsight</div>)
+);
+
+jest.mock('../../components/DataInsightDetail/TopActiveUsers', () =>
+  jest
+    .fn()
+    .mockReturnValue(<div data-testid="top-active-user">TopActiveUsers</div>)
+);
+
+jest.mock('../../components/DataInsightDetail/TopViewEntities', () =>
+  jest
+    .fn()
+    .mockReturnValue(
+      <div data-testid="top-viewed-entities">TopViewEntities</div>
+    )
+);
+
+jest.mock('../../components/DataInsightDetail/TotalEntityInsight', () =>
+  jest
+    .fn()
+    .mockReturnValue(
+      <div data-testid="total-entity-insight">TotalEntityInsight</div>
+    )
+);
+
+jest.mock('../../utils/DataInsightUtils', () => ({
+  getMenuItems: jest.fn().mockReturnValue(
+    <select>
+      <option value="option1">option1</option>
+      <option value="option2">option2</option>
+    </select>
+  ),
+}));
+
+describe('Test DataInsightPage Component', () => {
+  it('Should render all child elements', async () => {
+    render(<DataInsightPage />);
+
+    const container = screen.getByTestId('data-insight-container');
+    const insightSummary = screen.getByTestId('data-insight-summary');
+    const descriptionInsight = screen.getByTestId('description-insight');
+    const ownerInsight = screen.getByTestId('owner-insight');
+    const tierInsight = screen.getByTestId('tier-insight');
+    const topActiveUser = screen.getByTestId('top-active-user');
+    const topViewedEntities = screen.getByTestId('top-viewed-entities');
+    const totalEntityInsight = screen.getByTestId('total-entity-insight');
+
+    expect(container).toBeInTheDocument();
+
+    expect(insightSummary).toBeInTheDocument();
+    expect(descriptionInsight).toBeInTheDocument();
+    expect(ownerInsight).toBeInTheDocument();
+    expect(tierInsight).toBeInTheDocument();
+    expect(topActiveUser).toBeInTheDocument();
+    expect(topViewedEntities).toBeInTheDocument();
+    expect(totalEntityInsight).toBeInTheDocument();
+  });
+});