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

describe("HtmlDisplay", () => {
  it("renders raw HTML from value", () => {
    const wrapper = mount(HtmlDisplay, { props: { value: "<p>Hello</p>" } })
    expect(wrapper.find("p").exists()).toBe(true)
    expect(wrapper.find("p").text()).toBe("Hello")
  })

  it("renders empty when value is null", () => {
    const wrapper = mount(HtmlDisplay, { props: { value: null } })
    expect(wrapper.html()).not.toContain("<p>")
  })

  it("renders nested elements as raw HTML", () => {
    const wrapper = mount(HtmlDisplay, {
      props: { value: "<span>from item</span>" },
    })
    expect(wrapper.find("span").exists()).toBe(true)
    expect(wrapper.find("span").text()).toBe("from item")
  })

  it("applies classList (array) to the root", () => {
    const wrapper = mount(HtmlDisplay, {
      props: { value: "<p>x</p>", classList: ["custom"] },
    })
    expect(wrapper.attributes("class")).toContain("custom")
  })

  it("applies classList (string) to the root", () => {
    const wrapper = mount(HtmlDisplay, {
      props: { value: "<p>x</p>", classList: "extra" },
    })
    expect(wrapper.attributes("class")).toContain("extra")
  })
})
