B 21977 INT Part 2 - Fix Office User Select Counseling Office Validation

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"
               />
-              <DatePickerInput name="issueDate" label="Orders date" required />
-              <DatePickerInput name="reportByDate" label="Report by date" required />
+              <DatePickerInput name="issueDate" label="Orders date" required hint="Required" />
+              <DatePickerInput name="reportByDate" label="Report by date" required hint="Required" />
 
               <DutyLocationInput
                 label="Current duty location"
@@ -207,6 +211,7 @@ const AddOrdersForm = ({
                 }}
                 metaOverride={originMeta}
                 required
+                hint="Required"
               />
               {currentDutyLocation.provides_services_counseling && (
                 <div>
@@ -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 = ({
               )}
 
               <FormGroup>
-                <Label>Are dependents included in the orders?</Label>
+                <Label hint="Required">Are dependents included in the orders?</Label>
                 <div>
                   <Field
                     as={Radio}
@@ -309,7 +316,7 @@ const AddOrdersForm = ({
 
               {showAccompaniedTourField && (
                 <FormGroup>
-                  <Label>Is this an accompanied tour?</Label>
+                  <Label hint="Required">Is this an accompanied tour?</Label>
                   <div>
                     <div className={styles.radioWithToolTip}>
                       <Field
@@ -383,7 +390,14 @@ const AddOrdersForm = ({
                 </FormGroup>
               )}
 
-              <DropdownInput label="Pay grade" name="grade" id="grade" required options={payGradeOptions} />
+              <DropdownInput
+                label="Pay grade"
+                name="grade"
+                id="grade"
+                required
+                options={payGradeOptions}
+                hint="Required"
+              />
             </SectionWrapper>
 
             <div className={formStyles.formActions}>

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', () => {
       </Provider>,
     );
 
-    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', () => {
         <AddOrdersForm {...testProps} />
       </Provider>,
     );
-    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(
-      <Provider store={mockStore.store}>
-        <AddOrdersForm {...testProps} isSafetyMoveSelected />
-      </Provider>,
-    );
-
-    expect(screen.getByLabelText('Orders type')).toBeDisabled();
-  });
-
-  it('disables orders type when bluebark move is selected', async () => {
-    render(
-      <Provider store={mockStore.store}>
-        <AddOrdersForm {...testProps} isBluebarkMoveSelected />
-      </Provider>,
-    );
-    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', () =
       </Provider>,
     );
 
-    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', () =
       </Provider>,
     );
 
-    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', () =
       </Provider>,
     );
 
-    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', () =
       </Provider>,
     );
 
-    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(
+      <Provider store={mockStore.store}>
+        <AddOrdersForm {...testProps} isSafetyMoveSelected />
+      </Provider>,
+    );
+
+    expect(screen.getByLabelText(/Orders type/)).toBeDisabled();
+  });
+
+  it('disables orders type when bluebark move is selected', async () => {
+    render(
+      <Provider store={mockStore.store}>
+        <AddOrdersForm {...testProps} isBluebarkMoveSelected />
+      </Provider>,
+    );
+    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(
       <Provider store={mockStore.store}>
-        <AddOrdersForm {...testProps} isSafetyMoveSelected />
+        <AddOrdersForm {...testProps} />
       </Provider>,
     );
 
-    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(
-      <Provider store={mockStore.store}>
-        <AddOrdersForm {...testProps} isBluebarkMoveSelected />
-      </Provider>,
-    );
-    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();
   });
 });

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);