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

describe("BannerDisplay", () => {
  it("renders the title as the alert title", () => {
    const wrapper = mount(BannerDisplay, {
      props: { title: "Heads up", value: "Something to know." },
    })
    expect(wrapper.text()).toContain("Heads up")
  })

  it("renders the value as the description", () => {
    const wrapper = mount(BannerDisplay, {
      props: { title: "Heads up", value: "Something to know." },
    })
    expect(wrapper.text()).toContain("Something to know.")
  })

  it("renders without title when only value is set", () => {
    const wrapper = mount(BannerDisplay, { props: { value: "Only body" } })
    expect(wrapper.text()).toContain("Only body")
  })

  it("applies a variant class on the alert", () => {
    const wrapper = mount(BannerDisplay, {
      props: { value: "x", variant: "destructive" },
    })
    expect(wrapper.attributes("class")).toContain("border-destructive/50")
  })

  it("applies classList to the root", () => {
    const wrapper = mount(BannerDisplay, {
      props: { value: "x", classList: "rounded-xl" },
    })
    expect(wrapper.attributes("class")).toContain("rounded-xl")
  })
})
