########################################
#
# /page/signUp/SignUpForm.jsx
#
#########################################
import React from "react";
import { useFormik } from "formik";
import schema from "./formik.schema";
import initialValues from "./formik.initialValues";
import { onSubmit } from "./formik.submit";

const SignUpForm = () => {
  const formik = useFormik({
    initialValues: initialValues,
    validationSchema: schema,
    onSubmit: onSubmit,
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email ? <div>{formik.errors.email}</div> : null}

      <label htmlFor="firstName">First Name</label>

      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
      {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}

      <label htmlFor="lastName">Last Name</label>
      <input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.lastName}
      />
      {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}

      <label htmlFor="password">password</label>
      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      {formik.errors.password ? <div>{formik.errors.password}</div> : null}

      <button type="submit">Submit</button>
    </form>
  );
};

export default SignUpForm;


########################################
#
# /page/signUp/formik.submit.js
#
#########################################

export const onSubmit = (values) => {
  console.log(values);
};



########################################
#
# /page/signUp/signUp.test.js
#
#########################################

import React from "react";
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import SignUpForm from "./signUpForm";
import * as onSubmit from "./formik.submit";

test("renderiog signUp form", async () => {
  render(<SignUpForm />);

  const email = screen.getByLabelText(/email/i);
  const firstName = screen.getByLabelText(/first name/i);
  const lastName = screen.getByLabelText(/last name/i);
  const password = screen.getByLabelText(/password/i);

  expect(email).toBeInTheDocument();
  expect(firstName).toBeInTheDocument();
  expect(lastName).toBeInTheDocument();
  expect(password).toBeInTheDocument();
});

test("submitting signUp form", async () => {
  jest.spyOn(onSubmit, "onSubmit");
  render(<SignUpForm />);
  userEvent.type(screen.getByLabelText(/Email/i), "[email protected]");
  userEvent.type(screen.getByLabelText(/First Name/i), "John");
  userEvent.type(screen.getByLabelText(/Last Name/i), "Dee");
  userEvent.type(screen.getByLabelText(/password/i), "password");

  userEvent.click(screen.getByRole("button", { name: /Submit/i }));

  await waitFor(() => expect(onSubmit.onSubmit).toHaveBeenCalled());
});


######################################
#
# Error when running the test
#
#####################################
 FAIL  src/pages/signUp/signUp.test.js
  ✓ renderiog signUp form (73 ms)
  ✕ submitting signUp form (524 ms)

  ● submitting signUp form

    expect(jest.fn()).toHaveBeenCalledWith(...expected)

    - Expected
    + Received

      {"email": "[email protected]", "firstName": "John", "lastName": "Dee", "password": "password"},
    + {"resetForm": [Function anonymous], "setErrors": [Function anonymous], "setFieldError": [Function anonymous], "setFieldTouched": [Function anonymous], "setFieldValue": [Function anonymous], "setFormikState": [Function anonymous], "setStatus": [Function anonymous], "setSubmitting": [Function anonymous], "setTouched": [Function anonymous], "setValues": [Function anonymous], "submitForm": [Function anonymous], "validateField": [Function anonymous], "validateForm": [Function anonymous]},

    Number of calls: 1

      31 |   await waitFor(() => expect(onSubmit.onSubmit).toHaveBeenCalled());
      32 |
    > 33 |   expect(onSubmit.onSubmit).toHaveBeenCalledWith({
         |                             ^
      34 |     email: "[email protected]",
      35 |     firstName: "John",
      36 |     lastName: "Dee",

      at Object.<anonymous> (src/pages/signUp/signUp.test.js:33:29)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        2.952 s, estimated 3 s
Ran all test suites related to changed files.