Merge branch 'develop' into fix/taskDates/1252

__tests__/Unit/pages/Mine/Mine.test.tsx

@@ -1,5 +1,5 @@
 import { waitFor } from '@testing-library/react';
-import Mine from '@/pages/mine';
+import Mine, { searchTasks } from '@/pages/mine';
 import { store } from '@/app/store';
 import { Provider } from 'react-redux';
 import { renderWithRouter } from '@/test_utils/createMockRouter';
@@ -9,6 +9,11 @@ import {
     mineTasksErrorHandler,
     mineTasksNoDataFoundHandler,
 } from '../../../../__mocks__/handlers/tasks.handler';
+import userEvent from '@testing-library/user-event';
+import * as taskQueryParams from '@/utils/taskQueryParams';
+import * as getActiveTabModule from '@/utils/getActiveTab';
+import * as getFilteredTasksModule from '@/utils/getFilteredTasks';
+import task from '@/interfaces/task.type';
 
 const server = setupServer(...handlers);
 
@@ -29,6 +34,38 @@ describe('Mine Page', () => {
         expect(getByText(/loading/i)).toBeInTheDocument();
     });
 
+    it('should call searchTasks', () => {
+        const setFilteredTasks = jest.fn();
+        const setSelectedTab = jest.fn();
+        const setTitle = jest.fn();
+        const extractQueryParams = jest.spyOn(
+            taskQueryParams,
+            'extractQueryParams'
+        );
+        const getActiveTab = jest.spyOn(getActiveTabModule, 'getActiveTab');
+        const getFilteredTasks = jest.spyOn(getFilteredTasksModule, 'default');
+        const searchString = 'status:VERIFIED';
+        const tasks: task[] = [];
+
+        searchTasks(
+            setFilteredTasks,
+            setSelectedTab,
+            setTitle,
+            searchString,
+            tasks
+        );
+
+        expect(extractQueryParams).toHaveBeenCalled();
+        expect(getActiveTab).toHaveBeenCalled();
+        expect(getFilteredTasks).toHaveBeenCalled();
+
+        expect(setFilteredTasks).toHaveBeenCalled();
+        expect(setSelectedTab).toHaveBeenCalled();
+        expect(setTitle).toHaveBeenCalled();
+
+        jest.restoreAllMocks();
+    });
+
     it('should render no tasks found state', async () => {
         server.use(mineTasksNoDataFoundHandler);
         const { getByText } = renderWithRouter(
@@ -42,12 +79,39 @@ describe('Mine Page', () => {
         );
     });
 
-    it('should render mine tasks', async () => {
+    it('should render no tasks found state when dev is enabled', async () => {
         const { getByText } = renderWithRouter(
             <Provider store={store()}>
                 <Mine />
             </Provider>,
-            { route: '/mine' }
+            { route: '/mine', query: { dev: 'true' } }
+        );
+        await waitFor(() =>
+            expect(getByText(/no tasks found/i)).toBeInTheDocument()
+        );
+    });
+
+    it('should render shimmer cards', async () => {
+        const { getAllByTestId } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'true' } }
+        );
+
+        await waitFor(() =>
+            expect(
+                getAllByTestId(/shimmer-card/i).length
+            ).toBeGreaterThanOrEqual(1)
+        );
+    });
+
+    it('should render old UI component for mine tasks when dev is disabled', async () => {
+        const { getByText } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'false' } }
         );
         await waitFor(() =>
             expect(
@@ -58,6 +122,83 @@ describe('Mine Page', () => {
         );
     });
 
+    it('should render filter dropdown when dev is enabled', async () => {
+        const { getByText } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'true' } }
+        );
+
+        await waitFor(() => expect(getByText(/Filter/i)).toBeInTheDocument());
+    });
+
+    it('should render search input when dev is enabled', async () => {
+        const { getByTestId } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'true' } }
+        );
+
+        await waitFor(() =>
+            expect(getByTestId(/pill-input-wrapper/i)).toBeInTheDocument()
+        );
+    });
+
+    it('should render new UI component for mine tasks when dev is enabled', async () => {
+        const { getAllByTestId } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'true' } }
+        );
+
+        await waitFor(() =>
+            expect(getAllByTestId(/task-card/i).length).toBeGreaterThanOrEqual(
+                1
+            )
+        );
+    });
+
+    it('should filter tasks based on search input when dev is enabled', async () => {
+        const { findByText, getAllByText, findByTestId } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'true' } }
+        );
+
+        const searchInput = await findByTestId('search-input');
+        userEvent.type(searchInput, 'status:verified');
+        const tag = await findByText('status: verified');
+        userEvent.click(tag);
+
+        await waitFor(() => {
+            expect(getAllByText('Verified').length).toEqual(2);
+        });
+    });
+
+    it('should filter tasks based on filter dropdown select when dev is enabled', async () => {
+        const { findByText, getAllByText } = renderWithRouter(
+            <Provider store={store()}>
+                <Mine />
+            </Provider>,
+            { route: '/mine', query: { dev: 'true' } }
+        );
+
+        const dropdown = await findByText('Filter');
+        userEvent.click(dropdown);
+        const tab = await findByText('IN PROGRESS');
+        userEvent.click(tab);
+
+        await waitFor(() => {
+            expect(getAllByText('In Progress', { exact: true }).length).toEqual(
+                1
+            );
+        });
+    });
+
     it('should render error state', async () => {
         server.use(mineTasksErrorHandler);
         const { getByText } = renderWithRouter(

__tests__/Unit/utils/getFilteredTasks.test.ts

@@ -0,0 +1,54 @@
+import { DONE, VERIFIED } from '@/constants/task-status';
+import task, { Tab } from '@/interfaces/task.type';
+import getFilteredTasks from '@/utils/getFilteredTasks';
+import { TASK } from '../../../fixture/task';
+
+let VERIFIED_TASKS: task[];
+let TASKS_HAVING_TITLE_DONE: task[];
+let ALL_TASKS: task[];
+
+beforeAll(() => {
+    VERIFIED_TASKS = [
+        { ...TASK, status: VERIFIED, id: TASK.id + 2 },
+        { ...TASK, status: VERIFIED, id: TASK.id + 3 },
+    ];
+    TASKS_HAVING_TITLE_DONE = [
+        { ...TASK, id: TASK.id + 1, title: DONE },
+        { ...TASK, title: DONE, status: DONE, id: TASK.id + 4 },
+    ];
+    ALL_TASKS = [...TASKS_HAVING_TITLE_DONE, ...VERIFIED_TASKS];
+});
+
+describe('Unit | Util | Get Filtered Tasks', () => {
+    test('should return an empty list', () => {
+        expect(getFilteredTasks([], Tab.ALL, '')).toStrictEqual([]);
+    });
+
+    test('should return all tasks', () => {
+        expect(getFilteredTasks(ALL_TASKS, Tab.ALL, '')).toStrictEqual(
+            ALL_TASKS
+        );
+    });
+
+    test('should return all tasks with verified status', () => {
+        expect(getFilteredTasks(ALL_TASKS, Tab.VERIFIED, '')).toStrictEqual(
+            VERIFIED_TASKS
+        );
+    });
+
+    test('should return all tasks with `verified` status and title `Testing and Determinsitic State`', () => {
+        expect(
+            getFilteredTasks(
+                ALL_TASKS,
+                Tab.VERIFIED,
+                'Testing and Determinsitic State'
+            )
+        ).toStrictEqual(VERIFIED_TASKS);
+    });
+
+    test('should return all tasks with title `DONE`', () => {
+        expect(getFilteredTasks(ALL_TASKS, Tab.ALL, DONE)).toStrictEqual(
+            TASKS_HAVING_TITLE_DONE
+        );
+    });
+});

__tests__/Unit/utils/getInputValueFromTaskField.test.ts

@@ -0,0 +1,20 @@
+import { Tab } from '@/interfaces/task.type';
+import getInputValueFromTaskField from '@/utils/getInputValueFromTaskField';
+
+describe('Unit | Util | Get Input Value From Task Field', () => {
+    test('should return proper value for `all` tab', () => {
+        expect(getInputValueFromTaskField(Tab.ALL, '')).toBe('status:all');
+    });
+
+    test('should return proper value for `assigned` tab and `done` title', () => {
+        expect(getInputValueFromTaskField(Tab.ASSIGNED, 'done')).toBe(
+            'status:assigned done'
+        );
+    });
+
+    test('should return proper value for `all` tab and `done` title', () => {
+        expect(getInputValueFromTaskField(Tab.ALL, 'done')).toBe(
+            'status:all done'
+        );
+    });
+});

fixture/task.ts

@@ -0,0 +1,25 @@
+export const TASK = {
+    id: 'firestoreDocumentId123',
+    lossRate: {
+        dinero: 10,
+        neelam: 5,
+    },
+    links: ['https://realdevsquad.com/learn-site'],
+    completionAward: {
+        dinero: 110,
+        neelam: 10,
+    },
+    dependsOn: [],
+    assignee: 'shmbajaj',
+    startedOn: '1618790400',
+    isNoteworthy: true,
+    title: 'Testing and Determinsitic State',
+    purpose: 'string',
+    percentCompleted: 0,
+    endsOn: 1618790400,
+    status: 'progress',
+    featureUrl: 'progress',
+    type: 'feature',
+    createdBy: 'shmbajaj',
+    priority: 'TBD',
+};

src/components/Loaders/cardShimmer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styles from './cardShimmer.module.scss';
 
 const CardShimmer = () => (
-    <div className={`${styles.card} ${styles.br}`}>
+    <div className={`${styles.card} ${styles.br}`} data-testid="shimmer-card">
         <div className={`${styles.title} ${styles.br} ${styles.animate}`} />
         <div className={`${styles.comment} ${styles.br} ${styles.animate}`} />
         <div className={`${styles.comment} ${styles.br} ${styles.animate}`} />