Changing enum values to upper case snake case for consistency

__tests__/Unit/Components/Tasks/TaskDetails.test.tsx

@@ -25,6 +25,7 @@ import { taskRequestErrorHandler } from '../../../../__mocks__/handlers/task-req
 import { taskDetailsHandler } from '../../../../__mocks__/handlers/task-details.handler';
 import { superUserSelfHandler } from '../../../../__mocks__/handlers/self.handler';
 import convertTimeStamp from '@/helperFunctions/convertTimeStamp';
+import { STARTED_ON, ENDS_ON } from '@/constants/constants';
 const details = {
     url: 'https://realdevsquad.com/tasks/6KhcLU3yr45dzjQIVm0J/details',
     taskID: '6KhcLU3yr45dzjQIVm0J',
@@ -194,14 +195,14 @@ describe('TaskDetails Page', () => {
         renderWithRouter(
             <Provider store={store()}>
                 <Details
-                    detailType={'StartedOn'}
+                    detailType={STARTED_ON}
                     value={'3/30/2024, 11:20:00 AM'}
                 />
             </Provider>
         );
 
         const dateElements = screen.queryAllByText('3/30/2024, 11:20:00 AM');
-        expect(dateElements.length).toBeGreaterThan(0);
+        expect(dateElements).not.toBeNull();
     });
 
     it('Renders N/A when link is empty or undefined', async () => {
@@ -213,7 +214,6 @@ describe('TaskDetails Page', () => {
             expect(element).toBeInTheDocument();
         });
     });
-
     it('Renders Task Assignee', async () => {
         const { getByText } = renderWithRouter(
             <Provider store={store()}>
@@ -226,22 +226,21 @@ describe('TaskDetails Page', () => {
     });
 });
 it('Renders Task Ends-on Date', async () => {
-    const { getAllByText } = renderWithRouter(
+    renderWithRouter(
         <Provider store={store()}>
-            <Details detailType={'EndsOn'} value={'4/19/2021, 12:00:10 AM'} />
+            <Details detailType={ENDS_ON} value={'4/19/2021, 12:00:10 AM'} />
         </Provider>
     );
     await waitFor(() => {
-        const dateElements = getAllByText('4/19/2021, 12:00:10 AM');
-        expect(dateElements.length).toBeGreaterThan(0);
+        const dateElements = screen.queryAllByText('4/19/2021, 12:00:10 AM');
+        expect(dateElements).not.toBeNull();
     });
 });
-
 it('Does not render Extension Request icon when URL not available', async () => {
     const { queryByTestId } = render(
         <Provider store={store()}>
             <Details
-                detailType={'Ends On'}
+                detailType={ENDS_ON}
                 value={'4/19/2021, 12:00:10 AM'}
                 url={null}
             />
@@ -638,7 +637,7 @@ describe('Details component', () => {
     });
 
     it('Does not display tooltip on hover when timestamp is not provided', async () => {
-        render(<Details detailType="Started On" value="N/A" />);
+        render(<Details detailType={STARTED_ON} value="N/A" />);
         const detailValue = screen.getByText('Started:');
         fireEvent.mouseOver(detailValue);
         const tooltip = screen.queryByText('N/A', { selector: '.tooltip' });
@@ -647,7 +646,7 @@ describe('Details component', () => {
 
     it('Renders an extension request icon for Ends On with URL', () => {
         const url = 'https://example.com';
-        renderWithRouter(<Details detailType="Ends On" url={url} />);
+        renderWithRouter(<Details detailType={ENDS_ON} url={url} />);
         const extensionRequestIcon = screen.getByTestId(
             'extension-request-icon'
         );
@@ -656,7 +655,7 @@ describe('Details component', () => {
     });
 
     it('Does not render an extension request icon for Ends On without URL', () => {
-        renderWithRouter(<Details detailType="Ends On" />);
+        renderWithRouter(<Details detailType={ENDS_ON} />);
         const extensionRequestIcon = screen.queryByTestId(
             'extension-request-icon'
         );
@@ -669,7 +668,7 @@ describe('Details component', () => {
             startedOn: '1707869428.523',
         };
         renderWithRouter(
-            <Details detailType="Started On" value={task.startedOn} />
+            <Details detailType={STARTED_ON} value={task.startedOn} />
         );
         try {
             const detailTypeElement = screen.getByText('Started:');

src/components/taskDetails/Details.tsx

@@ -7,6 +7,7 @@ import setColor from './taskPriorityColors';
 import extractRepoName from '@/utils/extractRepoName';
 import styles from './task-details.module.scss';
 import { TaskDetailsProps } from '@/interfaces/taskDetails.type';
+import { STARTED_ON, ENDS_ON } from '@/constants/constants';
 
 type StringNumberOrUndefined = string | number | undefined;
 
@@ -53,13 +54,12 @@ const Details: FC<TaskDetailsProps> = ({ detailType, value, url }) => {
         setTooltipActive((prev) => !prev);
     };
 
-    const isTimeDetail =
-        detailType === 'Started On' || detailType === 'Ends On';
+    const isTimeDetail = detailType === STARTED_ON || detailType === ENDS_ON;
 
     const formattedDetailType =
-        detailType === 'Started On'
+        detailType === STARTED_ON
             ? 'Started'
-            : detailType === 'Ends On'
+            : detailType === ENDS_ON
             ? 'Ended'
             : detailType;
 
@@ -97,7 +97,7 @@ const Details: FC<TaskDetailsProps> = ({ detailType, value, url }) => {
                 )}
             </span>
             <span>
-                {detailType === 'Ends On' && url && (
+                {detailType === ENDS_ON && url && (
                     <Link
                         href={url}
                         target="_blank"

src/components/taskDetails/TaskDates.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Details from './Details';
 import styles from './task-details.module.scss';
 import { TASK_EXTENSION_REQUEST_URL } from '@/constants/url';
+import { STARTED_ON, ENDS_ON } from '@/constants/constants';
 import convertTimeStamp from '@/helperFunctions/convertTimeStamp';
 
 interface TaskDatesProps {
@@ -32,20 +33,23 @@ export const TaskDates: React.FC<TaskDatesProps> = ({
     return (
         <>
             <div className={styles.inputContainer}>
-                <Details detailType="Started On" value={startedOn} />
+                <Details
+                    detailType={STARTED_ON}
+                    value={'3/30/2024, 11:20:00 AM'}
+                />
             </div>
             <div className={styles.inputContainer}>
                 {isExtensionRequestPending && (
                     <Details
-                        detailType="Ends On"
+                        detailType={ENDS_ON}
                         value={formattedEndsOn}
                         url={`${TASK_EXTENSION_REQUEST_URL}?&q=${encodeURIComponent(
                             `taskId:${taskId},status:PENDING`
                         )}`}
                     />
                 )}
                 {!isExtensionRequestPending && (
-                    <Details detailType="Ends On" value={formattedEndsOn} />
+                    <Details detailType={ENDS_ON} value={formattedEndsOn} />
                 )}
                 {isEditing && isUserAuthorized && (
                     <input

src/constants/constants.ts

@@ -49,3 +49,5 @@ export const MSG_ON_100_PROGRESS =
     'Proceeding further will make task progress 100%.';
 export const MSG_ON_0_PROGRESS =
     'Proceeding further will make task progress 0%.';
+export const STARTED_ON = 'STARTED_ON';
+export const ENDS_ON = 'ENDS_ON';