Snippets Collections
"husky": { "hooks": { "pre-commit": "pretty-quick --staged" } }
import React from 'react';
import { UseFormMethods } from 'react-hook-form';
import { useStepMachine } from 'ui/step-machine';
import { ClipLoader } from 'react-spinners';
import { AuthError, Values } from './types';
import machine, { Step } from './stepMachine';
import Confirm from './Pages/Confirm';
import Change from './Pages/Change';
import Reset from './Pages/Reset';

interface Props {
  formProps: UseFormMethods<Values>;
  onForgotPassword: (email: string) => Promise<any>;
  onForgotPasswordSubmit: (values: any) => Promise<unknown>;
  error?: AuthError;
  submitError?: AuthError;
  submitting: boolean;
}

const Recovery = ({
  formProps: { errors, control, handleSubmit },
  onForgotPassword,
  onForgotPasswordSubmit,
  error,
  submitError,
  submitting,
}: Props) => {
  const { step, next, previous, handleSubmitStep } = useStepMachine(machine, {
    onSubit: onForgotPasswordSubmit,
  });
  return (
    <form
      noValidate
      onSubmit={handleSubmit(async (data) => {
        if (step === Step.RESET) {
          const { error } = await onForgotPassword(data.emailAddress);
          if (!error) {
            handleSubmitStep(data);
          }
          return null;
        }
        return handleSubmitStep(data);
      })}
    >
      <Choose>
        <When condition={step === Step.RESET}>
          <Reset
            error={error}
            errors={errors}
            control={control}
            submitting={submitting}
          />
        </When>
        <When condition={step === Step.CONFIRM}>
          <Confirm errors={errors} control={control} onPrevious={previous} />
        </When>
        <When condition={step === Step.CHANGE}>
          <Change
            error={submitError}
            onForgotPasswordSubmit={onForgotPasswordSubmit}
            submitting={submitting}
            errors={errors}
            control={control}
            onNext={next}
            onPrevious={previous}
          />
        </When>
        <When condition={step === Step.SUBMIT}>
          <ClipLoader />
        </When>
      </Choose>
    </form>
  );
};

export default Recovery;
import React from 'react';
import { render, screen, act, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { useForm } from 'react-hook-form';
import { createWrapper } from '__tests__/wrapper';
import { en } from 'ui/messages';
import { ForgotPasswordSubmit } from 'ports/auth/forgotPasswordSubmit';
import { ForgotPassword } from 'ports/auth/forgotPassword';
import Recovery from '../Recovery';
import { Values } from '../types';

const setup = () => {
  const onForgotPassword = jest.fn();
  const onForgotPasswordSubmit = jest.fn();

  const Provider: React.FC = () => {
    const formProps = useForm<Values>();
    return (
      <Recovery
        formProps={formProps}
        submitting={false}
        onForgotPassword={onForgotPassword}
        onForgotPasswordSubmit={onForgotPasswordSubmit}
      />
    );
  };

  const wrapper = createWrapper({
    messages: en,
    inject(jpex) {
      jpex.constant<ForgotPassword>(onForgotPassword);
      jpex.constant<ForgotPasswordSubmit>(onForgotPasswordSubmit);
    },
    render: () => {
      return <Provider />;
    },
  });
  return { wrapper, onForgotPassword, onForgotPasswordSubmit };
};

describe('testing password recovery page', () => {
  it('should run useForgotPassword on submit of RESET step', async () => {
    const { wrapper, onForgotPassword } = setup();
    await act(async () => {
      render(<div />, { wrapper });
      await userEvent.type(
        screen.getByLabelText('Email Address'),
        'user@email.com'
      );
      await userEvent.click(screen.getByText('Next'));
    });

    // expect(onForgotPassword).toBeCalledWith('user@email.com');
    expect(onForgotPassword).toHaveBeenCalled();
  });
});
star

Mon Feb 08 2021 20:21:09 GMT+0000 (UTC)

#typescriptreact #css
star

Thu Feb 04 2021 16:59:16 GMT+0000 (UTC)

#typescriptreact
star

Thu Feb 04 2021 16:43:16 GMT+0000 (UTC)

#typescriptreact

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension