import React, { useState } from "react"
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import TextField from "../"
import useForm, { Form } from "../../../hooks/use-form"

const ExampleField = () => {
  const [value, setvalue] = useState("")

  return (
    <TextField
      label="Name"
      name="name"
      onChange={event => setvalue(event.target.value)}
      value={value}
    />
  )
}

const ExampleFieldInForm = () => {
  const form = useForm({ initialData: { name: "" } })

  return (
    <Form form={form}>
      <TextField label="Name" name="name" />
    </Form>
  )
}

describe("TextField", () => {
  test("using outside of a form", () => {
    render(<ExampleField />)

    const input = screen.getByLabelText("Name")

    userEvent.type(input, "ConvertKit")

    expect(input.value).toEqual("ConvertKit")
  })

  test("using inside of a form", () => {
    render(<ExampleFieldInForm />)

    const input = screen.getByLabelText("Name")

    userEvent.type(input, "ConvertKit")

    expect(input.value).toEqual("ConvertKit")
  })
})
