Skip to content

Commit

Permalink
Merge pull request #13609 from transcom/INT-B-19226-redo
Browse files Browse the repository at this point in the history 
INT-B-19226 Revert and redo of form changes
  • Loading branch information
@brooklyn-welsh
brooklyn-welsh authored Sep 4, 2024
2 parents 7ea7df7 + 7ffe35a commit faf61b3
Show file tree
Hide file tree
Showing 66 changed files with 675 additions and 614 deletions.
1 change: 1 addition & 0 deletions src/components/Customer/BackupAddressForm/BackupAddressForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ const BackupAddressForm = ({ formFieldsName, initialValues, onSubmit, onBack })

<SectionWrapper className={formStyles.formSection}>
<AddressFields
labelHint="Required"
name={formFieldsName}
zipCityEnabled
zipCityError={isLookupErrorVisible}
Expand Down
8 changes: 4 additions & 4 deletions src/components/Customer/BackupAddressForm/BackupAddressForm.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,21 +51,21 @@ describe('BackupAddressForm component', () => {
const { getByLabelText } = render(<BackupAddressForm {...testProps} />);

await waitFor(() => {
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(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(<BackupAddressForm {...testProps} />);
await userEvent.click(getByLabelText('Address 1'));
await userEvent.click(getByLabelText(/Address 1/));
await userEvent.click(getByLabelText(/Address 2/));

const submitBtn = getByRole('button', { name: 'Next' });
Expand All @@ -85,7 +85,7 @@ describe('BackupAddressForm component', () => {
const { getByRole, getByLabelText } = render(<BackupAddressForm {...dataProps} />);
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();

Expand Down
8 changes: 7 additions & 1 deletion src/components/Customer/BackupContactForm/BackupContactForm.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,12 @@ const emptyInitialValues = {
};

export const DefaultState = (argTypes) => (
<BackupContactForm initialValues={emptyInitialValues} onSubmit={argTypes.onSubmit} onBack={argTypes.onBack} />
<BackupContactForm
initialValues={emptyInitialValues}
onSubmit={argTypes.onSubmit}
onBack={argTypes.onBack}
labelHint="Required"
/>
);

export const WithInitialValues = (argTypes) => (
Expand All @@ -30,5 +35,6 @@ export const WithInitialValues = (argTypes) => (
}}
onSubmit={argTypes.onSubmit}
onBack={argTypes.onBack}
labelHint="Required"
/>
);
34 changes: 17 additions & 17 deletions src/components/Customer/BackupContactForm/BackupContactForm.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,18 @@ describe('BackupContactForm Component', () => {
const { getByLabelText } = render(<BackupContactForm {...testProps} />);

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(<BackupContactForm {...testProps} />);
await userEvent.type(getByLabelText('Phone'), '12345');
await userEvent.type(getByLabelText(/Phone/), '12345');
await userEvent.tab();

await waitFor(() => {
Expand All @@ -43,7 +43,7 @@ describe('BackupContactForm Component', () => {

it('validates the email field', async () => {
const { getByText, getByLabelText } = render(<BackupContactForm {...testProps} />);
await userEvent.type(getByLabelText('Email'), 'sample@');
await userEvent.type(getByLabelText(/Email/), 'sample@');
await userEvent.tab();

await waitFor(() => {
Expand All @@ -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(() => {
Expand All @@ -72,9 +72,9 @@ describe('BackupContactForm Component', () => {
const { getByRole, getByLabelText } = render(<BackupContactForm {...testProps} />);
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(() => {
Expand All @@ -86,9 +86,9 @@ describe('BackupContactForm Component', () => {
const { getByRole, getByLabelText } = render(<BackupContactForm {...testProps} />);
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(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Customer/BackupContactForm/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const BackupContactForm = ({ initialValues, onSubmit, onBack }) => {
</p>
<SectionWrapper className={formStyles.formSection}>
<div className="tablet:margin-top-neg-3">
<BackupContactInfoFields />
<BackupContactInfoFields labelHint="Required" />
</div>
</SectionWrapper>
<div className={formStyles.formActions}>
Expand Down
15 changes: 6 additions & 9 deletions src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -126,6 +126,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
name="year"
label="Year"
id="year"
labelHint="Required"
maxLength={4}
mask={Number}
scale={0}
Expand All @@ -144,8 +145,8 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
</div>
</div>
<div className={classnames(styles.formFieldContainer, 'mobile-lg:grid-col-7')}>
<TextField data-testid="make" name="make" label="Make" id="make" required />
<TextField data-testid="model" name="model" label="Model" id="model" required />
<TextField data-testid="make" name="make" label="Make" id="make" required labelHint="Required" />
<TextField data-testid="model" name="model" label="Model" id="model" required labelHint="Required" />
</div>
</SectionWrapper>
<SectionWrapper className={classnames(styles.sectionWrapper, formStyles.formSection, 'origin')}>
Expand Down Expand Up @@ -175,7 +176,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
suffix="Feet"
errorClassName={styles.hide}
title="Length in feet"
optional
/>
</div>
<div className="mobile-lg:grid-col-3">
Expand All @@ -191,7 +191,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
max={11}
errorClassName={styles.hide}
title="Length in inches"
optional
/>
</div>
</div>
Expand All @@ -215,7 +214,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
suffix="Feet"
errorClassName={styles.hide}
title="Width in feet"
optional
/>
</div>
<div className="mobile-lg:grid-col-3">
Expand All @@ -231,7 +229,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
max={11}
errorClassName={styles.hide}
title="Width in inches"
optional
/>
</div>
</div>
Expand All @@ -255,7 +252,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
suffix="Feet"
errorClassName={styles.hide}
title="Height in feet"
optional
/>
</div>
<div className="mobile-lg:grid-col-3">
Expand All @@ -271,7 +267,6 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
max={11}
errorClassName={styles.hide}
title="Height in inches"
optional
/>
</div>
</div>
Expand All @@ -282,6 +277,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
<h2>Trailer Status</h2>
<Fieldset>
<legend className="usa-label">Does the boat have a trailer?</legend>
<RequiredTag />
<Field
as={Radio}
id="hasTrailerYes"
Expand All @@ -303,6 +299,7 @@ const BoatShipmentForm = ({ mtoShipment, onBack, onSubmit }) => {
{values.hasTrailer === 'true' && (
<Fieldset className={styles.formFieldContainer}>
<legend className="usa-label">Is the trailer roadworthy?</legend>
<RequiredTag />
<Field
as={Radio}
id="isRoadworthyYes"
Expand Down
2 changes: 1 addition & 1 deletion src/components/Customer/BoatShipment/BoatShipmentForm/BoatShipmentForm.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
@import 'shared/styles/colors';

.formContainer {
:global(.usa-legend) {
:global(.usa-) {
max-width: none;
}
.formTextFieldWrapper {
Expand Down
36 changes: 18 additions & 18 deletions src/components/Customer/ContactInfoForm/ContactInfoForm.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,20 @@ describe('ContactInfoForm Component', () => {
const { getByLabelText } = render(<ContactInfoForm {...testProps} />);

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(<ContactInfoForm {...testProps} />);
await userEvent.type(getByLabelText('Best contact phone'), '12345');
await userEvent.type(getByLabelText(/Best contact phone/), '12345');
await userEvent.tab();

await waitFor(() => {
Expand All @@ -59,7 +59,7 @@ describe('ContactInfoForm Component', () => {

it('validates the email field', async () => {
const { getByText, getByLabelText } = render(<ContactInfoForm {...testProps} />);
await userEvent.type(getByLabelText('Personal email'), 'sample@');
await userEvent.type(getByLabelText(/Personal email/), 'sample@');
await userEvent.tab();

await waitFor(() => {
Expand All @@ -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(<ContactInfoForm {...testProps} />);
// 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);
Expand All @@ -87,8 +87,8 @@ describe('ContactInfoForm Component', () => {
const { getByRole, getByLabelText } = render(<ContactInfoForm {...testProps} />);
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(() => {
Expand All @@ -102,9 +102,9 @@ describe('ContactInfoForm Component', () => {
const { getByRole, getByLabelText } = render(<ContactInfoForm {...testProps} />);
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(() => {
Expand All @@ -116,9 +116,9 @@ describe('ContactInfoForm Component', () => {
const { getByRole, getByLabelText } = render(<ContactInfoForm {...testProps} />);
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(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/Customer/ContactInfoForm/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const ContactInfoForm = ({ initialValues, onSubmit, onBack }) => {
<h1>Your contact info</h1>
<SectionWrapper className={formStyles.formSection}>
<div className="tablet:margin-top-neg-3">
<CustomerContactInfoFields />
<CustomerContactInfoFields labelHint="Required" />
</div>
</SectionWrapper>
<div className={formStyles.formActions}>
Expand Down
3 changes: 3 additions & 0 deletions src/components/Customer/DodInfoForm/DodInfoForm.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ const DodInfoForm = ({ initialValues, onSubmit, onBack }) => {
label="Branch of service"
name="affiliation"
id="affiliation"
hint="Required"
required
options={branchOptions}
onChange={(e) => {
Expand All @@ -85,6 +86,7 @@ const DodInfoForm = ({ initialValues, onSubmit, onBack }) => {
maxLength="10"
inputMode="numeric"
pattern="[0-9]{10}"
labelHint="Required"
isDisabled={isDodidDisabled}
/>
{showEmplid && (
Expand All @@ -93,6 +95,7 @@ const DodInfoForm = ({ initialValues, onSubmit, onBack }) => {
name="emplid"
id="emplid"
required
labelHint="Required"
maxLength="7"
inputMode="numeric"
pattern="[0-9]{7}"
Expand Down
Loading

0 comments on commit faf61b3

Please sign in to comment.