@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { Logger } from 'aws-amplify';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import { Label } from '../../../primitives';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultSetupTOTPComponent } from '../types';
+import { styles } from './styles';
+
+const COMPONENT_NAME = 'SetupTOTP';
+
+const logger = new Logger('Authenticator');
+
+const {
+  getBackToSignInText,
+  getConfirmingText,
+  getConfirmText,
+  getSetupTOTPText,
+  getSetupTOTPInstructionsText,
+} = authenticatorTextUtil;
+
+const SetupTOTP: DefaultSetupTOTPComponent = ({
+  fields,
+  getTotpSecretCode,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  toSignIn,
+  ...rest
+}) => {
+  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+  });
+
+  const [secretKey, setSecretKey] = useState<string | null>(null);
+
+  const getSecretKey = useCallback(async () => {
+    try {
+      const newSecretKey = await getTotpSecretCode();
+      setSecretKey(newSecretKey);
+    } catch (error) {
+      logger.error(error);
+    }
+  }, [getTotpSecretCode]);
+
+  useEffect(() => {
+    if (!secretKey) {
+      getSecretKey();
+    }
+  }, [getSecretKey, secretKey]);
+
+  const headerText = getSetupTOTPText();
+  const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
+  const secondaryButtonText = getBackToSignInText();
+
+  const body = secretKey ? (
+    <>
+      <Label style={styles.secretKeyText}>
+        {getSetupTOTPInstructionsText()}
+      </Label>
+      <Label selectable style={styles.secretKeyText}>
+        {secretKey}
+      </Label>
+    </>
+  ) : null;
+
+  const buttons = useMemo(
+    () => ({
+      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      links: [{ children: secondaryButtonText, onPress: toSignIn }],
+    }),
+    [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      body={body}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+    />
+  );
+};
+
+SetupTOTP.Footer = DefaultFooter;
+SetupTOTP.FormFields = DefaultTextFormFields;
+SetupTOTP.Header = DefaultHeader;
+
+SetupTOTP.displayName = COMPONENT_NAME;
+export default SetupTOTP;

package/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { fireEvent, render, waitFor } from '@testing-library/react-native';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { Logger } from 'aws-amplify';
+
+import { SetupTOTP } from '..';
+import { GetTotpSecretCode } from '@aws-amplify/ui-react-core/dist/types/Authenticator/hooks';
+
+// use empty mockImplementation to turn off console output
+const errorSpy = jest.spyOn(Logger.prototype, 'error').mockImplementation();
+
+const code = {
+  name: 'code',
+  label: 'Code',
+  placeholder: 'Code',
+  type: 'default' as const,
+};
+const fields = [code];
+const toSignIn = jest.fn();
+
+const props = {
+  error: null as unknown as string,
+  fields,
+  Footer: SetupTOTP.Footer,
+  FormFields: SetupTOTP.FormFields,
+  Header: SetupTOTP.Header,
+  getTotpSecretCode: jest.fn() as unknown as GetTotpSecretCode,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+  isPending: false,
+  toSignIn,
+};
+
+const {
+  getBackToSignInText,
+  getConfirmingText,
+  getConfirmText,
+  getSetupTOTPText,
+  getSetupTOTPInstructionsText,
+} = authenticatorTextUtil;
+
+const SECRET_KEY = 'secretKey';
+const mockGetTotpSecretCode = jest.fn().mockResolvedValue(SECRET_KEY);
+
+describe('SetupTOTP', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders as expected', async () => {
+    const { toJSON, getAllByRole, getByText } = render(
+      <SetupTOTP {...props} />
+    );
+    await waitFor(() => {
+      expect(toJSON()).toMatchSnapshot();
+
+      expect(getAllByRole('header')).toBeDefined();
+      expect(getByText(getSetupTOTPText())).toBeDefined();
+      expect(getByText(getConfirmText())).toBeDefined();
+      expect(getAllByRole('text')).toHaveLength(fields.length);
+    });
+  });
+
+  it('renders an error message', async () => {
+    const errorMessage = 'Test error message';
+    const { toJSON, getByText } = render(
+      <SetupTOTP {...props} error={errorMessage} />
+    );
+    await waitFor(() => {
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText(errorMessage)).toBeDefined();
+    });
+  });
+
+  it('calls toSignIn an secondary button press', async () => {
+    const errorMessage = 'Test error message';
+    const { getByText } = render(<SetupTOTP {...props} error={errorMessage} />);
+    await waitFor(() => {
+      const secondaryButton = getByText(getBackToSignInText());
+
+      expect(secondaryButton).toBeDefined();
+
+      fireEvent(secondaryButton, 'press');
+
+      expect(toSignIn).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('shows the correct submit button based on isPending', async () => {
+    const { queryByText } = render(<SetupTOTP {...props} isPending />);
+
+    await waitFor(() => {
+      expect(queryByText(getConfirmingText())).toBeDefined();
+      expect(queryByText(getConfirmText())).toBe(null);
+    });
+  });
+
+  it('handles secret code generation as expected', async () => {
+    const { getByText, queryByText, rerender } = render(
+      <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
+    );
+    await waitFor(async () => {
+      expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
+      expect(getByText(getSetupTOTPInstructionsText())).toBeDefined();
+      expect(queryByText(SECRET_KEY)).toBeDefined();
+      expect(getByText(SECRET_KEY).props.selectable).toBe(true);
+      expect(errorSpy).not.toHaveBeenCalled();
+
+      rerender(
+        <SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />
+      );
+      await waitFor(() => {
+        expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
+        expect(errorSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  it('handles secret code generation errors as expected', async () => {
+    mockGetTotpSecretCode.mockImplementationOnce(() => {
+      throw new Error('Mock Error');
+    });
+
+    render(<SetupTOTP {...props} getTotpSecretCode={mockGetTotpSecretCode} />);
+    await waitFor(() => {
+      expect(mockGetTotpSecretCode).toHaveBeenCalledTimes(1);
+      expect(errorSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+});