Dev to main sync

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

@@ -532,12 +532,10 @@ describe('Task card', () => {
         expect(spanElement).toHaveTextContent('Started 3 years ago'); // Mocked date from moment
     });
     it('Should show the status of the task', () => {
-        // TODO: After UI change remove dev flag
         renderWithRouter(
             <Provider store={store()}>
                 <Card {...DEFAULT_PROPS} />
-            </Provider>,
-            { query: { dev: 'true' } }
+            </Provider>
         );
         const spanElement = screen.getByTestId('task-status');
         expect(spanElement).toHaveTextContent('Completed');

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

@@ -324,8 +324,12 @@ describe('TaskDetails Page', () => {
         fireEvent.change(textareaElement, {
             target: { name: 'title', value: 'test 1 for drag and drop' },
         });
-        const saveButton = await screen.findByRole('button', { name: 'Save' });
-        fireEvent.click(saveButton);
+        await waitFor(async () => {
+            const saveButton = await screen.findByRole('button', {
+                name: 'Save',
+            });
+            fireEvent.click(saveButton);
+        });
         expect(screen.queryByText(/Successfully saved/i)).toBeNull();
     });
 

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

@@ -1,7 +1,7 @@
 import { TasksContent } from '@/components/tasks/TasksContent';
 import { setupServer } from 'msw/node';
 import handlers from '../../../../__mocks__/handlers';
-import { fireEvent, screen, within } from '@testing-library/react';
+import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import { renderWithRouter } from '@/test_utils/createMockRouter';
 import { Provider } from 'react-redux';
 import { store } from '@/app/store';
@@ -53,28 +53,6 @@ describe('tasks content', () => {
             <Provider store={store()}>
                 <TasksContent />
             </Provider>,
-            {
-                query: { section: 'assigned' },
-            }
-        );
-        await screen.findByTestId('tabs');
-        const tabsContainer = within(
-            screen.getByTestId('status-tabs-container')
-        );
-        const assignedButton = tabsContainer.getByRole('button', {
-            name: 'ASSIGNED',
-        });
-        expect(assignedButton).toHaveTextContent('ASSIGNED');
-        await screen.findByText(NO_TASKS_FOUND_MESSAGE);
-        expect(screen.getByText(NO_TASKS_FOUND_MESSAGE)).toBeInTheDocument();
-    });
-
-    test('select tab and set active when dev is true', async () => {
-        setWindowInnerWidth(breakpointToShowTabs);
-        renderWithRouter(
-            <Provider store={store()}>
-                <TasksContent dev={true} />
-            </Provider>,
             {
                 query: { section: 'unassigned' },
             }
@@ -102,29 +80,27 @@ describe('tasks content', () => {
         expect(errorMessage).toBeInTheDocument();
     });
 
-    test('display tasks', async () => {
+    test('display tasks to be rendered on /tasks page', async () => {
         const { findByText } = renderWithRouter(
             <Provider store={store()}>
                 <TasksContent />
             </Provider>,
             { query: { section: 'available' } }
         );
-        await screen.findByTestId('tabs');
 
         const task = await findByText(
             'Design and develop an online booking system'
         );
         expect(task).toBeInTheDocument();
     });
 
-    test('display tasks when dev is true', async () => {
+    test('display tasks to be rendered on /tasks page when dev is true', async () => {
         const { findByText } = renderWithRouter(
             <Provider store={store()}>
-                <TasksContent dev={true} />
+                <TasksContent />
             </Provider>,
             { query: { section: 'done' } }
         );
-        await screen.findByTestId('tabs');
 
         const task = await findByText(
             'Depreciate task status AVAILABLE and COMPLETED'
@@ -162,36 +138,6 @@ describe('tasks content', () => {
         });
     });
 
-    test('Selecting a tab pushes into query params when dev is true', async () => {
-        setWindowInnerWidth(breakpointToShowTabs);
-        const mockPushFunction = jest.fn();
-        renderWithRouter(
-            <Provider store={store()}>
-                <TasksContent dev={true} />
-            </Provider>,
-            { push: mockPushFunction }
-        );
-
-        await screen.findByTestId('tabs');
-        const tabsContainer = within(
-            screen.getByTestId('status-tabs-container')
-        );
-        const inProgressBtn = tabsContainer.getByRole('button', {
-            name: /IN PROGRESS/i,
-        });
-        expect(inProgressBtn).toHaveClass('tabButton');
-        const unassignedButton = tabsContainer.getByRole('button', {
-            name: /UNASSIGNED/i,
-        });
-        fireEvent.click(unassignedButton);
-        expect(mockPushFunction).toBeCalledTimes(1);
-        expect(mockPushFunction).toBeCalledWith({
-            query: {
-                q: 'status:unassigned',
-            },
-        });
-    });
-
     test('should show status-tabs-container after 450px of screen width', async () => {
         setWindowInnerWidth(breakpointToShowTabs);
         const mockPushFunction = jest.fn();
@@ -258,50 +204,6 @@ describe('tasks content', () => {
         });
     });
 
-    test('Selecting a value from dropdown pushes into query params when dev is true', async () => {
-        setWindowInnerWidth(breakpointToShowSelect);
-        const mockPushFunction = jest.fn();
-        renderWithRouter(
-            <Provider store={store()}>
-                <TasksContent dev={true} />
-            </Provider>,
-            { push: mockPushFunction }
-        );
-
-        await screen.findByTestId('status-select-container');
-        const selectContainer = screen?.getByTestId(
-            'selected-option-container'
-        );
-
-        fireEvent.click(selectContainer);
-        fireEvent.keyDown(selectContainer, {
-            key: 'ArrowDown',
-            code: 'ArrowDown',
-        });
-
-        fireEvent.keyDown(selectContainer, {
-            key: 'ArrowDown',
-            code: 'ArrowDown',
-        });
-
-        fireEvent.keyDown(selectContainer, {
-            key: 'ArrowDown',
-            code: 'ArrowDown',
-        });
-
-        fireEvent.keyDown(selectContainer, {
-            key: 'Enter',
-            code: 'Enter',
-        });
-
-        expect(mockPushFunction).toBeCalledTimes(1);
-        expect(mockPushFunction).toBeCalledWith({
-            query: {
-                q: 'status:unassigned',
-            },
-        });
-    });
-
     test('searchButtonHandler when search button is clicked', async () => {
         setWindowInnerWidth(breakpointToShowTabs);
         const mockPushFunction = jest.fn();
@@ -312,10 +214,11 @@ describe('tasks content', () => {
             { push: mockPushFunction }
         );
 
-        await screen.findByTestId('tabs');
-        const searchButton = screen.getByTestId('search-button');
+        const searchButton = await screen.findByTestId('search-button');
         fireEvent.click(searchButton);
-        expect(mockPushFunction).toBeCalledTimes(1);
+        await waitFor(() => {
+            expect(mockPushFunction).toBeCalledTimes(1);
+        });
         expect(mockPushFunction).toBeCalledWith({
             query: {
                 q: 'status:all',
@@ -332,9 +235,7 @@ describe('tasks content', () => {
             </Provider>,
             { push: mockPushFunction }
         );
-
-        await screen.findByTestId('tabs');
-        const searchInput = screen.getByTestId('search-input');
+        const searchInput = await screen.findByTestId('search-input');
         fireEvent.change(searchInput, { target: { value: 'test' } });
         expect(searchInput).toHaveValue('test');
     });

src/components/tasks/TasksContent.tsx

@@ -9,6 +9,7 @@ import {
 } from '../../constants/messages';
 import { EMPTY_TASKS_DATA } from '@/constants/tasks';
 import { TabSection } from './TabSection';
+
 import TaskList from './TaskList/TaskList';
 import { useRouter } from 'next/router';
 import { getActiveTab } from '@/utils/getActiveTab';
@@ -143,40 +144,50 @@ export const TasksContent = ({ dev }: { dev?: boolean }) => {
                 onInputChange={(value) => searchInputHandler(value)}
                 onClickSearchButton={searchButtonHandler}
             />
-            <div
-                className={classNames['status-tabs-container']}
-                data-testid="status-tabs-container"
-            >
-                <TabSection
-                    dev={dev}
-                    onSelect={(status: Tab) =>
-                        searchNewTasks(status, queryAssignees, queryTitle)
-                    }
-                    activeTab={selectedTab}
-                />
-            </div>
-            <div
-                className={classNames['status-select-container']}
-                data-testid="status-select-container"
-            >
-                <Select
-                    dev={dev}
-                    value={{
-                        label: getChangedStatusName(selectedTab),
-                        value: selectedTab,
-                    }}
-                    onChange={(selectedTaskStatus) => {
-                        if (selectedTaskStatus) {
-                            searchNewTasks(
-                                selectedTaskStatus.value as Tab,
-                                queryAssignees,
-                                queryTitle
-                            );
-                        }
-                    }}
-                    options={taskSelectOptions}
-                />
-            </div>
+            {dev !== true ? (
+                <>
+                    <div
+                        className={classNames['status-tabs-container']}
+                        data-testid="status-tabs-container"
+                    >
+                        <TabSection
+                            dev={dev}
+                            onSelect={(status: Tab) =>
+                                searchNewTasks(
+                                    status,
+                                    queryAssignees,
+                                    queryTitle
+                                )
+                            }
+                            activeTab={selectedTab}
+                        />
+                    </div>
+                    <div
+                        className={classNames['status-select-container']}
+                        data-testid="status-select-container"
+                    >
+                        <Select
+                            dev={dev}
+                            value={{
+                                label: getChangedStatusName(selectedTab),
+                                value: selectedTab,
+                            }}
+                            onChange={(selectedTaskStatus) => {
+                                if (selectedTaskStatus) {
+                                    searchNewTasks(
+                                        selectedTaskStatus.value as Tab,
+                                        queryAssignees,
+                                        queryTitle
+                                    );
+                                }
+                            }}
+                            options={taskSelectOptions}
+                        />
+                    </div>
+                </>
+            ) : (
+                <></>
+            )}
             <div>
                 {loadedTasks[selectedTab] && loadedTasks[selectedTab].length ? (
                     <TaskList tasks={loadedTasks[selectedTab]} />

src/components/tasks/card/card.module.scss

@@ -42,17 +42,12 @@ $progressTextAnimation: #9babb8;
     width: 100%;
 
     @media (min-width: 768px) and (max-width: 1024px) {
-        width: 90%;
         justify-content: center;
     }
 
     @media (max-width: 448px) {
         justify-content: center;
     }
-
-    @media (max-width: 368px) {
-        width: 90%;
-    }
 }
 .card_updated {
     border-radius: 10px;

src/components/tasks/card/index.tsx

@@ -1,7 +1,6 @@
 import { FC, useState, useEffect, useRef, ChangeEvent } from 'react';
 import Image from 'next/image';
 import classNames from '@/components/tasks/card/card.module.scss';
-import DevFeature from '@/components/DevFeature';
 import getDateInString from '@/helperFunctions/getDateInString';
 import { useKeyLongPressed } from '@/hooks/useKeyLongPressed';
 import { CardProps } from '@/interfaces/task.type';
@@ -565,15 +564,12 @@ const Card: FC<CardProps> = ({
                 </div>
                 {/* EDIT task status */}
                 <div className={classNames.taskStatusEditMode}>
-                    {isEditable && (
+                    {isEditable ? (
                         <TaskStatusEditMode
                             task={editedTaskDetails}
                             setEditedTaskDetails={setEditedTaskDetails}
                         />
-                    )}
-                </div>
-                <DevFeature>
-                    {cardDetails.status && (
+                    ) : (
                         <div className={classNames.statusContainer} style={{}}>
                             <p className={classNames.cardSpecialFont}>
                                 Status:
@@ -590,7 +586,7 @@ const Card: FC<CardProps> = ({
                             </p>
                         </div>
                     )}
-                </DevFeature>
+                </div>
             </div>
 
             <div className={classNames.contributor}>