feat(rna): ForceNewPassword subcomponent (#2823)

* basic template and stories

* write tests

* align styles with SignIn component

* replace container with fragment

* destructure translations outside component

Co-authored-by: Joe Buono <joebuono@amazon.com>

examples/react-native/storybook/stories/ForceNewPassword.stories.tsx

@@ -1,11 +1,28 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { ForceNewPassword } from '@aws-amplify/ui-react-native/dist/Authenticator/Defaults';
+import { Authenticator } from '@aws-amplify/ui-react-native';
+import noop from 'lodash/noop';
 
-const props = {} as any;
+const baseProps = {
+  error: null as unknown as string,
+  fields: [],
+  Footer: Authenticator.ForceNewPassword.Footer,
+  FormFields: Authenticator.ForceNewPassword.FormFields,
+  Header: Authenticator.ForceNewPassword.Header,
+  handleBlur: noop,
+  handleSubmit: (values: any) => {
+    console.log('Values', values);
+  },
+  handleChange: noop,
+  isPending: false,
+  toSignIn: noop,
+};
 
-storiesOf('ForceNewPassword', module)
-  .add('default', () => <ForceNewPassword {...props} />)
-  .add('header', () => <ForceNewPassword.Header />)
-  .add('footer', () => <ForceNewPassword.Footer />)
-  .add('formFields', () => <ForceNewPassword.FormFields {...props} />);
+storiesOf('Authenticator.ForceNewPassword', module)
+  .add('default', () => <Authenticator.ForceNewPassword {...baseProps} />)
+  .add('with error', () => (
+    <Authenticator.ForceNewPassword {...baseProps} error="Error!" />
+  ))
+  .add('isPending', () => (
+    <Authenticator.ForceNewPassword {...baseProps} isPending />
+  ));

packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx

@@ -1,13 +1,45 @@
 import React from 'react';
-import { Text } from 'react-native';
 
-import { DefaultFooter } from '../../common/DefaultFooter';
-import { DefaultHeader } from '../../common/DefaultHeader';
-import { DefaultFormFields } from '../../common/DefaultFormFields';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import { Button, ErrorMessage } from '../../../primitives';
+import { DefaultFooter, DefaultFormFields, DefaultHeader } from '../../common';
 import { DefaultForceNewPasswordComponent } from '../types';
+import { styles } from './styles';
+
+const { getChangePasswordText, getChangingText, getBackToSignInText } =
+  authenticatorTextUtil;
 
-const ForceNewPassword: DefaultForceNewPasswordComponent = () => {
-  return <Text>ForceNewPassword</Text>;
+const ForceNewPassword: DefaultForceNewPasswordComponent = ({
+  error,
+  fields,
+  Footer,
+  FormFields,
+  Header,
+  isPending,
+  toSignIn,
+}) => {
+  return (
+    <>
+      <Header>{getChangePasswordText()}</Header>
+      <FormFields fields={fields} isPending={isPending} />
+      {error ? <ErrorMessage>{error}</ErrorMessage> : null}
+      <Button
+        style={styles.buttonPrimary}
+        textStyle={styles.buttonPrimaryLabel}
+      >
+        {isPending ? getChangingText() : getChangePasswordText()}
+      </Button>
+      <Button
+        onPress={toSignIn}
+        style={styles.buttonSecondary}
+        textStyle={styles.buttonSecondaryLabel}
+      >
+        {getBackToSignInText()}
+      </Button>
+      <Footer />
+    </>
+  );
 };
 
 ForceNewPassword.Footer = DefaultFooter;

packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/ForceNewPassword.spec.tsx

@@ -1,22 +1,62 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { authenticatorTextUtil } from '@aws-amplify/ui';
 
 import { ForceNewPassword } from '..';
 
-const props = {} as any;
+const props = {
+  fields: [],
+  Footer: ForceNewPassword.Footer,
+  FormFields: ForceNewPassword.FormFields,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+  Header: ForceNewPassword.Header,
+  isPending: false,
+  toSignIn: jest.fn(),
+};
+
+const { getChangePasswordText, getChangingText, getBackToSignInText } =
+  authenticatorTextUtil;
 
 describe('ForceNewPassword', () => {
   it('renders as expected', () => {
-    const { toJSON, getByRole } = render(
-      <>
-        <ForceNewPassword {...props} />
-        <ForceNewPassword.Header />
-        <ForceNewPassword.Footer />
-        <ForceNewPassword.FormFields {...props} />
-      </>
+    const { toJSON, getAllByRole, getAllByText } = render(
+      <ForceNewPassword {...props} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getAllByRole('header')).toBeDefined();
+    expect(getAllByText(getChangePasswordText())).toBeTruthy();
+    expect(getAllByText(getBackToSignInText())).toBeTruthy();
+  });
+
+  it('renders an error message', () => {
+    const errorMessage = 'Test error message';
+    const { toJSON, getByText } = render(
+      <ForceNewPassword {...props} error={errorMessage} />
     );
+
     expect(toJSON()).toMatchSnapshot();
+    expect(getByText(errorMessage)).toBeTruthy();
+  });
+
+  it('handles Back to Sign In button', () => {
+    const toSignInMock = jest.fn();
+
+    const { getByText } = render(
+      <ForceNewPassword {...props} toSignIn={toSignInMock} />
+    );
+
+    const button = getByText(getBackToSignInText());
+    fireEvent.press(button);
+    expect(toSignInMock).toBeCalledTimes(1);
+  });
+
+  it('renders correct text based on isPending', () => {
+    const { queryByText } = render(<ForceNewPassword {...props} isPending />);
 
-    expect(getByRole('header')).toBeDefined();
+    expect(queryByText(getChangingText())).toBeTruthy();
   });
 });