Add unit test for topic and pipeline component (#3818)

openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx

@@ -38,7 +38,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
   const { updatedFeedList, relativeDays } =
     getFeedListWithRelativeDays(feedList);
   const [selectedThread, setSelectedThread] = useState<EntityThread>();
-  const [selctedThreadId, setSelctedThreadId] = useState<string>('');
+  const [selectedThreadId, setSelectedThreadId] = useState<string>('');
   const [isPanelOpen, setIsPanelOpen] = useState<boolean>(false);
 
   const [confirmationState, setConfirmationState] = useState<ConfirmState>(
@@ -61,12 +61,12 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
   };
 
   const onThreadIdSelect = (id: string) => {
-    setSelctedThreadId(id);
+    setSelectedThreadId(id);
     setSelectedThread(undefined);
   };
 
   const onThreadIdDeselect = () => {
-    setSelctedThreadId('');
+    setSelectedThreadId('');
   };
 
   const onThreadSelect = (id: string) => {
@@ -86,11 +86,11 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
   };
 
   const postFeed = (value: string) => {
-    postFeedHandler?.(value, selectedThread?.id ?? selctedThreadId);
+    postFeedHandler?.(value, selectedThread?.id ?? selectedThreadId);
   };
 
   useEffect(() => {
-    onThreadSelect(selectedThread?.id ?? selctedThreadId);
+    onThreadSelect(selectedThread?.id ?? selectedThreadId);
   }, [feedList]);
 
   useEffect(() => {
@@ -122,7 +122,7 @@ const ActivityFeedList: FC<ActivityFeedListProp> = ({
                   isEntityFeed={isEntityFeed}
                   postFeed={postFeed}
                   relativeDay={d}
-                  selectedThreadId={selctedThreadId}
+                  selectedThreadId={selectedThreadId}
                   updatedFeedList={updatedFeedList}
                   withSidePanel={withSidePanel}
                   onConfirmation={onConfirmation}

openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx

@@ -374,7 +374,7 @@ const PipelineDetails = ({
                 </div>
                 <div className="tw-table-responsive tw-my-6">
                   {tasks ? (
-                    <table className="tw-w-full" data-testid="schema-table">
+                    <table className="tw-w-full" data-testid="tasks-table">
                       <thead>
                         <tr className="tableHead-row">
                           <th className="tableHead-cell">Task Name</th>

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

@@ -0,0 +1,212 @@
+/*
+ *  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 { findByTestId, findByText, render } from '@testing-library/react';
+import { LeafNodes, LoadingNodeState, TableDetail } from 'Models';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Pipeline } from '../../generated/entity/data/pipeline';
+import { EntityLineage } from '../../generated/type/entityLineage';
+import { TagLabel } from '../../generated/type/tagLabel';
+import PipelineDetails from './PipelineDetails.component';
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+const mockUserTeam = [
+  {
+    description: 'description',
+    displayName: 'Cloud_Infra',
+    id: 'id1',
+    name: 'Cloud_infra',
+    type: 'team',
+  },
+  {
+    description: 'description',
+    displayName: 'Finance',
+    id: 'id2',
+    name: 'Finance',
+    type: 'team',
+  },
+];
+
+const PipelineDetailsProps = {
+  pipelineUrl: '',
+  tasks: [],
+  serviceType: '',
+  users: [],
+  pipelineDetails: {} as Pipeline,
+  entityLineage: {} as EntityLineage,
+  entityName: '',
+  activeTab: 1,
+  owner: {} as TableDetail['owner'],
+  description: '',
+  tier: {} as TagLabel,
+  followers: [],
+  pipelineTags: [],
+  slashedPipelineName: [],
+  taskUpdateHandler: jest.fn(),
+  setActiveTabHandler: jest.fn(),
+  followPipelineHandler: jest.fn(),
+  unfollowPipelineHandler: jest.fn(),
+  settingsUpdateHandler: jest.fn(),
+  descriptionUpdateHandler: jest.fn(),
+  tagUpdateHandler: jest.fn(),
+  loadNodeHandler: jest.fn(),
+  lineageLeafNodes: {} as LeafNodes,
+  isNodeLoading: {} as LoadingNodeState,
+  version: '',
+  versionHandler: jest.fn(),
+  addLineageHandler: jest.fn(),
+  removeLineageHandler: jest.fn(),
+  entityLineageHandler: jest.fn(),
+  entityThread: [],
+  isentityThreadLoading: false,
+  postFeedHandler: jest.fn(),
+  feedCount: 0,
+  entityFieldThreadCount: [],
+  createThread: jest.fn(),
+  pipelineFQN: '',
+  deletePostHandler: jest.fn(),
+};
+
+jest.mock('../ManageTab/ManageTab.component', () => {
+  return jest.fn().mockReturnValue(<p data-testid="manage">ManageTab</p>);
+});
+
+jest.mock('../common/description/Description', () => {
+  return jest.fn().mockReturnValue(<p>Description Component</p>);
+});
+jest.mock('../common/rich-text-editor/RichTextEditorPreviewer', () => {
+  return jest.fn().mockReturnValue(<p>RichTextEditorPreviwer</p>);
+});
+
+jest.mock('../tags-container/tags-container', () => {
+  return jest.fn().mockReturnValue(<p>Tag Container</p>);
+});
+
+jest.mock('../tags/tags', () => {
+  return jest.fn().mockReturnValue(<p>Tags</p>);
+});
+
+jest.mock('../EntityLineage/EntityLineage.component', () => {
+  return jest.fn().mockReturnValue(<p>EntityLineage</p>);
+});
+
+jest.mock('../common/entityPageInfo/EntityPageInfo', () => {
+  return jest.fn().mockReturnValue(<p>EntityPageInfo</p>);
+});
+
+jest.mock('../FeedEditor/FeedEditor', () => {
+  return jest.fn().mockReturnValue(<p>FeedEditor</p>);
+});
+
+jest.mock('../ActivityFeed/ActivityFeedList/ActivityFeedList.tsx', () => {
+  return jest.fn().mockReturnValue(<p>ActivityFeedList</p>);
+});
+
+jest.mock('../EntityLineage/EntityLineage.component', () => {
+  return jest.fn().mockReturnValue(<p data-testid="lineage">Lineage</p>);
+});
+
+jest.mock('../../utils/CommonUtils', () => ({
+  addToRecentViewed: jest.fn(),
+  getCountBadge: jest.fn(),
+  getCurrentUserId: jest.fn().mockReturnValue('CurrentUserId'),
+  getPartialNameFromFQN: jest.fn().mockReturnValue('PartialNameFromFQN'),
+  getUserTeams: () => mockUserTeam,
+  getHtmlForNonAdminAction: jest.fn(),
+}));
+
+describe('Test PipelineDetails component', () => {
+  it('Checks if the PipelineDetails component has all the proper components rendered', async () => {
+    const { container } = render(
+      <PipelineDetails {...PipelineDetailsProps} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const EntityPageInfo = await findByText(container, /EntityPageInfo/i);
+    const description = await findByText(container, /Description Component/i);
+    const tabs = await findByTestId(container, 'tabs');
+    const detailsTab = await findByTestId(tabs, 'Details');
+    const activityFeedTab = await findByTestId(tabs, 'Activity Feed');
+    const lineageTab = await findByTestId(tabs, 'Lineage');
+    const manageTab = await findByTestId(tabs, 'Manage');
+
+    expect(EntityPageInfo).toBeInTheDocument();
+    expect(description).toBeInTheDocument();
+    expect(tabs).toBeInTheDocument();
+    expect(detailsTab).toBeInTheDocument();
+    expect(activityFeedTab).toBeInTheDocument();
+    expect(lineageTab).toBeInTheDocument();
+    expect(manageTab).toBeInTheDocument();
+  });
+
+  it('Check if active tab is details', async () => {
+    const { container } = render(
+      <PipelineDetails {...PipelineDetailsProps} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const taskDetail = await findByTestId(container, 'tasks-table');
+
+    expect(taskDetail).toBeInTheDocument();
+  });
+
+  it('Check if active tab is activity feed', async () => {
+    const { container } = render(
+      <PipelineDetails {...PipelineDetailsProps} activeTab={2} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const activityFeedList = await findByText(container, /ActivityFeedList/i);
+
+    expect(activityFeedList).toBeInTheDocument();
+  });
+
+  it('Check if active tab is lineage', async () => {
+    const { container } = render(
+      <PipelineDetails {...PipelineDetailsProps} activeTab={3} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const lineage = await findByTestId(container, 'lineage');
+
+    expect(lineage).toBeInTheDocument();
+  });
+
+  it('Check if active tab is manage', async () => {
+    const { container } = render(
+      <PipelineDetails {...PipelineDetailsProps} activeTab={4} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const manage = await findByTestId(container, 'manage');
+
+    expect(manage).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx

@@ -368,7 +368,9 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
                   </div>
                 </div>
                 {getInfoBadge([{ key: 'Schema', value: schemaType }])}
-                <div className="tw-my-4 tw-border tw-border-main tw-rounded-md tw-py-4">
+                <div
+                  className="tw-my-4 tw-border tw-border-main tw-rounded-md tw-py-4"
+                  data-testid="schema">
                   <SchemaEditor value={schemaText} />
                 </div>
               </>
@@ -392,7 +394,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
               </div>
             )}
             {activeTab === 3 && (
-              <div>
+              <div data-testid="config">
                 <SchemaEditor value={JSON.stringify(getConfigObject())} />
               </div>
             )}

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

@@ -0,0 +1,204 @@
+/*
+ *  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 { findByTestId, findByText, render } from '@testing-library/react';
+import { LeafNodes, LoadingNodeState, TableDetail } from 'Models';
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Topic } from '../../generated/entity/data/topic';
+import { TagLabel } from '../../generated/type/tagLabel';
+import TopicDetails from './TopicDetails.component';
+
+jest.mock('../../auth-provider/AuthProvider', () => {
+  return {
+    useAuthContext: jest.fn(() => ({
+      isAuthDisabled: false,
+      isAuthenticated: true,
+      isProtectedRoute: jest.fn().mockReturnValue(true),
+      isTourRoute: jest.fn().mockReturnValue(false),
+      onLogoutHandler: jest.fn(),
+    })),
+  };
+});
+
+const mockUserTeam = [
+  {
+    description: 'description',
+    displayName: 'Cloud_Infra',
+    id: 'id1',
+    name: 'Cloud_infra',
+    type: 'team',
+  },
+  {
+    description: 'description',
+    displayName: 'Finance',
+    id: 'id2',
+    name: 'Finance',
+    type: 'team',
+  },
+];
+
+const TopicDetailsProps = {
+  partitions: 0,
+  cleanupPolicies: [],
+  maximumMessageSize: 0,
+  replicationFactor: 0,
+  retentionSize: 0,
+  schemaText: '',
+  schemaType: 'Avro',
+  serviceType: '',
+  users: [],
+  topicDetails: {} as Topic,
+  entityName: '',
+  activeTab: 1,
+  owner: {} as TableDetail['owner'],
+  description: '',
+  tier: {} as TagLabel,
+  followers: [],
+  topicTags: [],
+  slashedTopicName: [],
+  setActiveTabHandler: jest.fn(),
+  followTopicHandler: jest.fn(),
+  unfollowTopicHandler: jest.fn(),
+  settingsUpdateHandler: jest.fn(),
+  descriptionUpdateHandler: jest.fn(),
+  tagUpdateHandler: jest.fn(),
+  loadNodeHandler: jest.fn(),
+  lineageLeafNodes: {} as LeafNodes,
+  isNodeLoading: {} as LoadingNodeState,
+  version: '',
+  versionHandler: jest.fn(),
+  addLineageHandler: jest.fn(),
+  removeLineageHandler: jest.fn(),
+  entityLineageHandler: jest.fn(),
+  entityThread: [],
+  isentityThreadLoading: false,
+  postFeedHandler: jest.fn(),
+  feedCount: 0,
+  entityFieldThreadCount: [],
+  createThread: jest.fn(),
+  topicFQN: '',
+  deletePostHandler: jest.fn(),
+};
+
+jest.mock('../ManageTab/ManageTab.component', () => {
+  return jest.fn().mockReturnValue(<p data-testid="manage">ManageTab</p>);
+});
+
+jest.mock('../common/description/Description', () => {
+  return jest.fn().mockReturnValue(<p>Description Component</p>);
+});
+jest.mock('../common/rich-text-editor/RichTextEditorPreviewer', () => {
+  return jest.fn().mockReturnValue(<p>RichTextEditorPreviwer</p>);
+});
+
+jest.mock('../tags-container/tags-container', () => {
+  return jest.fn().mockReturnValue(<p>Tag Container</p>);
+});
+
+jest.mock('../tags/tags', () => {
+  return jest.fn().mockReturnValue(<p>Tags</p>);
+});
+
+jest.mock('../common/entityPageInfo/EntityPageInfo', () => {
+  return jest.fn().mockReturnValue(<p>EntityPageInfo</p>);
+});
+
+jest.mock('../FeedEditor/FeedEditor', () => {
+  return jest.fn().mockReturnValue(<p>FeedEditor</p>);
+});
+
+jest.mock('../ActivityFeed/ActivityFeedList/ActivityFeedList.tsx', () => {
+  return jest.fn().mockReturnValue(<p>ActivityFeedList</p>);
+});
+
+jest.mock('../schema-editor/SchemaEditor', () => {
+  return jest.fn().mockReturnValue(<p>SchemaEditor</p>);
+});
+
+jest.mock('../../utils/CommonUtils', () => ({
+  addToRecentViewed: jest.fn(),
+  getCountBadge: jest.fn(),
+  getCurrentUserId: jest.fn().mockReturnValue('CurrentUserId'),
+  getPartialNameFromFQN: jest.fn().mockReturnValue('PartialNameFromFQN'),
+  getUserTeams: () => mockUserTeam,
+  getHtmlForNonAdminAction: jest.fn(),
+}));
+
+describe('Test TopicDetails component', () => {
+  it('Checks if the TopicDetails component has all the proper components rendered', async () => {
+    const { container } = render(<TopicDetails {...TopicDetailsProps} />, {
+      wrapper: MemoryRouter,
+    });
+    const EntityPageInfo = await findByText(container, /EntityPageInfo/i);
+    const description = await findByText(container, /Description Component/i);
+    const tabs = await findByTestId(container, 'tabs');
+    const schemaTab = await findByTestId(tabs, 'Schema');
+    const activityFeedTab = await findByTestId(tabs, 'Activity Feed');
+    const configTab = await findByTestId(tabs, 'Config');
+    const manageTab = await findByTestId(tabs, 'Manage');
+
+    expect(EntityPageInfo).toBeInTheDocument();
+    expect(description).toBeInTheDocument();
+    expect(tabs).toBeInTheDocument();
+    expect(schemaTab).toBeInTheDocument();
+    expect(activityFeedTab).toBeInTheDocument();
+    expect(configTab).toBeInTheDocument();
+    expect(manageTab).toBeInTheDocument();
+  });
+
+  it('Check if active tab is schema', async () => {
+    const { container } = render(<TopicDetails {...TopicDetailsProps} />, {
+      wrapper: MemoryRouter,
+    });
+    const schema = await findByTestId(container, 'schema');
+
+    expect(schema).toBeInTheDocument();
+  });
+
+  it('Check if active tab is activity feed', async () => {
+    const { container } = render(
+      <TopicDetails {...TopicDetailsProps} activeTab={2} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const activityFeedList = await findByText(container, /ActivityFeedList/i);
+
+    expect(activityFeedList).toBeInTheDocument();
+  });
+
+  it('Check if active tab is config', async () => {
+    const { container } = render(
+      <TopicDetails {...TopicDetailsProps} activeTab={3} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const config = await findByTestId(container, 'config');
+
+    expect(config).toBeInTheDocument();
+  });
+
+  it('Check if active tab is manage', async () => {
+    const { container } = render(
+      <TopicDetails {...TopicDetailsProps} activeTab={4} />,
+      {
+        wrapper: MemoryRouter,
+      }
+    );
+    const manage = await findByTestId(container, 'manage');
+
+    expect(manage).toBeInTheDocument();
+  });
+});