Merge branch 'main' into auth-validationData-type-fix

aws-amplify · Apr 13, 2021 · f252195 · f252195
2 parents d5ed713 + c4ccc17
commit f252195
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 6 deletions.
diff --git a/...ponents/src/components/amplify-auth-fields/__snapshots__/amplify-auth-fields.spec.ts.snap b/...ponents/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`] = `
+<amplify-auth-fields>
+  <mock:shadow-root>
+    <div class="auth-fields">
+      <amplify-form-field label="date" type="date"></amplify-form-field>
+    </div>
+  </mock:shadow-root>
+</amplify-auth-fields>
+`;
+
 exports[`amplify-auth-fields spec: Render logic -> should render with a \`username\` and \`password\` field 1`] = `
-<amplify-auth-fields formfields="username,password">
+<amplify-auth-fields>
   <mock:shadow-root>
-    <div class="auth-fields"></div>
+    <div class="auth-fields">
+      <amplify-username-field></amplify-username-field>
+      <amplify-password-field></amplify-password-field>
+    </div>
   </mock:shadow-root>
 </amplify-auth-fields>
 `;

diff --git a/...ages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.spec.ts b/...ages/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: `<amplify-auth-fields formFields=${usernameField}></amplify-auth-fields>`
+        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();
+    });
   });
-});
+});
diff --git a/...ages/amplify-ui-components/src/components/amplify-auth-fields/component-field-mapping.tsx b/...ages/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) => (
     <amplify-form-field
       label={ff.label}
+      type={ff.type as TextFieldTypes}
       placeholder={ff.placeholder}
       required={ff.required}
       handleInputChange={ff.handleInputChange}