Skip to content

Commit 9b87646

Browse files
kylemhkylemh
committed
fix more form issues, finish e2e test, and update snapshots
1 parent c74cece commit 9b87646

19 files changed

Lines changed: 183 additions & 45 deletions

‎common/constants/testIDs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,4 @@ export const SCHOOL_LOCATION_LIST_ITEM = 'SCHOOL_LOCATION_LIST_ITEM';
4242
export const MODAL_CONTENT = 'MODAL_CONTENT';
4343
export const MODAL_OVERLAY = 'MODAL_OVERLAY';
4444
export const LOGIN_FORM = 'LOGIN_FORM';
45+
export const SUCCESS_PAGE_MESSAGE = 'SUCCESS_PAGE_MESSAGE';

‎components/Form/MultiStepForm.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import Form from 'components/Form/Form';
1515
import Alert from 'components/Alert/Alert';
1616
import ProgressIndicator from 'components/ProgressIndicator/ProgressIndicator';
1717
import { twMerge } from 'tailwind-merge';
18+
import type { OptionType } from 'components/Form/Select/ThemedReactSelect';
1819

1920
const InlineLoadingSpinner = ({ className }: { className?: string }) => (
2021
<span
@@ -40,7 +41,9 @@ interface MultiStepFormProps<T> {
4041
})[];
4142
}
4243

