From 89e3a612a4599d3ac3b5a3284962107ab553bf0e Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Fri, 30 Aug 2024 14:06:53 -0400 Subject: [PATCH 1/4] Merge MAIN-B-19226-redo into INT-B-19226-redo --- migrations/app/migrations_manifest.txt | 1 - .../servicesCounselingTestFixture.js | 4 +- .../BackupAddressForm/BackupAddressForm.jsx | 1 + .../BackupAddressForm.test.jsx | 8 +- .../BackupContactForm.stories.jsx | 8 +- .../BackupContactForm.test.jsx | 34 +-- .../Customer/BackupContactForm/index.jsx | 2 +- .../BoatShipmentForm/BoatShipmentForm.jsx | 9 +- .../BoatShipmentForm.module.scss | 2 +- .../ContactInfoForm/ContactInfoForm.test.jsx | 36 ++-- .../Customer/ContactInfoForm/index.jsx | 2 +- .../Customer/DodInfoForm/DodInfoForm.jsx | 3 + .../Customer/DodInfoForm/DodInfoForm.test.jsx | 36 ++-- .../EditContactInfoForm.jsx | 35 ++- .../EditContactInfoForm.test.jsx | 18 +- .../EditOrdersForm/EditOrdersForm.jsx | 51 +++-- .../EditOrdersForm/EditOrdersForm.test.jsx | 54 ++--- .../MtoShipmentForm/MtoShipmentForm.jsx | 22 +- .../MtoShipmentForm/MtoShipmentForm.test.jsx | 201 +++++++++--------- src/components/Customer/NameForm/NameForm.jsx | 8 +- .../Customer/NameForm/NameForm.test.jsx | 16 +- .../OrdersInfoForm/OrdersInfoForm.jsx | 38 ++-- .../OrdersInfoForm/OrdersInfoForm.test.jsx | 60 +++--- .../PPM/Booking/Advance/AdvanceForm.jsx | 1 + .../PPM/Booking/Advance/AdvanceForm.test.jsx | 12 +- .../DateAndLocationForm.jsx | 23 +- .../DateAndLocationForm.test.jsx | 70 +++--- .../EstimatedWeightsProGearForm.jsx | 5 + .../EstimatedWeightsProGearForm.test.jsx | 18 +- .../PPM/Closeout/AboutForm/AboutForm.jsx | 7 +- .../PPM/Closeout/AboutForm/AboutForm.test.jsx | 54 ++--- .../PPM/Closeout/ExpenseForm/ExpenseForm.jsx | 4 +- src/components/Customer/PPM/PPM.module.scss | 21 +- .../ResidentialAddressForm.jsx | 1 + .../ResidentialAddressForm.test.jsx | 13 +- .../ServiceInfoForm/ServiceInfoForm.jsx | 4 +- .../LocationSearchBox/LocationSearchBox.jsx | 7 +- .../EditBillableWeight/EditBillableWeight.jsx | 2 - .../EditBillableWeight.test.jsx | 10 +- .../EditFacilityInfoModal.test.jsx | 2 +- .../Office/ShipmentForm/ShipmentForm.test.jsx | 4 +- .../ShipmentWeightInput.test.jsx | 9 +- .../StorageFacilityAddress.test.jsx | 2 +- .../StorageFacilityInfo.test.jsx | 4 +- .../form/AddressFields/AddressFields.jsx | 6 +- .../form/AddressFields/AddressFields.test.jsx | 24 +-- .../form/BackupContactInfoFields/index.jsx | 12 +- .../ContactInfoFields/ContactInfoFields.jsx | 21 +- .../CustomerAltContactInfoFields/index.jsx | 14 +- .../CustomerContactInfoFields.stories.jsx | 2 +- .../form/CustomerContactInfoFields/index.jsx | 11 +- .../form/fields/DatePickerInput.jsx | 6 +- src/components/form/fields/DropdownInput.jsx | 20 +- .../form/fields/DutyLocationInput.jsx | 18 +- .../form/fields/DutyLocationInput.test.jsx | 26 ++- .../MaskedTextField/MaskedTextField.jsx | 4 +- .../form/fields/TextField/TextField.jsx | 4 +- src/pages/MyMove/AddOrders.test.jsx | 24 +-- .../BoatShipmentLocationInfo.test.jsx | 28 +-- .../MobileHomeShipmentLocationInfo.test.jsx | 10 +- src/pages/MyMove/Orders.test.jsx | 8 +- .../PPM/Booking/Advance/Advance.test.jsx | 18 +- .../DateAndLocation/DateAndLocation.test.jsx | 34 +-- .../MyMove/PPM/Closeout/About/About.test.jsx | 36 ++-- .../MyMove/Profile/BackupContact.test.jsx | 12 +- .../MyMove/Profile/EditContactInfo.test.jsx | 4 +- .../CustomerOnboarding/CreateCustomerForm.jsx | 18 +- ...icesCounselingEditShipmentDetails.test.jsx | 6 +- .../PrimeUIShipmentUpdateAddressForm.test.jsx | 10 +- ...pmentUpdateDestinationAddressForm.test.jsx | 8 +- 70 files changed, 694 insertions(+), 612 deletions(-) diff --git a/migrations/app/migrations_manifest.txt b/migrations/app/migrations_manifest.txt index 9698bf10bcb..60eac35540a 100644 --- a/migrations/app/migrations_manifest.txt +++ b/migrations/app/migrations_manifest.txt @@ -997,4 +997,3 @@ 20240820151043_add_gsr_role.up.sql 20240821180447_populating_locked_price_cents_for_ms_and_cs.up.sql 20240822180409_adding_locked_price_cents_service_param.up.sql -20240820151043_add_gsr_role.up.sql diff --git a/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js b/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js index 1174d4830cd..cd24ca642ca 100644 --- a/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js +++ b/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js @@ -159,7 +159,7 @@ export class ServiceCounselorPage extends OfficePage { // Storage facility address const storageAddress = await this.page.getByRole('heading', { name: 'Storage facility address' }).locator('..'); - await storageAddress.getByLabel('Address 1').fill('148 S East St'); + await storageAddress.getByLabel(/Address 1/).fill('148 S East St'); await storageAddress.getByLabel('Address 2').fill('Suite 7A'); await storageAddress.getByLabel('City').fill('Sample City'); await storageAddress.getByLabel('State').selectOption({ label: 'GA' }); @@ -172,7 +172,7 @@ export class ServiceCounselorPage extends OfficePage { // Delivery location const deliveryLocation = await this.page.getByRole('group', { name: 'Delivery location' }); - await deliveryLocation.getByLabel('Address 1').fill('448 Washington Blvd NE'); + await deliveryLocation.getByLabel(/Address 1/).fill('448 Washington Blvd NE'); await deliveryLocation.getByLabel('Address 2').fill('Apt D3'); await deliveryLocation.getByLabel('City').fill('Another City'); await deliveryLocation.getByLabel('State').selectOption({ label: 'AL' }); diff --git a/src/components/Customer/BackupAddressForm/BackupAddressForm.jsx b/src/components/Customer/BackupAddressForm/BackupAddressForm.jsx index f6593c3466b..7507cdd1ac4 100644 --- a/src/components/Customer/BackupAddressForm/BackupAddressForm.jsx +++ b/src/components/Customer/BackupAddressForm/BackupAddressForm.jsx @@ -59,6 +59,7 @@ const BackupAddressForm = ({ formFieldsName, initialValues, onSubmit, onBack }) { const { getByLabelText } = render(); await waitFor(() => { - expect(getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement); expect(getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement); @@ -59,13 +59,13 @@ describe('BackupAddressForm component', () => { expect(getByLabelText('State')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('ZIP')).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/ZIP/)).toBeInstanceOf(HTMLInputElement); }); }); it('shows an error message if trying to submit an invalid form', async () => { const { getByRole, findAllByRole, getByLabelText } = render(); - await userEvent.click(getByLabelText('Address 1')); + await userEvent.click(getByLabelText(/Address 1/)); await userEvent.click(getByLabelText(/Address 2/)); const submitBtn = getByRole('button', { name: 'Next' }); @@ -85,7 +85,7 @@ describe('BackupAddressForm component', () => { const { getByRole, getByLabelText } = render(); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.type(getByLabelText('Address 1'), fakeAddress.streetAddress1); + await userEvent.type(getByLabelText(/Address 1/), fakeAddress.streetAddress1); await userEvent.type(getByLabelText(/Address 2/), fakeAddress.streetAddress2); await userEvent.tab(); diff --git a/src/components/Customer/BackupContactForm/BackupContactForm.stories.jsx b/src/components/Customer/BackupContactForm/BackupContactForm.stories.jsx index 8ff7a0b13b3..60a1e96b6e0 100644 --- a/src/components/Customer/BackupContactForm/BackupContactForm.stories.jsx +++ b/src/components/Customer/BackupContactForm/BackupContactForm.stories.jsx @@ -18,7 +18,12 @@ const emptyInitialValues = { }; export const DefaultState = (argTypes) => ( - + ); export const WithInitialValues = (argTypes) => ( @@ -30,5 +35,6 @@ export const WithInitialValues = (argTypes) => ( }} onSubmit={argTypes.onSubmit} onBack={argTypes.onBack} + labelHint="Required" /> ); diff --git a/src/components/Customer/BackupContactForm/BackupContactForm.test.jsx b/src/components/Customer/BackupContactForm/BackupContactForm.test.jsx index eac8a486ae6..d948f63c8e2 100644 --- a/src/components/Customer/BackupContactForm/BackupContactForm.test.jsx +++ b/src/components/Customer/BackupContactForm/BackupContactForm.test.jsx @@ -20,18 +20,18 @@ describe('BackupContactForm Component', () => { const { getByLabelText } = render(); await waitFor(() => { - expect(getByLabelText('Name')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Name')).toBeRequired(); - expect(getByLabelText('Phone')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Phone')).toBeRequired(); - expect(getByLabelText('Email')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Email')).toBeRequired(); + expect(getByLabelText(/Name/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Name/)).toBeRequired(); + expect(getByLabelText(/Phone/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Phone/)).toBeRequired(); + expect(getByLabelText(/Email/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Email/)).toBeRequired(); }); }); it('validates the contact phone field', async () => { const { getByText, getByLabelText } = render(); - await userEvent.type(getByLabelText('Phone'), '12345'); + await userEvent.type(getByLabelText(/Phone/), '12345'); await userEvent.tab(); await waitFor(() => { @@ -43,7 +43,7 @@ describe('BackupContactForm Component', () => { it('validates the email field', async () => { const { getByText, getByLabelText } = render(); - await userEvent.type(getByLabelText('Email'), 'sample@'); + await userEvent.type(getByLabelText(/Email/), 'sample@'); await userEvent.tab(); await waitFor(() => { @@ -56,9 +56,9 @@ describe('BackupContactForm Component', () => { const submitBtn = getByRole('button', { name: 'Next' }); // Touch all of the required fields so that they show error messages - await userEvent.click(getByLabelText('Name')); - await userEvent.click(getByLabelText('Phone')); - await userEvent.click(getByLabelText('Email')); + await userEvent.click(getByLabelText(/Name/)); + await userEvent.click(getByLabelText(/Phone/)); + await userEvent.click(getByLabelText(/Email/)); await userEvent.click(submitBtn); await waitFor(() => { @@ -72,9 +72,9 @@ describe('BackupContactForm Component', () => { const { getByRole, getByLabelText } = render(); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.type(getByLabelText('Name'), 'Joe Schmoe'); - await userEvent.type(getByLabelText('Phone'), '555-555-5555'); - await userEvent.type(getByLabelText('Email'), 'test@sample.com'); + await userEvent.type(getByLabelText(/Name/), 'Joe Schmoe'); + await userEvent.type(getByLabelText(/Phone/), '555-555-5555'); + await userEvent.type(getByLabelText(/Email/), 'test@sample.com'); await userEvent.click(submitBtn); await waitFor(() => { @@ -86,9 +86,9 @@ describe('BackupContactForm Component', () => { const { getByRole, getByLabelText } = render(); const backBtn = getByRole('button', { name: 'Back' }); - await userEvent.type(getByLabelText('Name'), 'Janey Profaney'); - await userEvent.type(getByLabelText('Phone'), '555-555-1111'); - await userEvent.click(getByLabelText('Email')); + await userEvent.type(getByLabelText(/Name/), 'Janey Profaney'); + await userEvent.type(getByLabelText(/Phone/), '555-555-1111'); + await userEvent.click(getByLabelText(/Email/)); await userEvent.click(backBtn); await waitFor(() => { diff --git a/src/components/Customer/BackupContactForm/index.jsx b/src/components/Customer/BackupContactForm/index.jsx index bb6978d156b..e24bdf8d73e 100644 --- a/src/components/Customer/BackupContactForm/index.jsx +++ b/src/components/Customer/BackupContactForm/index.jsx @@ -27,7 +27,7 @@ const BackupContactForm = ({ initialValues, onSubmit, onBack }) => {

- +
diff --git a/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx b/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx index 3436e04d027..6593aa33a18 100644 --- a/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx +++ b/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx @@ -7,6 +7,7 @@ import classnames from 'classnames'; import styles from './BoatShipmentForm.module.scss'; +import RequiredTag from 'components/form/RequiredTag'; import SectionWrapper from 'components/Customer/SectionWrapper'; import Hint from 'components/Hint'; import Fieldset from 'shared/Fieldset'; @@ -17,7 +18,6 @@ import MaskedTextField from 'components/form/fields/MaskedTextField/MaskedTextFi import Callout from 'components/Callout'; import { ErrorMessage } from 'components/form/index'; import { convertInchesToFeetAndInches } from 'utils/formatMtoShipment'; -import RequiredTag from 'components/form/RequiredTag'; const currentYear = new Date().getFullYear(); const maxYear = currentYear + 2; @@ -126,6 +126,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { name="year" label="Year" id="year" + labelHint="Required" maxLength={4} mask={Number} scale={0} @@ -144,8 +145,8 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
- - + +
@@ -282,6 +283,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {

Trailer Status

Does the boat have a trailer? + { {values.hasTrailer === 'true' && (
Is the trailer roadworthy? + { const { getByLabelText } = render(); await waitFor(() => { - expect(getByLabelText('Best contact phone')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Best contact phone')).toBeRequired(); + expect(getByLabelText(/Best contact phone/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Best contact phone/)).toBeRequired(); expect(getByLabelText(/Alt. phone/)).toBeInstanceOf(HTMLInputElement); expect(getByLabelText(/Alt. phone/)).not.toBeRequired(); - expect(getByLabelText('Personal email')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Personal email')).toBeRequired(); - expect(getByLabelText('Phone')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Email')).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Personal email/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Personal email/)).toBeRequired(); + expect(getByLabelText(/Phone/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Email/)).toBeInstanceOf(HTMLInputElement); }); }); it('validates the contact phone field', async () => { const { getByText, getByLabelText } = render(); - await userEvent.type(getByLabelText('Best contact phone'), '12345'); + await userEvent.type(getByLabelText(/Best contact phone/), '12345'); await userEvent.tab(); await waitFor(() => { @@ -59,7 +59,7 @@ describe('ContactInfoForm Component', () => { it('validates the email field', async () => { const { getByText, getByLabelText } = render(); - await userEvent.type(getByLabelText('Personal email'), 'sample@'); + await userEvent.type(getByLabelText(/Personal email/), 'sample@'); await userEvent.tab(); await waitFor(() => { @@ -70,8 +70,8 @@ describe('ContactInfoForm Component', () => { it('shows an error message when trying to submit an invalid form', async () => { const { getAllByTestId, getByRole, getByLabelText } = render(); // Touch required fields to show validation errors - await userEvent.click(getByLabelText('Best contact phone')); - await userEvent.click(getByLabelText('Personal email')); + await userEvent.click(getByLabelText(/Best contact phone/)); + await userEvent.click(getByLabelText(/Personal email/)); const submitBtn = getByRole('button', { name: 'Next' }); await userEvent.click(submitBtn); @@ -87,8 +87,8 @@ describe('ContactInfoForm Component', () => { const { getByRole, getByLabelText } = render(); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.type(getByLabelText('Best contact phone'), '555-555-5555'); - await userEvent.type(getByLabelText('Personal email'), 'test@sample.com'); + await userEvent.type(getByLabelText(/Best contact phone/), '555-555-5555'); + await userEvent.type(getByLabelText(/Personal email/), 'test@sample.com'); await userEvent.click(submitBtn); await waitFor(() => { @@ -102,9 +102,9 @@ describe('ContactInfoForm Component', () => { const { getByRole, getByLabelText } = render(); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.type(getByLabelText('Best contact phone'), '555-555-5555'); - await userEvent.type(getByLabelText('Personal email'), 'test@sample.com'); - await userEvent.click(getByLabelText('Email')); + await userEvent.type(getByLabelText(/Best contact phone/), '555-555-5555'); + await userEvent.type(getByLabelText(/Personal email/), 'test@sample.com'); + await userEvent.click(getByLabelText(/Email/)); await userEvent.click(submitBtn); await waitFor(() => { @@ -116,9 +116,9 @@ describe('ContactInfoForm Component', () => { const { getByRole, getByLabelText } = render(); const backBtn = getByRole('button', { name: 'Back' }); - await userEvent.type(getByLabelText('Best contact phone'), '555-555-1111'); - await userEvent.type(getByLabelText('Personal email'), 'test@sample.com'); - await userEvent.click(getByLabelText('Email')); + await userEvent.type(getByLabelText(/Best contact phone/), '555-555-1111'); + await userEvent.type(getByLabelText(/Personal email/), 'test@sample.com'); + await userEvent.click(getByLabelText(/Email/)); await userEvent.click(backBtn); await waitFor(() => { diff --git a/src/components/Customer/ContactInfoForm/index.jsx b/src/components/Customer/ContactInfoForm/index.jsx index ffe6d9ca538..e3e7e5203b5 100644 --- a/src/components/Customer/ContactInfoForm/index.jsx +++ b/src/components/Customer/ContactInfoForm/index.jsx @@ -18,7 +18,7 @@ const ContactInfoForm = ({ initialValues, onSubmit, onBack }) => {

Your contact info

- +
diff --git a/src/components/Customer/DodInfoForm/DodInfoForm.jsx b/src/components/Customer/DodInfoForm/DodInfoForm.jsx index ff084d19dfa..93deb333eee 100644 --- a/src/components/Customer/DodInfoForm/DodInfoForm.jsx +++ b/src/components/Customer/DodInfoForm/DodInfoForm.jsx @@ -70,6 +70,7 @@ const DodInfoForm = ({ initialValues, onSubmit, onBack }) => { label="Branch of service" name="affiliation" id="affiliation" + hint="Required" required options={branchOptions} onChange={(e) => { @@ -85,6 +86,7 @@ const DodInfoForm = ({ initialValues, onSubmit, onBack }) => { maxLength="10" inputMode="numeric" pattern="[0-9]{10}" + labelHint="Required" isDisabled={isDodidDisabled} /> {showEmplid && ( @@ -93,6 +95,7 @@ const DodInfoForm = ({ initialValues, onSubmit, onBack }) => { name="emplid" id="emplid" required + labelHint="Required" maxLength="7" inputMode="numeric" pattern="[0-9]{7}" diff --git a/src/components/Customer/DodInfoForm/DodInfoForm.test.jsx b/src/components/Customer/DodInfoForm/DodInfoForm.test.jsx index b52cbe017c8..7eda863d955 100644 --- a/src/components/Customer/DodInfoForm/DodInfoForm.test.jsx +++ b/src/components/Customer/DodInfoForm/DodInfoForm.test.jsx @@ -28,11 +28,11 @@ describe('DodInfoForm component', () => { const { getByLabelText } = render(); await waitFor(() => { - expect(getByLabelText('Branch of service')).toBeInstanceOf(HTMLSelectElement); - expect(getByLabelText('Branch of service')).toBeRequired(); + expect(getByLabelText(/Branch of service/)).toBeInstanceOf(HTMLSelectElement); + expect(getByLabelText(/Branch of service/)).toBeRequired(); - expect(getByLabelText('DOD ID number')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('DOD ID number')).toBeDisabled(); + expect(getByLabelText(/DOD ID number/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/DOD ID number/)).toBeDisabled(); }); }); @@ -41,18 +41,18 @@ describe('DodInfoForm component', () => { const { getByLabelText } = render(); await waitFor(() => { - expect(getByLabelText('Branch of service')).toBeInstanceOf(HTMLSelectElement); - expect(getByLabelText('Branch of service')).toBeRequired(); + expect(getByLabelText(/Branch of service/)).toBeInstanceOf(HTMLSelectElement); + expect(getByLabelText(/Branch of service/)).toBeRequired(); - expect(getByLabelText('DOD ID number')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('DOD ID number')).toBeEnabled(); + expect(getByLabelText(/DOD ID number/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/DOD ID number/)).toBeEnabled(); }); }); it('shows an error message if trying to submit an invalid form', async () => { const { getByRole, getAllByTestId, getByLabelText } = render(); - await userEvent.click(getByLabelText('Branch of service')); - await userEvent.click(getByLabelText('DOD ID number')); + await userEvent.click(getByLabelText(/Branch of service/)); + await userEvent.click(getByLabelText(/DOD ID number/)); const submitBtn = getByRole('button', { name: 'Next' }); await userEvent.click(submitBtn); @@ -68,8 +68,8 @@ describe('DodInfoForm component', () => { const { getByRole, getByLabelText } = render(); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.selectOptions(getByLabelText('Branch of service'), ['NAVY']); - await userEvent.type(getByLabelText('DOD ID number'), '1234567890'); + await userEvent.selectOptions(getByLabelText(/Branch of service/), ['NAVY']); + await userEvent.type(getByLabelText(/DOD ID number/), '1234567890'); await userEvent.click(submitBtn); @@ -95,9 +95,9 @@ describe('DodInfoForm component', () => { describe('Coast Guard Customers', () => { it('shows an error message if EMPLID not present ', async () => { const { getByRole, getAllByTestId, getByLabelText } = render(); - await userEvent.click(getByLabelText('Branch of service')); - await userEvent.click(getByLabelText('DOD ID number')); - await userEvent.click(getByLabelText('EMPLID')); + await userEvent.click(getByLabelText(/Branch of service/)); + await userEvent.click(getByLabelText(/DOD ID number/)); + await userEvent.click(getByLabelText(/EMPLID/)); const submitBtn = getByRole('button', { name: 'Next' }); await userEvent.click(submitBtn); @@ -113,9 +113,9 @@ describe('DodInfoForm component', () => { const { getByRole, getByLabelText } = render(); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.selectOptions(getByLabelText('Branch of service'), ['COAST_GUARD']); - await userEvent.type(getByLabelText('DOD ID number'), '1234567890'); - await userEvent.type(getByLabelText('EMPLID'), '1234567'); + await userEvent.selectOptions(getByLabelText(/Branch of service/), ['COAST_GUARD']); + await userEvent.type(getByLabelText(/DOD ID number/), '1234567890'); + await userEvent.type(getByLabelText(/EMPLID/), '1234567'); await userEvent.click(submitBtn); diff --git a/src/components/Customer/EditContactInfoForm/EditContactInfoForm.jsx b/src/components/Customer/EditContactInfoForm/EditContactInfoForm.jsx index 2ca3e7027b5..0ad6e42e96f 100644 --- a/src/components/Customer/EditContactInfoForm/EditContactInfoForm.jsx +++ b/src/components/Customer/EditContactInfoForm/EditContactInfoForm.jsx @@ -11,7 +11,12 @@ import SectionWrapper from 'components/Customer/SectionWrapper'; import WizardNavigation from 'components/Customer/WizardNavigation/WizardNavigation'; import { Form } from 'components/form/Form'; import formStyles from 'styles/form.module.scss'; -import { backupContactInfoSchema, contactInfoSchema, requiredAddressSchema } from 'utils/validation'; +import { + backupContactInfoSchema, + contactInfoSchema, + requiredAddressSchema, + preferredContactMethodValidation, +} from 'utils/validation'; import { ResidentialAddressShape } from 'types/address'; import { CustomerContactInfoFields } from 'components/form/CustomerContactInfoFields'; import { BackupContactInfoFields } from 'components/form/BackupContactInfoFields'; @@ -22,19 +27,27 @@ export const backupAddressName = 'backup_mailing_address'; export const backupContactName = 'backup_contact'; const EditContactInfoForm = ({ initialValues, onSubmit, onCancel }) => { - const validationSchema = Yup.object().shape({ - ...contactInfoSchema.fields, - [residentialAddressName]: requiredAddressSchema.required(), - [backupAddressName]: requiredAddressSchema.required(), - [backupContactName]: backupContactInfoSchema.required(), - }); + const validationSchema = Yup.object() + .shape({ + ...contactInfoSchema.fields, + [residentialAddressName]: requiredAddressSchema.required(), + [backupAddressName]: requiredAddressSchema.required(), + [backupContactName]: backupContactInfoSchema.required(), + }) + .test('contactMethodRequired', 'Please select a preferred method of contact.', preferredContactMethodValidation); const sectionStyles = classnames(formStyles.formSection, editContactInfoFormStyle.formSection); const [isCurrentLookupErrorVisible, setIsCurrentLookupErrorVisible] = useState(false); const [isBackupLookupErrorVisible, setIsBackupLookupErrorVisible] = useState(false); return ( - + {({ isValid, isSubmitting, handleSubmit, values, setValues }) => { const handleCurrentZipCityChange = (value) => { setValues( @@ -85,7 +98,7 @@ const EditContactInfoForm = ({ initialValues, onSubmit, onCancel }) => {

Your contact info

- + @@ -96,6 +109,7 @@ const EditContactInfoForm = ({ initialValues, onSubmit, onCancel }) => { zipCityEnabled zipCityError={isCurrentLookupErrorVisible} handleZipCityChange={handleCurrentZipCityChange} + labelHint="Required" /> @@ -111,6 +125,7 @@ const EditContactInfoForm = ({ initialValues, onSubmit, onCancel }) => { zipCityEnabled zipCityError={isBackupLookupErrorVisible} handleZipCityChange={handleBackupZipCityChange} + labelHint="Required" /> @@ -121,7 +136,7 @@ const EditContactInfoForm = ({ initialValues, onSubmit, onCancel }) => { years of age or older.

- +
diff --git a/src/components/Customer/EditContactInfoForm/EditContactInfoForm.test.jsx b/src/components/Customer/EditContactInfoForm/EditContactInfoForm.test.jsx index fbd23cf2b53..96bf4591f58 100644 --- a/src/components/Customer/EditContactInfoForm/EditContactInfoForm.test.jsx +++ b/src/components/Customer/EditContactInfoForm/EditContactInfoForm.test.jsx @@ -39,7 +39,7 @@ describe('EditContactInfoForm component', () => { it('renders the form inputs', async () => { render(); - const telephoneInput = await screen.findByLabelText('Best contact phone'); + const telephoneInput = await screen.findByLabelText(/Best contact phone/); expect(telephoneInput).toBeInstanceOf(HTMLInputElement); @@ -51,20 +51,20 @@ describe('EditContactInfoForm component', () => { expect(secondaryPhoneInput).toHaveValue(testProps.initialValues.secondary_telephone); - const personalEmailInput = await screen.findByLabelText('Personal email'); + const personalEmailInput = await screen.findByLabelText(/Personal email/); expect(personalEmailInput).toBeInstanceOf(HTMLInputElement); expect(personalEmailInput).toHaveValue(testProps.initialValues.personal_email); - const nameInput = await screen.findByLabelText('Name'); + const nameInput = await screen.findByLabelText(/Name/); expect(nameInput).toBeInstanceOf(HTMLInputElement); expect(nameInput).toHaveValue(testProps.initialValues.backup_contact.name); // We have two sets of addresses and the labels are the same across both - const address1Inputs = await screen.findAllByLabelText('Address 1'); + const address1Inputs = await screen.findAllByLabelText(/Address 1/); expect(address1Inputs.length).toBe(2); @@ -100,7 +100,7 @@ describe('EditContactInfoForm component', () => { expect(backupCity).toBeInstanceOf(HTMLInputElement); expect(backupCity).toHaveValue(testProps.initialValues.backup_mailing_address.city); - const stateInputs = await screen.findAllByLabelText('State'); + const stateInputs = await screen.findAllByLabelText(/State/); expect(stateInputs.length).toBe(2); @@ -112,7 +112,7 @@ describe('EditContactInfoForm component', () => { expect(backupState).toBeInstanceOf(HTMLInputElement); expect(backupState).toHaveValue(testProps.initialValues.backup_mailing_address.state); - const zipInputs = await screen.findAllByLabelText('ZIP'); + const zipInputs = await screen.findAllByLabelText(/ZIP/); expect(zipInputs.length).toBe(2); @@ -125,7 +125,7 @@ describe('EditContactInfoForm component', () => { expect(backupZIP).toHaveValue(testProps.initialValues.backup_mailing_address.postalCode); // These next few have the same label for different field types - const phoneInputs = await screen.findAllByLabelText('Phone'); + const phoneInputs = await screen.findAllByLabelText(/Phone/); expect(phoneInputs.length).toBe(2); @@ -141,7 +141,7 @@ describe('EditContactInfoForm component', () => { expect(phoneTextField).toBeInstanceOf(HTMLInputElement); expect(phoneTextField).toHaveValue(testProps.initialValues.backup_contact.telephone); - const emailInputs = await screen.findAllByLabelText('Email'); + const emailInputs = await screen.findAllByLabelText(/Email/); expect(emailInputs.length).toBe(2); @@ -165,7 +165,7 @@ describe('EditContactInfoForm component', () => { expect(saveButton).toBeEnabled(); - const emailInput = await screen.findByLabelText('Personal email'); + const emailInput = await screen.findByLabelText(/Personal email/); await userEvent.clear(emailInput); await userEvent.tab(); diff --git a/src/components/Customer/EditOrdersForm/EditOrdersForm.jsx b/src/components/Customer/EditOrdersForm/EditOrdersForm.jsx index 70e3cf27ac5..e5881f15fda 100644 --- a/src/components/Customer/EditOrdersForm/EditOrdersForm.jsx +++ b/src/components/Customer/EditOrdersForm/EditOrdersForm.jsx @@ -13,7 +13,6 @@ import UploadsTable from 'components/UploadsTable/UploadsTable'; import SectionWrapper from 'components/Customer/SectionWrapper'; import { documentSizeLimitMsg } from 'shared/constants'; import profileImage from 'scenes/Review/images/profile.png'; -import Hint from 'components/Hint/index'; import { DropdownArrayOf } from 'types'; import { ExistingUploadsShape } from 'types/uploads'; import { DropdownInput, DatePickerInput, DutyLocationInput } from 'components/form/fields'; @@ -70,8 +69,14 @@ const EditOrdersForm = ({ let newDutyMeta = ''; return ( - - {({ isValid, isSubmitting, handleSubmit, values, touched }) => { + + {({ isValid, isSubmitting, handleSubmit, values }) => { const isRetirementOrSeparation = ['RETIREMENT', 'SEPARATION'].includes(values.orders_type); if (!values.origin_duty_location) originMeta = 'Required'; @@ -95,23 +100,22 @@ const EditOrdersForm = ({

Edit Orders:

- + + ( - <> - {input} - -

Date your orders were issued.

- - - )} + hint="Required" /> - - +
{isRetirementOrSeparation ? ( @@ -173,8 +177,6 @@ const EditOrdersForm = ({ hint="Enter the option closest to your destination. Your move counselor will identify if there might be a cost to you." placeholder="Enter a city or ZIP" metaOverride={newDutyMeta} - touched={touched} - required /> ) : ( @@ -183,11 +185,16 @@ const EditOrdersForm = ({ label="New duty location" displayAddress={false} metaOverride={newDutyMeta} - touched={touched} - required /> )} - +

Uploads:

{ describe('renders each input and checks if the field is required', () => { it.each([ - ['Orders type', true, HTMLSelectElement], - ['Orders date', true, HTMLInputElement], - ['Report by date', true, HTMLInputElement], + [/Orders type/, true, HTMLSelectElement], + [/Orders date/, true, HTMLInputElement], + [/Report by date/, true, HTMLInputElement], ['Yes', false, HTMLInputElement], ['No', false, HTMLInputElement], - ['New duty location', false, HTMLInputElement], - ['Pay grade', true, HTMLSelectElement], - ['Current duty location', false, HTMLInputElement], + [/New duty location/, false, HTMLInputElement], + [/Pay grade/, true, HTMLSelectElement], + [/Current duty location/, false, HTMLInputElement], ])('rendering %s and is required is %s', async (formInput, required, inputType) => { render(); @@ -244,7 +244,7 @@ describe('EditOrdersForm component', () => { ])('rendering the %s option', async (selectionOption, expectedValue) => { render(); - const ordersTypeDropdown = await screen.findByLabelText('Orders type'); + const ordersTypeDropdown = await screen.findByLabelText(/Orders type/); expect(ordersTypeDropdown).toBeInstanceOf(HTMLSelectElement); await userEvent.selectOptions(ordersTypeDropdown, selectionOption); @@ -280,19 +280,19 @@ describe('EditOrdersForm component', () => { expect(submitButton).not.toBeDisabled(); }); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await userEvent.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await userEvent.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await userEvent.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await userEvent.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await userEvent.click(screen.getByLabelText('No')); - await userEvent.selectOptions(screen.getByLabelText('Pay grade'), ['E_5']); + await userEvent.selectOptions(screen.getByLabelText(/Pay grade/), ['E_5']); // Test Current Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 100 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await userEvent.click(selectedOptionCurrent); // Test New Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 100 }); const selectedOptionNew = await screen.findByText(/Luke/); await userEvent.click(selectedOptionNew); @@ -314,7 +314,7 @@ describe('EditOrdersForm component', () => { expect(submitButton).toBeEnabled(); }); - const ordersTypeDropdown = screen.getByLabelText('Orders type'); + const ordersTypeDropdown = screen.getByLabelText(/Orders type/); await userEvent.selectOptions(ordersTypeDropdown, ''); await userEvent.tab(); @@ -346,19 +346,19 @@ describe('EditOrdersForm component', () => { />, ); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await userEvent.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await userEvent.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await userEvent.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await userEvent.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await userEvent.click(screen.getByLabelText('No')); - await userEvent.selectOptions(screen.getByLabelText('Pay grade'), ['E_5']); + await userEvent.selectOptions(screen.getByLabelText(/Pay grade/), ['E_5']); // Test Current Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 100 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await userEvent.click(selectedOptionCurrent); // Test New Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 100 }); const selectedOptionNew = await screen.findByText(/Luke/); await userEvent.click(selectedOptionNew); @@ -474,13 +474,13 @@ describe('EditOrdersForm component', () => { origin_duty_location: 'Altus AFB', }); - expect(screen.getByLabelText('Orders type')).toHaveValue(testInitialValues.orders_type); - expect(screen.getByLabelText('Orders date')).toHaveValue('08 Nov 2020'); - expect(screen.getByLabelText('Report by date')).toHaveValue('26 Nov 2020'); + expect(screen.getByLabelText(/Orders type/)).toHaveValue(testInitialValues.orders_type); + expect(screen.getByLabelText(/Orders date/)).toHaveValue('08 Nov 2020'); + expect(screen.getByLabelText(/Report by date/)).toHaveValue('26 Nov 2020'); expect(screen.getByLabelText('Yes')).not.toBeChecked(); expect(screen.getByLabelText('No')).toBeChecked(); expect(screen.getByText('Yuma AFB')).toBeInTheDocument(); - expect(screen.getByLabelText('Pay grade')).toHaveValue(testInitialValues.grade); + expect(screen.getByLabelText(/Pay grade/)).toHaveValue(testInitialValues.grade); expect(screen.getByText('Altus AFB')).toBeInTheDocument(); }); @@ -496,11 +496,11 @@ describe('EditOrdersForm component', () => { describe('disables the save button', () => { it.each([ ['Orders Type', 'orders_type', ''], - ['Orders Date', 'issue_date', ''], - ['Report By Date', 'report_by_date', ''], + [/Orders date/, 'issue_date', ''], + [/Report by date/, 'report_by_date', ''], ['Duty Location', 'new_duty_location', null], ['Uploaded Orders', 'uploaded_orders', []], - ['Pay grade', 'grade', ''], + [/Pay grade/, 'grade', ''], ])('when there is no %s', async (attributeNamePrettyPrint, attributeName, valueToReplaceIt) => { const modifiedProps = { onSubmit: jest.fn().mockImplementation(() => Promise.resolve()), diff --git a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx index 33b2a03935a..20c62106ef0 100644 --- a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx +++ b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.jsx @@ -339,14 +339,15 @@ class MtoShipmentForm extends Component { name="pickup.requestedDate" label="Preferred pickup date" id="requestedPickupDate" + hint="Required" validate={validateDate} - required />
( <>

What address are the movers picking up from?

@@ -387,7 +388,9 @@ class MtoShipmentForm extends Component { /> - {hasSecondaryPickup === 'yes' && } + {hasSecondaryPickup === 'yes' && ( + + )} {isTertiaryAddressEnabled && hasSecondaryPickup === 'yes' && (
@@ -422,7 +425,7 @@ class MtoShipmentForm extends Component { hasSecondaryPickup === 'yes' && ( <>

Third pickup location

- + )} @@ -430,7 +433,6 @@ class MtoShipmentForm extends Component { /> Releasing agent
} render={(fields) => ( @@ -461,14 +463,16 @@ class MtoShipmentForm extends Component { label="Preferred delivery date" id="requestedDeliveryDate" validate={validateDate} - required + hint="Required" />
{!isNTSR && ( -

Do you know your delivery address yet?

+
( <> {fields} @@ -527,7 +532,7 @@ class MtoShipmentForm extends Component {
{hasSecondaryDelivery === 'yes' && ( - + )} {isTertiaryAddressEnabled && hasSecondaryDelivery === 'yes' && (
@@ -563,7 +568,7 @@ class MtoShipmentForm extends Component { hasSecondaryDelivery === 'yes' && ( <>

Third delivery location

- + )} @@ -596,7 +601,6 @@ class MtoShipmentForm extends Component {
Receiving agent} render={(fields) => ( diff --git a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx index fb05747febc..e14184a8367 100644 --- a/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx +++ b/src/components/Customer/MtoShipmentForm/MtoShipmentForm.test.jsx @@ -83,33 +83,33 @@ describe('MtoShipmentForm component', () => { expect(screen.getByText(/5,000 lbs/)).toHaveClass('usa-alert__text'); expect(screen.getAllByText('Date')[0]).toBeInstanceOf(HTMLLegendElement); - expect(screen.getByLabelText('Preferred pickup date')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Preferred pickup date/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByRole('heading', { level: 2, name: 'Pickup info' })).toBeInTheDocument(); expect(screen.getByTestId('pickupDateHint')).toHaveTextContent( 'This is the day movers would put this shipment on their truck. Packing starts earlier. Dates will be finalized when you talk to your Customer Care Representative. Your requested pickup/load date should be your latest preferred pickup/load date, or the date you need to be out of your origin residence.', ); expect(screen.getByText('Pickup location')).toBeInstanceOf(HTMLLegendElement); expect(screen.getByLabelText('Use my current address')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('City')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('State')).toBeInstanceOf(HTMLSelectElement); - expect(screen.getByLabelText('ZIP')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/City/)).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/State/)).toBeInstanceOf(HTMLSelectElement); + expect(screen.getByLabelText(/ZIP/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByRole('heading', { level: 4, name: 'Second pickup location' })).toBeInTheDocument(); expect(screen.getByTitle('Yes, I have a second pickup location')).toBeInstanceOf(HTMLInputElement); expect(screen.getByTitle('No, I do not have a second pickup location')).toBeInstanceOf(HTMLInputElement); expect(screen.getByText(/Releasing agent/).parentElement).toBeInstanceOf(HTMLLegendElement); - expect(screen.getAllByLabelText('First name')[0]).toHaveAttribute('name', 'pickup.agent.firstName'); - expect(screen.getAllByLabelText('Last name')[0]).toHaveAttribute('name', 'pickup.agent.lastName'); - expect(screen.getAllByLabelText('Phone')[0]).toHaveAttribute('name', 'pickup.agent.phone'); - expect(screen.getAllByLabelText('Email')[0]).toHaveAttribute('name', 'pickup.agent.email'); + expect(screen.getAllByLabelText(/First name/)[0]).toHaveAttribute('name', 'pickup.agent.firstName'); + expect(screen.getAllByLabelText(/Last name/)[0]).toHaveAttribute('name', 'pickup.agent.lastName'); + expect(screen.getAllByLabelText(/Phone/)[0]).toHaveAttribute('name', 'pickup.agent.phone'); + expect(screen.getAllByLabelText(/Email/)[0]).toHaveAttribute('name', 'pickup.agent.email'); expect(screen.getAllByText('Date')[1]).toBeInstanceOf(HTMLLegendElement); - expect(screen.getByLabelText('Preferred delivery date')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Preferred delivery date/)).toBeInstanceOf(HTMLInputElement); - expect(screen.getByText('Delivery location')).toBeInstanceOf(HTMLLegendElement); + expect(screen.getByText(/Delivery location/)).toBeInstanceOf(HTMLLegendElement); expect(screen.getByTitle('Yes, I know my delivery address')).toBeInstanceOf(HTMLInputElement); expect(screen.getByTitle('No, I do not know my delivery address')).toBeInstanceOf(HTMLInputElement); @@ -118,10 +118,10 @@ describe('MtoShipmentForm component', () => { expect(screen.queryByTitle('No, I do not have a second destination location')).not.toBeInTheDocument(); expect(screen.getByText(/Receiving agent/).parentElement).toBeInstanceOf(HTMLLegendElement); - expect(screen.getAllByLabelText('First name')[1]).toHaveAttribute('name', 'delivery.agent.firstName'); - expect(screen.getAllByLabelText('Last name')[1]).toHaveAttribute('name', 'delivery.agent.lastName'); - expect(screen.getAllByLabelText('Phone')[1]).toHaveAttribute('name', 'delivery.agent.phone'); - expect(screen.getAllByLabelText('Email')[1]).toHaveAttribute('name', 'delivery.agent.email'); + expect(screen.getAllByLabelText(/First name/)[1]).toHaveAttribute('name', 'delivery.agent.firstName'); + expect(screen.getAllByLabelText(/Last name/)[1]).toHaveAttribute('name', 'delivery.agent.lastName'); + expect(screen.getAllByLabelText(/Phone/)[1]).toHaveAttribute('name', 'delivery.agent.phone'); + expect(screen.getAllByLabelText(/Email/)[1]).toHaveAttribute('name', 'delivery.agent.email'); expect( screen.queryByText( @@ -188,11 +188,11 @@ describe('MtoShipmentForm component', () => { await userEvent.click(queryByLabelText('Use my current address')); await waitFor(() => { - expect(queryAllByLabelText('Address 1')[0]).toHaveValue(defaultProps.currentResidence.streetAddress1); + expect(queryAllByLabelText(/Address 1/)[0]).toHaveValue(defaultProps.currentResidence.streetAddress1); expect(queryAllByLabelText(/Address 2/)[0]).toHaveValue(''); - expect(queryAllByLabelText('City')[0]).toHaveValue(defaultProps.currentResidence.city); - expect(queryAllByLabelText('State')[0]).toHaveValue(defaultProps.currentResidence.state); - expect(queryAllByLabelText('ZIP')[0]).toHaveValue(defaultProps.currentResidence.postalCode); + expect(queryAllByLabelText(/City/)[0]).toHaveValue(defaultProps.currentResidence.city); + expect(queryAllByLabelText(/State/)[0]).toHaveValue(defaultProps.currentResidence.state); + expect(queryAllByLabelText(/ZIP/)[0]).toHaveValue(defaultProps.currentResidence.postalCode); }); }); @@ -201,19 +201,19 @@ describe('MtoShipmentForm component', () => { await userEvent.click(screen.getByTitle('Yes, I have a second pickup location')); - const streetAddress1 = await screen.findAllByLabelText('Address 1'); + const streetAddress1 = await screen.findAllByLabelText(/Address 1/); expect(streetAddress1[1]).toHaveAttribute('name', 'secondaryPickup.address.streetAddress1'); const streetAddress2 = await screen.findAllByLabelText(/Address 2/); expect(streetAddress2[1]).toHaveAttribute('name', 'secondaryPickup.address.streetAddress2'); - const city = await screen.findAllByLabelText('City'); + const city = await screen.findAllByLabelText(/City/); expect(city[1]).toHaveAttribute('name', 'secondaryPickup.address.city'); - const state = await screen.findAllByLabelText('State'); + const state = await screen.findAllByLabelText(/State/); expect(state[1]).toHaveAttribute('name', 'secondaryPickup.address.state'); - const zip = await screen.findAllByLabelText('ZIP'); + const zip = await screen.findAllByLabelText(/ZIP/); expect(zip[1]).toHaveAttribute('name', 'secondaryPickup.address.postalCode'); }); @@ -222,7 +222,7 @@ describe('MtoShipmentForm component', () => { await userEvent.click(screen.getByTitle('Yes, I know my delivery address')); - const streetAddress1 = await screen.findAllByLabelText('Address 1'); + const streetAddress1 = await screen.findAllByLabelText(/Address 1/); expect(streetAddress1[0]).toHaveAttribute('name', 'pickup.address.streetAddress1'); expect(streetAddress1[1]).toHaveAttribute('name', 'delivery.address.streetAddress1'); @@ -230,15 +230,15 @@ describe('MtoShipmentForm component', () => { expect(streetAddress2[0]).toHaveAttribute('name', 'pickup.address.streetAddress2'); expect(streetAddress2[1]).toHaveAttribute('name', 'delivery.address.streetAddress2'); - const city = await screen.findAllByLabelText('City'); + const city = await screen.findAllByLabelText(/City/); expect(city[0]).toHaveAttribute('name', 'pickup.address.city'); expect(city[1]).toHaveAttribute('name', 'delivery.address.city'); - const state = await screen.findAllByLabelText('State'); + const state = await screen.findAllByLabelText(/State/); expect(state[0]).toHaveAttribute('name', 'pickup.address.state'); expect(state[1]).toHaveAttribute('name', 'delivery.address.state'); - const zip = await screen.findAllByLabelText('ZIP'); + const zip = await screen.findAllByLabelText(/ZIP/); expect(zip[0]).toHaveAttribute('name', 'pickup.address.postalCode'); expect(zip[1]).toHaveAttribute('name', 'delivery.address.postalCode'); }); @@ -263,7 +263,7 @@ describe('MtoShipmentForm component', () => { await userEvent.click(screen.getByTitle('Yes, I know my delivery address')); await userEvent.click(screen.getByTitle('Yes, I have a second destination location')); - const streetAddress1 = await screen.findAllByLabelText('Address 1'); + const streetAddress1 = await screen.findAllByLabelText(/Address 1/); expect(streetAddress1.length).toBe(3); expect(streetAddress1[2]).toHaveAttribute('name', 'secondaryDelivery.address.streetAddress1'); @@ -271,15 +271,15 @@ describe('MtoShipmentForm component', () => { expect(streetAddress2.length).toBe(3); expect(streetAddress2[2]).toHaveAttribute('name', 'secondaryDelivery.address.streetAddress2'); - const city = await screen.findAllByLabelText('City'); + const city = await screen.findAllByLabelText(/City/); expect(city.length).toBe(3); expect(city[2]).toHaveAttribute('name', 'secondaryDelivery.address.city'); - const state = await screen.findAllByLabelText('State'); + const state = await screen.findAllByLabelText(/State/); expect(state.length).toBe(3); expect(state[2]).toHaveAttribute('name', 'secondaryDelivery.address.state'); - const zip = await screen.findAllByLabelText('ZIP'); + const zip = await screen.findAllByLabelText(/ZIP/); expect(zip.length).toBe(3); expect(zip[2]).toHaveAttribute('name', 'secondaryDelivery.address.postalCode'); }); @@ -352,25 +352,25 @@ describe('MtoShipmentForm component', () => { ); renderMtoShipmentForm(); - const pickupDateInput = await screen.findByLabelText('Preferred pickup date'); + const pickupDateInput = await screen.findByLabelText(/Preferred pickup date/); await userEvent.type(pickupDateInput, shipmentInfo.requestedPickupDate); - const pickupAddress1Input = screen.getByLabelText('Address 1'); + const pickupAddress1Input = screen.getByLabelText(/Address 1/); await userEvent.type(pickupAddress1Input, shipmentInfo.pickupAddress.streetAddress1); const pickupAddress2Input = screen.getByLabelText(/Address 2/); await userEvent.type(pickupAddress2Input, shipmentInfo.pickupAddress.streetAddress2); - const pickupCityInput = screen.getByLabelText('City'); + const pickupCityInput = screen.getByLabelText(/City/); await userEvent.type(pickupCityInput, shipmentInfo.pickupAddress.city); - const pickupStateInput = screen.getByLabelText('State'); + const pickupStateInput = screen.getByLabelText(/State/); await userEvent.selectOptions(pickupStateInput, shipmentInfo.pickupAddress.state); - const pickupPostalCodeInput = screen.getByLabelText('ZIP'); + const pickupPostalCodeInput = screen.getByLabelText(/ZIP/); await userEvent.type(pickupPostalCodeInput, shipmentInfo.pickupAddress.postalCode); - const deliveryDateInput = await screen.findByLabelText('Preferred delivery date'); + const deliveryDateInput = await screen.findByLabelText(/Preferred delivery date/); await userEvent.type(deliveryDateInput, shipmentInfo.requestedDeliveryDate); const nextButton = await screen.findByRole('button', { name: 'Next' }); @@ -414,25 +414,25 @@ describe('MtoShipmentForm component', () => { ); renderMtoShipmentForm(); - const pickupDateInput = await screen.findByLabelText('Preferred pickup date'); + const pickupDateInput = await screen.findByLabelText(/Preferred pickup date/); await userEvent.type(pickupDateInput, shipmentInfo.requestedPickupDate); - const pickupAddress1Input = screen.getByLabelText('Address 1'); + const pickupAddress1Input = screen.getByLabelText(/Address 1/); await userEvent.type(pickupAddress1Input, shipmentInfo.pickupAddress.streetAddress1); const pickupAddress2Input = screen.getByLabelText(/Address 2/); await userEvent.type(pickupAddress2Input, shipmentInfo.pickupAddress.streetAddress2); - const pickupCityInput = screen.getByLabelText('City'); + const pickupCityInput = screen.getByLabelText(/City/); await userEvent.type(pickupCityInput, shipmentInfo.pickupAddress.city); - const pickupStateInput = screen.getByLabelText('State'); + const pickupStateInput = screen.getByLabelText(/State/); await userEvent.selectOptions(pickupStateInput, shipmentInfo.pickupAddress.state); - const pickupPostalCodeInput = screen.getByLabelText('ZIP'); + const pickupPostalCodeInput = screen.getByLabelText(/ZIP/); await userEvent.type(pickupPostalCodeInput, shipmentInfo.pickupAddress.postalCode); - const deliveryDateInput = await screen.findByLabelText('Preferred delivery date'); + const deliveryDateInput = await screen.findByLabelText(/Preferred delivery date/); await userEvent.type(deliveryDateInput, shipmentInfo.requestedDeliveryDate); const nextButton = await screen.findByRole('button', { name: 'Next' }); @@ -491,20 +491,21 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); + + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); expect(screen.getByLabelText('Use my current address')).not.toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[0]).toHaveValue('812 S 129th St'); + expect(screen.getAllByLabelText(/Address 1/)[0]).toHaveValue('812 S 129th St'); expect(screen.getAllByLabelText(/Address 2/)[0]).toHaveValue(''); - expect(screen.getAllByLabelText('City')[0]).toHaveValue('San Antonio'); - expect(screen.getAllByLabelText('State')[0]).toHaveValue('TX'); - expect(screen.getAllByLabelText('ZIP')[0]).toHaveValue('78234'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(screen.getAllByLabelText(/City/)[0]).toHaveValue('San Antonio'); + expect(screen.getAllByLabelText(/State/)[0]).toHaveValue('TX'); + expect(screen.getAllByLabelText(/ZIP/)[0]).toHaveValue('78234'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); expect(screen.getByTitle('Yes, I know my delivery address')).toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[1]).toHaveValue('441 SW Rio de la Plata Drive'); + expect(screen.getAllByLabelText(/Address 1/)[1]).toHaveValue('441 SW Rio de la Plata Drive'); expect(screen.getAllByLabelText(/Address 2/)[1]).toHaveValue(''); - expect(screen.getAllByLabelText('City')[1]).toHaveValue('Tacoma'); - expect(screen.getAllByLabelText('State')[1]).toHaveValue('WA'); - expect(screen.getAllByLabelText('ZIP')[1]).toHaveValue('98421'); + expect(screen.getAllByLabelText(/City/)[1]).toHaveValue('Tacoma'); + expect(screen.getAllByLabelText(/State/)[1]).toHaveValue('WA'); + expect(screen.getAllByLabelText(/ZIP/)[1]).toHaveValue('98421'); expect( screen.getByLabelText( 'Are there things about this shipment that your counselor or movers should discuss with you?', @@ -555,19 +556,19 @@ describe('MtoShipmentForm component', () => { expect(await screen.findByTitle('Yes, I have a second pickup location')).toBeChecked(); expect(await screen.findByTitle('Yes, I have a second destination location')).toBeChecked(); - const streetAddress1 = await screen.findAllByLabelText('Address 1'); + const streetAddress1 = await screen.findAllByLabelText(/Address 1/); expect(streetAddress1.length).toBe(4); const streetAddress2 = await screen.findAllByLabelText(/Address 2/); expect(streetAddress2.length).toBe(4); - const city = await screen.findAllByLabelText('City'); + const city = await screen.findAllByLabelText(/City/); expect(city.length).toBe(4); - const state = await screen.findAllByLabelText('State'); + const state = await screen.findAllByLabelText(/State/); expect(state.length).toBe(4); - const zip = await screen.findAllByLabelText('ZIP'); + const zip = await screen.findAllByLabelText(/ZIP/); expect(zip.length).toBe(4); // Secondary pickup address should be the 2nd address @@ -586,10 +587,10 @@ describe('MtoShipmentForm component', () => { }); it.each([ - ['Address 1', 'Some Address'], + [/Address 1/, 'Some Address'], [/Address 2/, '123'], - ['City', 'Some City'], - ['ZIP', '92131'], + [/City/, 'Some City'], + [/ZIP/, '92131'], ])( 'does not allow the user to save the form if the %s field on a secondary addreess is the only one filled out', async (fieldName, text) => { @@ -658,7 +659,7 @@ describe('MtoShipmentForm component', () => { await userEvent.click(screen.getByTitle('Yes, I have a second pickup location')); await userEvent.click(screen.getByTitle('Yes, I have a second destination location')); - const state = await screen.findAllByLabelText('State'); + const state = await screen.findAllByLabelText(/State/); // The second instance of a field is the secondary pickup await userEvent.selectOptions(state[1], 'CA'); await waitFor(() => { @@ -759,7 +760,7 @@ describe('MtoShipmentForm component', () => { ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - const pickupAddress1Input = screen.getAllByLabelText('Address 1')[0]; + const pickupAddress1Input = screen.getAllByLabelText(/Address 1/)[0]; await userEvent.clear(pickupAddress1Input); await userEvent.type(pickupAddress1Input, shipmentInfo.pickupAddress.streetAddress1); @@ -767,14 +768,14 @@ describe('MtoShipmentForm component', () => { await userEvent.clear(pickupAddress2Input); await userEvent.type(pickupAddress2Input, shipmentInfo.pickupAddress.streetAddress2); - const pickupCityInput = screen.getAllByLabelText('City')[0]; + const pickupCityInput = screen.getAllByLabelText(/City/)[0]; await userEvent.clear(pickupCityInput); await userEvent.type(pickupCityInput, shipmentInfo.pickupAddress.city); - const pickupStateInput = screen.getAllByLabelText('State')[0]; + const pickupStateInput = screen.getAllByLabelText(/State/)[0]; await userEvent.selectOptions(pickupStateInput, shipmentInfo.pickupAddress.state); - const pickupPostalCodeInput = screen.getAllByLabelText('ZIP')[0]; + const pickupPostalCodeInput = screen.getAllByLabelText(/ZIP/)[0]; await userEvent.clear(pickupPostalCodeInput); await userEvent.type(pickupPostalCodeInput, shipmentInfo.pickupAddress.postalCode); @@ -817,7 +818,7 @@ describe('MtoShipmentForm component', () => { ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - const pickupAddress1Input = screen.getAllByLabelText('Address 1')[0]; + const pickupAddress1Input = screen.getAllByLabelText(/Address 1/)[0]; await userEvent.clear(pickupAddress1Input); await userEvent.type(pickupAddress1Input, shipmentInfo.pickupAddress.streetAddress1); @@ -825,14 +826,14 @@ describe('MtoShipmentForm component', () => { await userEvent.clear(pickupAddress2Input); await userEvent.type(pickupAddress2Input, shipmentInfo.pickupAddress.streetAddress2); - const pickupCityInput = screen.getAllByLabelText('City')[0]; + const pickupCityInput = screen.getAllByLabelText(/City/)[0]; await userEvent.clear(pickupCityInput); await userEvent.type(pickupCityInput, shipmentInfo.pickupAddress.city); - const pickupStateInput = screen.getAllByLabelText('State')[0]; + const pickupStateInput = screen.getAllByLabelText(/State/)[0]; await userEvent.selectOptions(pickupStateInput, shipmentInfo.pickupAddress.state); - const pickupPostalCodeInput = screen.getAllByLabelText('ZIP')[0]; + const pickupPostalCodeInput = screen.getAllByLabelText(/ZIP/)[0]; await userEvent.clear(pickupPostalCodeInput); await userEvent.type(pickupPostalCodeInput, shipmentInfo.pickupAddress.postalCode); @@ -863,16 +864,16 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); expect(screen.getByLabelText('Use my current address')).not.toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[0]).toHaveValue('812 S 129th St'); + expect(screen.getAllByLabelText(/Address 1/)[0]).toHaveValue('812 S 129th St'); expect(screen.getAllByLabelText(/Address 2/)[0]).toHaveValue(''); expect(screen.getAllByLabelText('City')[0]).toHaveValue('San Antonio'); expect(screen.getAllByLabelText('State')[0]).toHaveValue('TX'); expect(screen.getAllByLabelText('ZIP')[0]).toHaveValue('78234'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); expect(screen.getByTitle('Yes, I know my delivery address')).toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[1]).toHaveValue('441 SW Rio de la Plata Drive'); + expect(screen.getAllByLabelText(/Address 1/)[1]).toHaveValue('441 SW Rio de la Plata Drive'); expect(screen.getAllByLabelText(/Address 2/)[1]).toHaveValue(''); expect(screen.getAllByLabelText('City')[1]).toHaveValue('Tacoma'); expect(screen.getAllByLabelText('State')[1]).toHaveValue('WA'); @@ -895,8 +896,8 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); await waitFor(() => { expect( screen.getByText( @@ -922,8 +923,8 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); await waitFor(() => { expect( screen.getByText( @@ -949,8 +950,8 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); await waitFor(() => { expect( screen.getByText( @@ -976,8 +977,8 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); expect( screen.getByLabelText( 'Are there things about this shipment that your counselor or movers should discuss with you?', @@ -1011,21 +1012,21 @@ describe('MtoShipmentForm component', () => { 'This is the day movers would put this shipment on their truck. Packing starts earlier. Dates will be finalized when you talk to your Customer Care Representative. Your requested pickup/load date should be your latest preferred pickup/load date, or the date you need to be out of your origin residence.', ); expect(screen.getByText('Date')).toBeInstanceOf(HTMLLegendElement); - expect(screen.getByLabelText('Preferred pickup date')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Preferred pickup date/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByText('Pickup location')).toBeInstanceOf(HTMLLegendElement); expect(screen.getByLabelText('Use my current address')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('City')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('State')).toBeInstanceOf(HTMLSelectElement); - expect(screen.getByLabelText('ZIP')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/City/)).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/State/)).toBeInstanceOf(HTMLSelectElement); + expect(screen.getByLabelText(/ZIP/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByText(/Releasing agent/).parentElement).toBeInstanceOf(HTMLLegendElement); - expect(screen.getByLabelText('First name')).toHaveAttribute('name', 'pickup.agent.firstName'); - expect(screen.getByLabelText('Last name')).toHaveAttribute('name', 'pickup.agent.lastName'); - expect(screen.getByLabelText('Phone')).toHaveAttribute('name', 'pickup.agent.phone'); - expect(screen.getByLabelText('Email')).toHaveAttribute('name', 'pickup.agent.email'); + expect(screen.getByLabelText(/First name/)).toHaveAttribute('name', 'pickup.agent.firstName'); + expect(screen.getByLabelText(/Last name/)).toHaveAttribute('name', 'pickup.agent.lastName'); + expect(screen.getByLabelText(/Phone/)).toHaveAttribute('name', 'pickup.agent.phone'); + expect(screen.getByLabelText(/Email/)).toHaveAttribute('name', 'pickup.agent.email'); expect(screen.getAllByText('Date')).toHaveLength(1); expect(screen.getAllByText('Pickup location')).toHaveLength(1); @@ -1098,7 +1099,7 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, shipmentType: SHIPMENT_OPTIONS.NTS, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); await waitFor(() => { // only pickup date is available. delivery alert will never be present. expect( @@ -1123,25 +1124,25 @@ describe('MtoShipmentForm component', () => { expect(screen.getByText(/5,000 lbs/)).toHaveClass('usa-alert__text'); - expect(screen.queryByLabelText('Preferred pickup date')).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Preferred pickup date/)).not.toBeInTheDocument(); expect(screen.queryByText('Pickup Info')).not.toBeInTheDocument(); expect(screen.queryByText(/Releasing agent/)).not.toBeInTheDocument(); expect(screen.getAllByText('Date')).toHaveLength(1); - expect(screen.getAllByText('Delivery location')).toHaveLength(1); + expect(screen.getAllByText(/Delivery location/)).toHaveLength(1); expect(screen.getByText('Date')).toBeInstanceOf(HTMLLegendElement); - expect(screen.getByLabelText('Preferred delivery date')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Preferred delivery date/)).toBeInstanceOf(HTMLInputElement); - expect(screen.getByText('Delivery location')).toBeInstanceOf(HTMLLegendElement); + expect(screen.getByText(/Delivery location/)).toBeInstanceOf(HTMLLegendElement); expect(screen.getByLabelText('Yes')).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText('No')).toBeInstanceOf(HTMLInputElement); expect(screen.getByText(/Receiving agent/).parentElement).toBeInstanceOf(HTMLLegendElement); - expect(screen.getByLabelText('First name')).toHaveAttribute('name', 'delivery.agent.firstName'); - expect(screen.getByLabelText('Last name')).toHaveAttribute('name', 'delivery.agent.lastName'); - expect(screen.getByLabelText('Phone')).toHaveAttribute('name', 'delivery.agent.phone'); - expect(screen.getByLabelText('Email')).toHaveAttribute('name', 'delivery.agent.email'); + expect(screen.getByLabelText(/First name/)).toHaveAttribute('name', 'delivery.agent.firstName'); + expect(screen.getByLabelText(/Last name/)).toHaveAttribute('name', 'delivery.agent.lastName'); + expect(screen.getByLabelText(/Phone/)).toHaveAttribute('name', 'delivery.agent.phone'); + expect(screen.getByLabelText(/Email/)).toHaveAttribute('name', 'delivery.agent.email'); expect( screen.queryByText( @@ -1211,7 +1212,7 @@ describe('MtoShipmentForm component', () => { Promise.resolve({ data: JSON.stringify(expectedDateSelectionIsWeekendHolidayResponse) }), ); renderMtoShipmentForm({ isCreatePage: false, shipmentType: SHIPMENT_OPTIONS.NTSR, mtoShipment: mockMtoShipment }); - expect(await screen.findByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(await screen.findByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); await waitFor(() => { // only delivery date is available. pickup alert will never be present. expect( diff --git a/src/components/Customer/NameForm/NameForm.jsx b/src/components/Customer/NameForm/NameForm.jsx index ff76274447f..24e3857e455 100644 --- a/src/components/Customer/NameForm/NameForm.jsx +++ b/src/components/Customer/NameForm/NameForm.jsx @@ -24,10 +24,10 @@ const NameForm = ({ initialValues, onSubmit, onBack }) => {

Name

- - - - + + + +
{ />, ); await waitFor(() => { - expect(getByLabelText('First name')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('First name')).toBeRequired(); + expect(getByLabelText(/First name/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/First name/)).toBeRequired(); expect(getByLabelText(/Middle name/)).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Last name')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Last name')).toBeRequired(); + expect(getByLabelText(/Last name/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Last name/)).toBeRequired(); expect(getByLabelText(/Suffix/)).toBeInstanceOf(HTMLInputElement); }); @@ -35,8 +35,8 @@ describe('NameForm component', () => { initialValues={{ first_name: '', middle_name: '', last_name: '', suffix: 'Mrs.' }} />, ); - await userEvent.clear(getByLabelText('First name')); - await userEvent.clear(getByLabelText('Last name')); + await userEvent.clear(getByLabelText(/First name/)); + await userEvent.clear(getByLabelText(/Last name/)); await userEvent.tab(); const submitBtn = getByRole('button', { name: 'Next' }); @@ -61,8 +61,8 @@ describe('NameForm component', () => { ); const submitBtn = getByRole('button', { name: 'Next' }); - await userEvent.type(getByLabelText('First name'), 'Leo'); - await userEvent.type(getByLabelText('Last name'), 'Spaceman'); + await userEvent.type(getByLabelText(/First name/), 'Leo'); + await userEvent.type(getByLabelText(/Last name/), 'Spaceman'); await userEvent.click(submitBtn); diff --git a/src/components/Customer/OrdersInfoForm/OrdersInfoForm.jsx b/src/components/Customer/OrdersInfoForm/OrdersInfoForm.jsx index 0043bb9eb29..5486eeda4f9 100644 --- a/src/components/Customer/OrdersInfoForm/OrdersInfoForm.jsx +++ b/src/components/Customer/OrdersInfoForm/OrdersInfoForm.jsx @@ -6,7 +6,6 @@ import { Radio, FormGroup, Label, Link as USWDSLink } from '@trussworks/react-us import styles from './OrdersInfoForm.module.scss'; -import { RequiredTag } from 'components/form/RequiredTag'; import { ORDERS_PAY_GRADE_OPTIONS } from 'constants/orders'; import { DropdownInput, DatePickerInput, DutyLocationInput } from 'components/form/fields'; import Hint from 'components/Hint/index'; @@ -56,11 +55,18 @@ const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack })

Tell us about your move orders

- + ( <> {input} @@ -70,10 +76,14 @@ const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack }) )} /> - + - - +
{isRetirementOrSeparation ? ( @@ -132,11 +142,9 @@ const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack }) name="new_duty_location" label="HOR, PLEAD or HOS" displayAddress={false} - hint="Enter the option closest to your destination. Your move counselor will identify if there might be a cost to you." + hint="Enter the option closest to your destination. Your move counselor will identify if there might be a cost to you. (Required)" metaOverride={newDutyMeta} placeholder="Enter a city or ZIP" - touched={touched} - required /> ) : ( @@ -144,13 +152,19 @@ const OrdersInfoForm = ({ ordersTypeOptions, initialValues, onSubmit, onBack }) name="new_duty_location" label="New duty location" displayAddress={false} - touched={touched} + hint="Required" metaOverride={newDutyMeta} - required /> )} - +
diff --git a/src/components/Customer/OrdersInfoForm/OrdersInfoForm.test.jsx b/src/components/Customer/OrdersInfoForm/OrdersInfoForm.test.jsx index 5dfa4347b47..8487b689e14 100644 --- a/src/components/Customer/OrdersInfoForm/OrdersInfoForm.test.jsx +++ b/src/components/Customer/OrdersInfoForm/OrdersInfoForm.test.jsx @@ -152,24 +152,24 @@ describe('OrdersInfoForm component', () => { const { getByLabelText } = render(); await waitFor(() => { - expect(getByLabelText('Orders type')).toBeInstanceOf(HTMLSelectElement); - expect(getByLabelText('Orders type')).toBeRequired(); - expect(getByLabelText('Orders date')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Orders date')).toBeRequired(); - expect(getByLabelText('Report by date')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Report by date')).toBeRequired(); + expect(getByLabelText(/Orders type/)).toBeInstanceOf(HTMLSelectElement); + expect(getByLabelText(/Orders type/)).toBeRequired(); + expect(getByLabelText(/Orders date/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Orders date/)).toBeRequired(); + expect(getByLabelText(/Report by date/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Report by date/)).toBeRequired(); expect(getByLabelText('Yes')).toBeInstanceOf(HTMLInputElement); expect(getByLabelText('No')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('New duty location')).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText('Pay grade')).toBeInstanceOf(HTMLSelectElement); - expect(getByLabelText('Current duty location')).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/New duty location/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText(/Pay grade/)).toBeInstanceOf(HTMLSelectElement); + expect(getByLabelText(/Current duty location/)).toBeInstanceOf(HTMLInputElement); }); }); it('renders each option for orders type', async () => { const { getByLabelText } = render(); - const ordersTypeDropdown = getByLabelText('Orders type'); + const ordersTypeDropdown = getByLabelText(/Orders type/); expect(ordersTypeDropdown).toBeInstanceOf(HTMLSelectElement); await userEvent.selectOptions(ordersTypeDropdown, 'PERMANENT_CHANGE_OF_STATION'); @@ -188,19 +188,19 @@ describe('OrdersInfoForm component', () => { it('allows new and current duty location to be the same', async () => { render(); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await userEvent.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await userEvent.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await userEvent.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await userEvent.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await userEvent.click(screen.getByLabelText('No')); - await userEvent.selectOptions(screen.getByLabelText('Pay grade'), ['E_5']); + await userEvent.selectOptions(screen.getByLabelText(/Pay grade/), ['E_5']); // Test Current Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 100 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await userEvent.click(selectedOptionCurrent); // Test New Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 100 }); const selectedOptionNew = await screen.findByText(/Luke/); await userEvent.click(selectedOptionNew); @@ -218,10 +218,10 @@ describe('OrdersInfoForm component', () => { const { getByRole, getAllByTestId } = render(); // Touch required fields to show validation errors - await userEvent.click(screen.getByLabelText('Orders type')); - await userEvent.click(screen.getByLabelText('Orders date')); - await userEvent.click(screen.getByLabelText('Report by date')); - await userEvent.click(screen.getByLabelText('Pay grade')); + await userEvent.click(screen.getByLabelText(/Orders type/)); + await userEvent.click(screen.getByLabelText(/Orders date/)); + await userEvent.click(screen.getByLabelText(/Report by date/)); + await userEvent.click(screen.getByLabelText(/Pay grade/)); const submitBtn = getByRole('button', { name: 'Next' }); await userEvent.click(submitBtn); @@ -235,19 +235,19 @@ describe('OrdersInfoForm component', () => { it('submits the form when its valid', async () => { render(); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await userEvent.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await userEvent.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await userEvent.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await userEvent.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await userEvent.click(screen.getByLabelText('No')); - await userEvent.selectOptions(screen.getByLabelText('Pay grade'), ['E_5']); + await userEvent.selectOptions(screen.getByLabelText(/Pay grade/), ['E_5']); // Test Current Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 100 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await userEvent.click(selectedOptionCurrent); // Test New Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 100 }); const selectedOptionNew = await screen.findByText(/Luke/); await userEvent.click(selectedOptionNew); @@ -370,13 +370,13 @@ describe('OrdersInfoForm component', () => { origin_duty_location: 'Altus AFB', }); - expect(getByLabelText('Orders type')).toHaveValue(testInitialValues.orders_type); - expect(getByLabelText('Orders date')).toHaveValue('08 Nov 2020'); - expect(getByLabelText('Report by date')).toHaveValue('26 Nov 2020'); + expect(getByLabelText(/Orders type/)).toHaveValue(testInitialValues.orders_type); + expect(getByLabelText(/Orders date/)).toHaveValue('08 Nov 2020'); + expect(getByLabelText(/Report by date/)).toHaveValue('26 Nov 2020'); expect(getByLabelText('Yes')).not.toBeChecked(); expect(getByLabelText('No')).toBeChecked(); expect(queryByText('Yuma AFB')).toBeInTheDocument(); - expect(getByLabelText('Pay grade')).toHaveValue(testInitialValues.grade); + expect(getByLabelText(/Pay grade/)).toHaveValue(testInitialValues.grade); expect(queryByText('Altus AFB')).toBeInTheDocument(); }); }); diff --git a/src/components/Customer/PPM/Booking/Advance/AdvanceForm.jsx b/src/components/Customer/PPM/Booking/Advance/AdvanceForm.jsx index fa13adeaece..902d381a220 100644 --- a/src/components/Customer/PPM/Booking/Advance/AdvanceForm.jsx +++ b/src/components/Customer/PPM/Booking/Advance/AdvanceForm.jsx @@ -101,6 +101,7 @@ const AdvanceForm = ({ mtoShipment, onSubmit, onBack }) => { defaultValue="0" name="advanceAmountRequested" label="Amount requested" + labelHint="Required" id="advanceAmountRequested" mask={Number} scale={0} // digits after point, 0 for integers diff --git a/src/components/Customer/PPM/Booking/Advance/AdvanceForm.test.jsx b/src/components/Customer/PPM/Booking/Advance/AdvanceForm.test.jsx index 8320c9196e8..a65ff8a4bce 100644 --- a/src/components/Customer/PPM/Booking/Advance/AdvanceForm.test.jsx +++ b/src/components/Customer/PPM/Booking/Advance/AdvanceForm.test.jsx @@ -49,7 +49,7 @@ describe('AdvanceForm component', () => { it('displays input for amount requested when advance requested is true', async () => { render(); const requestAdvance = screen.getByLabelText('Yes'); - expect(await screen.queryByLabelText('Amount requested')).toBeNull(); + expect(await screen.queryByLabelText(/Amount requested/)).toBeNull(); expect( screen.queryByLabelText( "I acknowledge that any advance I'm given will be deducted from my final incentive payment. If my advance ends up being more than my incentive, I will need to repay the difference.", @@ -58,7 +58,7 @@ describe('AdvanceForm component', () => { await userEvent.click(requestAdvance); await waitFor(() => { - expect(screen.getByLabelText('Amount requested')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Amount requested/)).toBeInstanceOf(HTMLInputElement); expect( screen.getByLabelText( "I acknowledge that any advance I'm given will be deducted from my final incentive payment. If my advance ends up being more than my incentive, I will need to repay the difference.", @@ -74,7 +74,7 @@ describe('AdvanceForm component', () => { await userEvent.click(inputHasRequestedAdvance); - const advanceAmountRequested = screen.getByLabelText('Amount requested'); + const advanceAmountRequested = screen.getByLabelText(/Amount requested/); await userEvent.click(advanceAmountRequested); await userEvent.tab(); @@ -95,7 +95,7 @@ describe('AdvanceForm component', () => { await userEvent.click(inputHasRequestedAdvance); - const advanceAmountRequested = screen.getByLabelText('Amount requested'); + const advanceAmountRequested = screen.getByLabelText(/Amount requested/); await userEvent.click(advanceAmountRequested); await userEvent.type(advanceAmountRequested, '0'); @@ -119,7 +119,7 @@ describe('AdvanceForm component', () => { await userEvent.click(inputHasRequestedAdvance); - const advanceAmountRequested = screen.getByLabelText('Amount requested'); + const advanceAmountRequested = screen.getByLabelText(/Amount requested/); await userEvent.click(advanceAmountRequested); await userEvent.type(advanceAmountRequested, '10000'); @@ -140,7 +140,7 @@ describe('AdvanceForm component', () => { render(); await waitFor(() => { expect(screen.queryByLabelText('Yes').checked).toBe(true); - expect(screen.getByLabelText('Amount requested').value).toBe('300'); + expect(screen.getByLabelText(/Amount requested/).value).toBe('300'); }); }); }); diff --git a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx index 25dadbebcaa..c98a73e5bdc 100644 --- a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx +++ b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.jsx @@ -20,6 +20,7 @@ import { AddressFields } from 'components/form/AddressFields/AddressFields'; import { OptionalAddressSchema } from 'components/Customer/MtoShipmentForm/validationSchemas'; import { requiredAddressSchema } from 'utils/validation'; import { isBooleanFlagEnabled } from 'utils/featureFlags'; +import RequiredTag from 'components/form/RequiredTag'; let meta = ''; @@ -138,7 +139,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb validateOnMount validateOnChange > - {({ isValid, isSubmitting, handleSubmit, setValues, values, touched }) => { + {({ isValid, isSubmitting, handleSubmit, setValues, values }) => { const handleUseCurrentResidenceChange = (e) => { const { checked } = e.target; if (checked) { @@ -199,6 +200,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb

Origin

( <>

What address are you moving from?

@@ -213,6 +215,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb
Will you add items to your PPM from a second address? +

Second pickup location

- +

A second origin address could mean that your final incentive is lower than your estimate. @@ -253,6 +256,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb

Will you add items to your PPM from a third address? +

Third pickup location

- + )} @@ -294,6 +298,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb

Destination

( <>

Please input your destination address.

@@ -308,6 +313,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb
Will you deliver part of your PPM to a second address? +

Second delivery location

- +

A second destination address could mean that your final incentive is lower than your @@ -349,6 +355,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb

Will you deliver part of your PPM to a third address? +

Third delivery location

- + )} @@ -401,11 +408,10 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb If you have more than one PPM for this move, your closeout office will be the same for all your @@ -418,6 +424,7 @@ const DateAndLocationForm = ({ mtoShipment, destinationDutyLocation, serviceMemb

Storage

Do you plan to store items from your PPM? +

Departure date

Enter the first day you expect to move things. It's OK if the actual date is different. We will diff --git a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx index 90be179dc47..c7bd1482bc3 100644 --- a/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx +++ b/src/components/Customer/PPM/Booking/DateAndLocationForm/DateAndLocationForm.test.jsx @@ -47,12 +47,12 @@ describe('DateAndLocationForm component', () => { it('renders blank form on load', async () => { render(); expect(await screen.getByRole('heading', { level: 2, name: 'Origin' })).toBeInTheDocument(); - const postalCodes = screen.getAllByLabelText('ZIP'); - const address1 = screen.getAllByLabelText('Address 1'); + const postalCodes = screen.getAllByLabelText(/ZIP/); + const address1 = screen.getAllByLabelText(/Address 1/); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); const address3 = screen.getAllByLabelText('Address 3', { exact: false }); - const state = screen.getAllByLabelText('State'); - const city = screen.getAllByLabelText('City'); + const state = screen.getAllByLabelText(/State/); + const city = screen.getAllByLabelText(/City/); expect(address1[0]).toBeInstanceOf(HTMLInputElement); expect(address2[0]).toBeInstanceOf(HTMLInputElement); @@ -72,19 +72,19 @@ describe('DateAndLocationForm component', () => { expect(screen.getAllByLabelText('Yes')[1]).toBeInstanceOf(HTMLInputElement); expect(screen.getAllByLabelText('No')[1]).toBeInstanceOf(HTMLInputElement); expect(screen.getByRole('heading', { level: 2, name: 'Closeout Office' })).toBeInTheDocument(); - expect(screen.getByLabelText('Which closeout office should review your PPM?')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Which closeout office should review your PPM\?/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByRole('heading', { level: 2, name: 'Storage' })).toBeInTheDocument(); expect(screen.getAllByLabelText('Yes')[2]).toBeInstanceOf(HTMLInputElement); expect(screen.getAllByLabelText('No')[2]).toBeInstanceOf(HTMLInputElement); expect(screen.getByRole('heading', { level: 2, name: 'Departure date' })).toBeInTheDocument(); - expect(screen.getByLabelText('When do you plan to start moving your PPM?')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/When do you plan to start moving your PPM?/)).toBeInstanceOf(HTMLInputElement); }); }); describe('displays conditional inputs', () => { it('displays current address when "Use my current origin address" is selected', async () => { render(); - const postalCodes = screen.getAllByLabelText('ZIP'); + const postalCodes = screen.getAllByLabelText(/ZIP/); expect(postalCodes[0].value).toBe(''); await act(async () => { await userEvent.click(screen.getByLabelText('Use my current origin address')); @@ -99,7 +99,7 @@ describe('DateAndLocationForm component', () => { await act(async () => { await userEvent.click(screen.getByLabelText('Use my current origin address')); }); - const postalCodes = screen.getAllByLabelText('ZIP'); + const postalCodes = screen.getAllByLabelText(/ZIP/); await waitFor(() => { expect(postalCodes[0].value).toBe(defaultProps.serviceMember.residential_address.postalCode); @@ -120,11 +120,11 @@ describe('DateAndLocationForm component', () => { const hasSecondaryPickupAddress = await screen.getAllByLabelText('Yes')[1]; await userEvent.click(hasSecondaryPickupAddress); - const postalCodes = screen.getAllByLabelText('ZIP'); - const address1 = screen.getAllByLabelText('Address 1', { exact: false }); + const postalCodes = screen.getAllByLabelText(/ZIP/); + const address1 = screen.getAllByLabelText(/Address 1/, { exact: false }); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); - const state = screen.getAllByLabelText('State'); - const city = screen.getAllByLabelText('City'); + const state = screen.getAllByLabelText(/State/); + const city = screen.getAllByLabelText(/City/); await waitFor(() => { expect(address1[1]).toBeInstanceOf(HTMLInputElement); expect(address2[1]).toBeInstanceOf(HTMLInputElement); @@ -139,11 +139,11 @@ describe('DateAndLocationForm component', () => { await act(async () => { render(); await userEvent.click(screen.getByLabelText('Use my current destination address')); - const postalCodes = screen.getAllByLabelText('ZIP'); - const address1 = screen.getAllByLabelText('Address 1', { exact: false }); + const postalCodes = screen.getAllByLabelText(/ZIP/); + const address1 = screen.getAllByLabelText(/Address 1/, { exact: false }); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); - const state = screen.getAllByLabelText('State'); - const city = screen.getAllByLabelText('City'); + const state = screen.getAllByLabelText(/State/); + const city = screen.getAllByLabelText(/City/); expect(await address1[1]).toHaveValue(defaultProps.destinationDutyLocation.address.streetAddress1); expect(address2[1]).toHaveValue(''); expect(city[1]).toHaveValue(defaultProps.destinationDutyLocation.address.city); @@ -159,12 +159,12 @@ describe('DateAndLocationForm component', () => { const hasSecondaryDestinationAddress = await screen.getAllByLabelText('Yes')[1]; await userEvent.click(hasSecondaryDestinationAddress); - const postalCodes = screen.getAllByLabelText('ZIP'); - const address1 = screen.getAllByLabelText('Address 1', { exact: false }); + const postalCodes = screen.getAllByLabelText(/ZIP/); + const address1 = screen.getAllByLabelText(/Address 1/, { exact: false }); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); const address3 = screen.getAllByLabelText('Address 3', { exact: false }); - const state = screen.getAllByLabelText('State'); - const city = screen.getAllByLabelText('City'); + const state = screen.getAllByLabelText(/State/); + const city = screen.getAllByLabelText(/City/); await waitFor(() => { expect(address1[2]).toBeInstanceOf(HTMLInputElement); @@ -186,7 +186,7 @@ describe('DateAndLocationForm component', () => { render(); expect(screen.getByText('Closeout Office')).toBeInTheDocument(); - expect(screen.getByLabelText('Which closeout office should review your PPM?')).toBeInTheDocument(); + expect(screen.getByLabelText(/Which closeout office should review your PPM\?/)).toBeInTheDocument(); expect(screen.getByText('Start typing a closeout office...')).toBeInTheDocument(); }); }); @@ -200,7 +200,7 @@ describe('DateAndLocationForm component', () => { render(); expect(screen.getByText('Closeout Office')).toBeInTheDocument(); - expect(screen.getByLabelText('Which closeout office should review your PPM?')).toBeInTheDocument(); + expect(screen.getByLabelText(/Which closeout office should review your PPM\?/)).toBeInTheDocument(); expect(screen.getByText('Start typing a closeout office...')).toBeInTheDocument(); }); }); @@ -214,7 +214,7 @@ describe('DateAndLocationForm component', () => { render(); expect(screen.queryByText('Closeout Office')).not.toBeInTheDocument(); - expect(screen.queryByLabelText('Which closeout office should review your PPM?')).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Which closeout office should review your PPM\?/)).not.toBeInTheDocument(); expect(screen.queryByText('Start typing a closeout office...')).not.toBeInTheDocument(); }); }); @@ -225,8 +225,8 @@ describe('validates form fields and displays error messages', () => { render(); await act(async () => { - await userEvent.click(screen.getByLabelText('Which closeout office should review your PPM?')); - await userEvent.keyboard('{backspace}'); + await userEvent.click(screen.getByLabelText(/Which closeout office should review your PPM\?/)); + await userEvent.keyboard('{backspace}[Tab]'); }); expect(screen.getByRole('button', { name: 'Save & Continue' })).toBeDisabled(); @@ -248,7 +248,7 @@ describe('validates form fields and displays error messages', () => { await userEvent.type(document.querySelector('input[name="destinationAddress.address.postalCode"]'), '1000'); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '1 January 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '1 January 2022'); await userEvent.click(screen.getByRole('button', { name: 'Save & Continue' })); await waitFor(() => { @@ -260,7 +260,7 @@ describe('validates form fields and displays error messages', () => { // Departure date expect(requiredAlerts[2]).toHaveTextContent('Enter a complete date in DD MMM YYYY format (day, month, year).'); expect( - within(requiredAlerts[2].nextElementSibling).getByLabelText('When do you plan to start moving your PPM?'), + within(requiredAlerts[2].nextElementSibling).getByLabelText(/When do you plan to start moving your PPM?/), ).toBeInTheDocument(); }); }); @@ -271,11 +271,11 @@ describe('validates form fields and displays error messages', () => { const hasTertiaryPickupAddress = await screen.getAllByLabelText('Yes')[2]; await userEvent.click(hasTertiaryPickupAddress); - const postalCodes = screen.getAllByLabelText('ZIP'); - const address1 = screen.getAllByLabelText('Address 1', { exact: false }); + const postalCodes = screen.getAllByLabelText(/ZIP/); + const address1 = screen.getAllByLabelText(/Address 1/, { exact: false }); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); - const state = screen.getAllByLabelText('State'); - const city = screen.getAllByLabelText('City'); + const state = screen.getAllByLabelText(/State/); + const city = screen.getAllByLabelText(/City/); await waitFor(() => { expect(address1[1]).toBeInstanceOf(HTMLInputElement); expect(address2[1]).toBeInstanceOf(HTMLInputElement); @@ -291,12 +291,12 @@ describe('validates form fields and displays error messages', () => { const hasTertiaryDestinationAddress = await screen.getAllByLabelText('Yes')[2]; await userEvent.click(hasTertiaryDestinationAddress); - const postalCodes = screen.getAllByLabelText('ZIP'); - const address1 = screen.getAllByLabelText('Address 1', { exact: false }); + const postalCodes = screen.getAllByLabelText(/ZIP/); + const address1 = screen.getAllByLabelText(/Address 1/, { exact: false }); const address2 = screen.getAllByLabelText('Address 2', { exact: false }); const address3 = screen.getAllByLabelText('Address 3', { exact: false }); - const state = screen.getAllByLabelText('State'); - const city = screen.getAllByLabelText('City'); + const state = screen.getAllByLabelText(/State/); + const city = screen.getAllByLabelText(/City/); await waitFor(() => { expect(address1[1]).toBeInstanceOf(HTMLInputElement); diff --git a/src/components/Customer/PPM/Booking/EstimatedWeightsProGearForm/EstimatedWeightsProGearForm.jsx b/src/components/Customer/PPM/Booking/EstimatedWeightsProGearForm/EstimatedWeightsProGearForm.jsx index 8a90c8830c5..b83ed79aea2 100644 --- a/src/components/Customer/PPM/Booking/EstimatedWeightsProGearForm/EstimatedWeightsProGearForm.jsx +++ b/src/components/Customer/PPM/Booking/EstimatedWeightsProGearForm/EstimatedWeightsProGearForm.jsx @@ -16,6 +16,7 @@ import formStyles from 'styles/form.module.scss'; import { OrdersShape } from 'types/customerShapes'; import { ShipmentShape } from 'types/shipment'; import { formatWeight } from 'utils/formatters'; +import RequiredTag from 'components/form/RequiredTag'; const validationSchema = Yup.object().shape({ estimatedWeight: Yup.number().min(1, 'Enter a weight greater than 0 lbs').required('Required'), @@ -69,6 +70,7 @@ const EstimatedWeightsProGearForm = ({ orders, mtoShipment, onSubmit, onBack }) defaultValue="0" name="estimatedWeight" label="Estimated weight of this PPM shipment" + labelHint="Required" id="estimatedWeight" mask={Number} scale={0} // digits after point, 0 for integers @@ -122,6 +124,7 @@ const EstimatedWeightsProGearForm = ({ orders, mtoShipment, onSubmit, onBack }) Do you or your spouse have pro-gear that you'll move in this PPM? + { expect(screen.getByRole('heading', { level: 2, name: 'Pro-gear' })).toBeInTheDocument(); expect(screen.getByLabelText('Yes')).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText('No')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('Estimated weight of this PPM shipment')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Estimated weight of this PPM shipment/)).toBeInstanceOf(HTMLInputElement); }); }); @@ -58,13 +58,13 @@ describe('EstimatedWeightsProGearForm component', () => { it('displays secondary pro gear weight inputs when hasProGear is true', async () => { render(); const hasProGear = await screen.getByLabelText('Yes'); - expect(screen.queryByLabelText('Estimated weight of your pro-gear')).toBeNull(); - expect(screen.queryByLabelText('Estimated weight of your spouse’s pro-gear')).toBeNull(); + expect(screen.queryByLabelText(/Estimated weight of your pro-gear/)).toBeNull(); + expect(screen.queryByLabelText(/Estimated weight of your spouse’s pro-gear/)).toBeNull(); await userEvent.click(hasProGear); await waitFor(() => { - expect(screen.getByLabelText('Estimated weight of your pro-gear')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText('Estimated weight of your spouse’s pro-gear')).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Estimated weight of your pro-gear/)).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText(/Estimated weight of your spouse’s pro-gear/)).toBeInstanceOf(HTMLInputElement); }); }); }); @@ -74,11 +74,11 @@ describe('EstimatedWeightsProGearForm component', () => { render(); await waitFor(() => { - expect(screen.getByLabelText('Estimated weight of this PPM shipment').value).toBe('4,000'); + expect(screen.getByLabelText(/Estimated weight of this PPM shipment/).value).toBe('4,000'); }); expect(screen.getByLabelText('Yes').value).toBe('true'); - expect(screen.getByLabelText('Estimated weight of your pro-gear').value).toBe('1,000'); - expect(screen.getByLabelText('Estimated weight of your spouse’s pro-gear').value).toBe('100'); + expect(screen.getByLabelText(/Estimated weight of your pro-gear/).value).toBe('1,000'); + expect(screen.getByLabelText(/Estimated weight of your spouse’s pro-gear/).value).toBe('100'); }); }); @@ -105,7 +105,7 @@ describe('EstimatedWeightsProGearForm component', () => { await userEvent.click(inputHasProGear); - const selfProGear = screen.getByLabelText('Estimated weight of your pro-gear'); + const selfProGear = screen.getByLabelText(/Estimated weight of your pro-gear/); await userEvent.click(selfProGear); await userEvent.tab(); diff --git a/src/components/Customer/PPM/Closeout/AboutForm/AboutForm.jsx b/src/components/Customer/PPM/Closeout/AboutForm/AboutForm.jsx index ba0af0c77cc..055456f4495 100644 --- a/src/components/Customer/PPM/Closeout/AboutForm/AboutForm.jsx +++ b/src/components/Customer/PPM/Closeout/AboutForm/AboutForm.jsx @@ -91,7 +91,6 @@ const AboutForm = ({ mtoShipment, onBack, onSubmit }) => { className={classnames(styles.actualMoveDate, 'usa-input')} name="actualMoveDate" label="When did you leave your origin?" - required /> If it took you more than one day to move out, use the first day.

Locations

@@ -102,6 +101,7 @@ const AboutForm = ({ mtoShipment, onBack, onSubmit }) => { ( @@ -139,6 +139,7 @@ const AboutForm = ({ mtoShipment, onBack, onSubmit }) => { {values.hasSecondaryPickupAddress === 'true' && ( )} @@ -149,6 +150,7 @@ const AboutForm = ({ mtoShipment, onBack, onSubmit }) => { name="destinationAddress" legend="Destination Address" className={styles.AddressFieldSet} + labelHint="Required" formikFunctionsToValidatePostalCodeOnChange={{ handleChange, setFieldTouched }} render={(fields) => ( <> @@ -186,6 +188,7 @@ const AboutForm = ({ mtoShipment, onBack, onSubmit }) => { )} @@ -235,7 +238,7 @@ const AboutForm = ({ mtoShipment, onBack, onSubmit }) => {

W-2 address

What is the address on your W-2?

- +
diff --git a/src/components/form/ContactInfoFields/ContactInfoFields.jsx b/src/components/form/ContactInfoFields/ContactInfoFields.jsx index a28abe33f21..e4d1f26c9b0 100644 --- a/src/components/form/ContactInfoFields/ContactInfoFields.jsx +++ b/src/components/form/ContactInfoFields/ContactInfoFields.jsx @@ -6,24 +6,15 @@ import { Fieldset } from '@trussworks/react-uswds'; import TextField from 'components/form/fields/TextField/TextField'; import MaskedTextField from 'components/form/fields/MaskedTextField/MaskedTextField'; -export const ContactInfoFields = ({ legend, className, name, render, optional }) => { +export const ContactInfoFields = ({ legend, className, name, render }) => { const contactInfoFieldsUUID = uuidv4(); + return (
{render( <> - - + + - + , )}
diff --git a/src/components/form/CustomerAltContactInfoFields/index.jsx b/src/components/form/CustomerAltContactInfoFields/index.jsx index ad60965a2dd..a407574a785 100644 --- a/src/components/form/CustomerAltContactInfoFields/index.jsx +++ b/src/components/form/CustomerAltContactInfoFields/index.jsx @@ -1,11 +1,10 @@ import React, { useRef } from 'react'; import { func, node, string } from 'prop-types'; import { v4 as uuidv4 } from 'uuid'; -import { Label, Fieldset } from '@trussworks/react-uswds'; +import { Label, Fieldset, ErrorMessage } from '@trussworks/react-uswds'; +import { useFormikContext } from 'formik'; import classnames from 'classnames'; -import RequiredTag from '../RequiredTag'; - import formStyles from 'styles/form.module.scss'; import TextField from 'components/form/fields/TextField/TextField'; import MaskedTextField from 'components/form/fields/MaskedTextField/MaskedTextField'; @@ -13,6 +12,7 @@ import { CheckboxField } from 'components/form/fields'; export const CustomerAltContactInfoFields = ({ legend, className, render }) => { const CustomerAltContactInfoFieldsUUID = useRef(uuidv4()); + const { errors } = useFormikContext(); return (
@@ -23,13 +23,13 @@ export const CustomerAltContactInfoFields = ({ legend, className, render }) => {
- +
- +
@@ -52,7 +52,7 @@ export const CustomerAltContactInfoFields = ({ legend, className, render }) => { type="tel" minimum="12" mask="000{-}000{-}0000" - optional + labelHint="Optional" />
@@ -68,7 +68,7 @@ export const CustomerAltContactInfoFields = ({ legend, className, render }) => {
- + {errors.preferredContactMethod ? {errors.preferredContactMethod} : null}
( > {() => ( - + )} diff --git a/src/components/form/CustomerContactInfoFields/index.jsx b/src/components/form/CustomerContactInfoFields/index.jsx index 3661d9d6c61..ccb6dca24a4 100644 --- a/src/components/form/CustomerContactInfoFields/index.jsx +++ b/src/components/form/CustomerContactInfoFields/index.jsx @@ -4,14 +4,12 @@ import { v4 as uuidv4 } from 'uuid'; import { Label, Fieldset } from '@trussworks/react-uswds'; import classnames from 'classnames'; -import RequiredTag from '../RequiredTag'; - import formStyles from 'styles/form.module.scss'; import TextField from 'components/form/fields/TextField/TextField'; import MaskedTextField from 'components/form/fields/MaskedTextField/MaskedTextField'; import { CheckboxField } from 'components/form/fields'; -export const CustomerContactInfoFields = ({ legend, className, render }) => { +export const CustomerContactInfoFields = ({ legend, className, render, labelHint: labelHintProp }) => { const CustomerContactInfoFieldsUUID = useRef(uuidv4()); return ( @@ -24,6 +22,7 @@ export const CustomerContactInfoFields = ({ legend, className, render }) => { label="Best contact phone" id={`telephone_${CustomerContactInfoFieldsUUID.current}`} name="telephone" + labelHint={labelHintProp} type="tel" minimum="12" mask="000{-}000{-}0000" @@ -35,7 +34,7 @@ export const CustomerContactInfoFields = ({ legend, className, render }) => {
{ label="Personal email" id={`personalEmail_${CustomerContactInfoFieldsUUID.current}`} name="personal_email" + labelHint={labelHintProp} required /> - - +
{ const { @@ -37,13 +35,11 @@ export const DatePickerInput = (props) => { {renderInput( <>
-
- {hint && {hint}} {meta.error} { - const { - id, - name, - label, - options, - showDropdownPlaceholderText, - isDisabled, - disableErrorLabel, - required, - ...inputProps - } = props; + const { id, name, label, options, showDropdownPlaceholderText, isDisabled, disableErrorLabel, hint, ...inputProps } = + props; const [field, meta] = useField(props); const hasError = disableErrorLabel ? false : meta.touched && !!meta.error; @@ -31,14 +21,14 @@ export const DropdownInput = (props) => { return (
-
{meta.error} {/* eslint-disable-next-line react/jsx-props-no-spreading */} - + {showDropdownPlaceholderText && } {options && options.map(({ key, value }) => ( diff --git a/src/components/form/fields/DutyLocationInput.jsx b/src/components/form/fields/DutyLocationInput.jsx index 7559cc76c4e..2a30dccad33 100644 --- a/src/components/form/fields/DutyLocationInput.jsx +++ b/src/components/form/fields/DutyLocationInput.jsx @@ -1,4 +1,4 @@ -import { useField } from 'formik'; +import { useField, useFormikContext } from 'formik'; import React from 'react'; import PropTypes from 'prop-types'; @@ -7,20 +7,11 @@ import './DropdownInput.module.scss'; // TODO: refactor component when we can to make it more user friendly with Formik export const DutyLocationInput = (props) => { - const { - label, - name, - displayAddress, - hint, - placeholder, - isDisabled, - searchLocations, - metaOverride, - touched, - required, - } = props; + const { label, name, displayAddress, hint, placeholder, isDisabled, searchLocations, metaOverride } = props; const [field, meta, helpers] = useField(props); + const { touched } = useFormikContext(); + let errorString = ''; if (metaOverride && metaOverride !== '') { errorString = metaOverride; @@ -50,7 +41,6 @@ export const DutyLocationInput = (props) => { placeholder={placeholder} isDisabled={isDisabled} searchLocations={searchLocations} - required={required} /> ); }; diff --git a/src/components/form/fields/DutyLocationInput.test.jsx b/src/components/form/fields/DutyLocationInput.test.jsx index 756429be332..652ccfc370e 100644 --- a/src/components/form/fields/DutyLocationInput.test.jsx +++ b/src/components/form/fields/DutyLocationInput.test.jsx @@ -1,4 +1,5 @@ import React from 'react'; +import * as Formik from 'formik'; import { mount, shallow } from 'enzyme'; import { act } from 'react-dom/test-utils'; import AsyncSelect from 'react-select/async'; @@ -9,6 +10,19 @@ import { DutyLocationInput } from './DutyLocationInput'; import { LocationSearchBoxComponent, LocationSearchBoxContainer } from 'components/LocationSearchBox/LocationSearchBox'; const mockSetValue = jest.fn(); + +const useFormikContextMock = jest.spyOn(Formik, 'useFormikContext'); + +// Helper method + +const getFieldMetaMock = () => { + return { + value: 'testValue', + initialTouched: true, + touched: false, + }; +}; + // mock out formik hook as we are not testing formik // needs to be before first describe const metaMock = { @@ -56,6 +70,9 @@ jest.mock('formik', () => ({ }, ]; }), + useFormikContext: jest.fn(() => { + return { touched: {} }; + }), })); jest.mock('components/LocationSearchBox/api', () => { @@ -71,12 +88,17 @@ jest.mock('components/LocationSearchBox/api', () => { }; }); +const mockProps = { ...fieldMock, ...metaMock, ...helperMock }; + beforeEach(() => { + useFormikContextMock.mockReturnValue({ + getFieldMeta: getFieldMetaMock, + touched: {}, + }); + useField.mockReturnValue([fieldMock, metaMock, helperMock]); }); -const mockProps = { ...fieldMock, ...metaMock, ...helperMock }; - describe('DutyLocationInput', () => { describe('with all required props', () => { const wrapper = shallow(); diff --git a/src/components/form/fields/MaskedTextField/MaskedTextField.jsx b/src/components/form/fields/MaskedTextField/MaskedTextField.jsx index daddcf9fbdd..57f84e2d860 100644 --- a/src/components/form/fields/MaskedTextField/MaskedTextField.jsx +++ b/src/components/form/fields/MaskedTextField/MaskedTextField.jsx @@ -8,10 +8,10 @@ import { FormGroup, Label } from '@trussworks/react-uswds'; import styles from './MaskedTextField.module.scss'; +import { OptionalTag } from 'components/form/OptionalTag'; import { ErrorMessage } from 'components/form/index'; import Hint from 'components/Hint'; import { isNullUndefinedOrWhitespace } from 'shared/utils'; -import RequiredTag from 'components/form/RequiredTag'; const MaskedTextField = ({ containerClassName, @@ -68,7 +68,7 @@ const MaskedTextField = ({ {description}
)} - {optional || } + {optional && }
{showError && ( diff --git a/src/components/form/fields/TextField/TextField.jsx b/src/components/form/fields/TextField/TextField.jsx index 577f9c8bff5..d7e96143720 100644 --- a/src/components/form/fields/TextField/TextField.jsx +++ b/src/components/form/fields/TextField/TextField.jsx @@ -4,7 +4,7 @@ import classnames from 'classnames'; import { useField } from 'formik'; import { FormGroup, Label, TextInput, Textarea, ErrorMessage } from '@trussworks/react-uswds'; -import { RequiredTag } from 'components/form/RequiredTag'; +import { OptionalTag } from 'components/form/OptionalTag'; import Hint from 'components/Hint'; /** @@ -50,7 +50,7 @@ const TextField = ({ - {optional || } + {optional && }
{showError && ( diff --git a/src/pages/MyMove/AddOrders.test.jsx b/src/pages/MyMove/AddOrders.test.jsx index ead25d1b826..2a351155d8d 100644 --- a/src/pages/MyMove/AddOrders.test.jsx +++ b/src/pages/MyMove/AddOrders.test.jsx @@ -184,13 +184,13 @@ describe('Add Orders page', () => { }); await screen.findByRole('heading', { level: 1, name: 'Tell us about your move orders' }); - expect(screen.getByLabelText('Orders type')).toBeInTheDocument(); - expect(screen.getByLabelText('Orders date')).toBeInTheDocument(); - expect(screen.getByLabelText('Report by date')).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 your orders?')).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(); const backBtn = await screen.findByRole('button', { name: 'Back' }); expect(backBtn).toBeInTheDocument(); @@ -239,19 +239,19 @@ describe('Add Orders page', () => { const nextBtn = await screen.findByRole('button', { name: 'Next' }); expect(nextBtn).toBeInTheDocument(); - await userEvent.selectOptions(screen.getByLabelText('Orders type'), 'PERMANENT_CHANGE_OF_STATION'); - await userEvent.type(screen.getByLabelText('Orders date'), '08 Nov 2020'); - await userEvent.type(screen.getByLabelText('Report by date'), '26 Nov 2020'); + await userEvent.selectOptions(screen.getByLabelText(/Orders type/), 'PERMANENT_CHANGE_OF_STATION'); + await userEvent.type(screen.getByLabelText(/Orders date/), '08 Nov 2020'); + await userEvent.type(screen.getByLabelText(/Report by date/), '26 Nov 2020'); await userEvent.click(screen.getByLabelText('No')); - await userEvent.selectOptions(screen.getByLabelText('Pay grade'), ['E_5']); + await userEvent.selectOptions(screen.getByLabelText(/Pay grade/), ['E_5']); // Test Current Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('Current duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/Current duty location/), 'AFB', { delay: 100 }); const selectedOptionCurrent = await screen.findByText(/Altus/); await userEvent.click(selectedOptionCurrent); // Test New Duty Location Search Box interaction - await userEvent.type(screen.getByLabelText('New duty location'), 'AFB', { delay: 100 }); + await userEvent.type(screen.getByLabelText(/New duty location/), 'AFB', { delay: 100 }); const selectedOptionNew = await screen.findByText(/Luke/); await userEvent.click(selectedOptionNew); diff --git a/src/pages/MyMove/Boat/BoatShipmentLocationInfo/BoatShipmentLocationInfo.test.jsx b/src/pages/MyMove/Boat/BoatShipmentLocationInfo/BoatShipmentLocationInfo.test.jsx index 173adc51dd3..3af83c70129 100644 --- a/src/pages/MyMove/Boat/BoatShipmentLocationInfo/BoatShipmentLocationInfo.test.jsx +++ b/src/pages/MyMove/Boat/BoatShipmentLocationInfo/BoatShipmentLocationInfo.test.jsx @@ -147,20 +147,20 @@ describe('Pickup info page', () => { renderBoatShipmentLocationInfo(); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); expect(screen.getByLabelText('Use my current address')).not.toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[0]).toHaveValue('812 S 129th St'); + expect(screen.getAllByLabelText(/Address 1/)[0]).toHaveValue('812 S 129th St'); expect(screen.getAllByLabelText(/Address 2/)[0]).toHaveValue(''); - expect(screen.getAllByLabelText('City')[0]).toHaveValue('San Antonio'); - expect(screen.getAllByLabelText('State')[0]).toHaveValue('TX'); - expect(screen.getAllByLabelText('ZIP')[0]).toHaveValue('78234'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(screen.getAllByLabelText(/City/)[0]).toHaveValue('San Antonio'); + expect(screen.getAllByLabelText(/State/)[0]).toHaveValue('TX'); + expect(screen.getAllByLabelText(/ZIP/)[0]).toHaveValue('78234'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); expect(screen.getByTitle('Yes, I know my delivery address')).toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[1]).toHaveValue('441 SW Rio de la Plata Drive'); + expect(screen.getAllByLabelText(/Address 1/)[1]).toHaveValue('441 SW Rio de la Plata Drive'); expect(screen.getAllByLabelText(/Address 2/)[1]).toHaveValue(''); - expect(screen.getAllByLabelText('City')[1]).toHaveValue('Tacoma'); - expect(screen.getAllByLabelText('State')[1]).toHaveValue('WA'); - expect(screen.getAllByLabelText('ZIP')[1]).toHaveValue('98421'); + expect(screen.getAllByLabelText(/City/)[1]).toHaveValue('Tacoma'); + expect(screen.getAllByLabelText(/State/)[1]).toHaveValue('WA'); + expect(screen.getAllByLabelText(/ZIP/)[1]).toHaveValue('98421'); }, ); @@ -222,7 +222,7 @@ describe('Pickup info page', () => { renderBoatShipmentLocationInfo({ isCreatePage: false, mtoShipment: mockMTOShipment }); - const pickupAddress1Input = screen.getAllByLabelText('Address 1')[0]; + const pickupAddress1Input = screen.getAllByLabelText(/Address 1/)[0]; await userEvent.clear(pickupAddress1Input); await userEvent.type(pickupAddress1Input, shipmentInfo.pickupAddress.streetAddress1); @@ -230,14 +230,14 @@ describe('Pickup info page', () => { await userEvent.clear(pickupAddress2Input); await userEvent.type(pickupAddress2Input, shipmentInfo.pickupAddress.streetAddress2); - const pickupCityInput = screen.getAllByLabelText('City')[0]; + const pickupCityInput = screen.getAllByLabelText(/City/)[0]; await userEvent.clear(pickupCityInput); await userEvent.type(pickupCityInput, shipmentInfo.pickupAddress.city); - const pickupStateInput = screen.getAllByLabelText('State')[0]; + const pickupStateInput = screen.getAllByLabelText(/State/)[0]; await userEvent.selectOptions(pickupStateInput, shipmentInfo.pickupAddress.state); - const pickupPostalCodeInput = screen.getAllByLabelText('ZIP')[0]; + const pickupPostalCodeInput = screen.getAllByLabelText(/ZIP/)[0]; await userEvent.clear(pickupPostalCodeInput); await userEvent.type(pickupPostalCodeInput, shipmentInfo.pickupAddress.postalCode); diff --git a/src/pages/MyMove/MobileHome/MobileHomeShipmentLocationInfo/MobileHomeShipmentLocationInfo.test.jsx b/src/pages/MyMove/MobileHome/MobileHomeShipmentLocationInfo/MobileHomeShipmentLocationInfo.test.jsx index e1387dee4dc..3d0a1316e3d 100644 --- a/src/pages/MyMove/MobileHome/MobileHomeShipmentLocationInfo/MobileHomeShipmentLocationInfo.test.jsx +++ b/src/pages/MyMove/MobileHome/MobileHomeShipmentLocationInfo/MobileHomeShipmentLocationInfo.test.jsx @@ -142,16 +142,16 @@ describe('Pickup info page', () => { renderMobileHomeShipmentLocationInfo(); - expect(await screen.findByLabelText('Preferred pickup date')).toHaveValue('01 Aug 2021'); + expect(await screen.findByLabelText(/Preferred pickup date/)).toHaveValue('01 Aug 2021'); expect(screen.getByLabelText('Use my current address')).not.toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[0]).toHaveValue('812 S 129th St'); + expect(screen.getAllByLabelText(/Address 1/)[0]).toHaveValue('812 S 129th St'); expect(screen.getAllByLabelText(/Address 2/)[0]).toHaveValue(''); expect(screen.getAllByLabelText('City')[0]).toHaveValue('San Antonio'); expect(screen.getAllByLabelText('State')[0]).toHaveValue('TX'); expect(screen.getAllByLabelText('ZIP')[0]).toHaveValue('78234'); - expect(screen.getByLabelText('Preferred delivery date')).toHaveValue('11 Aug 2021'); + expect(screen.getByLabelText(/Preferred delivery date/)).toHaveValue('11 Aug 2021'); expect(screen.getByTitle('Yes, I know my delivery address')).toBeChecked(); - expect(screen.getAllByLabelText('Address 1')[1]).toHaveValue('441 SW Rio de la Plata Drive'); + expect(screen.getAllByLabelText(/Address 1/)[1]).toHaveValue('441 SW Rio de la Plata Drive'); expect(screen.getAllByLabelText(/Address 2/)[1]).toHaveValue(''); expect(screen.getAllByLabelText('City')[1]).toHaveValue('Tacoma'); expect(screen.getAllByLabelText('State')[1]).toHaveValue('WA'); @@ -217,7 +217,7 @@ describe('Pickup info page', () => { renderMobileHomeShipmentLocationInfo({ isCreatePage: false, mtoShipment: mockMTOShipment }); - const pickupAddress1Input = screen.getAllByLabelText('Address 1')[0]; + const pickupAddress1Input = screen.getAllByLabelText(/Address 1/)[0]; await userEvent.clear(pickupAddress1Input); await userEvent.type(pickupAddress1Input, shipmentInfo.pickupAddress.streetAddress1); diff --git a/src/pages/MyMove/Orders.test.jsx b/src/pages/MyMove/Orders.test.jsx index c437f8cc4ba..dc030667394 100644 --- a/src/pages/MyMove/Orders.test.jsx +++ b/src/pages/MyMove/Orders.test.jsx @@ -424,13 +424,13 @@ describe('Orders page', () => { }); await screen.findByRole('heading', { level: 1, name: 'Tell us about your move orders' }); - expect(screen.getByLabelText('Orders type')).toHaveValue('PERMANENT_CHANGE_OF_STATION'); - expect(screen.getByLabelText('Orders date')).toHaveValue('08 Nov 2020'); - expect(screen.getByLabelText('Report by date')).toHaveValue('26 Nov 2020'); + expect(screen.getByLabelText(/Orders type/)).toHaveValue('PERMANENT_CHANGE_OF_STATION'); + expect(screen.getByLabelText(/Orders date/)).toHaveValue('08 Nov 2020'); + expect(screen.getByLabelText(/Report by date/)).toHaveValue('26 Nov 2020'); expect(screen.getByLabelText('Yes')).not.toBeChecked(); expect(screen.getByLabelText('No')).toBeChecked(); expect(screen.queryByText('Yuma AFB')).toBeInTheDocument(); - expect(screen.getByLabelText('Pay grade')).toHaveValue('E_8'); + expect(screen.getByLabelText(/Pay grade/)).toHaveValue('E_8'); expect(screen.queryByText('Altus AFB')).toBeInTheDocument(); }); diff --git a/src/pages/MyMove/PPM/Booking/Advance/Advance.test.jsx b/src/pages/MyMove/PPM/Booking/Advance/Advance.test.jsx index 3465f9c0479..17f4573e77f 100644 --- a/src/pages/MyMove/PPM/Booking/Advance/Advance.test.jsx +++ b/src/pages/MyMove/PPM/Booking/Advance/Advance.test.jsx @@ -116,7 +116,7 @@ describe('Advance page', () => { expect(requestAdvanceNoInput).toBeInstanceOf(HTMLInputElement); expect(requestAdvanceNoInput.checked).toBe(true); - expect(screen.queryByLabelText('Amount requested')).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Amount requested/)).not.toBeInTheDocument(); const backButton = screen.getByRole('button', { name: /back/i }); expect(backButton).toBeInTheDocument(); @@ -154,12 +154,12 @@ describe('Advance page', () => { expect(hasRequestedAdvanceYesInput.checked).toBe(true); expect(hasRequestedAdvanceNoInput.checked).toBe(false); await waitFor(() => { - expect(screen.getByLabelText('Amount requested').value).toBe('400'); + expect(screen.getByLabelText(/Amount requested/).value).toBe('400'); }); } else { expect(hasRequestedAdvanceYesInput.checked).toBe(false); expect(hasRequestedAdvanceNoInput.checked).toBe(true); - expect(screen.queryByLabelText('Amount requested')).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Amount requested/)).not.toBeInTheDocument(); } }, ); @@ -188,14 +188,14 @@ describe('Advance page', () => { const hasRequestedAdvanceYesInput = screen.getByRole('radio', { name: /yes/i }); await userEvent.click(hasRequestedAdvanceYesInput); - const advanceInput = await screen.findByLabelText('Amount requested'); + const advanceInput = await screen.findByLabelText(/Amount requested/); expect(advanceInput).toBeInstanceOf(HTMLInputElement); const hasRequestedAdvanceNoInput = screen.getByRole('radio', { name: /no/i }); await userEvent.click(hasRequestedAdvanceNoInput); await waitFor(() => { - expect(screen.queryByLabelText('Amount requested')).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Amount requested/)).not.toBeInTheDocument(); }); }); @@ -222,7 +222,7 @@ describe('Advance page', () => { const hasRequestedAdvanceYesInput = screen.getByRole('radio', { name: /yes/i }); await userEvent.click(hasRequestedAdvanceYesInput); - const advanceInput = screen.getByLabelText('Amount requested'); + const advanceInput = screen.getByLabelText(/Amount requested/); await userEvent.type(advanceInput, String(advance)); const agreeToTerms = screen.getByLabelText(/I acknowledge/i); @@ -290,7 +290,7 @@ describe('Advance page', () => { const agreeToTerms = screen.getByLabelText(/I acknowledge/i); await userEvent.click(agreeToTerms); - const advanceInput = screen.getByLabelText('Amount requested'); + const advanceInput = screen.getByLabelText(/Amount requested/); await userEvent.type(advanceInput, String(advance)); const saveButton = screen.getByRole('button', { name: /save & continue/i }); @@ -313,7 +313,7 @@ describe('Advance page', () => { const agreeToTerms = screen.getByLabelText(/I acknowledge/i); await userEvent.click(agreeToTerms); - const advanceInput = screen.getByLabelText('Amount requested'); + const advanceInput = screen.getByLabelText(/Amount requested/); await userEvent.type(advanceInput, '4000'); const saveButton = screen.getByRole('button', { name: /save & continue/i }); @@ -340,7 +340,7 @@ describe('Advance page', () => { const hasRequestedAdvanceYesInput = screen.getByRole('radio', { name: /yes/i }); await userEvent.click(hasRequestedAdvanceYesInput); - const advanceInput = screen.getByLabelText('Amount requested'); + const advanceInput = screen.getByLabelText(/Amount requested/); await userEvent.type(advanceInput, '4000'); const agreeToTerms = screen.getByLabelText(/I acknowledge/i); await userEvent.click(agreeToTerms); diff --git a/src/pages/MyMove/PPM/Booking/DateAndLocation/DateAndLocation.test.jsx b/src/pages/MyMove/PPM/Booking/DateAndLocation/DateAndLocation.test.jsx index 2d530ea9f81..49511a8da58 100644 --- a/src/pages/MyMove/PPM/Booking/DateAndLocation/DateAndLocation.test.jsx +++ b/src/pages/MyMove/PPM/Booking/DateAndLocation/DateAndLocation.test.jsx @@ -257,7 +257,7 @@ describe('DateAndLocation component', () => { await userEvent.type(document.querySelector('input[name="destinationAddress.address.postalCode"]'), '10002'); }); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); await userEvent.click(screen.getByRole('button', { name: 'Save & Continue' })); @@ -340,7 +340,7 @@ describe('DateAndLocation component', () => { await userEvent.type(document.querySelector('input[name="destinationAddress.address.postalCode"]'), '10002'); }); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); await userEvent.click(screen.getByRole('button', { name: 'Save & Continue' })); @@ -551,7 +551,7 @@ describe('DateAndLocation component', () => { await userEvent.click(radioElements[2]); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); await userEvent.click(screen.getByRole('button', { name: 'Save & Continue' })); @@ -659,13 +659,13 @@ describe('DateAndLocation component', () => { }); await act(async () => { - await userEvent.type(screen.getAllByRole('textbox', { name: 'ZIP' })[1], '10002'); + await userEvent.type(screen.getAllByRole('textbox', { name: /ZIP/ })[1], '10002'); }); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); // Set Closeout office - const closeoutOfficeInput = await screen.getByLabelText('Which closeout office should review your PPM?'); + const closeoutOfficeInput = await screen.getByLabelText(/Which closeout office should review your PPM?/); await fireEvent.change(closeoutOfficeInput, { target: { value: 'Tester' } }); await act(() => selectEvent.select(closeoutOfficeInput, /Tester/)); @@ -739,10 +739,10 @@ describe('DateAndLocation component', () => { await userEvent.type(document.querySelector('input[name="destinationAddress.address.postalCode"]'), '10002'); }); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); // Should not see closeout office field - expect(screen.queryByLabelText('Which closeout office should review your PPM?')).not.toBeInTheDocument(); + expect(screen.queryByLabelText(/Which closeout office should review your PPM?/)).not.toBeInTheDocument(); // Submit form await userEvent.click(screen.getByRole('button', { name: 'Save & Continue' })); @@ -814,10 +814,10 @@ describe('DateAndLocation component', () => { await userEvent.type(document.querySelector('input[name="destinationAddress.address.postalCode"]'), '10002'); }); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); // Set Closeout office - const closeoutOfficeInput = await screen.getByLabelText('Which closeout office should review your PPM?'); + const closeoutOfficeInput = await screen.getByLabelText(/Which closeout office should review your PPM?/); await fireEvent.change(closeoutOfficeInput, { target: { value: 'Tester' } }); await act(() => selectEvent.select(closeoutOfficeInput, /Tester/)); @@ -889,10 +889,10 @@ describe('DateAndLocation component', () => { await userEvent.type(document.querySelector('input[name="destinationAddress.address.postalCode"]'), '10002'); }); - await userEvent.type(screen.getByLabelText('When do you plan to start moving your PPM?'), '04 Jul 2022'); + await userEvent.type(screen.getByLabelText(/When do you plan to start moving your PPM?/), '04 Jul 2022'); // Set Closeout office - const closeoutOfficeInput = await screen.getByLabelText('Which closeout office should review your PPM?'); + const closeoutOfficeInput = await screen.getByLabelText(/Which closeout office should review your PPM?/); await fireEvent.change(closeoutOfficeInput, { target: { value: 'Tester' } }); await act(() => selectEvent.select(closeoutOfficeInput, /Tester/)); @@ -930,7 +930,7 @@ describe('DateAndLocation component', () => { await userEvent.click(YesButtonSelectors[2]); await userEvent.click(YesButtonSelectors[3]); - const postalCodes = screen.getAllByLabelText('ZIP'); + const postalCodes = screen.getAllByLabelText(/ZIP/); expect(screen.getAllByLabelText('Yes')[0]).toBeChecked(); expect(screen.getAllByLabelText('Yes')[1]).toBeChecked(); @@ -938,7 +938,7 @@ describe('DateAndLocation component', () => { expect(screen.getAllByLabelText('Yes')[3]).toBeChecked(); await waitFor(() => { - expect(screen.getByLabelText('When do you plan to start moving your PPM?')).toHaveValue('31 Dec 2022'); + expect(screen.getByLabelText(/When do you plan to start moving your PPM?/)).toHaveValue('31 Dec 2022'); }); expect(postalCodes[0]).toHaveValue('20002'); @@ -961,7 +961,7 @@ describe('DateAndLocation component', () => { await userEvent.click(YesButtonSelectors[2]); await userEvent.click(YesButtonSelectors[3]); - const postalCodes = screen.getAllByLabelText('ZIP'); + const postalCodes = screen.getAllByLabelText(/ZIP/); expect(screen.getAllByLabelText('Yes')[0]).toBeChecked(); expect(screen.getAllByLabelText('Yes')[1]).toBeChecked(); @@ -969,7 +969,7 @@ describe('DateAndLocation component', () => { expect(screen.getAllByLabelText('Yes')[3]).toBeChecked(); await waitFor(() => { - expect(screen.getByLabelText('When do you plan to start moving your PPM?')).toHaveValue('31 Dec 2022'); + expect(screen.getByLabelText(/When do you plan to start moving your PPM?/)).toHaveValue('31 Dec 2022'); }); expect(postalCodes[0]).toHaveValue('20002'); @@ -1069,7 +1069,7 @@ describe('DateAndLocation component', () => { renderDateAndLocation(fullShipmentProps); - const expectedDepartureDate = screen.getByLabelText('When do you plan to start moving your PPM?'); + const expectedDepartureDate = screen.getByLabelText(/When do you plan to start moving your PPM?/); await userEvent.clear(expectedDepartureDate); await userEvent.type(expectedDepartureDate, '04 Jul 2022'); diff --git a/src/pages/MyMove/PPM/Closeout/About/About.test.jsx b/src/pages/MyMove/PPM/Closeout/About/About.test.jsx index 4f2ef87d8e2..3817badd357 100644 --- a/src/pages/MyMove/PPM/Closeout/About/About.test.jsx +++ b/src/pages/MyMove/PPM/Closeout/About/About.test.jsx @@ -135,7 +135,9 @@ const fillOutBasicForm = async (form) => { within(form).getByLabelText('When did you leave your origin?').focus(); await userEvent.paste('2022-05-31'); - within(form).getAllByLabelText('Address 1')[0].focus(); + within(form) + .getAllByLabelText(/Address 1/)[0] + .focus(); await userEvent.paste('812 S 129th St'); within(form) @@ -148,16 +150,18 @@ const fillOutBasicForm = async (form) => { .focus(); await userEvent.paste('Some Person'); - within(form).getAllByLabelText('City')[0].focus(); + within(form).getAllByLabelText(/City/)[0].focus(); await userEvent.paste('San Antonio'); - within(form).getAllByLabelText('State')[0].focus(); - await userEvent.selectOptions(within(form).getAllByLabelText('State')[0], 'TX'); + within(form).getAllByLabelText(/State/)[0].focus(); + await userEvent.selectOptions(within(form).getAllByLabelText(/State/)[0], 'TX'); - within(form).getAllByLabelText('ZIP')[0].focus(); + within(form).getAllByLabelText(/ZIP/)[0].focus(); await userEvent.paste('78234'); - within(form).getAllByLabelText('Address 1')[1].focus(); + within(form) + .getAllByLabelText(/Address 1/)[1] + .focus(); await userEvent.paste('441 SW Rio de la Plata Drive'); within(form) @@ -170,25 +174,27 @@ const fillOutBasicForm = async (form) => { .focus(); await userEvent.paste('Some Person'); - within(form).getAllByLabelText('City')[1].focus(); + within(form).getAllByLabelText(/City/)[1].focus(); await userEvent.paste('Tacoma'); - within(form).getAllByLabelText('State')[1].focus(); - await userEvent.selectOptions(within(form).getAllByLabelText('State')[1], 'WA'); + within(form).getAllByLabelText(/State/)[1].focus(); + await userEvent.selectOptions(within(form).getAllByLabelText(/State/)[1], 'WA'); - within(form).getAllByLabelText('ZIP')[1].focus(); + within(form).getAllByLabelText(/ZIP/)[1].focus(); await userEvent.paste('98421'); - within(form).getAllByLabelText('Address 1')[2].focus(); + within(form) + .getAllByLabelText(/Address 1/)[2] + .focus(); await userEvent.paste('11 NE Elm Road'); - within(form).getAllByLabelText('City')[2].focus(); + within(form).getAllByLabelText(/City/)[2].focus(); await userEvent.paste('Jacksonville'); - within(form).getAllByLabelText('State')[2].focus(); - await userEvent.selectOptions(within(form).getAllByLabelText('State')[2], 'FL'); + within(form).getAllByLabelText(/State/)[2].focus(); + await userEvent.selectOptions(within(form).getAllByLabelText(/State/)[2], 'FL'); - within(form).getAllByLabelText('ZIP')[2].focus(); + within(form).getAllByLabelText(/ZIP/)[2].focus(); await userEvent.paste('32217'); }; diff --git a/src/pages/MyMove/Profile/BackupContact.test.jsx b/src/pages/MyMove/Profile/BackupContact.test.jsx index 1417b24cc12..3eb65b07739 100644 --- a/src/pages/MyMove/Profile/BackupContact.test.jsx +++ b/src/pages/MyMove/Profile/BackupContact.test.jsx @@ -129,9 +129,9 @@ describe('BackupContact page', () => { const submitButton = queryByText('Next'); expect(submitButton).toBeInTheDocument(); - await userEvent.type(getByLabelText('Name'), 'Joe Schmoe'); - await userEvent.type(getByLabelText('Phone'), '555-555-5555'); - await userEvent.type(getByLabelText('Email'), 'test@sample.com'); + await userEvent.type(getByLabelText(/Name/), 'Joe Schmoe'); + await userEvent.type(getByLabelText(/Phone/), '555-555-5555'); + await userEvent.type(getByLabelText(/Email/), 'test@sample.com'); await userEvent.click(submitButton); await waitFor(() => { @@ -163,9 +163,9 @@ describe('BackupContact page', () => { const submitButton = queryByText('Next'); expect(submitButton).toBeInTheDocument(); - await userEvent.type(getByLabelText('Name'), 'Joe Schmitty'); - await userEvent.type(getByLabelText('Phone'), '555-555-5555'); - await userEvent.type(getByLabelText('Email'), 'test@sample.com'); + await userEvent.type(getByLabelText(/Name/), 'Joe Schmitty'); + await userEvent.type(getByLabelText(/Phone/), '555-555-5555'); + await userEvent.type(getByLabelText(/Email/), 'test@sample.com'); await userEvent.click(submitButton); await waitFor(() => { diff --git a/src/pages/MyMove/Profile/EditContactInfo.test.jsx b/src/pages/MyMove/Profile/EditContactInfo.test.jsx index f06a3b40855..0b4f1908aae 100644 --- a/src/pages/MyMove/Profile/EditContactInfo.test.jsx +++ b/src/pages/MyMove/Profile/EditContactInfo.test.jsx @@ -122,7 +122,7 @@ describe('EditContactInfo page', () => { , ); - const backupNameInput = await screen.findByLabelText('Name'); + const backupNameInput = await screen.findByLabelText(/Name/); await userEvent.clear(backupNameInput); @@ -159,7 +159,7 @@ describe('EditContactInfo page', () => { , ); - const backupNameInput = await screen.findByLabelText('Name'); + const backupNameInput = await screen.findByLabelText(/Name/); await userEvent.clear(backupNameInput); diff --git a/src/pages/Office/CustomerOnboarding/CreateCustomerForm.jsx b/src/pages/Office/CustomerOnboarding/CreateCustomerForm.jsx index 5de1f0819d0..0bb4255d3e6 100644 --- a/src/pages/Office/CustomerOnboarding/CreateCustomerForm.jsx +++ b/src/pages/Office/CustomerOnboarding/CreateCustomerForm.jsx @@ -273,7 +273,7 @@ export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => { label="DoD ID number" name="edipi" id="edipi" - optional + labelHint="Optional" maxLength="10" isDisabled={isSafetyMove} /> @@ -283,7 +283,7 @@ export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => { name="emplid" id="emplid" maxLength="7" - optional + labelHint="Optional" inputMode="numeric" pattern="[0-9]{7}" isDisabled={isSafetyMove} @@ -293,9 +293,9 @@ export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => {

Customer Name

- + - +

Contact Info

@@ -310,7 +310,7 @@ export const CreateCustomerForm = ({ userPrivileges, setFlashMessage }) => { /> { /> { /> { await userEvent.type(screen.getByLabelText('Estimated storage start'), '15 Jun 2022'); await userEvent.type(screen.getByLabelText('Estimated storage end'), '25 Jun 2022'); await userEvent.tab(); - await userEvent.type(screen.getByLabelText('Closeout location'), 'Altus'); + await userEvent.type(screen.getByLabelText(/Closeout location/), 'Altus'); await userEvent.click(await screen.findByText('Altus')); await waitFor(() => { @@ -661,7 +661,7 @@ describe('ServicesCounselingEditShipmentDetails component', () => { await waitFor(() => { expect(screen.getByLabelText('Estimated PPM weight')).toHaveValue('1,111'); }); - await userEvent.type(screen.getByLabelText('Closeout location'), 'Altus'); + await userEvent.type(screen.getByLabelText(/Closeout location/), 'Altus'); await userEvent.click(await screen.findByText('Altus')); const saveButton = screen.getByRole('button', { name: 'Save and Continue' }); @@ -692,7 +692,7 @@ describe('ServicesCounselingEditShipmentDetails component', () => { await waitFor(() => { expect(screen.getByLabelText('Estimated PPM weight')).toHaveValue('1,111'); }); - await userEvent.type(screen.getByLabelText('Closeout location'), 'Altus'); + await userEvent.type(screen.getByLabelText(/Closeout location/), 'Altus'); await userEvent.click(await screen.findByText('Altus')); const saveButton = screen.getByRole('button', { name: 'Save and Continue' }); diff --git a/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateAddressForm.test.jsx b/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateAddressForm.test.jsx index 045f10c7d21..b179fc1bde0 100644 --- a/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateAddressForm.test.jsx +++ b/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateAddressForm.test.jsx @@ -70,7 +70,7 @@ describe('PrimeUIShipmentUpdateAddressForm', () => { />, ); expect(screen.getByRole('heading', { name: 'Pickup address', level: 2 })).toBeInTheDocument(); - expect(screen.getByLabelText('Address 1')).toBeInTheDocument(); + expect(screen.getByLabelText(/Address 1/)).toBeInTheDocument(); expect(screen.getByLabelText(/Address 2/)).toBeInTheDocument(); expect(screen.getByLabelText('City')).toBeInTheDocument(); expect(screen.getByLabelText('State')).toBeInTheDocument(); @@ -89,7 +89,7 @@ describe('PrimeUIShipmentUpdateAddressForm', () => { />, ); - await userEvent.type(screen.getByLabelText('Address 1'), '23 City Str'); + await userEvent.type(screen.getByLabelText(/Address 1/), '23 City Str'); await userEvent.type(screen.getByLabelText('City'), 'City'); await userEvent.clear(screen.getByLabelText('ZIP')); await userEvent.type(screen.getByLabelText('ZIP'), '90210'); @@ -131,12 +131,10 @@ describe('PrimeUIShipmentUpdateAddressForm', () => { name="pickupAddress.address" />, ); - await userEvent.clear(screen.getByLabelText('Address 1')); - const input = await screen.getByLabelText('Address 1'); - await input.blur(); + await userEvent.clear(screen.getByLabelText(/Address 1/)); + (await screen.getByLabelText(/Address 1/)).blur(); await waitFor(() => { expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled(); - expect(input.parentElement.parentElement.classList.contains('usa-input-error')); }); }); diff --git a/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateDestinationAddressForm.test.jsx b/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateDestinationAddressForm.test.jsx index 0738376262b..ab60dd66527 100644 --- a/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateDestinationAddressForm.test.jsx +++ b/src/pages/PrimeUI/Shipment/PrimeUIShipmentUpdateDestinationAddressForm.test.jsx @@ -70,7 +70,7 @@ describe('PrimeUIShipmentUpdateDestinationAddressForm', () => { name="newAddress.address" />, ); - expect(screen.getByLabelText('Address 1')).toBeInTheDocument(); + expect(screen.getByLabelText(/Address 1/)).toBeInTheDocument(); expect(screen.getByLabelText(/Address 2/)).toBeInTheDocument(); expect(screen.getByLabelText('City')).toBeInTheDocument(); expect(screen.getByLabelText('State')).toBeInTheDocument(); @@ -88,7 +88,7 @@ describe('PrimeUIShipmentUpdateDestinationAddressForm', () => { />, ); - await userEvent.type(screen.getByLabelText('Address 1'), '23 City Str'); + await userEvent.type(screen.getByLabelText(/Address 1/), '23 City Str'); await userEvent.type(screen.getByLabelText('City'), 'City'); await userEvent.clear(screen.getByLabelText('ZIP')); await userEvent.type(screen.getByLabelText('ZIP'), '90210'); @@ -129,8 +129,8 @@ describe('PrimeUIShipmentUpdateDestinationAddressForm', () => { name="newAddress.address" />, ); - await userEvent.clear(screen.getByLabelText('Address 1')); - (await screen.getByLabelText('Address 1')).blur(); + await userEvent.clear(screen.getByLabelText(/Address 1/)); + (await screen.getByLabelText(/Address 1/)).blur(); await waitFor(() => { expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled(); expect(screen.getByTestId('errorMessage')).toBeInTheDocument(); From f73df7bde26fc6389833783fe77ba4607a829d3a Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Fri, 30 Aug 2024 14:28:50 -0400 Subject: [PATCH 2/4] Revert more changes that snuck through merge conflicts --- .../servicesCounselingTestFixture.js | 4 ++-- .../EditFacilityInfoModal.test.jsx | 2 +- .../Office/ShipmentForm/ShipmentForm.test.jsx | 4 ++-- .../form/AddressFields/AddressFields.test.jsx | 24 +++++++++---------- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js b/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js index cd24ca642ca..1174d4830cd 100644 --- a/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js +++ b/playwright/tests/office/servicescounseling/servicesCounselingTestFixture.js @@ -159,7 +159,7 @@ export class ServiceCounselorPage extends OfficePage { // Storage facility address const storageAddress = await this.page.getByRole('heading', { name: 'Storage facility address' }).locator('..'); - await storageAddress.getByLabel(/Address 1/).fill('148 S East St'); + await storageAddress.getByLabel('Address 1').fill('148 S East St'); await storageAddress.getByLabel('Address 2').fill('Suite 7A'); await storageAddress.getByLabel('City').fill('Sample City'); await storageAddress.getByLabel('State').selectOption({ label: 'GA' }); @@ -172,7 +172,7 @@ export class ServiceCounselorPage extends OfficePage { // Delivery location const deliveryLocation = await this.page.getByRole('group', { name: 'Delivery location' }); - await deliveryLocation.getByLabel(/Address 1/).fill('448 Washington Blvd NE'); + await deliveryLocation.getByLabel('Address 1').fill('448 Washington Blvd NE'); await deliveryLocation.getByLabel('Address 2').fill('Apt D3'); await deliveryLocation.getByLabel('City').fill('Another City'); await deliveryLocation.getByLabel('State').selectOption({ label: 'AL' }); diff --git a/src/components/Office/EditFacilityInfoModal/EditFacilityInfoModal.test.jsx b/src/components/Office/EditFacilityInfoModal/EditFacilityInfoModal.test.jsx index b7f4ea16b17..5fd841169d5 100644 --- a/src/components/Office/EditFacilityInfoModal/EditFacilityInfoModal.test.jsx +++ b/src/components/Office/EditFacilityInfoModal/EditFacilityInfoModal.test.jsx @@ -63,7 +63,7 @@ describe('EditFacilityInfoModal', () => { shipmentType="HHG_INTO_NTS_DOMESTIC" />, ); - const addressInput = screen.getByLabelText(/Address 1/); + const addressInput = screen.getByLabelText('Address 1'); const submitBtn = screen.getByRole('button', { name: 'Save' }); await userEvent.type(addressInput, '123 Fake Street'); diff --git a/src/components/Office/ShipmentForm/ShipmentForm.test.jsx b/src/components/Office/ShipmentForm/ShipmentForm.test.jsx index 5e2751f4e52..f64874791e9 100644 --- a/src/components/Office/ShipmentForm/ShipmentForm.test.jsx +++ b/src/components/Office/ShipmentForm/ShipmentForm.test.jsx @@ -399,7 +399,7 @@ describe('ShipmentForm component', () => { expect(screen.getByText('Pickup location')).toBeInstanceOf(HTMLLegendElement); expect(screen.getByLabelText('Use current address')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText('City')).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText('State')).toBeInstanceOf(HTMLSelectElement); @@ -805,7 +805,7 @@ describe('ShipmentForm component', () => { expect(screen.getByText('Pickup location')).toBeInstanceOf(HTMLLegendElement); expect(screen.getByLabelText('Use current address')).toBeInstanceOf(HTMLInputElement); - expect(screen.getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement); + expect(screen.getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText('City')).toBeInstanceOf(HTMLInputElement); expect(screen.getByLabelText('State')).toBeInstanceOf(HTMLSelectElement); diff --git a/src/components/form/AddressFields/AddressFields.test.jsx b/src/components/form/AddressFields/AddressFields.test.jsx index 072cba35328..dbdb59c6c36 100644 --- a/src/components/form/AddressFields/AddressFields.test.jsx +++ b/src/components/form/AddressFields/AddressFields.test.jsx @@ -13,11 +13,11 @@ describe('AddressFields component', () => { , ); expect(getByText('Address Form')).toBeInstanceOf(HTMLLegendElement); - expect(getByLabelText(/Address 1/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText('Address 1')).toBeInstanceOf(HTMLInputElement); expect(getByLabelText(/Address 2/)).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText(/City/)).toBeInstanceOf(HTMLInputElement); - expect(getByLabelText(/State/)).toBeInstanceOf(HTMLSelectElement); - expect(getByLabelText(/ZIP/)).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText('City')).toBeInstanceOf(HTMLInputElement); + expect(getByLabelText('State')).toBeInstanceOf(HTMLSelectElement); + expect(getByLabelText('ZIP')).toBeInstanceOf(HTMLInputElement); }); describe('with pre-filled values', () => { @@ -37,11 +37,11 @@ describe('AddressFields component', () => { , ); - expect(getByLabelText(/Address 1/)).toHaveValue(initialValues.address.streetAddress1); + expect(getByLabelText('Address 1')).toHaveValue(initialValues.address.streetAddress1); expect(getByLabelText(/Address 2/)).toHaveValue(initialValues.address.streetAddress2); - expect(getByLabelText(/City/)).toHaveValue(initialValues.address.city); - expect(getByLabelText(/State/)).toHaveValue(initialValues.address.state); - expect(getByLabelText(/ZIP/)).toHaveValue(initialValues.address.postalCode); + expect(getByLabelText('City')).toHaveValue(initialValues.address.city); + expect(getByLabelText('State')).toHaveValue(initialValues.address.state); + expect(getByLabelText('ZIP')).toHaveValue(initialValues.address.postalCode); }); }); @@ -73,7 +73,7 @@ describe('AddressFields component', () => { , ); - const postalCodeInput = getByLabelText(/ZIP/); + const postalCodeInput = getByLabelText('ZIP'); await userEvent.type(postalCodeInput, '12345'); fireEvent.blur(postalCodeInput); @@ -112,7 +112,7 @@ describe('AddressFields component', () => { , ); - const postalCodeInput = getByLabelText(/ZIP/); + const postalCodeInput = getByLabelText('ZIP'); await userEvent.type(postalCodeInput, '12345'); const postalCodeError = await findByRole('alert'); @@ -139,7 +139,7 @@ describe('AddressFields component', () => { , ); - expect(getByLabelText(/Address 1/)).toHaveValue(initialValues.address.streetAddress1); + expect(getByLabelText('Address 1')).toHaveValue(initialValues.address.streetAddress1); expect(getByLabelText(/Address 2/)).toHaveValue(initialValues.address.streetAddress2); expect(getByLabelText('City')).toHaveValue(initialValues.address.city); expect(getByLabelText('State')).toHaveValue(initialValues.address.state); @@ -163,7 +163,7 @@ describe('AddressFields component', () => { , ); - expect(getByLabelText(/Address 1/)).toHaveValue(initialValues.address.streetAddress1); + expect(getByLabelText('Address 1')).toHaveValue(initialValues.address.streetAddress1); expect(getByLabelText(/Address 2/)).toHaveValue(initialValues.address.streetAddress2); expect(getByLabelText('City')).toHaveValue(initialValues.address.city); expect(getByLabelText('State')).toHaveValue(initialValues.address.state); From 32355ad590a0b3f128f83658250383b3265fcd50 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Fri, 30 Aug 2024 14:44:56 -0400 Subject: [PATCH 3/4] Revert more changes that weren't supposed to make it past merge --- .../EditBillableWeight/EditBillableWeight.test.jsx | 2 -- .../Office/ShipmentWeightInput/ShipmentWeightInput.test.jsx | 2 -- 2 files changed, 4 deletions(-) diff --git a/src/components/Office/BillableWeight/EditBillableWeight/EditBillableWeight.test.jsx b/src/components/Office/BillableWeight/EditBillableWeight/EditBillableWeight.test.jsx index 315f1f2b1a3..aea27b13a1b 100644 --- a/src/components/Office/BillableWeight/EditBillableWeight/EditBillableWeight.test.jsx +++ b/src/components/Office/BillableWeight/EditBillableWeight/EditBillableWeight.test.jsx @@ -275,7 +275,6 @@ describe('EditBillableWeight', () => { await userEvent.click(screen.getByRole('button', { name: 'Edit' })); expect(screen.queryByText('Edit')).toBeNull(); await userEvent.clear(screen.getByTestId('textInput')); - expect(screen.getByText('Required')).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Save changes' })).toBeDisabled(); }); @@ -293,7 +292,6 @@ describe('EditBillableWeight', () => { await userEvent.click(screen.getByRole('button', { name: 'Edit' })); expect(screen.queryByText('Edit')).toBeNull(); await userEvent.clear(screen.getByTestId('remarks')); - expect(screen.getByText('Required')).toBeInTheDocument(); expect(screen.getByRole('button', { name: 'Save changes' })).toBeDisabled(); }); }); diff --git a/src/components/Office/ShipmentWeightInput/ShipmentWeightInput.test.jsx b/src/components/Office/ShipmentWeightInput/ShipmentWeightInput.test.jsx index ad6f1e6a1b6..9a42e5389b1 100644 --- a/src/components/Office/ShipmentWeightInput/ShipmentWeightInput.test.jsx +++ b/src/components/Office/ShipmentWeightInput/ShipmentWeightInput.test.jsx @@ -43,7 +43,5 @@ describe('components/Office/ShipmentWeightInput', () => { , ); - - expect(screen.queryByText(/Optional/)).not.toBeInTheDocument(); }); }); From e2f5bd1c505c3ed44ec18be0f07d7a015aff7693 Mon Sep 17 00:00:00 2001 From: Brooklyn Welsh Date: Tue, 3 Sep 2024 12:17:07 -0400 Subject: [PATCH 4/4] Added changes for boat shipment and mobile shipments that are currently only in INT branch. --- .../BoatShipmentForm/BoatShipmentForm.jsx | 6 ------ .../MobileHomeShipmentForm.jsx | 14 +------------- 2 files changed, 1 insertion(+), 19 deletions(-) diff --git a/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx b/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx index 6593aa33a18..4c43be5cbf7 100644 --- a/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx +++ b/src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx @@ -176,7 +176,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { suffix="Feet" errorClassName={styles.hide} title="Length in feet" - optional />
@@ -192,7 +191,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { max={11} errorClassName={styles.hide} title="Length in inches" - optional />
@@ -216,7 +214,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { suffix="Feet" errorClassName={styles.hide} title="Width in feet" - optional />
@@ -232,7 +229,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { max={11} errorClassName={styles.hide} title="Width in inches" - optional />
@@ -256,7 +252,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { suffix="Feet" errorClassName={styles.hide} title="Height in feet" - optional />
@@ -272,7 +267,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { max={11} errorClassName={styles.hide} title="Height in inches" - optional />
diff --git a/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx b/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx index f370ef0585a..93ea3d1a1fd 100644 --- a/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx +++ b/src/components/Customer/MobileHomeShipment/MobileHomeShipmentForm/MobileHomeShipmentForm.jsx @@ -163,7 +163,6 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { suffix="Feet" errorClassName={styles.hide} title="Length in feet" - optional />
@@ -179,7 +178,6 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { max={11} errorClassName={styles.hide} title="Length in inches" - optional />
@@ -203,7 +201,6 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { suffix="Feet" errorClassName={styles.hide} title="Width in feet" - optional />
@@ -219,7 +216,6 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { max={11} errorClassName={styles.hide} title="Width in inches" - optional />
@@ -243,7 +239,6 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { suffix="Feet" errorClassName={styles.hide} title="Height in feet" - optional />
@@ -259,7 +254,6 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { max={11} errorClassName={styles.hide} title="Height in inches" - optional />
@@ -267,13 +261,7 @@ const MobileHomeShipmentForm = ({ mtoShipment, onBack, onSubmit }) => { -
- Remarks Optional - - } - > +
Remarks}>