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

describe("BarcodeDisplay", () => {
  it("renders an SVG element", () => {
    const wrapper = mount(BarcodeDisplay, {
      props: { value: "1234567890" },
    })
    expect(wrapper.find("svg").exists()).toBe(true)
  })

  it("uses the given value in the aria-label", async () => {
    const wrapper = mount(BarcodeDisplay, {
      props: { value: "ABC-123" },
    })
    await flushPromises()
    expect(wrapper.find("svg").attributes("aria-label")).toContain("ABC-123")
  })

  it("renders nothing visible when value is empty", () => {
    const wrapper = mount(BarcodeDisplay, { props: { value: null } })
    expect(wrapper.find("svg").exists()).toBe(true)
  })

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