Add unit tests for task page components (#6151)

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ClosedTask.test.tsx

@@ -0,0 +1,78 @@
+/*
+ *  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 { Thread } from '../../../generated/entity/feed/thread';
+import ClosedTask from './ClosedTask';
+
+const mockTask = {
+  id: 19,
+  type: 'RequestDescription',
+  assignees: [
+    {
+      id: '5a5b7951-60ca-4063-afb5-a0e51538ab71',
+      type: 'user',
+      name: 'marisa',
+      fullyQualifiedName: 'marisa',
+      displayName: 'Marisa Smith',
+      deleted: false,
+    },
+    {
+      id: '82b61b9a-1485-4069-a850-3c862139307e',
+      type: 'user',
+      name: 'sachin.c',
+      fullyQualifiedName: 'sachin.c',
+      displayName: 'Sachin Chaurasiya',
+      deleted: false,
+    },
+  ],
+  status: 'Closed',
+  closedBy: 'sachin.c',
+  closedAt: 1657351363635,
+  oldValue: '',
+  suggestion: 'Can you suggest a description?',
+  newValue: '**Column for storing product data.**',
+} as Thread['task'];
+
+jest.mock('../../../components/common/PopOverCard/UserPopOverCard', () =>
+  jest.fn().mockImplementation(({ children }) => {
+    return <div data-testid="userPopOverCard">{children}</div>;
+  })
+);
+
+jest.mock('../../../utils/TimeUtils', () => ({
+  getDayTimeByTimeStamp: jest.fn().mockReturnValue('07 / 09 / 2022'),
+}));
+
+describe('Test ClosedTask Component', () => {
+  it('Should render component', async () => {
+    render(<ClosedTask task={mockTask} />);
+
+    const container = await screen.findByTestId('task-closed');
+
+    const userCardPopover = await screen.findByTestId('userPopOverCard');
+
+    const closedBy = await screen.findByTestId('task-closedby');
+
+    const closedAt = await screen.findByTestId('task-closedAt');
+
+    expect(container).toBeInTheDocument();
+    expect(userCardPopover).toBeInTheDocument();
+    expect(closedBy).toBeInTheDocument();
+    expect(closedAt).toBeInTheDocument();
+
+    expect(closedBy).toHaveTextContent(mockTask?.closedBy || '');
+    expect(closedAt).toHaveTextContent('07 / 09 / 2022');
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ClosedTask.tsx

@@ -33,13 +33,15 @@ const ClosedTask: FC<ClosedTaskProps> = ({ task }) => {
             name={task?.closedBy || ''}
             width="20"
           />
-          <span className="tw-font-semibold tw-cursor-pointer hover:tw-underline tw-ml-1">
+          <span
+            className="tw-font-semibold tw-cursor-pointer hover:tw-underline tw-ml-1"
+            data-testid="task-closedby">
             {task?.closedBy}
           </span>{' '}
         </span>
       </UserPopOverCard>
       <span className="tw-ml-1"> closed this task </span>
-      <span className="tw-ml-1">
+      <span className="tw-ml-1" data-testid="task-closedAt">
         {toLower(getDayTimeByTimeStamp(task?.closedAt as number))}
       </span>
     </div>

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.test.tsx

@@ -0,0 +1,77 @@
+/*
+ *  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 { Column } from '../../../generated/entity/data/table';
+import ColumnDetail from './ColumnDetail';
+
+const mockColumnData = {
+  name: 'products',
+  dataType: 'ARRAY',
+  arrayDataType: 'STRUCT',
+  dataLength: 1,
+  dataTypeDisplay:
+    'array<struct<product_id:character varying(24),price:int,onsale:boolean,tax:int,weight:int,others:int,vendor:character varying(64), stock:int>>',
+  description: '**Column for storing product data.**',
+  fullyQualifiedName:
+    'sample_data.ecommerce_db.shopify.raw_product_catalog.products',
+  tags: [
+    {
+      tagFQN: 'PersonalData.Personal',
+      description:
+        'Data that can be used to directly or indirectly identify a person.',
+      source: 'Tag',
+      labelType: 'Manual',
+      state: 'Confirmed',
+    },
+  ],
+  constraint: 'NULL',
+  ordinalPosition: 2,
+} as Column;
+
+jest.mock('../../../components/common/Ellipses/Ellipses', () =>
+  jest.fn().mockImplementation(({ children }) => {
+    return <p>{children}</p>;
+  })
+);
+
+describe('Test column detail component', () => {
+  it('Should render the component', async () => {
+    render(<ColumnDetail column={mockColumnData} />);
+
+    const container = await screen.findByTestId('column-details');
+
+    const columnType = await screen.findByTestId('column-type');
+
+    const columnTags = await screen.findByTestId('column-tags');
+
+    expect(container).toBeInTheDocument();
+    expect(columnType).toBeInTheDocument();
+    expect(columnTags).toBeInTheDocument();
+  });
+
+  it('Should not render the component if column is empty object', async () => {
+    render(<ColumnDetail column={{} as Column} />);
+
+    const container = screen.queryByTestId('column-details');
+
+    const columnType = screen.queryByTestId('column-type');
+
+    const columnTags = screen.queryByTestId('column-tags');
+
+    expect(container).not.toBeInTheDocument();
+    expect(columnType).not.toBeInTheDocument();
+    expect(columnTags).not.toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/ColumnDetail.tsx

@@ -21,7 +21,9 @@ const ColumnDetail = ({ column }: { column: Column }) => {
   return !isEmpty(column) && !isUndefined(column) ? (
     <div className="tw-mb-4" data-testid="column-details">
       <div className="tw-flex">
-        <span className="tw-text-grey-muted tw-flex-none tw-mr-1">
+        <span
+          className="tw-text-grey-muted tw-flex-none tw-mr-1"
+          data-testid="column-type">
           Column type:
         </span>{' '}
         <Ellipses tooltip rows={1}>
@@ -29,7 +31,7 @@ const ColumnDetail = ({ column }: { column: Column }) => {
         </Ellipses>
       </div>
       {column.tags && column.tags.length ? (
-        <div className="tw-flex tw-mt-4">
+        <div className="tw-flex tw-mt-4" data-testid="column-tags">
           <SVGIcons
             alt="icon-tag"
             className="tw-mr-1"

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.test.tsx

@@ -0,0 +1,34 @@
+/*
+ *  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 TaskPageLayout from './TaskPageLayout';
+
+const mockProps = {
+  children: <div data-testid="children" />,
+};
+
+describe('Test TaskPageLayout Component', () => {
+  it('Should render the component', async () => {
+    render(<TaskPageLayout {...mockProps} />);
+
+    const leftSider = await screen.findByTestId('left-sider');
+    const rightSider = await screen.findByTestId('right-sider');
+
+    const children = await screen.findByTestId('children');
+
+    expect(leftSider).toBeInTheDocument();
+    expect(rightSider).toBeInTheDocument();
+    expect(children).toBeInTheDocument();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskPageLayout.tsx

@@ -23,9 +23,9 @@ const TaskPageLayout: FC<Props> = ({ children }) => {
 
   return (
     <Layout style={{ ...background, height: '100vh' }}>
-      <Sider style={background} width={180} />
+      <Sider data-testid="left-sider" style={background} width={180} />
       <Content style={contentStyles}>{children}</Content>
-      <Sider style={background} width={180} />
+      <Sider data-testid="right-sider" style={background} width={180} />
     </Layout>
   );
 };

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskStatus.test.tsx

@@ -0,0 +1,66 @@
+/*
+ *  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 { ThreadTaskStatus } from '../../../generated/entity/feed/thread';
+import TaskStatus from './TaskStatus';
+
+const mockProps = {
+  status: ThreadTaskStatus.Open,
+};
+
+describe('Test Task Status Component', () => {
+  it('Should render the component', async () => {
+    render(<TaskStatus {...mockProps} />);
+
+    const taskStatus = await screen.findByTestId('task-status');
+
+    const taskStatusBadge = await screen.findByTestId('task-status-badge');
+    const taskStatusText = await screen.findByTestId('task-status-text');
+
+    expect(taskStatus).toBeInTheDocument();
+    expect(taskStatusBadge).toBeInTheDocument();
+    expect(taskStatusText).toBeInTheDocument();
+  });
+
+  it('Should have relavent class name for open status', async () => {
+    render(<TaskStatus {...mockProps} />);
+
+    const taskStatus = await screen.findByTestId('task-status');
+
+    const taskStatusBadge = await screen.findByTestId('task-status-badge');
+    const taskStatusText = await screen.findByTestId('task-status-text');
+
+    expect(taskStatus).toHaveClass('tw-bg-task-status-bg');
+
+    expect(taskStatusBadge).toHaveClass('tw-bg-task-status-fg');
+
+    expect(taskStatusText).toHaveClass('tw-text-task-status-fg');
+  });
+
+  it('Should have relavent class name for closed status', async () => {
+    render(<TaskStatus {...mockProps} status={ThreadTaskStatus.Closed} />);
+
+    const taskStatus = await screen.findByTestId('task-status');
+
+    const taskStatusBadge = await screen.findByTestId('task-status-badge');
+    const taskStatusText = await screen.findByTestId('task-status-text');
+
+    expect(taskStatus).toHaveClass('tw-bg-gray-100');
+
+    expect(taskStatusBadge).toHaveClass('tw-bg-gray-500');
+
+    expect(taskStatusText).toHaveClass('tw-text-gray-500');
+  });
+});

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/shared/TaskStatus.tsx

@@ -12,45 +12,45 @@
  */
 
 import classNames from 'classnames';
-import { isEqual } from 'lodash';
-import React, { Fragment } from 'react';
+import React from 'react';
 import { ThreadTaskStatus } from '../../../generated/entity/feed/thread';
 
 const TaskStatus = ({ status }: { status: ThreadTaskStatus }) => {
-  const openCheck = isEqual(status, ThreadTaskStatus.Open);
-  const closedCheck = isEqual(status, ThreadTaskStatus.Closed);
+  const openCheck = status === ThreadTaskStatus.Open;
+  const closedCheck = status === ThreadTaskStatus.Closed;
 
   return (
-    <Fragment>
-      <div
+    <div
+      className={classNames(
+        'tw-rounded-3xl tw-px-2 tw-p-0',
+        {
+          'tw-bg-task-status-bg': openCheck,
+        },
+        { 'tw-bg-gray-100': closedCheck }
+      )}
+      data-testid="task-status">
+      <span
         className={classNames(
-          'tw-rounded-3xl tw-px-2 tw-p-0',
+          'tw-inline-block tw-w-2 tw-h-2 tw-rounded-full',
           {
-            'tw-bg-task-status-bg': openCheck,
+            'tw-bg-task-status-fg': openCheck,
           },
-          { 'tw-bg-gray-100': closedCheck }
-        )}>
-        <span
-          className={classNames(
-            'tw-inline-block tw-w-2 tw-h-2 tw-rounded-full',
-            {
-              'tw-bg-task-status-fg': openCheck,
-            },
-            {
-              'tw-bg-gray-500': closedCheck,
-            }
-          )}
-        />
-        <span
-          className={classNames(
-            'tw-ml-1',
-            { 'tw-text-task-status-fg': openCheck },
-            { 'tw-text-gray-500': closedCheck }
-          )}>
-          {status}
-        </span>
-      </div>
-    </Fragment>
+          {
+            'tw-bg-gray-500': closedCheck,
+          }
+        )}
+        data-testid="task-status-badge"
+      />
+      <span
+        className={classNames(
+          'tw-ml-1',
+          { 'tw-text-task-status-fg': openCheck },
+          { 'tw-text-gray-500': closedCheck }
+        )}
+        data-testid="task-status-text">
+        {status}
+      </span>
+    </div>
   );
 };