UI: Added unit test for profilerDashboardPage and profilerDashboard component [part 1] (#8178)

* UI: Added unit test for profilerDashboardPage

* Added unit test for profilerDashboard component

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.test.tsx

@@ -0,0 +1,240 @@
+/*
+ *  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,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { ProfilerDashboardType } from '../../enums/table.enum';
+import { MOCK_TABLE } from '../../mocks/TableData.mock';
+import ProfilerDashboard from './ProfilerDashboard';
+import {
+  ProfilerDashboardProps,
+  ProfilerDashboardTab,
+} from './profilerDashboard.interface';
+
+const profilerDashboardProps: ProfilerDashboardProps = {
+  onTableChange: jest.fn(),
+  table: MOCK_TABLE,
+  testCases: [],
+  profilerData: [],
+  fetchProfilerData: jest.fn(),
+  fetchTestCases: jest.fn(),
+  onTestCaseUpdate: jest.fn(),
+};
+
+let mockParam: {
+  entityTypeFQN: string;
+  dashboardType: ProfilerDashboardType;
+  tab?: ProfilerDashboardTab;
+} = {
+  entityTypeFQN: 'sample_data.ecommerce_db.shopify.dim_address.address_id',
+  dashboardType: ProfilerDashboardType.COLUMN,
+  tab: ProfilerDashboardTab.PROFILER,
+};
+
+const mockHistory = {
+  push: jest.fn(),
+};
+
+jest.mock('react-router-dom', () => {
+  return {
+    useParams: jest.fn().mockImplementation(() => mockParam),
+    useHistory: jest.fn().mockImplementation(() => mockHistory),
+  };
+});
+
+jest.mock('../containers/PageLayout', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }) => (
+      <div data-testid="page-container">{children}</div>
+    ));
+});
+
+jest.mock('../common/entityPageInfo/EntityPageInfo', () => {
+  return jest
+    .fn()
+    .mockImplementation(() => <div>EntityPageInfo component</div>);
+});
+
+jest.mock('./component/ProfilerTab', () => {
+  return jest.fn().mockImplementation(() => <div>ProfilerTab component</div>);
+});
+
+jest.mock('./component/DataQualityTab', () => {
+  return jest
+    .fn()
+    .mockImplementation(() => <div>DataQualityTab component</div>);
+});
+
+jest.mock('../../components/PermissionProvider/PermissionProvider', () => {
+  return {
+    usePermissionProvider: jest.fn().mockImplementation(() => ({
+      getEntityPermission: jest.fn().mockImplementation(() => ({
+        ViewAll: true,
+        ViewBasic: true,
+        ViewDataProfile: true,
+        ViewTests: true,
+        EditAll: true,
+        EditTests: true,
+      })),
+    })),
+  };
+});
+
+describe('Test ProfilerDashboardPage component', () => {
+  beforeEach(() => cleanup());
+
+  it('ProfilerDashboardPage component should render properly for profiler tab', async () => {
+    await act(async () => {
+      render(<ProfilerDashboard {...profilerDashboardProps} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = await screen.findByTestId('page-container');
+    const profilerSwitch = await screen.findByTestId('profiler-switch');
+    const EntityPageInfo = await screen.findByText('EntityPageInfo component');
+    const ProfilerTab = await screen.findByText('ProfilerTab component');
+    const selectedTimeFrame = await screen.findByText('Last 3 days');
+    const DataQualityTab = screen.queryByText('DataQualityTab component');
+
+    expect(pageContainer).toBeInTheDocument();
+    expect(profilerSwitch).toBeInTheDocument();
+    expect(EntityPageInfo).toBeInTheDocument();
+    expect(ProfilerTab).toBeInTheDocument();
+    expect(selectedTimeFrame).toBeInTheDocument();
+    expect(DataQualityTab).not.toBeInTheDocument();
+  });
+
+  it('ProfilerDashboardPage component should render properly for data quality tab', async () => {
+    mockParam = {
+      ...mockParam,
+      tab: ProfilerDashboardTab.DATA_QUALITY,
+    };
+    await act(async () => {
+      render(<ProfilerDashboard {...profilerDashboardProps} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = await screen.findByTestId('page-container');
+    const profilerSwitch = await screen.findByTestId('profiler-switch');
+    const EntityPageInfo = await screen.findByText('EntityPageInfo component');
+    const ProfilerTab = screen.queryByText('ProfilerTab component');
+    const DataQualityTab = await screen.findByText('DataQualityTab component');
+    const deletedTestSwitch = await screen.findByText('Deleted Tests');
+    const statusDropdown = await screen.findByText('Status');
+
+    expect(pageContainer).toBeInTheDocument();
+    expect(profilerSwitch).toBeInTheDocument();
+    expect(EntityPageInfo).toBeInTheDocument();
+    expect(DataQualityTab).toBeInTheDocument();
+    expect(deletedTestSwitch).toBeInTheDocument();
+    expect(statusDropdown).toBeInTheDocument();
+    expect(ProfilerTab).not.toBeInTheDocument();
+  });
+
+  it('If tab is not provided profiler tab should be selected default', async () => {
+    mockParam = {
+      ...mockParam,
+      tab: undefined,
+    };
+    await act(async () => {
+      render(<ProfilerDashboard {...profilerDashboardProps} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = await screen.findByTestId('page-container');
+    const profilerSwitch = await screen.findByTestId('profiler-switch');
+    const EntityPageInfo = await screen.findByText('EntityPageInfo component');
+    const ProfilerTab = await screen.findByText('ProfilerTab component');
+    const selectedTimeFrame = await screen.findByText('Last 3 days');
+    const DataQualityTab = screen.queryByText('DataQualityTab component');
+
+    expect(pageContainer).toBeInTheDocument();
+    expect(profilerSwitch).toBeInTheDocument();
+    expect(EntityPageInfo).toBeInTheDocument();
+    expect(ProfilerTab).toBeInTheDocument();
+    expect(selectedTimeFrame).toBeInTheDocument();
+    expect(DataQualityTab).not.toBeInTheDocument();
+  });
+
+  it('Tab change should work properly', async () => {
+    await act(async () => {
+      render(<ProfilerDashboard {...profilerDashboardProps} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+
+    const dataQualityTabBtn = await screen.findByDisplayValue('Data Quality');
+    const profilerTabBtn = await screen.findByDisplayValue('Profiler');
+    const summaryTabBtn = await screen.findByDisplayValue('Summary');
+    const ProfilerTab = await screen.findByText('ProfilerTab component');
+    const DataQualityTab = screen.queryByText('DataQualityTab component');
+
+    expect(ProfilerTab).toBeInTheDocument();
+    expect(profilerTabBtn).toBeInTheDocument();
+    expect(summaryTabBtn).toBeInTheDocument();
+    expect(DataQualityTab).not.toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(dataQualityTabBtn);
+    });
+
+    const DQTab = await screen.findByText('DataQualityTab component');
+
+    expect(DQTab).toBeInTheDocument();
+    expect(profilerDashboardProps.fetchTestCases).toBeCalled();
+    expect(ProfilerTab).not.toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(profilerTabBtn);
+    });
+    const profilerContainer = await screen.findByText('ProfilerTab component');
+
+    expect(profilerContainer).toBeInTheDocument();
+    expect(profilerDashboardProps.fetchProfilerData).toBeCalled();
+    expect(DQTab).not.toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(summaryTabBtn);
+    });
+
+    expect(mockHistory.push).toBeCalled();
+  });
+
+  it('Add test button should work properly', async () => {
+    await act(async () => {
+      render(<ProfilerDashboard {...profilerDashboardProps} />, {
+        wrapper: MemoryRouter,
+      });
+    });
+
+    const pageContainer = await screen.findByTestId('page-container');
+    const addTest = await screen.findByTestId('add-test');
+
+    expect(pageContainer).toBeInTheDocument();
+    expect(addTest).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.click(addTest);
+
+      expect(mockHistory.push).toBeCalled();
+    });
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/ProfilerDashboard/ProfilerDashboard.tsx

@@ -509,6 +509,7 @@ const ProfilerDashboard: React.FC<ProfilerDashboardProps> = ({
                     : NO_PERMISSION_FOR_ACTION
                 }>
                 <Button
+                  data-testid="add-test"
                   disabled={
                     !(tablePermissions.EditAll || tablePermissions.EditTests)
                   }

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

@@ -0,0 +1,155 @@
+/*
+ *  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, cleanup, render, screen } from '@testing-library/react';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { getTableDetailsByFQN } from '../../axiosAPIs/tableAPI';
+import { ProfilerDashboardTab } from '../../components/ProfilerDashboard/profilerDashboard.interface';
+import { ProfilerDashboardType } from '../../enums/table.enum';
+import { MOCK_TABLE } from '../../mocks/TableData.mock';
+import ProfilerDashboardPage from './ProfilerDashboardPage';
+
+let mockParam = {
+  entityTypeFQN: 'sample_data.ecommerce_db.shopify.dim_address.address_id',
+  dashboardType: ProfilerDashboardType.COLUMN,
+  tab: ProfilerDashboardTab.PROFILER,
+};
+
+jest.mock('react-router-dom', () => {
+  return {
+    useParams: jest.fn().mockImplementation(() => mockParam),
+  };
+});
+
+jest.mock('../../axiosAPIs/tableAPI', () => {
+  return {
+    getColumnProfilerList: jest
+      .fn()
+      .mockImplementation(() => Promise.resolve({ data: [] })),
+    getTableDetailsByFQN: jest
+      .fn()
+      .mockImplementation(() => Promise.resolve({ data: MOCK_TABLE })),
+    patchTableDetails: jest.fn(),
+  };
+});
+
+jest.mock('../../axiosAPIs/testAPI', () => {
+  return {
+    getListTestCase: jest.fn().mockImplementation(() => Promise.resolve()),
+    ListTestCaseParams: jest.fn().mockImplementation(() => Promise.resolve()),
+  };
+});
+
+jest.mock('../../components/PermissionProvider/PermissionProvider', () => {
+  return {
+    usePermissionProvider: jest.fn().mockImplementation(() => ({
+      getEntityPermission: jest.fn().mockImplementation(() => ({
+        ViewAll: true,
+        ViewBasic: true,
+        ViewDataProfile: true,
+        ViewTests: true,
+      })),
+    })),
+  };
+});
+
+jest.mock(
+  '../../components/common/error-with-placeholder/ErrorPlaceHolder',
+  () => {
+    return jest.fn().mockImplementation(() => <div>No data placeholder</div>);
+  }
+);
+
+jest.mock('../../components/containers/PageContainerV1', () => {
+  return jest
+    .fn()
+    .mockImplementation(({ children }) => (
+      <div data-testid="page-container">{children}</div>
+    ));
+});
+
+jest.mock('../../components/Loader/Loader', () => {
+  return jest.fn().mockImplementation(() => <p data-testid="loader">Loader</p>);
+});
+
+jest.mock('../../components/ProfilerDashboard/ProfilerDashboard', () => {
+  return jest
+    .fn()
+    .mockImplementation(() => (
+      <div data-testid="profiler-dashboard">ProfilerDashboard</div>
+    ));
+});
+
+describe('Test ProfilerDashboardPage component', () => {
+  beforeEach(() => cleanup());
+
+  it('ProfilerDashboardPage component should render properly for profiler tab', async () => {
+    await act(async () => {
+      render(<ProfilerDashboardPage />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = await screen.findByTestId('page-container');
+
+    expect(pageContainer).toBeInTheDocument();
+  });
+
+  it('Show error placeholder if table API fails', async () => {
+    (getTableDetailsByFQN as jest.Mock).mockImplementationOnce(() =>
+      Promise.reject()
+    );
+    await act(async () => {
+      render(<ProfilerDashboardPage />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = screen.queryByTestId('page-container');
+    const noDataPlaceholder = await screen.findByText('No data placeholder');
+
+    expect(pageContainer).not.toBeInTheDocument();
+    expect(noDataPlaceholder).toBeInTheDocument();
+  });
+
+  it('ProfilerDashboardPage component should render properly for data quality tab', async () => {
+    mockParam = {
+      ...mockParam,
+      tab: ProfilerDashboardTab.DATA_QUALITY,
+    };
+    await act(async () => {
+      render(<ProfilerDashboardPage />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = await screen.findByTestId('page-container');
+
+    expect(pageContainer).toBeInTheDocument();
+  });
+
+  it('Show error placeholder if there is no fqn available', async () => {
+    mockParam = {
+      ...mockParam,
+      entityTypeFQN: '',
+    };
+    await act(async () => {
+      render(<ProfilerDashboardPage />, {
+        wrapper: MemoryRouter,
+      });
+    });
+    const pageContainer = screen.queryByTestId('page-container');
+    const noDataPlaceholder = await screen.findByText('No data placeholder');
+
+    expect(pageContainer).not.toBeInTheDocument();
+    expect(noDataPlaceholder).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/ProfilerDashboardPage/ProfilerDashboardPage.tsx

@@ -97,7 +97,7 @@ const ProfilerDashboardPage = () => {
         startTs,
         endTs,
       });
-      setProfilerData(data || []);
+      setProfilerData(data);
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {