refactor(account-settings): share <ValidationErrors /> (#2908)

* Share common Authenticator utils

* ValidationErrors unit test

* Remove extra function layer

* defaultPasswordValidator unit test

* Update password validator usage

* Remove `.only` and fix equality assertions

* return null from validator, and add unit test

* Test against null instead of []

* Revert defaultPasswordValidator change

* Remove stale export

packages/react/src/components/Authenticator/shared/FormField.tsx

@@ -5,8 +5,8 @@ import { PasswordField } from '../../../primitives/PasswordField';
 import { PhoneNumberField } from '../../../primitives/PhoneNumberField';
 import { TextField } from '../../../primitives/TextField';
 import { useAuthenticator } from '@aws-amplify/ui-react-core';
-import { ValidationErrors } from './ValidationErrors';
 import { useStableId } from '../../../primitives/utils/useStableId';
+import { ValidationErrors } from '../../shared/ValidationErrors';
 
 export interface FormFieldProps extends Omit<FormFieldOptions, 'label'> {
   // label is a required prop for the UI field components used in FormField
@@ -45,7 +45,11 @@ export function FormField({
           hasError={hasError}
           aria-describedby={ariaDescribedBy}
         />
-        <ValidationErrors errors={errors} id={errorId} />
+        <ValidationErrors
+          dataAttr="data-amplify-sign-up-errors"
+          errors={errors}
+          id={errorId}
+        />
       </>
     );
   } else if (type === 'password') {
@@ -58,7 +62,11 @@ export function FormField({
           hasError={hasError}
           aria-describedby={ariaDescribedBy}
         />
-        <ValidationErrors errors={errors} id={errorId} />
+        <ValidationErrors
+          dataAttr="data-amplify-sign-up-errors"
+          errors={errors}
+          id={errorId}
+        />
       </>
     );
   } else {
@@ -72,7 +80,11 @@ export function FormField({
           type={type}
           aria-describedby={ariaDescribedBy}
         />
-        <ValidationErrors errors={errors} id={errorId} />
+        <ValidationErrors
+          dataAttr="data-amplify-sign-up-errors"
+          errors={errors}
+          id={errorId}
+        />
       </>
     );
   }

packages/react/src/components/Authenticator/shared/ValidationErrors.tsx → packages/react/src/components/shared/ValidationErrors.tsx

@@ -1,21 +1,25 @@
 import React from 'react';
 import { translate } from '@aws-amplify/ui';
 
-import { View } from '../../../primitives/View';
-import { Text } from '../../../primitives/Text';
+import { View } from '../../primitives/View';
+import { Text } from '../../primitives/Text';
 
 export interface ValidationErrorsProps {
   errors: string[];
   id?: string;
+  dataAttr?: string;
 }
 export const ValidationErrors = ({
   errors,
   id,
+  dataAttr,
 }: ValidationErrorsProps): JSX.Element => {
   if (!(errors?.length > 0)) return null;
 
+  const dataAttrProp = dataAttr ? { [dataAttr]: true } : {};
+
   return (
-    <View data-amplify-sign-up-errors id={id}>
+    <View {...dataAttrProp} id={id}>
       {errors.map((error) => {
         return (
           <Text key={error} role="alert" variation="error">

packages/react/src/components/shared/__tests__/ValidationErrors.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ValidationErrors } from '../ValidationErrors';
+
+describe('ValidationErrors', () => {
+  it('renders errors as expected', async () => {
+    const { container } = render(
+      <ValidationErrors errors={['mock error 1', 'mock error 2']} />
+    );
+    expect(container).toMatchSnapshot();
+    expect(await screen.findByText('mock error 1')).toBeDefined();
+    expect(await screen.findByText('mock error 2')).toBeDefined();
+  });
+
+  it('renders nothing if there are no errors', async () => {
+    const { container } = render(<ValidationErrors errors={[]} />);
+    expect(container).toMatchInlineSnapshot(`<div />`);
+  });
+
+  it('renders dataAttr as expected', () => {
+    const dataAttr = 'data-amplify-sign-up-errors';
+    const { container } = render(
+      <ValidationErrors
+        dataAttr={dataAttr}
+        errors={['mock error 1', 'mock error 2']}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

packages/react/src/components/shared/__tests__/__snapshots__/ValidationErrors.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ValidationErrors renders dataAttr as expected 1`] = `
+<div>
+  <div
+    data-amplify-sign-up-errors="true"
+  >
+    <p
+      class="amplify-text amplify-text--error"
+      data-variation="error"
+      role="alert"
+    >
+      mock error 1
+    </p>
+    <p
+      class="amplify-text amplify-text--error"
+      data-variation="error"
+      role="alert"
+    >
+      mock error 2
+    </p>
+  </div>
+</div>
+`;
+
+exports[`ValidationErrors renders errors as expected 1`] = `
+<div>
+  <div>
+    <p
+      class="amplify-text amplify-text--error"
+      data-variation="error"
+      role="alert"
+    >
+      mock error 1
+    </p>
+    <p
+      class="amplify-text amplify-text--error"
+      data-variation="error"
+      role="alert"
+    >
+      mock error 2
+    </p>
+  </div>
+</div>
+`;

packages/react/src/components/shared/index.ts

@@ -0,0 +1 @@
+export { ValidationErrors } from './ValidationErrors';