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

describe("IconDisplay", () => {
  it("resolves a lucide icon from iconName", async () => {
    const wrapper = mount(IconDisplay, { props: { iconName: "Check" } })
    await flushPromises()
    expect(wrapper.attributes("data-icon-name")).toBe("Check")
    expect(wrapper.find("svg").exists()).toBe(true)
  })

  it("renders the fallback when iconName is empty", async () => {
    const wrapper = mount(IconDisplay, { props: {} })
    await flushPromises()
    expect(wrapper.find("[data-testid='icon-display-fallback']").exists()).toBe(true)
  })

  it("normalises kebab-case input to PascalCase", async () => {
    const wrapper = mount(IconDisplay, { props: { iconName: "alert-circle" } })
    await flushPromises()
    expect(wrapper.attributes("data-icon-name")).toBe("AlertCircle")
  })

  it("applies the size in pixels", async () => {
    const wrapper = mount(IconDisplay, {
      props: { iconName: "Check", size: 32 },
    })
    await flushPromises()
    const svg = wrapper.find("svg")
    expect(svg.attributes("style") ?? "").toContain("32px")
  })

  it("applies classList to the root", () => {
    const wrapper = mount(IconDisplay, {
      props: { iconName: "Check", classList: ["pulse"] },
    })
    expect(wrapper.attributes("class")).toContain("pulse")
  })
})
