// import { fireEvent, render } from "@testing-library/react";

// import { createForm } from "factory";

describe("FormPage [ Base ]", () => {
  // type SighUpForm = {
  //   user: {
  //     email: string;
  //     password: string;
  //     confirmPassword: string;
  //   };
  // };

  // let formInstance = createForm<SighUpForm>(
  //   {
  //     user: {
  //       email: "",
  //       password: "",
  //       confirmPassword: "",
  //     },
  //   },
  //   {
  //     pages: 2,
  //   },
  // );

  beforeEach(() => {
    // formInstance = createForm<SighUpForm>(
    //   {
    //     user: {
    //       email: "",
    //       password: "",
    //       confirmPassword: "",
    //     },
    //   },
    //   {
    //     pages: 2,
    //   },
    // );
  });

  // describe("when multi-page form", () => {
  //   it("should move between pages", async () => {
  //     const { Form, FormButton, FormPage, useActions } = formInstance;
  //     const onSubmit = jest.fn();

  //     const App = () => {
  //       const { goNext, goBack } = useActions();

  //       return (
  //         <Form onSubmit={onSubmit}>
  //           <FormPage page={1}>
  //             <span>Page 1</span>
  //             {/* <Field data-testid="user.email" name="user.email" type="text" /> */}
  //           </FormPage>
  //           <FormPage page={2}>
  //             <span>Page 2</span>
  //             {/* <Field data-testid="user.password" name="user.password" type="text" /> */}
  //             {/* <Field data-testid="user.confirmPassword" name="user.confirmPassword" type="text" /> */}
  //           </FormPage>

  //           <FormButton data-testid="submit" type="submit">
  //             Submit
  //           </FormButton>
  //           <FormButton data-testid="next" type="button" onClick={goNext}>
  //             Next
  //           </FormButton>
  //           <FormButton data-testid="back" type="button" onClick={goBack}>
  //             Back
  //           </FormButton>
  //         </Form>
  //       );
  //     };

  //     const { getByTestId, queryByTestId, findByTestId } = render(<App />);

  //     const emailInput = getByTestId("user.email");

  //     expect(emailInput).toBeInTheDocument();
  //     expect(queryByTestId("user.password")).not.toBeInTheDocument();
  //     expect(queryByTestId("user.confirmPassword")).not.toBeInTheDocument();

  //     fireEvent.change(emailInput, { target: { value: "test" } });

  //     expect(emailInput).toHaveValue("test");

  //     const nextButton = getByTestId("next");
  //     const backButton = getByTestId("back");

  //     fireEvent.click(nextButton);

  //     await findByTestId("user.password");
  //     await findByTestId("user.confirmPassword");

  //     expect(getByTestId("user.password")).toBeInTheDocument();
  //     expect(getByTestId("user.confirmPassword")).toBeInTheDocument();

  //     fireEvent.click(backButton);

  //     await findByTestId("user.email");

  //     expect(emailInput).toHaveValue("test");
  //   });
  // });
});