From 363fff279cd20746502ca7d7db6260dc7e75c3bb Mon Sep 17 00:00:00 2001 From: Achintya Chatterjee <55826451+Achintya-Chatterjee@users.noreply.github.com> Date: Thu, 22 Aug 2024 02:13:41 +0530 Subject: [PATCH] Dev to Main Sync (#1233) * fix: assign text box alignment it would be be appearing where the name is * feat: Update TaskDetails component and fix test for assignee input - Updated TaskDetails component to include assignee input with a data-testid of 'assignee-input'. - Modified the test for rendering the assignee dropdown to correctly identify the assignee input field using the updated test ID. - Ensured the test checks for the presence of the assignee input field in edit mode. * refactor: make the superuser to false on test files * refactor: Reintroduce getExtensionRequestLink function to TaskDetails component - Added back the getExtensionRequestLink function to handle the extension request URL generation. - Updated the assignee handling in the render method to include suggestions for editing. - Maintained the isEditing and isUserAuthorized checks for showing the assignee input field. - Ensured the task extension request link is correctly generated and displayed in the Dates section. * fix: Resolve duplicate input field and suggestion box issues in TaskDetails - Fixed issue with duplicate input fields appearing in the Assignee section. - Ensured the suggestion box appears correctly below the Assignee input field. - Applied consistent styling to the Assignee input field and suggestion box. - Linked the label to the input field using the attribute. - Refactored the Assignee input and suggestion box to use the Suggestions component properly. * fix: classname to be more generic * refactor: test cases to use those old values * fix: Ensure consistent width for suggestion box and refactor styles - Updated suggestion box styles to maintain a consistent width relative to the input field - Ensured suggestion box width is set to 100% of its parent container - Adjusted styles for better visual consistency * Fix: Assignee text box alignment (#1225) * fix: assign text box alignment it would be be appearing where the name is * feat: Update TaskDetails component and fix test for assignee input - Updated TaskDetails component to include assignee input with a data-testid of 'assignee-input'. - Modified the test for rendering the assignee dropdown to correctly identify the assignee input field using the updated test ID. - Ensured the test checks for the presence of the assignee input field in edit mode. * refactor: make the superuser to false on test files * refactor: Reintroduce getExtensionRequestLink function to TaskDetails component - Added back the getExtensionRequestLink function to handle the extension request URL generation. - Updated the assignee handling in the render method to include suggestions for editing. - Maintained the isEditing and isUserAuthorized checks for showing the assignee input field. - Ensured the task extension request link is correctly generated and displayed in the Dates section. * fix: Resolve duplicate input field and suggestion box issues in TaskDetails - Fixed issue with duplicate input fields appearing in the Assignee section. - Ensured the suggestion box appears correctly below the Assignee input field. - Applied consistent styling to the Assignee input field and suggestion box. - Linked the label to the input field using the attribute. - Refactored the Assignee input and suggestion box to use the Suggestions component properly. * fix: classname to be more generic * refactor: test cases to use those old values * fix: Ensure consistent width for suggestion box and refactor styles - Updated suggestion box styles to maintain a consistent width relative to the input field - Ensured suggestion box width is set to 100% of its parent container - Adjusted styles for better visual consistency * Corrected loading issue and extra space in standup submit (#1230) Co-authored-by: Shubham Sharma * fix: prevent Status field from being displayed twice in TaskDetails component Refactored TaskDetails component to conditionally render either the TaskDropDown for editing or the Details component for viewing the status, ensuring the Status field is only displayed once depending on the editing state. * fix: prevent Status field from being displayed twice in TaskDetails component Refactored TaskDetails component to conditionally render either the TaskDropDown for editing or the Details component for viewing the status, ensuring the Status field is only displayed once depending on the editing state. * Fix: Assignee text box alignment (#1225) (#1228) (#1234) * Refactor else condition (#1240) * Corrected loading issue and extra space in standup submit * Fixed early return --------- Co-authored-by: Shubham Sharma --------- Co-authored-by: Amit Prakash <34869115+iamitprakash@users.noreply.github.com> Co-authored-by: Shubham Sharma <68867418+skv93-coder@users.noreply.github.com> Co-authored-by: Shubham Sharma --- .../Components/Standup/FormComponent.test.tsx | 47 ++++++++++++---- .../Unit/Components/Standup/MainForm.test.tsx | 48 ++++++++++++++++ .../Standup/StandupContainer.test.tsx | 6 -- src/components/standup/FormInputComponent.tsx | 33 ++++------- src/components/standup/MainForm.tsx | 16 ++++++ src/components/standup/index.tsx | 56 +++++++------------ src/components/taskDetails/index.tsx | 15 ++--- 7 files changed, 140 insertions(+), 81 deletions(-) create mode 100644 __tests__/Unit/Components/Standup/MainForm.test.tsx create mode 100644 src/components/standup/MainForm.tsx diff --git a/__tests__/Unit/Components/Standup/FormComponent.test.tsx b/__tests__/Unit/Components/Standup/FormComponent.test.tsx index bf5399b3a..2536fc268 100644 --- a/__tests__/Unit/Components/Standup/FormComponent.test.tsx +++ b/__tests__/Unit/Components/Standup/FormComponent.test.tsx @@ -7,6 +7,7 @@ import { Provider } from 'react-redux'; import { setupServer } from 'msw/node'; import { failedPostStandup } from '../../../../__mocks__/handlers/standup.handler'; import handlers from '../../../../__mocks__/handlers'; +import { cleanup } from '@testing-library/react'; const server = setupServer(...handlers); @@ -15,6 +16,9 @@ describe('FormComponent', () => { server.listen(); }); afterEach(() => { + cleanup(); + jest.clearAllMocks(); + jest.resetModules(); server.resetHandlers(); }); afterAll(() => { @@ -24,11 +28,7 @@ describe('FormComponent', () => { test('should be able to submit the standup form', async () => { const { container } = renderWithRouter( - { - true; - }} - /> + , { @@ -75,11 +75,7 @@ describe('FormComponent', () => { server.use(failedPostStandup); const { container } = renderWithRouter( - { - true; - }} - /> + , { @@ -119,4 +115,35 @@ describe('FormComponent', () => { ).toBeInTheDocument() ); }); + test('should disable the submit button after first click', async () => { + const { container } = renderWithRouter( + + + + , + { + asPath: '/standup', + replace: jest.fn(), + } + ); + + const YesterdayInptutField = screen.getByTestId('Yesterday0'); + fireEvent.change(YesterdayInptutField, { + target: { value: 'Working on a backend Go project1' }, + }); + + const todayInputField = screen.getByTestId('Today0'); + fireEvent.change(todayInputField, { + target: { value: 'Working on a live-site project' }, + }); + + const BlockerInputField = screen.getByTestId('Blocker0'); + fireEvent.change(BlockerInputField, { + target: { value: 'None' }, + }); + const submitButton = container.getElementsByClassName('submitButton'); + expect(submitButton[0]).not.toBeDisabled(); + fireEvent.submit(screen.getByRole('form')); + expect(submitButton[0]).toBeDisabled(); + }); }); diff --git a/__tests__/Unit/Components/Standup/MainForm.test.tsx b/__tests__/Unit/Components/Standup/MainForm.test.tsx new file mode 100644 index 000000000..a9458fb27 --- /dev/null +++ b/__tests__/Unit/Components/Standup/MainForm.test.tsx @@ -0,0 +1,48 @@ +import { setupServer } from 'msw/node'; +import handlers from '../../../../__mocks__/handlers'; +import MainForm from '@/components/standup/MainForm'; +import { renderWithRouter } from '@/test_utils/createMockRouter'; +import { Provider } from 'react-redux'; +import { store } from '@/app/store'; +import { screen, waitFor } from '@testing-library/react'; + +const server = setupServer(...handlers); + +describe('MainFOrm', () => { + beforeAll(() => { + server.listen(); + }); + afterEach(() => { + server.resetHandlers(); + }); + afterAll(() => { + server.close(); + }); + + test('If isFormVisible is true it should render form for standup. ', async () => { + renderWithRouter( + + + + ); + + await waitFor(() => + expect(screen.getByRole('form')).toBeInTheDocument() + ); + }); + test('If isFormVisible is false it should render form for standup. ', async () => { + renderWithRouter( + + + + ); + + await waitFor(() => + expect( + screen.getByText( + 'Your standup for the day has already been submitted, please fill out the form tomorrow after 6:00 a.m.' + ) + ).toBeInTheDocument() + ); + }); +}); diff --git a/__tests__/Unit/Components/Standup/StandupContainer.test.tsx b/__tests__/Unit/Components/Standup/StandupContainer.test.tsx index 83f5b0698..6549dcb3a 100644 --- a/__tests__/Unit/Components/Standup/StandupContainer.test.tsx +++ b/__tests__/Unit/Components/Standup/StandupContainer.test.tsx @@ -61,7 +61,6 @@ describe('StandupContainer', () => { replace: jest.fn(), } ); - const addButton = container.getElementsByClassName('addButton'); const removeButton = container.getElementsByClassName('removeButton'); const YesterdayInptutField = screen.getByTestId('Yesterday0'); @@ -96,11 +95,6 @@ describe('StandupContainer', () => { expect( screen.getByText('User Progress document created successfully.') ).toBeInTheDocument(); - expect( - screen.getByText( - 'Your standup for the day has already been submitted, please fill out the form tomorrow after 6:00 a.m.' - ) - ).toBeInTheDocument(); }); }); }); diff --git a/src/components/standup/FormInputComponent.tsx b/src/components/standup/FormInputComponent.tsx index 290b38c62..3e19641c4 100644 --- a/src/components/standup/FormInputComponent.tsx +++ b/src/components/standup/FormInputComponent.tsx @@ -1,26 +1,18 @@ -import { FC, useState } from 'react'; +import { useState } from 'react'; import { useRouter } from 'next/router'; import { useSaveProgressMutation } from '@/app/services/progressesApi'; import { toast, ToastTypes } from '@/helperFunctions/toast'; import styles from '@/components/standup/standupContainer.module.scss'; import SectionComponent from './SectionComponent'; -const intialSection = [ - { title: 'Yesterday', inputs: [''] }, - { title: 'Today', inputs: [''] }, - { title: 'Blocker', inputs: [''] }, -]; - -interface setIsFormVisibleProps { - setIsFormVisible: React.Dispatch>; -} - -const FormInputComponent: FC = ({ - setIsFormVisible, -}) => { +const FormInputComponent = () => { const router = useRouter(); - const [sections, setSections] = useState(intialSection); - const [addStandup] = useSaveProgressMutation(); + const [sections, setSections] = useState([ + { title: 'Yesterday', inputs: [''] }, + { title: 'Today', inputs: [''] }, + { title: 'Blocker', inputs: [''] }, + ]); + const [addStandup, { isLoading }] = useSaveProgressMutation(); const { SUCCESS, ERROR } = ToastTypes; const handleAddField = (sectionIndex: number) => { @@ -60,11 +52,10 @@ const FormInputComponent: FC = ({ e.preventDefault(); const newData = { type: 'user', - completed: sections[0].inputs.join('.'), - planned: sections[1].inputs.join('. '), - blockers: sections[2].inputs.join('. '), + completed: sections[0].inputs.join(' ').trim(), + planned: sections[1].inputs.join(' ').trim(), + blockers: sections[2].inputs.join(' ').trim(), }; - setIsFormVisible(false); await addStandup(newData) .unwrap() .then((data) => { @@ -100,7 +91,7 @@ const FormInputComponent: FC = ({ ))}