import React from "react"
import { render, screen } from "@testing-library/react"
import userEvent from "@testing-library/user-event"
import PixelSlider from "./index.js"

const handleChangeMock = jest.fn((value) => value)

afterEach(() => {
  jest.clearAllMocks()
})

test("PixelSlider returns Number-type values", () => {
  render(
    <PixelSlider label="foo" name="bar" value={0} onChange={handleChangeMock} />
  )

  const input = screen.getByLabelText("foo")

  userEvent.type(input, "7")

  expect(handleChangeMock).toHaveBeenCalledWith(7)
})

test("PixelSlider doesn't return strings", () => {
  render(
    <PixelSlider label="foo" name="bar" value={0} onChange={handleChangeMock} />
  )

  const input = screen.getByLabelText("foo")

  userEvent.type(input, "string!")

  expect(handleChangeMock).not.toHaveBeenCalled()
})
