From f0e74bf44bac1413bf47b6687b26b55509353ca3 Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Wed, 6 Apr 2022 00:28:49 +0530 Subject: [PATCH] Add unit test for topic and pipeline component (#3818) --- .../ActivityFeedList/ActivityFeedList.tsx | 12 +- .../PipelineDetails.component.tsx | 2 +- .../PipelineDetails/PipelineDetails.test.tsx | 212 ++++++++++++++++++ .../TopicDetails/TopicDetails.component.tsx | 6 +- .../TopicDetails/TopicDetails.test.tsx | 204 +++++++++++++++++ 5 files changed, 427 insertions(+), 9 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.test.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx index 5746e9497b1..0f08d932687 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/ActivityFeedList/ActivityFeedList.tsx @@ -38,7 +38,7 @@ const ActivityFeedList: FC = ({ const { updatedFeedList, relativeDays } = getFeedListWithRelativeDays(feedList); const [selectedThread, setSelectedThread] = useState(); - const [selctedThreadId, setSelctedThreadId] = useState(''); + const [selectedThreadId, setSelectedThreadId] = useState(''); const [isPanelOpen, setIsPanelOpen] = useState(false); const [confirmationState, setConfirmationState] = useState( @@ -61,12 +61,12 @@ const ActivityFeedList: FC = ({ }; 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 = ({ }; 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 = ({ isEntityFeed={isEntityFeed} postFeed={postFeed} relativeDay={d} - selectedThreadId={selctedThreadId} + selectedThreadId={selectedThreadId} updatedFeedList={updatedFeedList} withSidePanel={withSidePanel} onConfirmation={onConfirmation} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx index dd07123d185..8754c697af6 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx @@ -374,7 +374,7 @@ const PipelineDetails = ({
{tasks ? ( - +
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.test.tsx new file mode 100644 index 00000000000..40689ed1c18 --- /dev/null +++ b/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(

ManageTab

); +}); + +jest.mock('../common/description/Description', () => { + return jest.fn().mockReturnValue(

Description Component

); +}); +jest.mock('../common/rich-text-editor/RichTextEditorPreviewer', () => { + return jest.fn().mockReturnValue(

RichTextEditorPreviwer

); +}); + +jest.mock('../tags-container/tags-container', () => { + return jest.fn().mockReturnValue(

Tag Container

); +}); + +jest.mock('../tags/tags', () => { + return jest.fn().mockReturnValue(

Tags

); +}); + +jest.mock('../EntityLineage/EntityLineage.component', () => { + return jest.fn().mockReturnValue(

EntityLineage

); +}); + +jest.mock('../common/entityPageInfo/EntityPageInfo', () => { + return jest.fn().mockReturnValue(

EntityPageInfo

); +}); + +jest.mock('../FeedEditor/FeedEditor', () => { + return jest.fn().mockReturnValue(

FeedEditor

); +}); + +jest.mock('../ActivityFeed/ActivityFeedList/ActivityFeedList.tsx', () => { + return jest.fn().mockReturnValue(

ActivityFeedList

); +}); + +jest.mock('../EntityLineage/EntityLineage.component', () => { + return jest.fn().mockReturnValue(

Lineage

); +}); + +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( + , + { + 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( + , + { + wrapper: MemoryRouter, + } + ); + const taskDetail = await findByTestId(container, 'tasks-table'); + + expect(taskDetail).toBeInTheDocument(); + }); + + it('Check if active tab is activity feed', async () => { + const { container } = render( + , + { + wrapper: MemoryRouter, + } + ); + const activityFeedList = await findByText(container, /ActivityFeedList/i); + + expect(activityFeedList).toBeInTheDocument(); + }); + + it('Check if active tab is lineage', async () => { + const { container } = render( + , + { + wrapper: MemoryRouter, + } + ); + const lineage = await findByTestId(container, 'lineage'); + + expect(lineage).toBeInTheDocument(); + }); + + it('Check if active tab is manage', async () => { + const { container } = render( + , + { + wrapper: MemoryRouter, + } + ); + const manage = await findByTestId(container, 'manage'); + + expect(manage).toBeInTheDocument(); + }); +}); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx index 8eebcaaf14f..df0fdb68258 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.component.tsx @@ -368,7 +368,9 @@ const TopicDetails: React.FC = ({ {getInfoBadge([{ key: 'Schema', value: schemaType }])} -
+
@@ -392,7 +394,7 @@ const TopicDetails: React.FC = ({
)} {activeTab === 3 && ( -
+
)} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TopicDetails/TopicDetails.test.tsx new file mode 100644 index 00000000000..9a8aaadb3b8 --- /dev/null +++ b/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(

ManageTab

); +}); + +jest.mock('../common/description/Description', () => { + return jest.fn().mockReturnValue(

Description Component

); +}); +jest.mock('../common/rich-text-editor/RichTextEditorPreviewer', () => { + return jest.fn().mockReturnValue(

RichTextEditorPreviwer

); +}); + +jest.mock('../tags-container/tags-container', () => { + return jest.fn().mockReturnValue(

Tag Container

); +}); + +jest.mock('../tags/tags', () => { + return jest.fn().mockReturnValue(

Tags

); +}); + +jest.mock('../common/entityPageInfo/EntityPageInfo', () => { + return jest.fn().mockReturnValue(

EntityPageInfo

); +}); + +jest.mock('../FeedEditor/FeedEditor', () => { + return jest.fn().mockReturnValue(

FeedEditor

); +}); + +jest.mock('../ActivityFeed/ActivityFeedList/ActivityFeedList.tsx', () => { + return jest.fn().mockReturnValue(

ActivityFeedList

); +}); + +jest.mock('../schema-editor/SchemaEditor', () => { + return jest.fn().mockReturnValue(

SchemaEditor

); +}); + +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(, { + 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(, { + wrapper: MemoryRouter, + }); + const schema = await findByTestId(container, 'schema'); + + expect(schema).toBeInTheDocument(); + }); + + it('Check if active tab is activity feed', async () => { + const { container } = render( + , + { + wrapper: MemoryRouter, + } + ); + const activityFeedList = await findByText(container, /ActivityFeedList/i); + + expect(activityFeedList).toBeInTheDocument(); + }); + + it('Check if active tab is config', async () => { + const { container } = render( + , + { + wrapper: MemoryRouter, + } + ); + const config = await findByTestId(container, 'config'); + + expect(config).toBeInTheDocument(); + }); + + it('Check if active tab is manage', async () => { + const { container } = render( + , + { + wrapper: MemoryRouter, + } + ); + const manage = await findByTestId(container, 'manage'); + + expect(manage).toBeInTheDocument(); + }); +});
Task Name