text: import { shallowMount, mount } from "@vue/test-utils"
  import Drop from "./OcDrop.vue"
  
  const dom = ({ position = "auto", mode = "click" } = {}) => {
    document.body.innerHTML = ""
    const wrapper = mount(
      {
        template:
          '<div><p id="trigger">trigger</p><oc-drop :position="position" :mode="mode" toggle="#trigger">show</oc-drop></div>',
        components: { "oc-drop": Drop },
      },
      {
        attachTo: document.body,
        data: () => ({ position, mode }),
      }
    )
    const drop = wrapper.findComponent({ name: "oc-drop" })
    const tippy = drop.vm.$data.tippy
  
    return { wrapper, drop, tippy }
  }
  
  describe("OcDrop", () => {
    it("handles dropId prop", () => {
      for (let i = 0; i < 5; i++) {
        const wrapper = shallowMount(Drop)
        expect(wrapper.attributes().id).toBe(`oc-drop-${i + 1}`)
      }
  
      for (let i = 0; i < 5; i++) {
        const id = `custom-drop-id-${i}`
        const wrapper = shallowMount(Drop, {
          propsData: {
            dropId: id,
          },
        })
        expect(wrapper.attributes().id).toBe(id)
      }
    })
  
    it("handles position prop", () => {
      ;[
        "top",
        "right",
        "bottom",
        "left",
        "auto",
        "top-start",
        "top-end",
        "right-start",
        "right-end",
        "bottom-start",
        "bottom-end",
        "left-start",
        "left-end",
        "auto-start",
        "auto-end",
      ].forEach(pos => {
        expect(Drop.props.position.validator(pos)).toBeTruthy()
      })
  
      expect(Drop.props.position.validator("unknown")).toBeFalsy()
    })
  
    it("handles mode prop", () => {
      ;["click", "hover"].forEach(pos => {
        expect(Drop.props.mode.validator(pos)).toBeTruthy()
      })
  
      expect(Drop.props.mode.validator("unknown")).toBeFalsy()
    })
  
    it("inits tippy", () => {
      const { wrapper, drop, tippy } = dom()
  
      expect(tippy).toBeTruthy()
      expect(tippy.reference).toBe(wrapper.find("#trigger").element)
      expect(tippy.props.content).toBe(drop.vm.$refs.drop)
    })
  
    it("updates tippy", async () => {
      const { wrapper, tippy } = dom()
  
      await wrapper.setData({
        position: "left",
        mode: "hover",
      })
  
      expect(tippy.props.placement).toBe("left")
      expect(tippy.props.trigger).toBe("mouseenter focus")
    })
  
    it("renders tippy", async () => {
      const { wrapper } = dom()
      const trigger = wrapper.find("#trigger")
      const wait = async () => {
        await wrapper.vm.$nextTick()
        return new Promise(resolve => setTimeout(resolve, 100))
      }
  
      await trigger.trigger("click") // show
      await wait()
      expect(wrapper.findComponent(Drop).exists()).toBeTruthy()
      expect(trigger.attributes()["aria-expanded"]).toBe("true")
      expect(wrapper.element).toMatchSnapshot()
  
      await trigger.trigger("click") // hide
      await wait()
      expect(trigger.attributes()["aria-expanded"]).toBe("false")
      expect(wrapper.element).toMatchSnapshot()
  
      await wrapper.setData({
        mode: "hover",
      })
  
      await trigger.trigger("mouseenter") // show
      await wait()
      expect(trigger.attributes()["aria-expanded"]).toBe("true")
      expect(wrapper.element).toMatchSnapshot()
    })
  })
  