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

describe("Separator", () => {
  describe("default rendering", () => {
    it("renders as a div element", () => {
      const wrapper = mount(Separator)
      expect(wrapper.element.tagName).toBe("DIV")
    })

    it("has base styling classes", () => {
      const wrapper = mount(Separator)
      expect(wrapper.classes()).toContain("shrink-0")
      expect(wrapper.classes()).toContain("bg-border")
    })

    it("renders without errors", () => {
      const wrapper = mount(Separator)
      expect(wrapper.exists()).toBe(true)
    })
  })

  describe("horizontal orientation (default)", () => {
    it("applies horizontal sizing classes by default", () => {
      const wrapper = mount(Separator)
      expect(wrapper.classes()).toContain("h-px")
      expect(wrapper.classes()).toContain("w-full")
    })

    it("does not apply vertical sizing classes by default", () => {
      const wrapper = mount(Separator)
      expect(wrapper.classes()).not.toContain("w-px")
      expect(wrapper.classes()).not.toContain("h-full")
    })

    it("sets data-orientation=horizontal", () => {
      const wrapper = mount(Separator)
      expect(wrapper.attributes("data-orientation")).toBe("horizontal")
    })
  })

  describe("vertical orientation", () => {
    it("applies vertical sizing classes", () => {
      const wrapper = mount(Separator, {
        props: { orientation: "vertical" },
      })
      expect(wrapper.classes()).toContain("w-px")
      expect(wrapper.classes()).toContain("h-full")
    })

    it("does not apply horizontal sizing classes", () => {
      const wrapper = mount(Separator, {
        props: { orientation: "vertical" },
      })
      expect(wrapper.classes()).not.toContain("h-px")
      expect(wrapper.classes()).not.toContain("w-full")
    })

    it("sets data-orientation=vertical", () => {
      const wrapper = mount(Separator, {
        props: { orientation: "vertical" },
      })
      expect(wrapper.attributes("data-orientation")).toBe("vertical")
    })
  })

  describe("decorative prop", () => {
    it("is decorative by default (no role=separator)", () => {
      const wrapper = mount(Separator)
      expect(wrapper.attributes("role")).not.toBe("separator")
    })

    it("exposes role=separator when not decorative", () => {
      const wrapper = mount(Separator, {
        props: { decorative: false },
      })
      expect(wrapper.attributes("role")).toBe("separator")
    })

    it("sets aria-orientation when not decorative + vertical", () => {
      const wrapper = mount(Separator, {
        props: { decorative: false, orientation: "vertical" },
      })
      expect(wrapper.attributes("aria-orientation")).toBe("vertical")
    })
  })

  describe("custom class", () => {
    it("merges custom class with default classes", () => {
      const wrapper = mount(Separator, {
        props: { class: "my-custom-class" },
      })
      expect(wrapper.classes()).toContain("my-custom-class")
      expect(wrapper.classes()).toContain("shrink-0")
      expect(wrapper.classes()).toContain("bg-border")
    })

    it("allows tailwind-merge to override bg-border", () => {
      const wrapper = mount(Separator, {
        props: { class: "bg-red-500" },
      })
      expect(wrapper.classes()).toContain("bg-red-500")
      expect(wrapper.classes()).not.toContain("bg-border")
    })

    it("supports class on vertical orientation", () => {
      const wrapper = mount(Separator, {
        props: { orientation: "vertical", class: "rounded-full" },
      })
      expect(wrapper.classes()).toContain("rounded-full")
      expect(wrapper.classes()).toContain("w-px")
    })
  })
})
