Skip to content

Commit

Permalink
fix: clear button on create form should reset select field (#939)
Browse files Browse the repository at this point in the history 
* fix: clear button on create form should reset select field

* fix: update form tests

---------

Co-authored-by: Scott Young <scoyou@amazon.com>
  • Loading branch information
@scottyoung
scottyoung and Scott Young authored Mar 9, 2023
1 parent 1470068 commit 326b579
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 35 deletions.
37 changes: 17 additions & 20 deletions ...s/codegen-ui-react/lib/__tests__/__snapshots__/studio-ui-codegen-react-forms.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2322,7 +2322,7 @@ export default function CustomDataForm(props) {
const initialValues = {
name: \\"John Doe\\",
email: \\"johndoe@amplify.com\\",
city: undefined,
city: \\"\\",
category: undefined,
pages: 0,
phone: \\"+1-401-152-6995\\",
Expand Down Expand Up @@ -2719,7 +2719,7 @@ export default function CustomDataForm(props) {
const initialValues = {
name: \\"John Doe\\",
email: \\"johndoe@amplify.com\\",
city: undefined,
city: \\"\\",
category: undefined,
pages: 0,
phone: \\"+1-401-152-6995\\",
Expand Down Expand Up @@ -3625,7 +3625,7 @@ export default function CustomDataForm(props) {
name: \\"John Doe\\",
email: \\"johndoe@amplify.com\\",
\\"metadata-field\\": \\"\\",
city: undefined,
city: \\"\\",
category: undefined,
pages: 0,
};
Expand Down Expand Up @@ -8201,7 +8201,7 @@ export default function NestedJson(props) {
props;
const initialValues = {
firstName: \\"\\",
\\"last-Name\\": undefined,
\\"last-Name\\": \\"\\",
lastName: [],
bio: {},
};
Expand Down Expand Up @@ -12748,15 +12748,14 @@ export default function TagCreateForm(props) {
setCurrentPostsValue(undefined);
setCurrentPostsDisplayValue(\\"\\");
setStatuses(initialValues.statuses);
setCurrentStatusesValue(undefined);
setCurrentStatusesValue(\\"\\");
setErrors({});
};
const [currentPostsDisplayValue, setCurrentPostsDisplayValue] =
React.useState(\\"\\");
const [currentPostsValue, setCurrentPostsValue] = React.useState(undefined);
const PostsRef = React.createRef();
const [currentStatusesValue, setCurrentStatusesValue] =
React.useState(undefined);
const [currentStatusesValue, setCurrentStatusesValue] = React.useState(\\"\\");
const statusesRef = React.createRef();
const getIDValue = {
Posts: (r) => JSON.stringify({ id: r?.id }),
Expand Down Expand Up @@ -12997,7 +12996,7 @@ export default function TagCreateForm(props) {
values = result?.statuses ?? values;
}
setStatuses(values);
setCurrentStatusesValue(undefined);
setCurrentStatusesValue(\\"\\");
}}
currentFieldValue={currentStatusesValue}
label={\\"Statuses\\"}
Expand All @@ -13007,7 +13006,7 @@ export default function TagCreateForm(props) {
getBadgeText={getDisplayValue.statuses}
setFieldValue={setCurrentStatusesValue}
inputFieldRef={statusesRef}
defaultFieldValue={undefined}
defaultFieldValue={\\"\\"}
>
<SelectField
label=\\"Statuses\\"
Expand Down Expand Up @@ -14902,15 +14901,14 @@ export default function TagCreateForm(props) {
setCurrentPostsValue(undefined);
setCurrentPostsDisplayValue(\\"\\");
setStatuses(initialValues.statuses);
setCurrentStatusesValue(undefined);
setCurrentStatusesValue(\\"\\");
setErrors({});
};
const [currentPostsDisplayValue, setCurrentPostsDisplayValue] =
React.useState(\\"\\");
const [currentPostsValue, setCurrentPostsValue] = React.useState(undefined);
const PostsRef = React.createRef();
const [currentStatusesValue, setCurrentStatusesValue] =
React.useState(undefined);
const [currentStatusesValue, setCurrentStatusesValue] = React.useState(\\"\\");
const statusesRef = React.createRef();
const getIDValue = {
Posts: (r) => JSON.stringify({ id: r?.id }),
Expand Down Expand Up @@ -15151,7 +15149,7 @@ export default function TagCreateForm(props) {
values = result?.statuses ?? values;
}
setStatuses(values);
setCurrentStatusesValue(undefined);
setCurrentStatusesValue(\\"\\");
}}
currentFieldValue={currentStatusesValue}
label={\\"Statuses\\"}
Expand All @@ -15161,7 +15159,7 @@ export default function TagCreateForm(props) {
getBadgeText={getDisplayValue.statuses}
setFieldValue={setCurrentStatusesValue}
inputFieldRef={statusesRef}
defaultFieldValue={undefined}
defaultFieldValue={\\"\\"}
>
<SelectField
label=\\"Statuses\\"
Expand Down Expand Up @@ -18019,7 +18017,7 @@ export default function TagUpdateForm(props) {
setCurrentPostsValue(undefined);
setCurrentPostsDisplayValue(\\"\\");
setStatuses(cleanValues.statuses ?? []);
setCurrentStatusesValue(undefined);
setCurrentStatusesValue(\\"\\");
setErrors({});
};
const [tagRecord, setTagRecord] = React.useState(tag);
Expand Down Expand Up @@ -18047,8 +18045,7 @@ export default function TagUpdateForm(props) {
React.useState(\\"\\");
const [currentPostsValue, setCurrentPostsValue] = React.useState(undefined);
const PostsRef = React.createRef();
const [currentStatusesValue, setCurrentStatusesValue] =
React.useState(undefined);
const [currentStatusesValue, setCurrentStatusesValue] = React.useState(\\"\\");
const statusesRef = React.createRef();
const getIDValue = {
Posts: (r) => JSON.stringify({ id: r?.id }),
Expand Down Expand Up @@ -18342,7 +18339,7 @@ export default function TagUpdateForm(props) {
values = result?.statuses ?? values;
}
setStatuses(values);
setCurrentStatusesValue(undefined);
setCurrentStatusesValue(\\"\\");
}}
currentFieldValue={currentStatusesValue}
label={\\"Statuses\\"}
Expand All @@ -18352,7 +18349,7 @@ export default function TagUpdateForm(props) {
getBadgeText={getDisplayValue.statuses}
setFieldValue={setCurrentStatusesValue}
inputFieldRef={statusesRef}
defaultFieldValue={undefined}
defaultFieldValue={\\"\\"}
>
<SelectField
label=\\"Statuses\\"
Expand Down Expand Up @@ -22291,7 +22288,7 @@ export default function PostCreateFormRow(props) {
caption: \\"\\",
post_url: \\"\\",
profile_url: \\"\\",
status: undefined,
status: \\"\\",
metadata: \\"\\",
nonModelField: \\"\\",
nonModelFieldArray: [],
Expand Down
1 change: 1 addition & 0 deletions packages/codegen-ui-react/lib/forms/form-renderer-helper/form-state.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ export const getDefaultValueExpression = (
CheckboxField: factory.createFalse(),
TextField: factory.createStringLiteral(''),
TextAreaField: factory.createStringLiteral(''),
SelectField: factory.createStringLiteral(''),
};

if (defaultValue) {
Expand Down
6 changes: 6 additions & 0 deletions packages/test-generator/integration-test-templates/cypress/e2e/form/CustomDog-spec.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,12 @@ describe('FormTests - CustomDog', () => {
getInputByLabel('Email').type('jd@yahoo.com');
cy.contains(ErrorMessageMap.validEmail).should('not.exist');

cy.get('select').select('Green').should('have.value', 'Green');

cy.contains('Clear').click();

cy.get('select').should('have.value', '');

// validates on blur & extends with onValidate prop
getInputByLabel('Name').type('S');
blurField();
Expand All @@ -74,13 +78,15 @@ describe('FormTests - CustomDog', () => {
blurField();
getInputByLabel('IP Address').type('192.0.2.146');
blurField();
cy.get('select').select('Blue');
typeInAutocomplete('Ret{downArrow}{enter}');
cy.contains('Submit').click();
cy.contains('submitted: true');
cy.contains('name: Spot');
cy.contains('age: 3');
cy.contains('email: spot@yahoo.com');
cy.contains('ip: 192.0.2.146');
cy.contains('color: Blue');
cy.contains('Retriever');
});
});
Expand Down
30 changes: 15 additions & 15 deletions ...generator/integration-test-templates/cypress/e2e/form/DSAllSupportedFormFields-spec.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,22 +443,22 @@ describe('FormTests - DSAllSupportedFormFields', () => {
const record = JSON.parse(recordElement.text());

expect(record.stringArray).to.deep.equal([]);
expect('int' in record).to.equal(false);
expect('float' in record).to.equal(false);
expect('awsDate' in record).to.equal(false);
expect('awsTime' in record).to.equal(false);
expect('awsDateTime' in record).to.equal(false);
expect('awsTimestamp' in record).to.equal(false);
expect('awsEmail' in record).to.equal(false);
expect('awsUrl' in record).to.equal(false);
expect('awsIPAddress' in record).to.equal(false);
expect('awsJson' in record).to.equal(false);
expect('awsPhone' in record).to.equal(false);
expect('enum' in record).to.equal(false);
expect('nonModelField' in record).to.equal(false);
expect(record.int).to.equal(null);
expect(record.float).to.equal(null);
expect(record.awsDate).to.equal(null);
expect(record.awsTime).to.equal(null);
expect(record.awsDateTime).to.equal(null);
expect(record.awsTimestamp).to.equal(null);
expect(record.awsEmail).to.equal(null);
expect(record.awsUrl).to.equal(null);
expect(record.awsIPAddress).to.equal(null);
expect(record.awsJson).to.equal(null);
expect(record.awsPhone).to.equal(null);
expect(record.enum).to.equal(null);
expect(record.nonModelField).to.equal(null);
expect(record.nonModelFieldArray).to.deep.equal([]);
expect('HasOneUser' in record).to.equal(false);
expect('BelongsToOwner' in record).to.equal(false);
expect(record.HasOneUser).to.equal(undefined);
expect(record.BelongsToOwner).to.equal(undefined);
expect(record.HasManyStudents).to.deep.equal([]);
expect(record.ManyToManyTags).to.deep.equal([]);
});
Expand Down
1 change: 1 addition & 0 deletions packages/test-generator/integration-test-templates/src/FormTests/CustomDog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ export default function () {
<Text>{`email: ${customFormCreateDogResults.email}`}</Text>
<Text>{`ip: ${customFormCreateDogResults.ip}`}</Text>
<Text>{`ip: ${customFormCreateDogResults.breed}`}</Text>
<Text>{`color: ${customFormCreateDogResults.color}`}</Text>
</View>
</AmplifyProvider>
);
Expand Down
11 changes: 11 additions & 0 deletions packages/test-generator/lib/forms/custom-form-create-dog.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,17 @@
},
"required": false
}
},
"color": {
"label": "Color",
"inputType": {
"type": "SelectField",
"bindingProperties": {},
"valueMappings": {
"bindingProperties": {},
"values": [{"value": {"value": "Red"}}, {"value": {"value": "Blue"}}, {"value": {"value": "Green"}}]
}
}
}
},
"sectionalElements": {
Expand Down

0 comments on commit 326b579

Please sign in to comment.