From 3cd273c435e30e2a2e0a6319fed13e3b08b0128b Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Wed, 21 Jun 2023 07:47:03 +0530 Subject: [PATCH 01/13] fixed banner styling of task progress and standup --- .../ProgressForm/ProgressForm.module.scss | 10 -------- .../ProgressForm/ProgressHeader.tsx | 24 ++++++++++--------- .../ProgressForm/ProgressLayout.tsx | 10 ++++---- src/components/standup/index.tsx | 9 ++++--- .../standup/standupContainer.module.scss | 13 ++++++++-- 5 files changed, 32 insertions(+), 34 deletions(-) diff --git a/src/components/ProgressForm/ProgressForm.module.scss b/src/components/ProgressForm/ProgressForm.module.scss index b6a0c0b62..429b238e0 100644 --- a/src/components/ProgressForm/ProgressForm.module.scss +++ b/src/components/ProgressForm/ProgressForm.module.scss @@ -11,16 +11,6 @@ $similar-margin: $base-unit * 8; $section-padding-top-bottom: $base-unit * 30; $section-padding-left-right: $base-unit * 25; -.banner { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - width: 100%; - margin-top: $diff-margin; - margin-left: 8.2rem; -} - .mark { color: $color-red; text-decoration: underline; diff --git a/src/components/ProgressForm/ProgressHeader.tsx b/src/components/ProgressForm/ProgressHeader.tsx index af6940560..92e3866f7 100644 --- a/src/components/ProgressForm/ProgressHeader.tsx +++ b/src/components/ProgressForm/ProgressHeader.tsx @@ -7,17 +7,19 @@ const ProgressHeader: FC = ({ updateType, }) => { return ( -
-

- You have - - {totalMissedUpdates} missed - - {updateType} updates -

-

- Let's try to avoid having zero days -

+
+
+

+ You have + + {totalMissedUpdates} missed + + {updateType} updates +

+

+ Let's try to avoid having zero days +

+
); }; diff --git a/src/components/ProgressForm/ProgressLayout.tsx b/src/components/ProgressForm/ProgressLayout.tsx index 6537ba17c..7aeee00bf 100644 --- a/src/components/ProgressForm/ProgressLayout.tsx +++ b/src/components/ProgressForm/ProgressLayout.tsx @@ -20,12 +20,10 @@ const ProgressLayout: FC = () => { return ( <> -
- -
+

Task Updates

On {getCurrentDate()}

diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 40e774614..160207471 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -73,12 +73,11 @@ const StandUpContainer: FC = () => { return ( <>
+
- -

Standup Update

Date: Thu, 22 Jun 2023 21:22:27 +0530 Subject: [PATCH 02/13] Wrote test caes for standup Feature --- .../Unit/Components/Standup/Standup.test.tsx | 53 +++++++++++ .../Standup/StandupContainer.test.tsx | 91 +++++++++++++++++++ __tests__/Utils/getTotalMissedUpdates.test.ts | 26 ++++++ src/components/standup/index.tsx | 2 + 4 files changed, 172 insertions(+) create mode 100644 __tests__/Unit/Components/Standup/Standup.test.tsx create mode 100644 __tests__/Unit/Components/Standup/StandupContainer.test.tsx create mode 100644 __tests__/Utils/getTotalMissedUpdates.test.ts diff --git a/__tests__/Unit/Components/Standup/Standup.test.tsx b/__tests__/Unit/Components/Standup/Standup.test.tsx new file mode 100644 index 000000000..138be4969 --- /dev/null +++ b/__tests__/Unit/Components/Standup/Standup.test.tsx @@ -0,0 +1,53 @@ +import StandUp from '@/pages/standup'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { screen } from '@testing-library/react'; +import { LOGIN_URL } from '@/constants/url'; + +describe.only('Standup', () => { + test('should render stanup component if feature flag is true', () => { + const { getByText } = renderWithRouter( + + + , + { + query: { dev: 'true' }, + } + ); + expect(getByText('Standup')).toBeInTheDocument(); + }); + test('should render 404 Page component if feature flag is false', () => { + const { getByText } = renderWithRouter( + + + , + { + query: { dev: 'false' }, + } + ); + expect(getByText('404 - Page Not Found')).toBeInTheDocument(); + }); + + // test('renders unauthorized message and login link when not authenticated', () => { + // // Mock the useAuthenticated hook to return unauthenticated state + // jest.mock('@/hooks/useAuthenticated', () => ({ + // __esModule: true, + // default: jest.fn(() => ({ + // isLoggedIn: false, + // isLoading: false, + // })), + // })); + + // const { getByText } = renderWithRouter( + // + // + // + // ); + // expect(getByText('You are not Authorized')).toBeInTheDocument(); + // expect(getByText('Click here to Login')).toHaveAttribute( + // 'href', + // LOGIN_URL + // ); + // }); +}); diff --git a/__tests__/Unit/Components/Standup/StandupContainer.test.tsx b/__tests__/Unit/Components/Standup/StandupContainer.test.tsx new file mode 100644 index 000000000..97d2fdbe5 --- /dev/null +++ b/__tests__/Unit/Components/Standup/StandupContainer.test.tsx @@ -0,0 +1,91 @@ +import StandUpContainer from '@/components/standup'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { fireEvent, screen } from '@testing-library/react'; + +describe('StandupContainer', () => { + test('should render completed inputField ', function () { + renderWithRouter( + + + + ); + const input = screen.getByTestId( + 'completedInputField' + ) as HTMLInputElement; + expect(input).toBeInTheDocument(); + expect(input).toHaveValue(''); + fireEvent.change(input, { + target: { value: 'Working on a backend Go project' }, + }); + const inputValue = input.value; + expect(inputValue).toBe('Working on a backend Go project'); + }); + test('should render today input field', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId('todayInputField') as HTMLInputElement; + expect(input).toBeInTheDocument(); + expect(input).toHaveValue(''); + fireEvent.change(input, { + target: { value: 'Implement error handling for API endpoints' }, + }); + const inputValue = input.value; + expect(inputValue).toBe('Implement error handling for API endpoints'); + }); + test('on render Blocker inputField ', () => { + renderWithRouter( + + + + ); + const input = screen.getByTestId( + 'blockerInputField' + ) as HTMLInputElement; + expect(screen.queryByTestId('blockerInputField')).toBeInTheDocument(); + expect(input).toHaveValue(''); + fireEvent.change(input, { + target: { value: 'Waiting for database access credentials' }, + }); + const inputValue = input.value; + expect(inputValue).toBe('Waiting for database access credentials'); + }); + test('render if button is disabled', () => { + renderWithRouter( + + + + ); + expect(screen.getByText(/Submit/i).closest('button')).toBeDisabled(); + }); + test('render if button is enabled', () => { + renderWithRouter( + + + + ); + const completeInput = screen.getByTestId( + 'completedInputField' + ) as HTMLInputElement; + fireEvent.change(completeInput, { + target: { value: 'Working on a backend Go project' }, + }); + const todaysInput = screen.getByTestId( + 'todayInputField' + ) as HTMLInputElement; + fireEvent.change(todaysInput, { + target: { value: 'Implement error handling for API endpoints' }, + }); + const blockerInput = screen.getByTestId( + 'blockerInputField' + ) as HTMLInputElement; + fireEvent.change(blockerInput, { + target: { value: 'Waiting for database access credentials' }, + }); + expect(screen.getByTestId('button')).not.toBeDisabled(); + }); +}); diff --git a/__tests__/Utils/getTotalMissedUpdates.test.ts b/__tests__/Utils/getTotalMissedUpdates.test.ts new file mode 100644 index 000000000..2e4597692 --- /dev/null +++ b/__tests__/Utils/getTotalMissedUpdates.test.ts @@ -0,0 +1,26 @@ +import { getTotalMissedUpdates } from '@/utils/getTotalMissedUpdate'; + +describe('Get Total Missed Updates', () => { + test('should return 0 if date array is empty', () => { + const result = getTotalMissedUpdates([]); + expect(result).toBe(0); + }); + + test('should return 0 if date array has last standup date', () => { + const result = getTotalMissedUpdates([ + 1687305600000, 1685145600000, 1686873600000, 1685836800000, + 1687392000000, + ]); + expect(result).toBe(0); + }); + + test('should return number of days between last standup date and current standup date', () => { + const result = getTotalMissedUpdates([ + 1685232000000, 1685404800000, 1685491200000, 1687132800000, + 1685059200000, 1685750400000, 1687219200000, 1685318400000, + 1685577600000, 1686787200000, 1685836800000, 1686873600000, + 1685145600000, 1687305600000, + ]); + expect(result).toBe(1); + }); +}); diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 160207471..1804ae01c 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -83,6 +83,7 @@ const StandUpContainer: FC = () => {
{ className={`${styles.submitButton} ${buttonStyleClass}`} disabled={!isValidate()} type="submit" + data-testId="button" > Submit From 62843f7088f27f20dd8e0a51b69cf5e2d51c691e Mon Sep 17 00:00:00 2001 From: Pratiyush Kumar Date: Thu, 22 Jun 2023 21:38:09 +0530 Subject: [PATCH 03/13] reverting changes --- .../Unit/Components/Standup/Standup.test.tsx | 53 ----------- .../Standup/StandupContainer.test.tsx | 91 ------------------- __tests__/Utils/getTotalMissedUpdates.test.ts | 26 ------ src/components/standup/index.tsx | 2 - 4 files changed, 172 deletions(-) delete mode 100644 __tests__/Unit/Components/Standup/Standup.test.tsx delete mode 100644 __tests__/Unit/Components/Standup/StandupContainer.test.tsx delete mode 100644 __tests__/Utils/getTotalMissedUpdates.test.ts diff --git a/__tests__/Unit/Components/Standup/Standup.test.tsx b/__tests__/Unit/Components/Standup/Standup.test.tsx deleted file mode 100644 index 138be4969..000000000 --- a/__tests__/Unit/Components/Standup/Standup.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import StandUp from '@/pages/standup'; -import { renderWithRouter } from '@/test_utils/createMockRouter'; -import { Provider } from 'react-redux'; -import { store } from '@/app/store'; -import { screen } from '@testing-library/react'; -import { LOGIN_URL } from '@/constants/url'; - -describe.only('Standup', () => { - test('should render stanup component if feature flag is true', () => { - const { getByText } = renderWithRouter( - - - , - { - query: { dev: 'true' }, - } - ); - expect(getByText('Standup')).toBeInTheDocument(); - }); - test('should render 404 Page component if feature flag is false', () => { - const { getByText } = renderWithRouter( - - - , - { - query: { dev: 'false' }, - } - ); - expect(getByText('404 - Page Not Found')).toBeInTheDocument(); - }); - - // test('renders unauthorized message and login link when not authenticated', () => { - // // Mock the useAuthenticated hook to return unauthenticated state - // jest.mock('@/hooks/useAuthenticated', () => ({ - // __esModule: true, - // default: jest.fn(() => ({ - // isLoggedIn: false, - // isLoading: false, - // })), - // })); - - // const { getByText } = renderWithRouter( - // - // - // - // ); - // expect(getByText('You are not Authorized')).toBeInTheDocument(); - // expect(getByText('Click here to Login')).toHaveAttribute( - // 'href', - // LOGIN_URL - // ); - // }); -}); diff --git a/__tests__/Unit/Components/Standup/StandupContainer.test.tsx b/__tests__/Unit/Components/Standup/StandupContainer.test.tsx deleted file mode 100644 index 97d2fdbe5..000000000 --- a/__tests__/Unit/Components/Standup/StandupContainer.test.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import StandUpContainer from '@/components/standup'; -import { renderWithRouter } from '@/test_utils/createMockRouter'; -import { Provider } from 'react-redux'; -import { store } from '@/app/store'; -import { fireEvent, screen } from '@testing-library/react'; - -describe('StandupContainer', () => { - test('should render completed inputField ', function () { - renderWithRouter( - - - - ); - const input = screen.getByTestId( - 'completedInputField' - ) as HTMLInputElement; - expect(input).toBeInTheDocument(); - expect(input).toHaveValue(''); - fireEvent.change(input, { - target: { value: 'Working on a backend Go project' }, - }); - const inputValue = input.value; - expect(inputValue).toBe('Working on a backend Go project'); - }); - test('should render today input field', () => { - renderWithRouter( - - - - ); - const input = screen.getByTestId('todayInputField') as HTMLInputElement; - expect(input).toBeInTheDocument(); - expect(input).toHaveValue(''); - fireEvent.change(input, { - target: { value: 'Implement error handling for API endpoints' }, - }); - const inputValue = input.value; - expect(inputValue).toBe('Implement error handling for API endpoints'); - }); - test('on render Blocker inputField ', () => { - renderWithRouter( - - - - ); - const input = screen.getByTestId( - 'blockerInputField' - ) as HTMLInputElement; - expect(screen.queryByTestId('blockerInputField')).toBeInTheDocument(); - expect(input).toHaveValue(''); - fireEvent.change(input, { - target: { value: 'Waiting for database access credentials' }, - }); - const inputValue = input.value; - expect(inputValue).toBe('Waiting for database access credentials'); - }); - test('render if button is disabled', () => { - renderWithRouter( - - - - ); - expect(screen.getByText(/Submit/i).closest('button')).toBeDisabled(); - }); - test('render if button is enabled', () => { - renderWithRouter( - - - - ); - const completeInput = screen.getByTestId( - 'completedInputField' - ) as HTMLInputElement; - fireEvent.change(completeInput, { - target: { value: 'Working on a backend Go project' }, - }); - const todaysInput = screen.getByTestId( - 'todayInputField' - ) as HTMLInputElement; - fireEvent.change(todaysInput, { - target: { value: 'Implement error handling for API endpoints' }, - }); - const blockerInput = screen.getByTestId( - 'blockerInputField' - ) as HTMLInputElement; - fireEvent.change(blockerInput, { - target: { value: 'Waiting for database access credentials' }, - }); - expect(screen.getByTestId('button')).not.toBeDisabled(); - }); -}); diff --git a/__tests__/Utils/getTotalMissedUpdates.test.ts b/__tests__/Utils/getTotalMissedUpdates.test.ts deleted file mode 100644 index 2e4597692..000000000 --- a/__tests__/Utils/getTotalMissedUpdates.test.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { getTotalMissedUpdates } from '@/utils/getTotalMissedUpdate'; - -describe('Get Total Missed Updates', () => { - test('should return 0 if date array is empty', () => { - const result = getTotalMissedUpdates([]); - expect(result).toBe(0); - }); - - test('should return 0 if date array has last standup date', () => { - const result = getTotalMissedUpdates([ - 1687305600000, 1685145600000, 1686873600000, 1685836800000, - 1687392000000, - ]); - expect(result).toBe(0); - }); - - test('should return number of days between last standup date and current standup date', () => { - const result = getTotalMissedUpdates([ - 1685232000000, 1685404800000, 1685491200000, 1687132800000, - 1685059200000, 1685750400000, 1687219200000, 1685318400000, - 1685577600000, 1686787200000, 1685836800000, 1686873600000, - 1685145600000, 1687305600000, - ]); - expect(result).toBe(1); - }); -}); diff --git a/src/components/standup/index.tsx b/src/components/standup/index.tsx index 1804ae01c..160207471 100644 --- a/src/components/standup/index.tsx +++ b/src/components/standup/index.tsx @@ -83,7 +83,6 @@ const StandUpContainer: FC = () => {
{ className={`${styles.submitButton} ${buttonStyleClass}`} disabled={!isValidate()} type="submit" - data-testId="button" > Submit From 19b26a9b8004e3e841ac941f69739953b874ce1f Mon Sep 17 00:00:00 2001 From: Jyotsna Mehta <53934353+j24m@users.noreply.github.com> Date: Fri, 23 Jun 2023 22:08:56 +0530 Subject: [PATCH 04/13] Fix : inconsistency in the width of task-tabs and task-cards --- src/components/Header/Header.module.scss | 12 ++++++---- src/components/Tabs/Tabs.module.scss | 26 +++++++++++++++++----- src/components/tasks/TaskList/TaskList.tsx | 4 ++-- src/components/tasks/card/card.module.scss | 10 ++++++++- src/styles/tasks.module.scss | 6 +++++ 5 files changed, 45 insertions(+), 13 deletions(-) diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 490fe5b23..6b1c1fe05 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -1,15 +1,19 @@ .header { + margin-top: 0.5rem; display: flex; justify-content: center; - align-items: center; flex-wrap: wrap; - padding-top: 0.625rem; + padding: 1rem; + align-items: center; + gap: 1rem; + border-bottom: 1px solid var(--toastify-text-color-light); } .link { - padding: 0.625rem; + padding: 0.5rem; + width: 6rem; text-decoration: none; - font-weight: bold; + font-size: 14px; color: #041484; cursor: pointer; background: none; diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss index 93badc756..6ec1b0c85 100644 --- a/src/components/Tabs/Tabs.module.scss +++ b/src/components/Tabs/Tabs.module.scss @@ -1,18 +1,32 @@ $theme-grey: #d4d4d5; +$theme-grey-light: #f1f1f5; +$gray-shade-color: #808080; +$gray-shade-color2: #5c5b5b; .tabButton { - background: white; border: none; + border-bottom: 1.8px solid $theme-grey; + font-size: 0.9rem; + font-weight: bold; + color: $gray-shade-color; + width: 9rem; + background: var(--toastify-color-light); padding: 12px 8px 8px; - font-size: 0.8em; border-radius: 5px 5px 0 0; - border-bottom: 1px solid $theme-grey; cursor: pointer; } +.tabButton:hover { + color: $gray-shade-color2; +} + +.tabButton:active { + background-color: $theme-grey-light; +} + .active { - font-weight: bold; - border: 1px solid $theme-grey; + color: var(--toastify-color-dark); + border: 1.8px solid $theme-grey; border-bottom: none; - background: white; + background: var(--toastify-color-light); } diff --git a/src/components/tasks/TaskList/TaskList.tsx b/src/components/tasks/TaskList/TaskList.tsx index 810e88534..6f8574dff 100644 --- a/src/components/tasks/TaskList/TaskList.tsx +++ b/src/components/tasks/TaskList/TaskList.tsx @@ -53,7 +53,7 @@ export default function TaskList({ } return ( - <> +
{filteredTasks.map((item: task) => ( )} - +
); } diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index b721017ae..f38dc965a 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -27,6 +27,7 @@ $seeMoreTasksShadow: #595959cc; } .card { + text-align: left; display: flex; flex-direction: column; padding: 1rem; @@ -35,7 +36,7 @@ $seeMoreTasksShadow: #595959cc; justify-content: space-between; border: 1px solid #d9d9d9; position: relative; - max-width: 720px; + width: 1050px; @media (max-width: 48rem) { width: 100%; @@ -303,3 +304,10 @@ $seeMoreTasksShadow: #595959cc; transform: rotate(360deg); } } + +.taskCardsContainer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} diff --git a/src/styles/tasks.module.scss b/src/styles/tasks.module.scss index cfdd631a0..bd09e144d 100644 --- a/src/styles/tasks.module.scss +++ b/src/styles/tasks.module.scss @@ -1,4 +1,5 @@ .container { + text-align: center; display: flex; flex-direction: column; margin: 0 auto; @@ -25,5 +26,10 @@ } .tabsContainer { + display: flex; + justify-content: center; + align-items: center; + padding: 1rem; margin-bottom: 1rem; + flex-wrap: wrap; } From 0e3b8f7905e2e1c3edc98da1f670b38f9589a7bb Mon Sep 17 00:00:00 2001 From: Jyotsna Mehta <53934353+j24m@users.noreply.github.com> Date: Sun, 25 Jun 2023 22:59:45 +0530 Subject: [PATCH 05/13] Fix : task-card responsive for tab view. --- src/components/tasks/card/card.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index f38dc965a..bda4cc1d4 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -41,6 +41,9 @@ $seeMoreTasksShadow: #595959cc; @media (max-width: 48rem) { width: 100%; } + @media (max-width: 64rem) { + width: 100%; + } } .card_updated { border-radius: 10px; From 2c45347444fd2bb6bc303120c11313c157bdeba0 Mon Sep 17 00:00:00 2001 From: Jyotsna Mehta <53934353+j24m@users.noreply.github.com> Date: Mon, 26 Jun 2023 02:50:26 +0530 Subject: [PATCH 06/13] Refactor --- src/components/Header/Header.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index 6b1c1fe05..fafe4a0c8 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -11,7 +11,6 @@ .link { padding: 0.5rem; - width: 6rem; text-decoration: none; font-size: 14px; color: #041484; From 9b28d9691e4e3499247a364e7422172c00872f46 Mon Sep 17 00:00:00 2001 From: Jyotsna Mehta <53934353+j24m@users.noreply.github.com> Date: Tue, 27 Jun 2023 01:20:43 +0530 Subject: [PATCH 07/13] Refactor --- src/components/Header/Header.module.scss | 8 +++----- src/components/tasks/card/card.module.scss | 5 +---- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/Header/Header.module.scss b/src/components/Header/Header.module.scss index fafe4a0c8..acaa0a832 100644 --- a/src/components/Header/Header.module.scss +++ b/src/components/Header/Header.module.scss @@ -1,18 +1,16 @@ .header { - margin-top: 0.5rem; + padding-top: 0.6rem; display: flex; justify-content: center; flex-wrap: wrap; - padding: 1rem; align-items: center; - gap: 1rem; border-bottom: 1px solid var(--toastify-text-color-light); } .link { - padding: 0.5rem; + padding: 0.6rem; text-decoration: none; - font-size: 14px; + font-weight: 700; color: #041484; cursor: pointer; background: none; diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index bda4cc1d4..4bacce2a0 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -36,14 +36,11 @@ $seeMoreTasksShadow: #595959cc; justify-content: space-between; border: 1px solid #d9d9d9; position: relative; - width: 1050px; + width: 45rem; @media (max-width: 48rem) { width: 100%; } - @media (max-width: 64rem) { - width: 100%; - } } .card_updated { border-radius: 10px; From ca0e5214040c8ceede2029faf1b21a654ce85ca9 Mon Sep 17 00:00:00 2001 From: Jyotsna Mehta <53934353+j24m@users.noreply.github.com> Date: Tue, 27 Jun 2023 16:47:49 +0530 Subject: [PATCH 08/13] Refactor --- src/components/Tabs/Tabs.module.scss | 7 +++---- src/components/tasks/card/card.module.scss | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss index 6ec1b0c85..862b8e886 100644 --- a/src/components/Tabs/Tabs.module.scss +++ b/src/components/Tabs/Tabs.module.scss @@ -6,13 +6,12 @@ $gray-shade-color2: #5c5b5b; .tabButton { border: none; border-bottom: 1.8px solid $theme-grey; - font-size: 0.9rem; + font-size: 0.85rem; font-weight: bold; color: $gray-shade-color; - width: 9rem; background: var(--toastify-color-light); - padding: 12px 8px 8px; - border-radius: 5px 5px 0 0; + padding: 0.45rem 0.8rem; + border-radius: 0.2rem 0.2rem 0 0; cursor: pointer; } diff --git a/src/components/tasks/card/card.module.scss b/src/components/tasks/card/card.module.scss index 4bacce2a0..78ffd3347 100644 --- a/src/components/tasks/card/card.module.scss +++ b/src/components/tasks/card/card.module.scss @@ -36,7 +36,7 @@ $seeMoreTasksShadow: #595959cc; justify-content: space-between; border: 1px solid #d9d9d9; position: relative; - width: 45rem; + width: 50rem; @media (max-width: 48rem) { width: 100%; From e0b62f10fed370fac227a105c37a16cc6646cea5 Mon Sep 17 00:00:00 2001 From: kedar-hargude Date: Tue, 30 May 2023 16:06:41 +0530 Subject: [PATCH 09/13] feat: update unit tests --- __tests__/Unit/Components/Tabs/Tab.test.tsx | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/__tests__/Unit/Components/Tabs/Tab.test.tsx b/__tests__/Unit/Components/Tabs/Tab.test.tsx index f9a09fd51..6d0cc7e1f 100644 --- a/__tests__/Unit/Components/Tabs/Tab.test.tsx +++ b/__tests__/Unit/Components/Tabs/Tab.test.tsx @@ -15,6 +15,16 @@ function changeName(name: string) { describe('Tabs Component', () => { const onSelectMock = jest.fn(); + const mockTasksCount = { + ASSIGNED: 2, + COMPLETED: 4, + AVAILABLE: 10, + IN_PROGRESS: 0, + NEEDS_REVIEW: 0, + IN_REVIEW: 0, + VERIFIED: 0, + MERGED: 0, + }; it('should render all the buttons', () => { render( @@ -22,6 +32,7 @@ describe('Tabs Component', () => { tabs={TABS} activeTab={Tab.ASSIGNED} onSelect={onSelectMock} + tasksCount={mockTasksCount} /> ); const presentTabs = screen.queryAllByRole('button'); @@ -34,6 +45,7 @@ describe('Tabs Component', () => { tabs={TABS} activeTab={Tab.ASSIGNED} onSelect={onSelectMock} + tasksCount={mockTasksCount} /> ); const assignedBtn = screen.getByRole('button', { name: /ASSIGNED/i }); @@ -47,18 +59,21 @@ describe('Tabs Component', () => { tabs={TABS} activeTab={Tab.COMPLETED} onSelect={onSelectMock} + tasksCount={mockTasksCount} /> ); - const completedBtn = screen.getByRole('button', { name: /DONE/i }); + + const completedBtn = screen.getByRole('button', { name: /COMPLETED/i }); expect(completedBtn).toHaveClass('active'); }); - it('should render all tabs passed with correct text', () => { + it('should render all tabs passed with correct text and count values', () => { render( ); const presentTabs = screen.getAllByRole('button'); From 0683abbe5cb94ffeec195a14ca97769df88ec178 Mon Sep 17 00:00:00 2001 From: kedar-hargude Date: Fri, 23 Jun 2023 07:08:04 +0530 Subject: [PATCH 10/13] feat: change tabs design and add count on feature flag --- __tests__/Unit/Components/Tabs/Tab.test.tsx | 122 ++++++++++++++------ src/components/Tabs/Tabs.module.scss | 19 +++ src/components/Tabs/index.tsx | 52 ++++++--- src/components/tasks/TabSection.tsx | 5 +- src/components/tasks/TasksContent.tsx | 44 ++++++- src/interfaces/task.type.ts | 13 +++ 6 files changed, 197 insertions(+), 58 deletions(-) diff --git a/__tests__/Unit/Components/Tabs/Tab.test.tsx b/__tests__/Unit/Components/Tabs/Tab.test.tsx index 6d0cc7e1f..8a9560442 100644 --- a/__tests__/Unit/Components/Tabs/Tab.test.tsx +++ b/__tests__/Unit/Components/Tabs/Tab.test.tsx @@ -1,7 +1,10 @@ import Tabs from '@/components/Tabs'; -import { fireEvent, render, screen } from '@testing-library/react'; +import { fireEvent } from '@testing-library/react'; import { Tab, TABS } from '@/interfaces/task.type'; import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { store } from '@/app/store'; +import { Provider } from 'react-redux'; function changeName(name: string) { if (name === COMPLETED) { @@ -26,59 +29,102 @@ describe('Tabs Component', () => { MERGED: 0, }; - it('should render all the buttons', () => { - render( - + test('should render all the buttons', () => { + const { queryAllByRole } = renderWithRouter( + + + ); - const presentTabs = screen.queryAllByRole('button'); + const presentTabs = queryAllByRole('button'); expect(presentTabs.length).toBe(TABS.length); }); - it('check if selectTab() is called with right key', () => { - render( - + test('check if selectTab() is called with right key', () => { + const { getByRole } = renderWithRouter( + + + ); - const assignedBtn = screen.getByRole('button', { name: /ASSIGNED/i }); + const assignedBtn = getByRole('button', { name: /ASSIGNED/i }); fireEvent.click(assignedBtn); expect(onSelectMock).toHaveBeenCalledWith(Tab.ASSIGNED); }); - it('Check if correct button is selected', () => { - render( - + test('Check if correct button is selected', () => { + const { getByRole } = renderWithRouter( + + + ); - - const completedBtn = screen.getByRole('button', { name: /COMPLETED/i }); + const completedBtn = getByRole('button', { name: /DONE/i }); expect(completedBtn).toHaveClass('active'); }); - it('should render all tabs passed with correct text and count values', () => { - render( - + test('should render all tabs passed with correct text', () => { + const { getAllByRole } = renderWithRouter( + + + ); - const presentTabs = screen.getAllByRole('button'); + const presentTabs = getAllByRole('button'); for (let i = 0; i < presentTabs.length; i++) { expect(presentTabs[i].textContent).toBe(changeName(TABS[i])); } }); + + test('should change Tabs design and show tasks count if feature flag is on', () => { + const { getByRole, getAllByRole } = renderWithRouter( + + + , + { + query: { dev: 'true' }, + } + ); + + const presentTabs = getAllByRole('button'); + + // tasks count is rendered correctly on screen + for (let i = 0; i < presentTabs.length; i++) { + expect(presentTabs[i].textContent).toBe( + `${TABS[i]} (${mockTasksCount[TABS[i]]})` + ); + } + + // feature flag's css is applied correctly + for (let i = 0; i < presentTabs.length; i++) { + expect(presentTabs[i]).toHaveClass('featureFlagTabButton'); + } + + // active tab's feature flag css is applied correctly + const assignedBtn = getByRole('button', { + name: /assigned/i, + }); + expect(assignedBtn).toHaveClass('featureFlagActiveTab'); + }); }); diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss index 862b8e886..3368a0338 100644 --- a/src/components/Tabs/Tabs.module.scss +++ b/src/components/Tabs/Tabs.module.scss @@ -2,6 +2,7 @@ $theme-grey: #d4d4d5; $theme-grey-light: #f1f1f5; $gray-shade-color: #808080; $gray-shade-color2: #5c5b5b; +$theme-pink: #e30062; .tabButton { border: none; @@ -29,3 +30,21 @@ $gray-shade-color2: #5c5b5b; border-bottom: none; background: var(--toastify-color-light); } + +.featureFlagTabButton { + background: white; + border: none; + padding: 12px 8px 8px; + font-size: 0.8em; + border: none; + cursor: pointer; + color: #a1a5b7; +} + +.featureFlagActiveTab { + font-weight: bold; + background: white; + border: none; + border-bottom: 3px solid $theme-pink; + color: black; +} diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index a6fceb1d7..71345503f 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -1,11 +1,13 @@ import styles from '@/components/Tabs/Tabs.module.scss'; -import { Tab } from '@/interfaces/task.type'; import { COMPLETED, DONE, AVAILABLE, UNASSINGED } from '@/constants/constants'; +import { Tab, tasksCountObject } from '@/interfaces/task.type'; +import { useRouter } from 'next/router'; type TabsProps = { tabs: Tab[]; onSelect: (tab: Tab) => void; activeTab: Tab; + tasksCount: tasksCountObject; }; function changeName(name: string) { if (name === COMPLETED) { @@ -17,20 +19,38 @@ function changeName(name: string) { } } -const Tabs = ({ tabs, onSelect, activeTab }: TabsProps) => ( - <> - {tabs.map((tab: Tab) => ( - - ))} - -); +const Tabs = ({ tabs, onSelect, activeTab, tasksCount }: TabsProps) => { + const router = useRouter(); + const { query } = router; + const isFeatureFlagOn = query.dev === 'true'; + return ( + <> + {tabs.map((tab: Tab) => ( + + ))} + + ); +}; export default Tabs; diff --git a/src/components/tasks/TabSection.tsx b/src/components/tasks/TabSection.tsx index e2e0e66a1..c6e629faa 100644 --- a/src/components/tasks/TabSection.tsx +++ b/src/components/tasks/TabSection.tsx @@ -1,12 +1,14 @@ -import { TABS, Tab } from '@/interfaces/task.type'; +import { TABS, Tab, tasksCountObject } from '@/interfaces/task.type'; import classNames from '@/styles/tasks.module.scss'; import Tabs from '../Tabs'; export const TabSection = ({ onSelect, activeTab, + tasksCount, }: { onSelect: (tab: Tab) => void; activeTab: Tab; + tasksCount: tasksCountObject; }) => { return (
@@ -14,6 +16,7 @@ export const TabSection = ({ tabs={TABS as Tab[]} onSelect={onSelect} activeTab={activeTab} + tasksCount={tasksCount} />
); diff --git a/src/components/tasks/TasksContent.tsx b/src/components/tasks/TasksContent.tsx index 94765eccf..b6e078c86 100644 --- a/src/components/tasks/TasksContent.tsx +++ b/src/components/tasks/TasksContent.tsx @@ -3,7 +3,7 @@ import classNames from '@/styles/tasks.module.scss'; import { isUserAuthorizedContext } from '@/context/isUserAuthorized'; import updateTasksStatus from '@/helperFunctions/updateTasksStatus'; -import task, { Tab } from '@/interfaces/task.type'; +import task, { Tab, tasksCountObject } from '@/interfaces/task.type'; import { useContext, useState, useEffect } from 'react'; import { STATUS_ORDER } from '@/constants/task-status'; import { @@ -25,7 +25,21 @@ export const TasksContent = () => { const { isEditMode } = useEditMode(); const isUserAuthorized = useContext(isUserAuthorizedContext); const isEditable = isUserAuthorized && isEditMode; - const [activeTab, setActiveTab] = useState(Tab.IN_PROGRESS); + const [activeTab, setActiveTab] = useState(Tab.ASSIGNED); + + const startingTasksCount: tasksCountObject = { + ASSIGNED: 0, + COMPLETED: 0, + AVAILABLE: 0, + IN_PROGRESS: 0, + NEEDS_REVIEW: 0, + IN_REVIEW: 0, + VERIFIED: 0, + MERGED: 0, + }; + const [tasksCount, setTasksCount] = + useState(startingTasksCount); + // TODO: the below code should removed when mutation for updating tasks is implemented const [filteredTask, setFilteredTask] = useState([]); // TODO: the below code should removed when mutation for updating tasks is implemented @@ -37,9 +51,29 @@ export const TasksContent = () => { setActiveTab(tab); }; + function getTasksCount(passedTasksArray: task[]) { + const tasksCount: tasksCountObject = { + ASSIGNED: 0, + COMPLETED: 0, + AVAILABLE: 0, + IN_PROGRESS: 0, + NEEDS_REVIEW: 0, + IN_REVIEW: 0, + VERIFIED: 0, + MERGED: 0, + }; + passedTasksArray.forEach((task: task) => { + tasksCount[task.status as Tab] += 1; + }); + + return tasksCount; + } + // TODO: the useEffect should be removed when mutation for updating tasks is implemented useEffect(() => { if ('tasks' in response) { + const tasksCount = getTasksCount(response.tasks); + setTasksCount(tasksCount); const tasks = updateTasksStatus(response.tasks); tasks.sort((a: task, b: task) => +a.endsOn - +b.endsOn); tasks.sort( @@ -76,7 +110,11 @@ export const TasksContent = () => { return (
- +
{filteredTask[activeTab] ? ( Date: Mon, 26 Jun 2023 21:23:26 +0530 Subject: [PATCH 11/13] feat: include ui tab name changes --- __tests__/Unit/Components/Tabs/Tab.test.tsx | 2 +- src/components/Tabs/index.tsx | 2 +- src/components/tasks/TasksContent.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/__tests__/Unit/Components/Tabs/Tab.test.tsx b/__tests__/Unit/Components/Tabs/Tab.test.tsx index 8a9560442..8f2d42118 100644 --- a/__tests__/Unit/Components/Tabs/Tab.test.tsx +++ b/__tests__/Unit/Components/Tabs/Tab.test.tsx @@ -112,7 +112,7 @@ describe('Tabs Component', () => { // tasks count is rendered correctly on screen for (let i = 0; i < presentTabs.length; i++) { expect(presentTabs[i].textContent).toBe( - `${TABS[i]} (${mockTasksCount[TABS[i]]})` + `${changeName(TABS[i])} (${mockTasksCount[TABS[i]]})` ); } diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx index 71345503f..67f99e895 100644 --- a/src/components/Tabs/index.tsx +++ b/src/components/Tabs/index.tsx @@ -45,7 +45,7 @@ const Tabs = ({ tabs, onSelect, activeTab, tasksCount }: TabsProps) => { `} > {isFeatureFlagOn - ? `${tab} (${tasksCount[tab]})` + ? `${changeName(tab)} (${tasksCount[tab]})` : changeName(tab)} ))} diff --git a/src/components/tasks/TasksContent.tsx b/src/components/tasks/TasksContent.tsx index b6e078c86..054abe9ec 100644 --- a/src/components/tasks/TasksContent.tsx +++ b/src/components/tasks/TasksContent.tsx @@ -25,7 +25,7 @@ export const TasksContent = () => { const { isEditMode } = useEditMode(); const isUserAuthorized = useContext(isUserAuthorizedContext); const isEditable = isUserAuthorized && isEditMode; - const [activeTab, setActiveTab] = useState(Tab.ASSIGNED); + const [activeTab, setActiveTab] = useState(Tab.IN_PROGRESS); const startingTasksCount: tasksCountObject = { ASSIGNED: 0, From 2ac6d638a49f699da806f8870432b72ca2bbae31 Mon Sep 17 00:00:00 2001 From: kedar-hargude Date: Mon, 26 Jun 2023 22:02:35 +0530 Subject: [PATCH 12/13] refactor: create variable name for colours --- src/components/Tabs/Tabs.module.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss index 3368a0338..0f2810200 100644 --- a/src/components/Tabs/Tabs.module.scss +++ b/src/components/Tabs/Tabs.module.scss @@ -1,7 +1,11 @@ $theme-grey: #d4d4d5; +<<<<<<< HEAD $theme-grey-light: #f1f1f5; $gray-shade-color: #808080; $gray-shade-color2: #5c5b5b; +======= +$theme-dark-grey: #a1a5b7; +>>>>>>> e03a416 (refactor: create variable name for colours) $theme-pink: #e30062; .tabButton { @@ -38,7 +42,7 @@ $theme-pink: #e30062; font-size: 0.8em; border: none; cursor: pointer; - color: #a1a5b7; + color: $theme-dark-grey; } .featureFlagActiveTab { From 013651cddc6a737cc2d3a8ca06b71c89e7c57766 Mon Sep 17 00:00:00 2001 From: kedar-hargude Date: Thu, 29 Jun 2023 08:06:53 +0530 Subject: [PATCH 13/13] fix: conflict files --- src/components/Tabs/Tabs.module.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/Tabs/Tabs.module.scss b/src/components/Tabs/Tabs.module.scss index 0f2810200..6ea7c2ded 100644 --- a/src/components/Tabs/Tabs.module.scss +++ b/src/components/Tabs/Tabs.module.scss @@ -1,11 +1,8 @@ $theme-grey: #d4d4d5; -<<<<<<< HEAD $theme-grey-light: #f1f1f5; $gray-shade-color: #808080; $gray-shade-color2: #5c5b5b; -======= $theme-dark-grey: #a1a5b7; ->>>>>>> e03a416 (refactor: create variable name for colours) $theme-pink: #e30062; .tabButton {