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

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

  return (
    <CheckboxField
      label="Optimize"
      name="optimize"
      onChange={event => setvalue(event.target.checked)}
      value={value}
    />
  )
}

const ExampleFieldInForm = () => {
  const form = useForm({ initialData: { optimize: false } })

  return (
    <Form form={form}>
      <CheckboxField label="Optimize" name="optimize" />
    </Form>
  )
}

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

    const input = screen.getByLabelText("Optimize")
    expect(input.checked).toEqual(false)

    userEvent.click(input)

    expect(input.checked).toEqual(true)
  })

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

    const input = screen.getByLabelText("Optimize")
    expect(input.checked).toEqual(false)

    userEvent.click(input)

    expect(input.checked).toEqual(true)
  })
})