Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

INT-B-19226 Revert and redo of form changes #13609

Merged
merged 7 commits into from
Sep 4, 2024
Merged

INT-B-19226 Revert and redo of form changes #13609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
89e3a61
Merge MAIN-B-19226-redo into INT-B-19226-redo
Aug 30, 2024
f73df7b
Revert more changes that snuck through merge conflicts
Aug 30, 2024
980f13f
Merge branch 'integrationTesting' into INT-B-19226-redo
Aug 30, 2024
32355ad
Revert more changes that weren't supposed to make it past merge
Aug 30, 2024
e2f5bd1
Added changes for boat shipment and mobile shipments that are current…
Sep 3, 2024
6fb5de8
Merge branch 'integrationTesting' into INT-B-19226-redo
brooklyn-welsh Sep 3, 2024
7ffe35a
Merge branch 'integrationTesting' into INT-B-19226-redo
brooklyn-welsh Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Customer/BackupAddressForm/BackupAddressForm.jsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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