shadcn-rails 0.1.0 → 0.2.1

data/__tests__/controllers/popover_controller.test.js

@@ -1,1007 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-import PopoverController from "../../app/assets/javascripts/shadcn/controllers/popover_controller.js"
-import { setupController, cleanupController, click, wait, nextFrame, keydown, waitForEvent } from '../helpers/stimulus-test-helper.js'
-
-describe("PopoverController", () => {
-  let application
-  let element
-  let controller
-
-  const createPopoverHTML = (options = {}) => {
-    const {
-      open = false,
-      side = "bottom",
-      align = "center",
-      modal = false,
-      includeContent = true,
-      includeTrigger = true
-    } = options
-
-    const openAttr = open ? 'data-shadcn--popover-open-value="true"' : ''
-    const sideAttr = side !== "bottom" ? `data-shadcn--popover-side-value="${side}"` : ''
-    const alignAttr = align !== "center" ? `data-shadcn--popover-align-value="${align}"` : ''
-    const modalAttr = modal ? 'data-shadcn--popover-modal-value="true"' : ''
-
-    const triggerHTML = includeTrigger ? `
-      <button data-shadcn--popover-target="trigger" data-action="click->shadcn--popover#toggle">
-        Open
-      </button>
-    ` : ''
-
-    const contentHTML = includeContent ? `
-      <div data-shadcn--popover-target="content" hidden>
-        Popover content
-      </div>
-    ` : ''
-
-    return `
-      <div data-controller="shadcn--popover"
-           ${openAttr}
-           ${sideAttr}
-           ${alignAttr}
-           ${modalAttr}>
-        ${triggerHTML}
-        ${contentHTML}
-      </div>
-    `
-  }
-
-  beforeEach(async () => {
-    application = Application.start()
-    application.register("shadcn--popover", PopoverController)
-    document.body.innerHTML = createPopoverHTML()
-
-    await new Promise(resolve => requestAnimationFrame(resolve))
-
-    element = document.querySelector('[data-controller="shadcn--popover"]')
-    controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-  })
-
-  afterEach(() => {
-    if (application) {
-      application.stop()
-    }
-    document.body.innerHTML = ""
-    // Reset body styles
-    document.body.style.pointerEvents = ""
-  })
-
-  describe("initialization", () => {
-    test("connects successfully", () => {
-      expect(controller).not.toBeNull()
-      expect(controller).toBeDefined()
-    })
-
-    test("initializes with default values", () => {
-      expect(controller.openValue).toBe(false)
-      expect(controller.sideValue).toBe("bottom")
-      expect(controller.alignValue).toBe("center")
-      expect(controller.modalValue).toBe(false)
-    })
-
-    test("initializes with custom values", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({
-        open: true,
-        side: "top",
-        align: "start",
-        modal: true
-      })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      expect(controller.openValue).toBe(true)
-      expect(controller.sideValue).toBe("top")
-      expect(controller.alignValue).toBe("start")
-      expect(controller.modalValue).toBe(true)
-    })
-
-    test("respects open=true value on initialization", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ open: true })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      // The openValue should be set to true from the data attribute
-      expect(controller.openValue).toBe(true)
-
-      // Note: Due to the guard clause in show(), when openValue is already true,
-      // the connect() method calls show() but it returns early, so the content
-      // state is not set. This is actual controller behavior.
-      // To properly open on init, the value would need to be set after connect.
-    })
-
-    test("keeps popover hidden when initialized with open=false", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-      expect(content.hidden).toBe(true)
-      expect(content.dataset.state).toBeUndefined()
-    })
-
-    test("handles missing trigger target gracefully", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ includeTrigger: false })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      expect(controller).toBeDefined()
-      expect(controller.hasTriggerTarget).toBe(false)
-    })
-
-    test("handles missing content target gracefully", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ includeContent: false })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      expect(controller).toBeDefined()
-      expect(controller.hasContentTarget).toBe(false)
-    })
-  })
-
-  describe("toggle behavior", () => {
-    test("toggle opens closed popover", () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      expect(controller.openValue).toBe(false)
-
-      click(trigger)
-
-      expect(controller.openValue).toBe(true)
-      expect(content.hidden).toBe(false)
-      expect(content.dataset.state).toBe("open")
-    })
-
-    test("toggle closes open popover", async () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      // Open first
-      click(trigger)
-      expect(controller.openValue).toBe(true)
-
-      // Close
-      click(trigger)
-      expect(controller.openValue).toBe(false)
-      expect(content.dataset.state).toBe("closed")
-
-      // Content should be hidden after animation delay
-      await wait(200)
-      expect(content.hidden).toBe(true)
-    })
-
-    test("toggle prevents default event behavior", () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-
-      let defaultPrevented = false
-      const event = new MouseEvent('click', {
-        bubbles: true,
-        cancelable: true,
-        view: window
-      })
-
-      const originalPreventDefault = event.preventDefault
-      event.preventDefault = function() {
-        defaultPrevented = true
-        return originalPreventDefault.apply(this, arguments)
-      }
-
-      trigger.dispatchEvent(event)
-
-      expect(defaultPrevented).toBe(true)
-    })
-
-    test("multiple toggles work correctly", async () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-
-      click(trigger) // Open
-      expect(controller.openValue).toBe(true)
-
-      click(trigger) // Close
-      expect(controller.openValue).toBe(false)
-
-      await wait(200)
-
-      click(trigger) // Open again
-      expect(controller.openValue).toBe(true)
-
-      click(trigger) // Close again
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe("show method", () => {
-    test("show opens popover", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(controller.openValue).toBe(true)
-      expect(content.hidden).toBe(false)
-      expect(content.dataset.state).toBe("open")
-    })
-
-    test("show is idempotent when already open", () => {
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      controller.show()
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("show adds click outside listener", () => {
-      let clickListenerAdded = false
-      const originalAddEventListener = document.addEventListener
-
-      document.addEventListener = function(event) {
-        if (event === 'click') {
-          clickListenerAdded = true
-        }
-        return originalAddEventListener.apply(this, arguments)
-      }
-
-      controller.show()
-
-      expect(clickListenerAdded).toBe(true)
-
-      document.addEventListener = originalAddEventListener
-    })
-
-    test("show dispatches opened event", async () => {
-      const eventPromise = waitForEvent(element, "shadcn--popover:opened")
-
-      controller.show()
-
-      const event = await eventPromise
-      expect(event).toBeDefined()
-    })
-
-    test("show sets side data attribute on content", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.dataset.side).toBe("bottom")
-    })
-
-    test("show calls positionContent", () => {
-      let positionContentCalled = false
-      const originalPositionContent = controller.positionContent.bind(controller)
-
-      controller.positionContent = function() {
-        positionContentCalled = true
-        return originalPositionContent()
-      }
-
-      controller.show()
-
-      expect(positionContentCalled).toBe(true)
-    })
-  })
-
-  describe("hide method", () => {
-    test("hide closes open popover", async () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      controller.hide()
-
-      expect(controller.openValue).toBe(false)
-      expect(content.dataset.state).toBe("closed")
-
-      await wait(200)
-      expect(content.hidden).toBe(true)
-    })
-
-    test("hide is idempotent when already closed", () => {
-      expect(controller.openValue).toBe(false)
-
-      controller.hide()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("hide removes click outside listener", () => {
-      let clickListenerRemoved = false
-      const originalRemoveEventListener = document.removeEventListener
-
-      document.removeEventListener = function(event) {
-        if (event === 'click') {
-          clickListenerRemoved = true
-        }
-        return originalRemoveEventListener.apply(this, arguments)
-      }
-
-      controller.show()
-      controller.hide()
-
-      expect(clickListenerRemoved).toBe(true)
-
-      document.removeEventListener = originalRemoveEventListener
-    })
-
-    test("hide dispatches closed event", async () => {
-      controller.show()
-
-      const eventPromise = waitForEvent(element, "shadcn--popover:closed")
-
-      controller.hide()
-
-      const event = await eventPromise
-      expect(event).toBeDefined()
-    })
-
-    test("hide delays hiding content for animation", async () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-      controller.hide()
-
-      // Should be marked as closed but not hidden yet
-      expect(content.dataset.state).toBe("closed")
-      expect(content.hidden).toBe(false)
-
-      // After delay, should be hidden
-      await wait(200)
-      expect(content.hidden).toBe(true)
-    })
-
-    test("hide animation is cancelled if reopened", async () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-      controller.hide()
-
-      // Reopen before animation completes
-      await wait(50)
-      controller.show()
-
-      await wait(150)
-
-      // Should still be visible
-      expect(content.hidden).toBe(false)
-      expect(content.dataset.state).toBe("open")
-    })
-  })
-
-  describe("close method", () => {
-    test("close is an alias for hide", () => {
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      controller.close()
-
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe("click outside behavior", () => {
-    test("clicking outside closes popover", async () => {
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      // Click outside
-      await nextFrame()
-      click(document.body)
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("clicking inside popover does not close it", async () => {
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      await nextFrame()
-      click(content)
-
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("clicking trigger does not trigger click outside", async () => {
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-
-      await nextFrame()
-      click(trigger)
-
-      // Should toggle to closed via toggle action, not click outside
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("click outside listener is not added when closed", () => {
-      let clickListenerAdded = false
-      const originalAddEventListener = document.addEventListener
-
-      document.addEventListener = function(event) {
-        if (event === 'click') {
-          clickListenerAdded = true
-        }
-        return originalAddEventListener.apply(this, arguments)
-      }
-
-      // Don't call show
-      expect(clickListenerAdded).toBe(false)
-
-      document.addEventListener = originalAddEventListener
-    })
-  })
-
-  describe("modal behavior", () => {
-    test("modal=true disables pointer events on body when open", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ modal: true })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      controller.show()
-
-      expect(document.body.style.pointerEvents).toBe("none")
-    })
-
-    test("modal=true enables pointer events on content when open", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ modal: true })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.pointerEvents).toBe("auto")
-    })
-
-    test("modal=true restores pointer events on body when closed", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ modal: true })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      controller.show()
-      expect(document.body.style.pointerEvents).toBe("none")
-
-      controller.hide()
-      expect(document.body.style.pointerEvents).toBe("")
-    })
-
-    test("modal=false does not affect pointer events", () => {
-      controller.show()
-
-      expect(document.body.style.pointerEvents).toBe("")
-    })
-  })
-
-  describe("positioning - side", () => {
-    test("positions content on bottom by default", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.position).toBe("absolute")
-      expect(content.style.top).toBe("100%")
-      expect(content.style.bottom).toBe("auto")
-      expect(content.style.marginTop).toBe("8px")
-    })
-
-    test("positions content on top", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ side: "top" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.position).toBe("absolute")
-      expect(content.style.bottom).toBe("100%")
-      expect(content.style.top).toBe("auto")
-      expect(content.style.marginBottom).toBe("8px")
-    })
-
-    test("positions content on left", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ side: "left" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.position).toBe("absolute")
-      expect(content.style.right).toBe("100%")
-      expect(content.style.left).toBe("auto")
-      expect(content.style.marginRight).toBe("8px")
-    })
-
-    test("positions content on right", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ side: "right" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.position).toBe("absolute")
-      expect(content.style.left).toBe("100%")
-      expect(content.style.right).toBe("auto")
-      expect(content.style.marginLeft).toBe("8px")
-    })
-
-    test("sets data-side attribute on content", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ side: "right" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.dataset.side).toBe("right")
-    })
-  })
-
-  describe("positioning - align", () => {
-    test("aligns content to center by default on bottom side", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.left).toBe("50%")
-      expect(content.style.transform).toBe("translateX(-50%)")
-    })
-
-    test("aligns content to start", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ align: "start" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.left).toBe("0px")
-      expect(content.style.right).toBe("auto")
-    })
-
-    test("aligns content to end", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ align: "end" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      expect(content.style.right).toBe("0px")
-      expect(content.style.left).toBe("auto")
-    })
-
-    test("center alignment only applies transform on top/bottom sides", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ side: "left", align: "center" })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-
-      // Should not have transform for left/right sides
-      expect(content.style.transform).toBe("")
-    })
-  })
-
-  describe("positionContent edge cases", () => {
-    test("does not position if content target missing", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ includeContent: false })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      // Should not throw
-      expect(() => controller.positionContent()).not.toThrow()
-    })
-
-    test("does not position if trigger target missing", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ includeTrigger: false })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      // Should not throw
-      expect(() => controller.positionContent()).not.toThrow()
-    })
-  })
-
-  describe("event dispatching", () => {
-    test("dispatches opened event when opening", async () => {
-      const eventPromise = waitForEvent(element, "shadcn--popover:opened")
-
-      controller.show()
-
-      const event = await eventPromise
-      expect(event.type).toBe("shadcn--popover:opened")
-    })
-
-    test("dispatches closed event when closing", async () => {
-      controller.show()
-
-      const eventPromise = waitForEvent(element, "shadcn--popover:closed")
-
-      controller.hide()
-
-      const event = await eventPromise
-      expect(event.type).toBe("shadcn--popover:closed")
-    })
-
-    test("opened event bubbles", async () => {
-      let eventCaught = false
-
-      document.body.addEventListener("shadcn--popover:opened", () => {
-        eventCaught = true
-      })
-
-      controller.show()
-
-      await nextFrame()
-
-      expect(eventCaught).toBe(true)
-    })
-
-    test("closed event bubbles", async () => {
-      controller.show()
-
-      let eventCaught = false
-
-      document.body.addEventListener("shadcn--popover:closed", () => {
-        eventCaught = true
-      })
-
-      controller.hide()
-
-      await nextFrame()
-
-      expect(eventCaught).toBe(true)
-    })
-  })
-
-  describe("disconnect cleanup", () => {
-    test("closes popover on disconnect", () => {
-      controller.show()
-      expect(controller.openValue).toBe(true)
-
-      controller.disconnect()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("removes click outside listener on disconnect", () => {
-      let clickListenerRemoved = false
-      const originalRemoveEventListener = document.removeEventListener
-
-      document.removeEventListener = function(event) {
-        if (event === 'click') {
-          clickListenerRemoved = true
-        }
-        return originalRemoveEventListener.apply(this, arguments)
-      }
-
-      controller.show()
-      controller.disconnect()
-
-      expect(clickListenerRemoved).toBe(true)
-
-      document.removeEventListener = originalRemoveEventListener
-    })
-
-    test("restores body pointer events on disconnect when modal", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ modal: true })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      controller.show()
-      expect(document.body.style.pointerEvents).toBe("none")
-
-      controller.disconnect()
-
-      expect(document.body.style.pointerEvents).toBe("")
-    })
-  })
-
-  describe("ARIA attributes", () => {
-    test("trigger can have aria-haspopup", () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-
-      // Set manually as this would typically be in the HTML
-      trigger.setAttribute('aria-haspopup', 'dialog')
-
-      expect(trigger.getAttribute('aria-haspopup')).toBe('dialog')
-    })
-
-    test("trigger can have aria-expanded", () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-
-      // Set manually as this would typically be managed in the HTML/component
-      trigger.setAttribute('aria-expanded', 'false')
-      expect(trigger.getAttribute('aria-expanded')).toBe('false')
-
-      controller.show()
-      trigger.setAttribute('aria-expanded', 'true')
-      expect(trigger.getAttribute('aria-expanded')).toBe('true')
-    })
-
-    test("content can have role dialog", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      // Set manually as this would typically be in the HTML
-      content.setAttribute('role', 'dialog')
-
-      expect(content.getAttribute('role')).toBe('dialog')
-    })
-  })
-
-  describe("edge cases", () => {
-    test("rapid open/close transitions", async () => {
-      controller.show()
-      controller.hide()
-      controller.show()
-      controller.hide()
-      controller.show()
-
-      expect(controller.openValue).toBe(true)
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-      expect(content.hidden).toBe(false)
-    })
-
-    test("handles getBoundingClientRect on trigger", () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-
-      let getBoundingClientRectCalled = false
-
-      // Mock getBoundingClientRect
-      const originalGetBoundingClientRect = trigger.getBoundingClientRect.bind(trigger)
-      trigger.getBoundingClientRect = function() {
-        getBoundingClientRectCalled = true
-        return originalGetBoundingClientRect()
-      }
-
-      controller.show()
-
-      expect(getBoundingClientRectCalled).toBe(true)
-    })
-
-    test("handles null event in toggle", () => {
-      // Should not throw when called without event
-      expect(() => controller.toggle()).not.toThrow()
-    })
-
-    test("handles undefined event in toggle", () => {
-      expect(() => controller.toggle(undefined)).not.toThrow()
-    })
-  })
-
-  describe("integration scenarios", () => {
-    test("complete interaction flow: open, click outside, reopen", async () => {
-      const trigger = element.querySelector('[data-shadcn--popover-target="trigger"]')
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      // Open
-      click(trigger)
-      expect(controller.openValue).toBe(true)
-      expect(content.hidden).toBe(false)
-
-      // Click outside
-      await nextFrame()
-      click(document.body)
-      expect(controller.openValue).toBe(false)
-
-      await wait(200)
-      expect(content.hidden).toBe(true)
-
-      // Reopen
-      click(trigger)
-      expect(controller.openValue).toBe(true)
-      expect(content.hidden).toBe(false)
-    })
-
-    test("modal popover prevents background interaction", async () => {
-      application.stop()
-      document.body.innerHTML = `
-        <div>
-          <button id="background-button">Background</button>
-          ${createPopoverHTML({ modal: true })}
-        </div>
-      `
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-      controller = application.getControllerForElementAndIdentifier(element, "shadcn--popover")
-
-      controller.show()
-
-      // Body should block pointer events
-      expect(document.body.style.pointerEvents).toBe("none")
-
-      // Content should allow pointer events
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-      expect(content.style.pointerEvents).toBe("auto")
-    })
-
-    test("changing side value while open repositions content", async () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-      expect(content.style.top).toBe("100%")
-      expect(content.dataset.side).toBe("bottom")
-
-      // Change side value
-      controller.sideValue = "top"
-      // Need to update data attribute manually since positionContent doesn't do it
-      content.dataset.side = controller.sideValue
-      controller.positionContent()
-
-      expect(content.style.bottom).toBe("100%")
-      expect(content.dataset.side).toBe("top")
-    })
-
-    test("changing align value while open repositions content", () => {
-      const content = element.querySelector('[data-shadcn--popover-target="content"]')
-
-      controller.show()
-      expect(content.style.left).toBe("50%")
-      expect(content.style.transform).toBe("translateX(-50%)")
-
-      // Change align value
-      controller.alignValue = "start"
-      controller.positionContent()
-
-      expect(content.style.left).toBe("0px")
-      expect(content.style.right).toBe("auto")
-    })
-  })
-
-  describe("snapshots", () => {
-    test("renders closed popover correctly", () => {
-      expect(element.innerHTML).toMatchSnapshot()
-    })
-
-    test("renders open popover correctly", () => {
-      controller.show()
-      expect(element.innerHTML).toMatchSnapshot()
-    })
-
-    test("renders modal popover correctly", async () => {
-      application.stop()
-      document.body.innerHTML = createPopoverHTML({ modal: true, open: true })
-
-      application = Application.start()
-      application.register("shadcn--popover", PopoverController)
-
-      await new Promise(resolve => requestAnimationFrame(resolve))
-
-      element = document.querySelector('[data-controller="shadcn--popover"]')
-
-      expect(element.innerHTML).toMatchSnapshot()
-    })
-  })
-})