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) => (