import { describe, expect, it } from "vitest"
import { mount } from "@vue/test-utils"
import RangeSliderInput from "./RangeSliderInput.vue"

describe("RangeSliderInput (props-based composition)", () => {
  it("mounts and renders the label via FieldFrame", () => {
    const wrapper = mount(RangeSliderInput, { props: { label: "Volume" } })
    expect(wrapper.text()).toContain("Volume")
  })

  it("renders the current value", () => {
    const wrapper = mount(RangeSliderInput, {
      props: { modelValue: 42, min: 0, max: 100 },
    })
    expect(wrapper.find("[data-testid='range-slider-value']").text()).toBe("42")
  })

  it("falls back to min when no modelValue is given", () => {
    const wrapper = mount(RangeSliderInput, { props: { min: 5, max: 50 } })
    expect(wrapper.find("[data-testid='range-slider-value']").text()).toBe("5")
  })

  it("hides the label when hideLabel is true", () => {
    const wrapper = mount(RangeSliderInput, {
      props: { label: "Hidden", hideLabel: true },
    })
    expect(wrapper.find("[data-testid='field-frame-label-sr']").exists()).toBe(true)
    expect(wrapper.find("[data-testid='field-frame-label']").exists()).toBe(false)
  })

  it("renders errors", () => {
    const wrapper = mount(RangeSliderInput, {
      props: { errors: ["Out of range"] },
    })
    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(true)
  })

  it("works without any props at all", () => {
    const wrapper = mount(RangeSliderInput)
    expect(wrapper.exists()).toBe(true)
    expect(wrapper.find("[data-testid='range-slider-value']").text()).toBe("0")
  })
})
