diff --git a/packages/amplify-ui-components/src/components/amplify-auth-fields/__snapshots__/amplify-auth-fields.spec.ts.snap b/packages/amplify-ui-components/src/components/amplify-auth-fields/__snapshots__/amplify-auth-fields.spec.ts.snap index 0d962f23816..b2f3e4fedd8 100644 --- a/packages/amplify-ui-components/src/components/amplify-auth-fields/__snapshots__/amplify-auth-fields.spec.ts.snap +++ b/packages/amplify-ui-components/src/components/amplify-auth-fields/__snapshots__/amplify-auth-fields.spec.ts.snap @@ -1,9 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`amplify-auth-fields spec: Render logic -> should render custom type fields 1`] = ` + + +
+ +
+
+
+`; + exports[`amplify-auth-fields spec: Render logic -> should render with a \`username\` and \`password\` field 1`] = ` - + -
+
+ + +
`; diff --git a/packages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.spec.ts b/packages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.spec.ts index 0712b6acff8..8447ae0d5b3 100644 --- a/packages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.spec.ts +++ b/packages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.spec.ts @@ -30,7 +30,7 @@ describe('amplify-auth-fields spec:', () => { it('should return form fields as being defined when passing `username` and `password` as parameter', () => { const constructFormFieldOptionsMock = jest.spyOn(authFields, 'constructFormFieldOptions'); const result = ['username', 'password']; - + authFields.formFields = ['username', 'password']; authFields.constructFormFieldOptions(); @@ -48,10 +48,14 @@ describe('amplify-auth-fields spec:', () => { const usernameField = ['username', 'password']; const page = await newSpecPage({ - components: [AmplifyAuthFields], - html: `` + components: [AmplifyAuthFields] }); + const component = page.doc.createElement("amplify-auth-fields"); + (component as any).formFields = usernameField; + page.body.appendChild(component); + await page.waitForChanges(); + expect(page.root).toMatchSnapshot(); }); @@ -63,5 +67,20 @@ describe('amplify-auth-fields spec:', () => { expect(page.root).toMatchSnapshot(); }); + + it('should render custom type fields', async () => { + const customField = [{'label': 'date', 'type': 'date'}]; + + const page = await newSpecPage({ + components: [AmplifyAuthFields] + }); + + const component = page.doc.createElement("amplify-auth-fields"); + (component as any).formFields = customField; + page.body.appendChild(component); + await page.waitForChanges(); + + expect(page.root).toMatchSnapshot(); + }); }); -}); \ No newline at end of file +}); diff --git a/packages/amplify-ui-components/src/components/amplify-auth-fields/component-field-mapping.tsx b/packages/amplify-ui-components/src/components/amplify-auth-fields/component-field-mapping.tsx index 3611ea34541..f7c6d9f6b76 100644 --- a/packages/amplify-ui-components/src/components/amplify-auth-fields/component-field-mapping.tsx +++ b/packages/amplify-ui-components/src/components/amplify-auth-fields/component-field-mapping.tsx @@ -1,5 +1,6 @@ import { h } from '@stencil/core'; import { FormFieldType, PhoneFormFieldType } from './amplify-auth-fields-interface'; +import { TextFieldTypes } from '../../common/types/ui-types'; const componentFieldMapping = { username: (ff: FormFieldType) => ( @@ -64,6 +65,7 @@ const componentFieldMapping = { default: (ff: FormFieldType) => (