43-
export function MultiStepForm<T extends Record<string, string | string[] | number | number[]>>({
44+
export function MultiStepForm<
45+
T extends Record<string, string | string[] | number | number[] | OptionType[]>,
46+
>({
4447
steps,
4548
initialValues,
4649
onEachStepSubmit,

‎components/Form/Select/SelectMulti.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export function SelectMulti({
4040
<div className={styles.selectFeedbackGrouping}>
4141
<ThemedReactSelect<true>
4242
{...props}
43-
id={id ? `${id}` : name}
43+
id={id ? `${id}` : undefined}
4444
name={name}
4545
hasErrors={hasErrors}
4646
hasValidationStyling={hasValidationStyling}

‎components/Form/Select/SelectSingle.tsx‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -32,19 +32,6 @@ export function SelectSingle({
3232
const value = options.find(option => option.value === fieldValue);
3333
const hasErrors = Boolean(errors[name]);
3434

35-
const sharedProps = {
36-
...props,
37-
id: id ? `${id}` : undefined,
38-
hasErrors,
39-
hasValidationStyling,
40-
isTouched: Boolean(touched[name]),
41-
isSearchable,
42-
name,
43-
onBlur: () => setFieldTouched(name),
44-
options,
45-
value,
46-
};
47-
4835
return (
4936
<div className={classNames(className, styles.field)}>
5037
<Label for={name} isHidden={isLabelHidden}>
@@ -53,7 +40,14 @@ export function SelectSingle({
5340

5441
<div className={styles.selectFeedbackGrouping}>
5542
<ThemedReactSelect<false>
56-
{...sharedProps}
43+
{...props}
44+
id={id ? `${id}` : undefined}
45+
name={name}
46+
hasErrors={hasErrors}
47+
hasValidationStyling={hasValidationStyling}
48+
isTouched={Boolean(touched[name])}
49+
onBlur={() => setFieldTouched(name)}
50+
isSearchable={isSearchable}
5751
isMulti={false}
5852
onChange={async option => {
5953
await setFieldValue(name, option?.value ?? '');

‎components/Form/Select/ThemedReactSelect.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ export interface OptionType {
1515
value: string;
1616
}
1717

18-
export const createInputId = (name: string) => `input-${name}`;
19-
2018
export interface ThemedReactSelectProps<TMulti extends boolean>
2119
extends ReactSelectProps<OptionType, TMulti> {
2220
name: string; // name?: string is on ReactSelectProps, but we're gonna require it.
@@ -46,8 +44,9 @@ export function ThemedReactSelect<TMulti extends boolean>({
4644
// @ts-expect-error - Bad types package for react-select
4745
<ReactSelect
4846
{...props}
49-
inputId={createInputId(name)}
47+
inputId={name}
5048
instanceId={name}
49+
name={name}
5150
isDisabled={isDisabled}
5251
closeMenuOnSelect={!isMulti}
5352
isMulti={isMulti}
@@ -127,4 +126,4 @@ export function ThemedReactSelect<TMulti extends boolean>({
127126
}
128127

129128
export const getReactSelectInput = (domElement: HTMLElement, fieldName: string) =>
130-
domElement.querySelector(`[id^=${createInputId(fieldName)}]`);
129+
domElement.querySelector(`[id^=${fieldName}]`);

‎components/Form/Select/__tests__/__snapshots__/SelectMulti.test.tsx.snap‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ exports[`Select > should render with required props 1`] = `
1616
>
1717
<div
1818
className=" css-2b097c-container"
19-
id="someSelectName"
2019
onKeyDown={[Function]}
2120
>
2221
<span
@@ -55,7 +54,7 @@ exports[`Select > should render with required props 1`] = `
5554
autoComplete="off"
5655
autoCorrect="off"
5756
disabled={false}
58-
id="input-someSelectName"
57+
id="someSelectName"
5958
onBlur={[Function]}
6059
onChange={[Function]}
6160
onFocus={[Function]}
@@ -121,6 +120,12 @@ exports[`Select > should render with required props 1`] = `
121120
</div>
122121
</div>
123122
</div>
123+
<div>
124+
<input
125+
name="someSelectName"
126+
type="hidden"
127+
/>
128+
</div>
124129
</div>
125130
</div>
126131
</div>

‎components/Form/Select/__tests__/__snapshots__/SelectSingle.test.tsx.snap‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ exports[`Select > should render with required props 1`] = `
5454
autoComplete="off"
5555
autoCorrect="off"
5656
disabled={false}
57-
id="input-someSelectName"
57+
id="someSelectName"
5858
onBlur={[Function]}
5959
onChange={[Function]}
6060
onFocus={[Function]}
@@ -120,6 +120,11 @@ exports[`Select > should render with required props 1`] = `
120120
</div>
121121
</div>
122122
</div>
123+
<input
124+
name="someSelectName"
125+
type="hidden"
126+
value=""
127+
/>
123128
</div>
124129
</div>
125130
</div>

‎components/Form/Select/__tests__/__snapshots__/ThemedReactSelect.test.tsx.snap‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ exports[`ThemedReactSelect > should render (multi) with required props 1`] = `
9292
autoComplete="off"
9393
autoCorrect="off"
9494
disabled={false}
95-
id="input-Test"
95+
id="Test"
9696
onBlur={[Function]}
9797
onChange={[Function]}
9898
onFocus={[Function]}
@@ -177,6 +177,18 @@ exports[`ThemedReactSelect > should render (multi) with required props 1`] = `
177177
</div>
178178
</div>
179179
</div>
180+
<div>
181+
<input
182+
name="Test"
183+
type="hidden"
184+
value="1"
185+
/>
186+
<input
187+
name="Test"
188+
type="hidden"
189+
value="2"
190+
/>
191+
</div>
180192
</div>
181193
`;
182194

@@ -221,7 +233,7 @@ exports[`ThemedReactSelect > should render (non-multi) with required props 1`] =
221233
autoComplete="off"
222234
autoCorrect="off"
223235
disabled={false}
224-
id="input-Test"
236+
id="Test"
225237
onBlur={[Function]}
226238
onChange={[Function]}
227239
onFocus={[Function]}
@@ -287,5 +299,10 @@ exports[`ThemedReactSelect > should render (non-multi) with required props 1`] =
287299
</div>
288300
</div>
289301
</div>
302+
<input
303+
name="Test"
304+
type="hidden"
305+
value="1"
306+
/>
290307
</div>
291308
`;

‎components/Forms/UpdateProfileForm/UpdateProfileForm.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ function UpdateProfileForm({
8080
relevantKeys.forEach(key => formikHelpers.setFieldTouched(key, false));
8181
}
8282
}
83+
8384
await updateUser(values);
8485
};
8586

‎components/Forms/UpdateProfileForm/__tests__/__snapshots__/UpdateProfileForm.test.tsx.snap‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
8888
autoComplete="off"
8989
autoCorrect="off"
9090
disabled={false}
91-
id="input-employmentStatus"
91+
id="employmentStatus"
9292
onBlur={[Function]}
9393
onChange={[Function]}
9494
onFocus={[Function]}
@@ -154,6 +154,11 @@ exports[`UpdateProfileForm > should render with required props 1`] = `
154154
</div>
155155
</div>
156156
</div>
157+
<input
158+
name="employmentStatus"
159+
type="hidden"
160+
value=""
161+
/>
157162
</div>
158163
</div>
159164
</div>

0 commit comments

Comments
 (0)