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

import Form from "./Form.svelte";

type FormData = {
  string: string;
  hidden: string;
};

test("svelte-hook-form/form-context", async () => {
  const { getByTestId, component, container } = render(Form, {});

  const strValue = "Hello World";
  const inputEl = container.querySelector(`input[name="string"]`) as HTMLInputElement;
  expect(inputEl).toBeInTheDocument();

  // typing "Hello World" in the input
  await fireEvent.input(inputEl, { target: { value: strValue } });
  expect(inputEl).toHaveProperty("value", strValue);

  const dateValue = "2022-01-30";
  const dateEl = container.querySelector(`input[name="date"]`) as HTMLInputElement;
  expect(dateEl).toBeInTheDocument();

  await fireEvent.input(dateEl, { target: { value: dateValue } });
  expect(dateEl).toHaveProperty("value", dateValue);

  let data: Partial<FormData> = {};
  component.$on("success", ({ detail }) => {
    data = detail as FormData;
  });

  const submitEl = getByTestId("submitter") as HTMLButtonElement;
  expect(submitEl).toBeInTheDocument();
  await fireEvent.click(submitEl);

  expect({ string: strValue, date: dateValue, hidden: "hidden" }).toMatchObject(data);
});