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

describe("QrCodeDisplay", () => {
  it("renders a canvas element", () => {
    const wrapper = mount(QrCodeDisplay, {
      props: { value: "https://example.com" },
    })
    expect(wrapper.find("canvas").exists()).toBe(true)
  })

  it("uses the given value in the aria-label", async () => {
    const wrapper = mount(QrCodeDisplay, {
      props: { value: "https://from-item.test" },
    })
    await flushPromises()
    expect(wrapper.find("canvas").attributes("aria-label")).toContain(
      "https://from-item.test",
    )
  })

  it("renders an empty aria-label when value is null", async () => {
    const wrapper = mount(QrCodeDisplay, { props: { value: null } })
    await flushPromises()
    expect(wrapper.find("canvas").attributes("aria-label")).toBe("QR code: ")
  })

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

  it("applies classList (array) to the root", () => {
    const wrapper = mount(QrCodeDisplay, {
      props: { value: "x", classList: ["a", "b"] },
    })
    expect(wrapper.attributes("class")).toContain("a")
    expect(wrapper.attributes("class")).toContain("b")
  })
})
