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

chore: change form validation, validate on submit, and init form integ test #600

Merged
merged 1 commit into from
Aug 25, 2022
Merged

chore: change form validation, validate on submit, and init form integ test #600

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
187 changes: 142 additions & 45 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ export default function customDataForm(props) {
...rest
} = props;
const [modelFields, setModelFields] = useStateMutationAction({});
const [formValid, setFormValid] = useStateMutationAction(true);
const [errors, setErrors] = useStateMutationAction({});
const validations = {
name: [],
Expand All @@ -35,17 +34,28 @@ export default function customDataForm(props) {
category: [],
};
const runValidationTasks = async (fieldName, value) => {
const validationResponse = {
...validateField(value, validations[fieldName]),
...(await onValidate?.[fieldName]?.(value)),
};
let validationResponse = validateField(value, validations[fieldName]);
if (onValidate?.[fieldName]) {
validationResponse = await onValidate[fieldName](
value,
validationResponse
);
}
setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
return validationResponse;
};
return (
<form
onSubmit={async (event) => {
event.preventDefault();
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
);
if (validationResponses.some((r) => r.hasError)) {
return;
}
await customDataFormOnSubmit(modelFields);
}}
{...rest}
Expand Down Expand Up @@ -206,6 +216,16 @@ exports[`amplify form renderer tests custom form tests should render a custom ba
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { GridProps, RadioGroupFieldProps, SelectFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
hasError: boolean;
errorMessage?: string;
};
export declare type customDataFormInputValues = {
name: string;
email: string;
city: string;
category: string;
};
export declare type customDataFormOverridesProps = {
customDataFormGrid: GridProps;
RowGrid0: GridProps;
Expand All @@ -222,10 +242,9 @@ export declare type customDataFormProps = React.PropsWithChildren<{
} & {
onSubmit: (fields: Record<string, string>) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof customDataFormInputValues]?: (value: customDataFormInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}>;
export default function customDataForm(props: customDataFormProps): React.ReactElement;
"
Expand Down Expand Up @@ -257,23 +276,33 @@ export default function CustomWithSectionalElements(props) {
...rest
} = props;
const [modelFields, setModelFields] = useStateMutationAction({});
const [formValid, setFormValid] = useStateMutationAction(true);
const [errors, setErrors] = useStateMutationAction({});
const validations = {
name: [],
};
const runValidationTasks = async (fieldName, value) => {
const validationResponse = {
...validateField(value, validations[fieldName]),
...(await onValidate?.[fieldName]?.(value)),
};
let validationResponse = validateField(value, validations[fieldName]);
if (onValidate?.[fieldName]) {
validationResponse = await onValidate[fieldName](
value,
validationResponse
);
}
setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
return validationResponse;
};
return (
<form
onSubmit={async (event) => {
event.preventDefault();
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
);
if (validationResponses.some((r) => r.hasError)) {
return;
}
await customWithSectionalElementsOnSubmit(modelFields);
}}
{...rest}
Expand Down Expand Up @@ -375,6 +404,13 @@ exports[`amplify form renderer tests custom form tests should render sectional e
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { DividerProps, GridProps, HeadingProps, TextFieldProps, TextProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
hasError: boolean;
errorMessage?: string;
};
export declare type CustomWithSectionalElementsInputValues = {
name: string;
};
export declare type CustomWithSectionalElementsOverridesProps = {
CustomWithSectionalElementsGrid: GridProps;
RowGrid0: GridProps;
Expand All @@ -391,10 +427,9 @@ export declare type CustomWithSectionalElementsProps = React.PropsWithChildren<{
} & {
onSubmit: (fields: Record<string, string>) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof CustomWithSectionalElementsInputValues]?: (value: CustomWithSectionalElementsInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}>;
export default function CustomWithSectionalElements(props: CustomWithSectionalElementsProps): React.ReactElement;
"
Expand All @@ -421,7 +456,6 @@ export default function myPostForm(props) {
...rest
} = props;
const [modelFields, setModelFields] = useStateMutationAction({});
const [formValid, setFormValid] = useStateMutationAction(true);
const [errors, setErrors] = useStateMutationAction({});
const validations = {
caption: [],
Expand All @@ -430,17 +464,28 @@ export default function myPostForm(props) {
profile_url: [{ type: \\"URL\\" }],
};
const runValidationTasks = async (fieldName, value) => {
const validationResponse = {
...validateField(value, validations[fieldName]),
...(await onValidate?.[fieldName]?.(value)),
};
let validationResponse = validateField(value, validations[fieldName]);
if (onValidate?.[fieldName]) {
validationResponse = await onValidate[fieldName](
value,
validationResponse
);
}
setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
return validationResponse;
};
return (
<form
onSubmit={async (event) => {
event.preventDefault();
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
);
if (validationResponses.some((r) => r.hasError)) {
return;
}
if (onSubmitBefore) {
setModelFields(onSubmitBefore({ fields: modelFields }));
}
Expand Down Expand Up @@ -585,6 +630,16 @@ exports[`amplify form renderer tests datastore form tests should generate a crea
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { GridProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
hasError: boolean;
errorMessage?: string;
};
export declare type myPostFormInputValues = {
caption: string;
username: string;
post_url: string;
profile_url: string;
};
export declare type myPostFormOverridesProps = {
myPostFormGrid: GridProps;
RowGrid0: GridProps;
Expand All @@ -605,10 +660,9 @@ export declare type myPostFormProps = React.PropsWithChildren<{
errorMessage?: string;
}) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof myPostFormInputValues]?: (value: myPostFormInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}>;
export default function myPostForm(props: myPostFormProps): React.ReactElement;
"
Expand Down Expand Up @@ -642,7 +696,6 @@ export default function myPostForm(props) {
...rest
} = props;
const [modelFields, setModelFields] = useStateMutationAction({});
const [formValid, setFormValid] = useStateMutationAction(true);
const [errors, setErrors] = useStateMutationAction({});
const validations = {
TextAreaFieldbbd63464: [],
Expand All @@ -652,17 +705,28 @@ export default function myPostForm(props) {
post_url: [{ type: \\"URL\\" }],
};
const runValidationTasks = async (fieldName, value) => {
const validationResponse = {
...validateField(value, validations[fieldName]),
...(await onValidate?.[fieldName]?.(value)),
};
let validationResponse = validateField(value, validations[fieldName]);
if (onValidate?.[fieldName]) {
validationResponse = await onValidate[fieldName](
value,
validationResponse
);
}
setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
return validationResponse;
};
return (
<form
onSubmit={async (event) => {
event.preventDefault();
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
);
if (validationResponses.some((r) => r.hasError)) {
return;
}
if (onSubmitBefore) {
setModelFields(onSubmitBefore({ fields: modelFields }));
}
Expand Down Expand Up @@ -830,6 +894,17 @@ exports[`amplify form renderer tests datastore form tests should generate a upda
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { GridProps, TextAreaFieldProps, TextFieldProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
hasError: boolean;
errorMessage?: string;
};
export declare type myPostFormInputValues = {
TextAreaFieldbbd63464: string;
caption: string;
username: string;
profile_url: string;
post_url: string;
};
export declare type myPostFormOverridesProps = {
myPostFormGrid: GridProps;
RowGrid0: GridProps;
Expand All @@ -853,10 +928,9 @@ export declare type myPostFormProps = React.PropsWithChildren<{
errorMessage?: string;
}) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof myPostFormInputValues]?: (value: myPostFormInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}>;
export default function myPostForm(props: myPostFormProps): React.ReactElement;
"
Expand Down Expand Up @@ -892,7 +966,6 @@ export default function InputGalleryCreateForm(props) {
...rest
} = props;
const [modelFields, setModelFields] = useStateMutationAction({});
const [formValid, setFormValid] = useStateMutationAction(true);
const [errors, setErrors] = useStateMutationAction({});
const validations = {
num: [],
Expand All @@ -905,17 +978,28 @@ export default function InputGalleryCreateForm(props) {
timeisnow: [],
};
const runValidationTasks = async (fieldName, value) => {
const validationResponse = {
...validateField(value, validations[fieldName]),
...(await onValidate?.[fieldName]?.(value)),
};
let validationResponse = validateField(value, validations[fieldName]);
if (onValidate?.[fieldName]) {
validationResponse = await onValidate[fieldName](
value,
validationResponse
);
}
setErrors((errors) => ({ ...errors, [fieldName]: validationResponse }));
return validationResponse;
};
return (
<form
onSubmit={async (event) => {
event.preventDefault();
const validationResponses = await Promise.all(
Object.keys(validations).map((fieldName) =>
runValidationTasks(fieldName, modelFields[fieldName])
)
);
if (validationResponses.some((r) => r.hasError)) {
return;
}
if (onSubmitBefore) {
setModelFields(onSubmitBefore({ fields: modelFields }));
}
Expand Down Expand Up @@ -1153,6 +1237,20 @@ exports[`amplify form renderer tests datastore form tests should render a form w
"import * as React from \\"react\\";
import { EscapeHatchProps } from \\"@aws-amplify/ui-react/internal\\";
import { CheckboxFieldProps, GridProps, RadioGroupFieldProps, TextFieldProps, ToggleButtonProps } from \\"@aws-amplify/ui-react\\";
export declare type ValidationResponse = {
hasError: boolean;
errorMessage?: string;
};
export declare type InputGalleryCreateFormInputValues = {
num: number;
rootbeer: number;
maybe: boolean;
maybeSlide: boolean;
maybeCheck: boolean;
timestamp: number;
ippy: string;
timeisnow: string;
};
export declare type InputGalleryCreateFormOverridesProps = {
InputGalleryCreateFormGrid: GridProps;
RowGrid0: GridProps;
Expand Down Expand Up @@ -1181,10 +1279,9 @@ export declare type InputGalleryCreateFormProps = React.PropsWithChildren<{
errorMessage?: string;
}) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof InputGalleryCreateFormInputValues]?: (value: InputGalleryCreateFormInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}>;
export default function InputGalleryCreateForm(props: InputGalleryCreateFormProps): React.ReactElement;
"
Expand Down
14 changes: 6 additions & 8 deletions ...odegen-ui-react/lib/__tests__/react-forms/__snapshots__/form-renderer-helper.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,18 @@ exports[`form-render utils should generate before & complete types if datastore
errorMessage?: string;
}) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof mySampleFormInputValues]?: (value: mySampleFormInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}"
`;

exports[`form-render utils should generate regular onsubmit if dataSourceType is custom 1`] = `
"{
onSubmit: (fields: Record<string, string>) => void;
onCancel?: () => void;
onValidate?: Record<string, (value: any) => Promise<{
hasError: boolean;
errorMessage?: string;
}>>;
onValidate?: {
[field in keyof myCustomFormInputValues]?: (value: myCustomFormInputValues[field], validationResponse: ValidationResponse) => ValidationResponse | Promise<ValidationResponse>;
};
}"
`;
Loading