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

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

  return (
    <TextareaField
      label="Description"
      name="description"
      onChange={event => setvalue(event.target.value)}
      value={value}
    />
  )
}

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

  return (
    <Form form={form}>
      <TextareaField label="Description" name="description" />
    </Form>
  )
}

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

    const textarea = screen.getByLabelText("Description")

    userEvent.type(textarea, "hello")

    expect(textarea.value).toEqual("hello")
  })

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

    const textarea = screen.getByLabelText("Description")

    userEvent.type(textarea, "hello")

    expect(textarea.value).toEqual("hello")
  })
})