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

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

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

    it("has animate-pulse class", () => {
      const wrapper = mount(Skeleton)
      expect(wrapper.classes()).toContain("animate-pulse")
    })

    it("has rounded-md class", () => {
      const wrapper = mount(Skeleton)
      expect(wrapper.classes()).toContain("rounded-md")
    })

    it("has bg-muted class", () => {
      const wrapper = mount(Skeleton)
      expect(wrapper.classes()).toContain("bg-muted")
    })
  })

  describe("base styles", () => {
    it.each([
      "animate-pulse",
      "rounded-md",
      "bg-muted",
    ])("has %s class", (cls) => {
      const wrapper = mount(Skeleton)
      expect(wrapper.classes()).toContain(cls)
    })
  })

  describe("custom class", () => {
    it("merges custom class with default classes", () => {
      const wrapper = mount(Skeleton, { props: { class: "h-4 w-32" } })
      expect(wrapper.classes()).toContain("h-4")
      expect(wrapper.classes()).toContain("w-32")
      expect(wrapper.classes()).toContain("animate-pulse")
    })

    it("allows overriding rounded via custom class", () => {
      const wrapper = mount(Skeleton, { props: { class: "rounded-full" } })
      expect(wrapper.classes()).toContain("rounded-full")
      expect(wrapper.classes()).not.toContain("rounded-md")
    })

    it("allows overriding bg-muted via custom class", () => {
      const wrapper = mount(Skeleton, { props: { class: "bg-slate-200" } })
      expect(wrapper.classes()).toContain("bg-slate-200")
      expect(wrapper.classes()).not.toContain("bg-muted")
    })

    it("accepts arbitrary utility classes", () => {
      const wrapper = mount(Skeleton, { props: { class: "h-10 w-10 my-2" } })
      expect(wrapper.classes()).toContain("h-10")
      expect(wrapper.classes()).toContain("w-10")
      expect(wrapper.classes()).toContain("my-2")
    })
  })
})
