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

describe("ProgressBarDisplay", () => {
  it("renders the numeric progress value", () => {
    const wrapper = mount(ProgressBarDisplay, {
      props: { progress: 42, label: "Loading" },
    })
    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("42%")
  })

  it("renders 0% when progress is not set", () => {
    const wrapper = mount(ProgressBarDisplay)
    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("0%")
  })

  it("clamps an overflow value to 100", () => {
    const wrapper = mount(ProgressBarDisplay, { props: { progress: 150 } })
    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("100%")
  })

  it("clamps an underflow value to 0", () => {
    const wrapper = mount(ProgressBarDisplay, { props: { progress: -10 } })
    expect(wrapper.find("[data-testid='progress-bar-value']").text()).toBe("0%")
  })

  it("renders a label when provided", () => {
    const wrapper = mount(ProgressBarDisplay, {
      props: { progress: 50, label: "Setup" },
    })
    expect(wrapper.text()).toContain("Setup")
  })

  it("applies classList to the root", () => {
    const wrapper = mount(ProgressBarDisplay, {
      props: { progress: 50, classList: "track" },
    })
    expect(wrapper.attributes("class")).toContain("track")
  })
})
