From a8ea0e9d192eb647d74b4c25576b05de81b2f5cd Mon Sep 17 00:00:00 2001 From: Vinayak Date: Fri, 26 Jan 2024 18:23:05 +0530 Subject: [PATCH] remove feature flag from tasks details --- .../Components/Tasks/ProgressCard.test.tsx | 43 +++-- .../Components/Tasks/ProgressDetails.test.tsx | 82 ++------ src/components/ProgressCard/index.tsx | 13 +- .../taskDetails/ProgressDetails.tsx | 62 +----- src/components/taskDetails/index.tsx | 180 +++++++++--------- 5 files changed, 137 insertions(+), 243 deletions(-) diff --git a/__tests__/Unit/Components/Tasks/ProgressCard.test.tsx b/__tests__/Unit/Components/Tasks/ProgressCard.test.tsx index 5a4287c66..33dc2c7b7 100644 --- a/__tests__/Unit/Components/Tasks/ProgressCard.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressCard.test.tsx @@ -1,11 +1,12 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { Provider } from 'react-redux'; import { store } from '@/app/store'; +import ProgressCard from '@/components/ProgressCard'; import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { fireEvent, screen } from '@testing-library/react'; +import moment from 'moment'; import { setupServer } from 'msw/node'; -import handlers from '../../../../__mocks__/handlers'; +import { Provider } from 'react-redux'; import { mockGetTaskProgress } from '../../../../__mocks__/db/progresses'; -import ProgressCard from '@/components/ProgressCard'; +import handlers from '../../../../__mocks__/handlers'; const server = setupServer(...handlers); @@ -15,11 +16,21 @@ beforeAll(() => { }); }); +const dateInAgoFormatOne = moment( + mockGetTaskProgress.data[0].createdAt +).fromNow(); +const dateInAgoFormatTwo = moment( + mockGetTaskProgress.data[1].createdAt +).fromNow(); +const dateInAgoFormatThree = moment( + mockGetTaskProgress.data[2].createdAt +).fromNow(); + afterEach(() => server.resetHandlers()); afterAll(() => server.close()); describe('ProgressCard Component', () => { - it('shuld render the ProgressCard', async () => { + it('should render the ProgressCard', async () => { renderWithRouter( @@ -55,12 +66,12 @@ describe('ProgressCard Component', () => { ); const progressArr = container.querySelectorAll( - '[data-testid="progress-item"]' + '[data-testid="progress-update-card-date"]' ); - expect(progressArr[0]).toHaveTextContent('Wednesday, 31 May 2023'); - expect(progressArr[1]).toHaveTextContent('Wednesday, 31 May 2023'); - expect(progressArr[2]).toHaveTextContent('Sunday, 28 May 2023'); + expect(progressArr[0]).toHaveTextContent(dateInAgoFormatOne); + expect(progressArr[1]).toHaveTextContent(dateInAgoFormatTwo); + expect(progressArr[2]).toHaveTextContent(dateInAgoFormatThree); }); it('should render the progress enteries in dscending order after Dsc btn click ', async () => { const { container, getByRole } = renderWithRouter( @@ -72,10 +83,16 @@ describe('ProgressCard Component', () => { const btn = getByRole('button', { name: 'Dsc' }); fireEvent.click(btn); const progressArr = container.querySelectorAll( - '[data-testid="progress-item"]' + '[data-testid="progress-update-card-date"]' + ); + expect(progressArr[progressArr.length - 1]).toHaveTextContent( + dateInAgoFormatOne + ); + expect(progressArr[progressArr.length - 2]).toHaveTextContent( + dateInAgoFormatTwo + ); + expect(progressArr[progressArr.length - 3]).toHaveTextContent( + dateInAgoFormatThree ); - expect(progressArr[2]).toHaveTextContent('Wednesday, 31 May 2023'); - expect(progressArr[1]).toHaveTextContent('Sunday, 28 May 2023'); - expect(progressArr[0]).toHaveTextContent('Saturday, 27 May 2023'); }); }); diff --git a/__tests__/Unit/Components/Tasks/ProgressDetails.test.tsx b/__tests__/Unit/Components/Tasks/ProgressDetails.test.tsx index 90cfb60c4..a01c875a7 100644 --- a/__tests__/Unit/Components/Tasks/ProgressDetails.test.tsx +++ b/__tests__/Unit/Components/Tasks/ProgressDetails.test.tsx @@ -1,90 +1,38 @@ -import { fireEvent, render, screen, waitFor } from '@testing-library/react'; -import { Provider } from 'react-redux'; import { store } from '@/app/store'; +import ProgressUpdateCard from '@/components/taskDetails/ProgressUpdateCard/ProgressUpdateCard'; import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { screen } from '@testing-library/react'; import { setupServer } from 'msw/node'; -import handlers from '../../../../__mocks__/handlers'; +import { Provider } from 'react-redux'; import { mockGetTaskProgress } from '../../../../__mocks__/db/progresses'; -import ProgressDetails from '@/components/taskDetails/ProgressDetails'; +import handlers from '../../../../__mocks__/handlers'; const server = setupServer(...handlers); +let mockedOpenDetailsFunction: jest.Mock]>; + beforeAll(() => { server.listen({ onUnhandledRequest: 'error', }); + mockedOpenDetailsFunction = + jest.fn]>(); }); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); describe('ProgressDetails Component', () => { - it('should render the ProgressDetails', async () => { - renderWithRouter( - - - - ); - - const progress = screen.getByTestId('progress-item'); - expect(progress).toBeInTheDocument(); - expect(progress).toHaveTextContent('Wednesday, 31 May 2023'); - }); - it('should open the modal with the specific progress details when clicked on details', () => { - renderWithRouter( - - - - ); - - const progress = screen.getByTestId('progress-item'); - fireEvent.click(progress); - - const modalBackground = screen.getByTestId('modal-background'); - const content = screen.getByTestId('content'); - const completed = screen.getByText('Completed:'); - - expect(modalBackground).toBeInTheDocument(); - expect(content).toBeInTheDocument(); - expect(completed).toBeInTheDocument(); - }); - - it('should close the modal when clicking outside the modal', () => { + it('should render the ProgressUpdateCard', async () => { renderWithRouter( - + ); - const progress = screen.getByTestId('progress-item'); - fireEvent.click(progress); - - const modalBackground = screen.getByTestId('modal-background'); - const content = screen.getByTestId('content'); - - expect(modalBackground).toBeInTheDocument(); - fireEvent.click(modalBackground); - - expect(content).not.toBeInTheDocument(); - }); - - it('should close the modal on clicking CLOSE button', () => { - renderWithRouter( - - - - ); - - const progress = screen.getByTestId('progress-item'); - fireEvent.click(progress); - - const closeButton = screen.getByText('Close'); - expect(closeButton).toBeInTheDocument(); - - const content = screen.getByTestId('content'); - expect(content).toBeInTheDocument(); - - fireEvent.click(closeButton); - - expect(content).not.toBeInTheDocument(); + const cardTitle = screen.getByRole('heading'); + expect(cardTitle).toBeInTheDocument(); }); }); diff --git a/src/components/ProgressCard/index.tsx b/src/components/ProgressCard/index.tsx index e627738fa..0e049b744 100755 --- a/src/components/ProgressCard/index.tsx +++ b/src/components/ProgressCard/index.tsx @@ -1,10 +1,9 @@ -import { useRouter } from 'next/router'; -import React, { useEffect, useState } from 'react'; -import TaskContainer from '../taskDetails/TaskContainer'; +import styles from '@/components/ProgressCard/ProgressCard.module.scss'; import { ProgressDetailsData } from '@/types/standup.type'; +import { useEffect, useState } from 'react'; import ProgressDetails from '../taskDetails/ProgressDetails'; -import styles from '@/components/ProgressCard/ProgressCard.module.scss'; import LatestProgressUpdateCard from '../taskDetails/ProgressUpdateCard/LatestProgressUpdateCard'; +import TaskContainer from '../taskDetails/TaskContainer'; type SortedProgressType = { data: ProgressDetailsData[]; order: number }; @@ -12,7 +11,6 @@ type Props = { taskProgress: ProgressDetailsData[] }; export default function ProgressCard({ taskProgress }: Props) { const [sortedProgress, setSortedProgress] = useState(); - const isDev = useRouter().query?.dev === 'true'; const sortedProgressLength = sortedProgress?.data?.length; const reverseSortingOrder = () => { @@ -44,7 +42,7 @@ export default function ProgressCard({ taskProgress }: Props) { }, [taskProgress]); const cardsToShow = sortedProgress?.data?.map((progress, idx) => { - if (idx === 0 && sortedProgress?.order === 1 && isDev) { + if (idx === 0 && sortedProgress?.order === 1) { return ( ); @@ -53,8 +51,7 @@ export default function ProgressCard({ taskProgress }: Props) { if ( sortedProgressLength && idx === sortedProgressLength - 1 && - sortedProgress?.order === 0 && - isDev + sortedProgress?.order === 0 ) { return ( diff --git a/src/components/taskDetails/ProgressDetails.tsx b/src/components/taskDetails/ProgressDetails.tsx index 54a7b2b34..aef041366 100644 --- a/src/components/taskDetails/ProgressDetails.tsx +++ b/src/components/taskDetails/ProgressDetails.tsx @@ -1,15 +1,11 @@ -import { useState, FC, MouseEvent } from 'react'; import { ProgressDetailsData } from '@/types/standup.type'; -import { getDateFromTimestamp } from '@/utils/getDateFromTimestamp'; -import styles from './progress-details.module.scss'; -import { useRouter } from 'next/router'; +import { FC, MouseEvent, useState } from 'react'; import ProgressUpdateCard from './ProgressUpdateCard/ProgressUpdateCard'; type Props = { data: ProgressDetailsData; }; const ProgressDetails: FC = ({ data }) => { - const router = useRouter(); const [showProgressDetails, setShowProgressDetails] = useState(false); @@ -21,61 +17,7 @@ const ProgressDetails: FC = ({ data }) => { setShowProgressDetails(false); }; - const isDev = router.query.dev === 'true'; - return ( - <> - {isDev ? ( - - ) : ( -
  • - {getDateFromTimestamp(data.date)} -
    • - )} - {showProgressDetails && ( -
    -
    - -
    -

    {getDateFromTimestamp(data.date)}

    -
    -
    -
    - Completed: -

    {data.completed}

    -
    -
    - Planned: -

    {data.planned}

    -
    -
    - Blockers: -

    {data.blockers}

    -
    -
    -
    - -
    -
    - )} - - ); + return ; }; export default ProgressDetails; diff --git a/src/components/taskDetails/index.tsx b/src/components/taskDetails/index.tsx index 73af9f30a..72dbac3b2 100755 --- a/src/components/taskDetails/index.tsx +++ b/src/components/taskDetails/index.tsx @@ -1,35 +1,33 @@ -import React, { ChangeEvent, FC, useState, useEffect, useRef } from 'react'; -import TaskContainer from './TaskContainer'; -import Details from './Details'; -import { toast, ToastTypes } from '@/helperFunctions/toast'; -import convertTimeStamp from '@/helperFunctions/convertTimeStamp'; -import styles from './task-details.module.scss'; -import { useRouter } from 'next/router'; +import { useGetProgressDetailsQuery } from '@/app/services/progressesApi'; import { useGetTaskDetailsQuery, useUpdateTaskDetailsMutation, } from '@/app/services/taskDetailsApi'; - +import { useAddOrUpdateMutation } from '@/app/services/taskRequestApi'; +import Layout from '@/components/Layout'; +import TaskDependency from '@/components/taskDetails/taskDependency'; +import { BACKEND_TASK_STATUS } from '@/constants/task-status'; +import { TASK_REQUEST_TYPES } from '@/constants/tasks'; +import convertTimeStamp from '@/helperFunctions/convertTimeStamp'; +import { ToastTypes, toast } from '@/helperFunctions/toast'; import useUserData from '@/hooks/useUserData'; +import task from '@/interfaces/task.type'; import { ButtonProps, TextAreaProps, taskDetailsDataType, } from '@/interfaces/taskDetails.type'; -import Layout from '@/components/Layout'; -import TaskDependency from '@/components/taskDetails/taskDependency'; -import { useGetProgressDetailsQuery } from '@/app/services/progressesApi'; import { ProgressDetailsData } from '@/types/standup.type'; -import { useAddOrUpdateMutation } from '@/app/services/taskRequestApi'; +import { useRouter } from 'next/router'; +import React, { ChangeEvent, FC, useEffect, useRef, useState } from 'react'; import Progress from '../ProgressCard'; import TaskManagementModal from '../issues/TaskManagementModal'; -import { TASK_REQUEST_TYPES } from '@/constants/tasks'; import { TaskRequestData } from '../issues/constants'; -import ProgressContainer from '../tasks/card/progressContainer'; -import DevFeature from '../DevFeature'; import Suggestions from '../tasks/SuggestionBox/Suggestions'; -import { BACKEND_TASK_STATUS } from '@/constants/task-status'; -import task from '@/interfaces/task.type'; +import ProgressContainer from '../tasks/card/progressContainer'; +import Details from './Details'; +import TaskContainer from './TaskContainer'; +import styles from './task-details.module.scss'; const taskStatus = Object.entries(BACKEND_TASK_STATUS); @@ -312,33 +310,33 @@ const TaskDetails: FC = ({ taskID }) => { detailType={'Priority'} value={taskDetailsData?.priority} /> - - {isEditing && ( - - )} - + + {isEditing && ( + + )} +
    = ({ taskID }) => { ?.html_url } /> - - {isUserAuthorized && ( - - )} - + + {isUserAuthorized && ( + + )} @@ -392,28 +389,24 @@ const TaskDetails: FC = ({ taskID }) => { ) } /> - - {isEditing && isUserAuthorized && ( -
    - -
    - )} -     + + {isEditing && isUserAuthorized && ( +
    + +
    + )} +
    = ({ taskID }) => { detailType={'Ends On'} value={getEndsOn(taskDetailsData?.endsOn)} /> - - {isEditing && ( - <> - - { - setNewEndOnDate( - e.target.value - ); - }} - onBlur={handleBlurOfEndsOn} - value={newEndOnDate} - data-testid="endsOnTaskDetails" - /> - - )} - + + {isEditing && ( + <> + + { + setNewEndOnDate(e.target.value); + }} + onBlur={handleBlurOfEndsOn} + value={newEndOnDate} + data-testid="endsOnTaskDetails" + /> + + )}