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

describe("TypeDisplay", () => {
  it("renders value content", () => {
    const wrapper = mount(TypeDisplay, { props: { value: "Hello, world" } })
    expect(wrapper.text()).toBe("Hello, world")
  })

  it("renders empty when value is null", () => {
    const wrapper = mount(TypeDisplay, { props: { value: null } })
    expect(wrapper.text()).toBe("")
  })

  it("renders an h1 for heading-1 contentType", () => {
    const wrapper = mount(TypeDisplay, {
      props: { value: "Title", contentType: "heading-1" },
    })
    expect(wrapper.find("h1").exists()).toBe(true)
    expect(wrapper.find("h1").classes()).toContain("text-4xl")
  })

  it("renders a blockquote for quote contentType", () => {
    const wrapper = mount(TypeDisplay, {
      props: { value: "A quote", contentType: "quote" },
    })
    expect(wrapper.find("blockquote").exists()).toBe(true)
  })

  it("renders a paragraph by default", () => {
    const wrapper = mount(TypeDisplay, { props: { value: "body" } })
    expect(wrapper.find("p").exists()).toBe(true)
  })

  it("applies classList (array) to the root element", () => {
    const wrapper = mount(TypeDisplay, {
      props: { value: "foo", classList: ["custom", "class"] },
    })
    expect(wrapper.attributes("class")).toContain("custom")
    expect(wrapper.attributes("class")).toContain("class")
  })

  it("applies classList (string) to the root element", () => {
    const wrapper = mount(TypeDisplay, {
      props: { value: "foo", classList: "extra-class" },
    })
    expect(wrapper.attributes("class")).toContain("extra-class")
  })

  it("coerces numeric value to a string", () => {
    const wrapper = mount(TypeDisplay, { props: { value: 42 } })
    expect(wrapper.text()).toBe("42")
  })
})
