diff --git a/src/components/Office/AddOrdersForm/AddOrdersForm.jsx b/src/components/Office/AddOrdersForm/AddOrdersForm.jsx index 1ce24a86f18..0b8a9ce3d99 100644 --- a/src/components/Office/AddOrdersForm/AddOrdersForm.jsx +++ b/src/components/Office/AddOrdersForm/AddOrdersForm.jsx @@ -57,6 +57,9 @@ const AddOrdersForm = ({ .required('Required'), hasDependents: Yup.mixed().oneOf(['yes', 'no']).required('Required'), originDutyLocation: Yup.object().nullable().required('Required'), + counselingOfficeId: currentDutyLocation.provides_services_counseling + ? Yup.string().required('Required') + : Yup.string().notRequired(), newDutyLocation: Yup.object().nullable().required('Required'), grade: Yup.mixed().oneOf(Object.keys(ORDERS_PAY_GRADE_OPTIONS)).required('Required'), accompaniedTour: showAccompaniedTourField @@ -193,9 +196,10 @@ const AddOrdersForm = ({ handleOrderTypeChange(e); }} isDisabled={isSafetyMoveSelected || isBluebarkMoveSelected} + hint="Required" /> - - + + {currentDutyLocation.provides_services_counseling && (
@@ -256,6 +261,7 @@ const AddOrdersForm = ({ displayAddress={false} placeholder="Enter a city or ZIP" metaOverride={newDutyMeta} + hint="Required" onDutyLocationChange={(e) => { setNewDutyLocation(e); }} @@ -266,6 +272,7 @@ const AddOrdersForm = ({ name="newDutyLocation" label="New duty location" required + hint="Required" metaOverride={newDutyMeta} onDutyLocationChange={(e) => { setNewDutyLocation(e); @@ -274,7 +281,7 @@ const AddOrdersForm = ({ )} - +
- +
)} - +
diff --git a/src/components/Office/AddOrdersForm/AddOrdersForm.test.jsx b/src/components/Office/AddOrdersForm/AddOrdersForm.test.jsx index d0472b27fb5..01757df1bef 100644 --- a/src/components/Office/AddOrdersForm/AddOrdersForm.test.jsx +++ b/src/components/Office/AddOrdersForm/AddOrdersForm.test.jsx @@ -149,15 +149,15 @@ describe('CreateMoveCustomerInfo Component', () => { await waitFor(() => { expect(screen.getByText('Tell us about the orders')).toBeInTheDocument(); - expect(screen.getByLabelText('Orders type')).toBeInTheDocument(); - expect(screen.getByLabelText('Orders date')).toBeInTheDocument(); - expect(screen.getByLabelText('Report by date')).toBeInTheDocument(); - expect(screen.getByText('Are dependents included in the orders?')).toBeInTheDocument(); + expect(screen.getByLabelText(/Orders type/)).toBeInTheDocument(); + expect(screen.getByLabelText(/Orders date/)).toBeInTheDocument(); + expect(screen.getByLabelText(/Report by date/)).toBeInTheDocument(); + expect(screen.getByText(/Are dependents included in the orders?/)).toBeInTheDocument(); expect(screen.getByTestId('hasDependentsYes')).toBeInTheDocument(); expect(screen.getByTestId('hasDependentsNo')).toBeInTheDocument(); - expect(screen.getByLabelText('Current duty location')).toBeInTheDocument(); - expect(screen.getByLabelText('New duty location')).toBeInTheDocument(); - expect(screen.getByLabelText('Pay grade')).toBeInTheDocument(); + expect(screen.getByLabelText(/Current duty location/)).toBeInTheDocument(); + expect(screen.getByLabelText(/New duty location/)).toBeInTheDocument(); + expect(screen.getByLabelText(/Pay grade/)).toBeInTheDocument(); }); }); @@ -170,7 +170,7 @@ describe('CreateMoveCustomerInfo Component', () => { , ); - const ordersTypeDropdown = getByLabelText('Orders type'); + const ordersTypeDropdown = getByLabelText(/Orders type/); expect(ordersTypeDropdown).toBeInstanceOf(HTMLSelectElement); await userEvent.selectOptions(ordersTypeDropdown, ORDERS_TYPE.PERMANENT_CHANGE_OF_STATION); @@ -201,12 +201,12 @@ describe('CreateMoveCustomerInfo Component', () => { , ); - await userEvent.click(getByLabelText('Orders type')); - await userEvent.click(getByLabelText('Orders date')); - await userEvent.click(getByLabelText('Report by date')); - await userEvent.click(getByLabelText('Current duty location')); - await userEvent.click(getByLabelText('New duty location')); - await userEvent.click(getByLabelText('Pay grade')); + await userEvent.click(getByLabelText(/Orders type/)); + await userEvent.click(getByLabelText(/Orders date/)); + await userEvent.click(getByLabelText(/Report by date/)); + await userEvent.click(getByLabelText(/Current duty location/)); + await userEvent.click(getByLabelText(/New duty location/)); + await userEvent.click(getByLabelText(/Pay grade/)); const submitBtn = getByRole('button', { name: 'Next' }); await userEvent.click(submitBtn); @@ -261,27 +261,6 @@ describe('AddOrdersForm - OCONUS and Accompanied Tour Test', () => { }); }); -describe('AddOrdersForm - Edge Cases and Additional Scenarios', () => { - it('disables orders type when safety move is selected', async () => { - render( - - - , - ); - - expect(screen.getByLabelText('Orders type')).toBeDisabled(); - }); - - it('disables orders type when bluebark move is selected', async () => { - render( - - - , - ); - expect(screen.getByLabelText('Orders type')).toBeDisabled(); - }); -}); - describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () => { it('has dependents is yes and disabled when order type is student travel', async () => { isBooleanFlagEnabled.mockImplementation(() => Promise.resolve(true)); @@ -292,7 +271,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = , ); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.STUDENT_TRAVEL); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.STUDENT_TRAVEL); const hasDependentsYes = screen.getByLabelText('Yes'); const hasDependentsNo = screen.getByLabelText('No'); @@ -313,7 +292,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = , ); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.EARLY_RETURN_OF_DEPENDENTS); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.EARLY_RETURN_OF_DEPENDENTS); const hasDependentsYes = screen.getByLabelText('Yes'); const hasDependentsNo = screen.getByLabelText('No'); @@ -333,7 +312,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = , ); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.PERMANENT_CHANGE_OF_STATION); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.PERMANENT_CHANGE_OF_STATION); const hasDependentsYesPermChg = screen.getByLabelText('Yes'); const hasDependentsNoPermChg = screen.getByLabelText('No'); @@ -346,7 +325,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = }); // set order type to value that disables and defaults "has dependents" - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.STUDENT_TRAVEL); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.STUDENT_TRAVEL); const hasDependentsYesStudent = screen.getByLabelText('Yes'); const hasDependentsNoStudent = screen.getByLabelText('No'); @@ -358,7 +337,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = }); // set order type to value the re-enables "has dependents" - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.LOCAL_MOVE); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.LOCAL_MOVE); const hasDependentsYesLocalMove = screen.getByLabelText('Yes'); const hasDependentsNoLocalMove = screen.getByLabelText('No'); @@ -380,7 +359,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = , ); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.PERMANENT_CHANGE_OF_STATION); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.PERMANENT_CHANGE_OF_STATION); const hasDependentsYesPermChg = screen.getByLabelText('Yes'); const hasDependentsNoPermChg = screen.getByLabelText('No'); @@ -393,7 +372,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = }); // set order type to value that disables and defaults "has dependents" - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.EARLY_RETURN_OF_DEPENDENTS); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.EARLY_RETURN_OF_DEPENDENTS); const hasDependentsYesEarly = screen.getByLabelText('Yes'); const hasDependentsNoEarly = screen.getByLabelText('No'); @@ -405,7 +384,7 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = }); // set order type to value the re-enables "has dependents" - await userEvent.selectOptions(screen.getByLabelText('Orders type'), ORDERS_TYPE.LOCAL_MOVE); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), ORDERS_TYPE.LOCAL_MOVE); const hasDependentsYesLocalMove = screen.getByLabelText('Yes'); const hasDependentsNoLocalMove = screen.getByLabelText('No'); @@ -419,6 +398,27 @@ describe('AddOrdersForm - Student Travel, Early Return of Dependents Test', () = }); }); +describe('AddOrdersForm - Edge Cases and Additional Scenarios', () => { + it('disables orders type when safety move is selected', async () => { + render( + + + , + ); + + expect(screen.getByLabelText(/Orders type/)).toBeDisabled(); + }); + + it('disables orders type when bluebark move is selected', async () => { + render( + + + , + ); + expect(screen.getByLabelText(/Orders type/)).toBeDisabled(); + }); +}); + describe('AddOrdersForm - With Counseling Office', () => { it('displays the counseling office dropdown', async () => { isBooleanFlagEnabled.mockImplementation(() => Promise.resolve(true)); @@ -452,24 +452,36 @@ describe('AddOrdersForm - With Counseling Office', () => { const nextBtn = screen.getByRole('button', { name: 'Next' }); expect(nextBtn.getAttribute('disabled')).toBeFalsy(); }); -}); -describe('AddOrdersForm - Edge Cases and Additional Scenarios', () => { - it('disables orders type when safety move is selected', async () => { + + it('disabled submit if counseling office is required and blank', async () => { + isBooleanFlagEnabled.mockImplementation(() => Promise.resolve(true)); render( - + , ); - expect(screen.getByLabelText('Orders type')).toBeDisabled(); - }); + await userEvent.selectOptions(await screen.findByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await userEvent.type(screen.getByLabelText(/Orders date/), '08 Nov 2024'); + await userEvent.type(screen.getByLabelText(/Report by date/), '26 Nov 2024'); - it('disables orders type when bluebark move is selected', async () => { - render( - - - , - ); - expect(screen.getByLabelText('Orders type')).toBeDisabled(); + // Test Current Duty Location Search Box interaction + await userEvent.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 100 }); + const selectedOptionCurrent = await screen.findByText(/Scott/); + await userEvent.click(selectedOptionCurrent); + + // Test New Duty Location Search Box interaction + await userEvent.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 100 }); + const selectedOptionNew = await screen.findByText(/Luke/); + await userEvent.click(selectedOptionNew); + + const counselingOfficeLabel = await screen.queryByText(/Counseling office/); + expect(counselingOfficeLabel).toBeTruthy(); // If the field is visible then it it required + + await userEvent.selectOptions(screen.getByLabelText(/Pay grade/), ['E_5']); + await userEvent.click(screen.getByLabelText('No')); + + const nextBtn = await screen.getByRole('button', { name: 'Next' }, { delay: 100 }); + expect(nextBtn).toBeDisabled(); }); }); diff --git a/src/pages/Office/ServicesCounselingAddOrders/ServicesCounselingAddOrders.test.jsx b/src/pages/Office/ServicesCounselingAddOrders/ServicesCounselingAddOrders.test.jsx index a0accc4b2db..8d2cc7a2fb8 100644 --- a/src/pages/Office/ServicesCounselingAddOrders/ServicesCounselingAddOrders.test.jsx +++ b/src/pages/Office/ServicesCounselingAddOrders/ServicesCounselingAddOrders.test.jsx @@ -357,21 +357,21 @@ describe('ServicesCounselingAddOrders component', () => { const user = userEvent.setup(); - await user.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await user.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await user.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await user.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await user.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await user.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await user.click(screen.getByLabelText('No')); - await user.selectOptions(screen.getByLabelText('Pay grade'), ['E-5']); + await user.selectOptions(screen.getByLabelText(/Pay grade/), ['E-5']); // Test Current Duty Location Search Box interaction - await user.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 500 }); + await user.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 500 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await user.click(selectedOptionCurrent); const counselingOfficeLabel = await screen.queryByText(/Counseling office/); expect(counselingOfficeLabel).toBeFalsy(); - await user.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 500 }); + await user.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 500 }); const selectedOptionNew = await screen.findByText(/Luke/); await user.click(selectedOptionNew); @@ -395,14 +395,14 @@ describe('ServicesCounselingAddOrders component', () => { const user = userEvent.setup(); - await user.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await user.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await user.type(screen.getByLabelText('Report by date'), '29 Nov 2020'); + await user.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await user.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await user.type(screen.getByLabelText(/Report by date/), '29 Nov 2020'); await user.click(screen.getByLabelText('No')); - await user.selectOptions(screen.getByLabelText('Pay grade'), ['E-5']); + await user.selectOptions(screen.getByLabelText(/Pay grade/), ['E-5']); // Test Current Duty Location Search Box interaction - await user.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 500 }); + await user.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 500 }); const selectedOptionCurrent = await screen.findByText(/Hill/); await user.click(selectedOptionCurrent); @@ -411,7 +411,7 @@ describe('ServicesCounselingAddOrders component', () => { await userEvent.selectOptions(screen.getByLabelText(/Counseling office/), ['Glendale Luke AFB']); - await user.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 500 }); + await user.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 500 }); const selectedOptionNew = await screen.findByText(/Luke/); await user.click(selectedOptionNew); @@ -429,17 +429,17 @@ describe('ServicesCounselingAddOrders component', () => { const user = userEvent.setup(); - await user.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await user.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await user.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await user.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await user.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await user.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await user.click(screen.getByLabelText('No')); - await user.selectOptions(screen.getByLabelText('Pay grade'), ['E-5']); + await user.selectOptions(screen.getByLabelText(/Pay grade/), ['E-5']); - await user.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 500 }); + await user.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 500 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await user.click(selectedOptionCurrent); - await user.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 500 }); + await user.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 500 }); const selectedOptionNew = await screen.findByText(/Outta This World/); await user.click(selectedOptionNew);