shadcn-rails 0.2.0 → 0.2.1

data/__tests__/controllers/dialog_controller.test.js

@@ -1,878 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-import DialogController from '../../app/assets/javascripts/shadcn/controllers/dialog_controller.js'
-import {
-  setupController,
-  cleanupController,
-  click,
-  wait,
-  nextFrame,
-  keydown,
-  waitForPortal,
-  getFocusableElements,
-  waitForEvent
-} from '../helpers/stimulus-test-helper.js'
-
-describe('DialogController', () => {
-  let application
-  let element
-  let controller
-
-  const html = `
-    <div data-controller="shadcn--dialog" data-shadcn--dialog-open-value="false" data-shadcn--dialog-modal-value="true">
-      <button data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#toggle">Open Dialog</button>
-      <template data-shadcn--dialog-target="template">
-        <div data-shadcn--dialog-target="overlay" class="fixed inset-0 bg-black/50" hidden></div>
-        <div data-shadcn--dialog-target="content" role="dialog" aria-modal="true" hidden>
-          <h2>Dialog Title</h2>
-          <p>Dialog content goes here.</p>
-          <button data-action="click->shadcn--dialog#close">Close</button>
-          <input type="text" placeholder="First input">
-          <input type="text" placeholder="Second input">
-          <button>Submit</button>
-        </div>
-      </template>
-    </div>
-  `
-
-  beforeEach(async () => {
-    // Reset body overflow before each test
-    document.body.style.overflow = ''
-
-    const setup = await setupController(DialogController, html, 'shadcn--dialog')
-    application = setup.application
-    element = setup.element
-    controller = setup.controller
-  })
-
-  afterEach(() => {
-    cleanupController(application)
-    // Clean up any remaining portals
-    document.querySelectorAll('.shadcn-dialog-portal').forEach(portal => portal.remove())
-    // Reset body overflow
-    document.body.style.overflow = ''
-  })
-
-  describe('Value Initialization', () => {
-    test('initializes with default open value as false', () => {
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('initializes with default modal value as true', () => {
-      expect(controller.modalValue).toBe(true)
-    })
-
-    test('respects open value during initialization', async () => {
-      const openHtml = html.replace('data-shadcn--dialog-open-value="false"', 'data-shadcn--dialog-open-value="true"')
-      cleanupController(application)
-
-      // When initialized with open=true, the connect() method calls open()
-      // However, there's a check at the start of open() that returns if openValue is already true
-      // This means the dialog won't actually open during initialization with this implementation
-      // The test verifies the value is set correctly, even if the dialog doesn't render
-      const setup = await setupController(DialogController, openHtml, 'shadcn--dialog')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-
-      expect(controller.openValue).toBe(true)
-
-      // Due to the guard in open(), initialization with open=true doesn't create the portal
-      // To actually open it, we need to call toggle() or close then open
-      controller.toggle() // This closes it
-      expect(controller.openValue).toBe(false)
-
-      controller.toggle() // This opens it
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-    })
-
-    test('can be initialized with modal value as false', async () => {
-      const nonModalHtml = html.replace('data-shadcn--dialog-modal-value="true"', 'data-shadcn--dialog-modal-value="false"')
-      cleanupController(application)
-
-      const setup = await setupController(DialogController, nonModalHtml, 'shadcn--dialog')
-      application = setup.application
-      controller = setup.controller
-
-      expect(controller.modalValue).toBe(false)
-    })
-  })
-
-  describe('Portal Rendering', () => {
-    test('creates portal in body when dialog opens', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-      expect(portal.parentElement).toBe(document.body)
-    })
-
-    test('portal contains overlay element', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const overlay = portal.querySelector('[data-shadcn--dialog-target="overlay"]')
-      expect(overlay).toBeTruthy()
-      expect(overlay.classList.contains('fixed')).toBe(true)
-    })
-
-    test('portal contains content element', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-      expect(content).toBeTruthy()
-      expect(content.getAttribute('role')).toBe('dialog')
-      expect(content.getAttribute('aria-modal')).toBe('true')
-    })
-
-    test('removes hidden attribute from overlay when opened', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const overlay = portal.querySelector('[data-shadcn--dialog-target="overlay"]')
-      expect(overlay.hasAttribute('hidden')).toBe(false)
-    })
-
-    test('removes hidden attribute from content when opened', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-      expect(content.hasAttribute('hidden')).toBe(false)
-    })
-
-    test('sets data-state="open" on overlay', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const overlay = portal.querySelector('[data-shadcn--dialog-target="overlay"]')
-      expect(overlay.dataset.state).toBe('open')
-    })
-
-    test('sets data-state="open" on content', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-      expect(content.dataset.state).toBe('open')
-    })
-
-    test('removes portal from DOM when dialog closes', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      let portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-
-      controller.close()
-      await wait(250) // Wait for animation timeout (200ms + buffer)
-
-      portal = document.querySelector('.shadcn-dialog-portal')
-      expect(portal).toBeNull()
-    })
-
-    test('sets data-state="closed" when closing', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const overlay = portal.querySelector('[data-shadcn--dialog-target="overlay"]')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-
-      controller.close()
-
-      expect(overlay.dataset.state).toBe('closed')
-      expect(content.dataset.state).toBe('closed')
-    })
-
-    test('only creates portal once on multiple opens', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-
-      click(trigger)
-      await nextFrame()
-      let portals = document.querySelectorAll('.shadcn-dialog-portal')
-      expect(portals.length).toBe(1)
-
-      controller.close()
-      await wait(250)
-
-      click(trigger)
-      await nextFrame()
-      portals = document.querySelectorAll('.shadcn-dialog-portal')
-      expect(portals.length).toBe(1)
-    })
-  })
-
-  describe('Open/Close/Toggle', () => {
-    test('opens dialog when toggle is called on closed dialog', async () => {
-      expect(controller.openValue).toBe(false)
-
-      controller.toggle()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-    })
-
-    test('closes dialog when toggle is called on open dialog', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      controller.toggle()
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('open method sets openValue to true', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-    })
-
-    test('close method sets openValue to false', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      controller.close()
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('trigger button click toggles dialog', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-
-      click(trigger)
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      click(trigger)
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('does not open again if already open', async () => {
-      controller.open()
-      await nextFrame()
-      const firstPortal = controller.portal
-
-      controller.open()
-      await nextFrame()
-
-      expect(controller.portal).toBe(firstPortal)
-    })
-
-    test('does not close again if already closed', () => {
-      expect(controller.openValue).toBe(false)
-      controller.close()
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe('Focus Management', () => {
-    test('focuses first focusable element when dialog opens', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const focusableElements = getFocusableElements(portal)
-
-      expect(document.activeElement).toBe(focusableElements[0])
-    })
-
-    test('stores previous active element before opening', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      trigger.focus()
-      expect(document.activeElement).toBe(trigger)
-
-      click(trigger)
-      await nextFrame()
-
-      expect(controller.previousActiveElement).toBe(trigger)
-    })
-
-    test('returns focus to previous element when dialog closes', async () => {
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      trigger.focus()
-
-      click(trigger)
-      await nextFrame()
-
-      controller.close()
-      await nextFrame()
-
-      expect(document.activeElement).toBe(trigger)
-    })
-
-    test('focuses content element if no focusable elements exist', async () => {
-      const noFocusHtml = `
-        <div data-controller="shadcn--dialog">
-          <button data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#toggle">Open</button>
-          <template data-shadcn--dialog-target="template">
-            <div data-shadcn--dialog-target="overlay" class="fixed inset-0 bg-black/50"></div>
-            <div data-shadcn--dialog-target="content" role="dialog" aria-modal="true" tabindex="-1">
-              <p>No focusable elements</p>
-            </div>
-          </template>
-        </div>
-      `
-
-      cleanupController(application)
-      const setup = await setupController(DialogController, noFocusHtml, 'shadcn--dialog')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-
-      const trigger = element.querySelector('[data-shadcn--dialog-target="trigger"]')
-      click(trigger)
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-
-      // Content should be focused
-      expect(document.activeElement).toBe(content)
-    })
-  })
-
-  describe('Focus Trap', () => {
-    test('traps Tab key to cycle through focusable elements', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const focusableElements = Array.from(getFocusableElements(portal))
-
-      // First element should be focused initially
-      expect(document.activeElement).toBe(focusableElements[0])
-
-      // Tab to second element
-      keydown(document, 'Tab')
-      focusableElements[1].focus()
-      expect(document.activeElement).toBe(focusableElements[1])
-
-      // Tab to third element
-      keydown(document, 'Tab')
-      focusableElements[2].focus()
-      expect(document.activeElement).toBe(focusableElements[2])
-    })
-
-    test('cycles focus to first element when Tab on last element', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const focusableElements = Array.from(getFocusableElements(portal))
-      const lastElement = focusableElements[focusableElements.length - 1]
-      const firstElement = focusableElements[0]
-
-      // Focus last element
-      lastElement.focus()
-      expect(document.activeElement).toBe(lastElement)
-
-      // Tab should cycle to first
-      const event = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-        cancelable: true
-      })
-      document.dispatchEvent(event)
-
-      if (event.defaultPrevented) {
-        firstElement.focus()
-      }
-
-      expect(document.activeElement).toBe(firstElement)
-    })
-
-    test('cycles focus to last element when Shift+Tab on first element', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const focusableElements = Array.from(getFocusableElements(portal))
-      const firstElement = focusableElements[0]
-      const lastElement = focusableElements[focusableElements.length - 1]
-
-      // First element should be focused initially
-      expect(document.activeElement).toBe(firstElement)
-
-      // Shift+Tab should cycle to last
-      const event = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        shiftKey: true,
-        bubbles: true,
-        cancelable: true
-      })
-      document.dispatchEvent(event)
-
-      if (event.defaultPrevented) {
-        lastElement.focus()
-      }
-
-      expect(document.activeElement).toBe(lastElement)
-    })
-
-    test('does not trap focus when modal is false', async () => {
-      const nonModalHtml = html.replace('data-shadcn--dialog-modal-value="true"', 'data-shadcn--dialog-modal-value="false"')
-      cleanupController(application)
-
-      const setup = await setupController(DialogController, nonModalHtml, 'shadcn--dialog')
-      application = setup.application
-      controller = setup.controller
-
-      controller.open()
-      await nextFrame()
-
-      // Tab event should not be trapped
-      const event = new KeyboardEvent('keydown', {
-        key: 'Tab',
-        bubbles: true,
-        cancelable: true
-      })
-      document.dispatchEvent(event)
-
-      expect(event.defaultPrevented).toBe(false)
-    })
-  })
-
-  describe('Keyboard Navigation', () => {
-    test('closes dialog when Escape key is pressed', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      keydown(document, 'Escape')
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('does not close when other keys are pressed', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      keydown(document, 'Enter')
-      expect(controller.openValue).toBe(true)
-
-      keydown(document, 'ArrowDown')
-      expect(controller.openValue).toBe(true)
-
-      keydown(document, 'Space')
-      expect(controller.openValue).toBe(true)
-    })
-
-    test('only responds to Escape when dialog is open', () => {
-      expect(controller.openValue).toBe(false)
-
-      keydown(document, 'Escape')
-
-      // Should not throw error or cause issues
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe('Overlay Click', () => {
-    test('closes dialog when overlay is clicked', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const overlay = portal.querySelector('[data-shadcn--dialog-target="overlay"]')
-
-      expect(controller.openValue).toBe(true)
-      click(overlay)
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('does not close when content is clicked', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-
-      expect(controller.openValue).toBe(true)
-      click(content)
-      expect(controller.openValue).toBe(true)
-    })
-  })
-
-  describe('Body Scroll Lock', () => {
-    test('sets body overflow to hidden when modal dialog opens', async () => {
-      expect(document.body.style.overflow).toBe('')
-
-      controller.open()
-      await nextFrame()
-
-      expect(document.body.style.overflow).toBe('hidden')
-    })
-
-    test('restores body overflow when modal dialog closes', async () => {
-      controller.open()
-      await nextFrame()
-      expect(document.body.style.overflow).toBe('hidden')
-
-      controller.close()
-      expect(document.body.style.overflow).toBe('')
-    })
-
-    test('does not set body overflow when modal is false', async () => {
-      const nonModalHtml = html.replace('data-shadcn--dialog-modal-value="true"', 'data-shadcn--dialog-modal-value="false"')
-      cleanupController(application)
-
-      const setup = await setupController(DialogController, nonModalHtml, 'shadcn--dialog')
-      application = setup.application
-      controller = setup.controller
-
-      controller.open()
-      await nextFrame()
-
-      expect(document.body.style.overflow).toBe('')
-    })
-
-    test('restores body overflow even if closed early', async () => {
-      controller.open()
-      await nextFrame()
-      expect(document.body.style.overflow).toBe('hidden')
-
-      // Close immediately without waiting
-      controller.close()
-      expect(document.body.style.overflow).toBe('')
-    })
-  })
-
-  describe('ARIA Attributes', () => {
-    test('content has role="dialog"', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-
-      expect(content.getAttribute('role')).toBe('dialog')
-    })
-
-    test('content has aria-modal="true"', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const content = portal.querySelector('[data-shadcn--dialog-target="content"]')
-
-      expect(content.getAttribute('aria-modal')).toBe('true')
-    })
-  })
-
-  describe('Event Dispatching', () => {
-    test('dispatches opened event when dialog opens', async () => {
-      const eventPromise = waitForEvent(element, 'shadcn--dialog:opened')
-
-      controller.open()
-      await nextFrame()
-
-      const event = await eventPromise
-      expect(event).toBeTruthy()
-      expect(event.type).toBe('shadcn--dialog:opened')
-    })
-
-    test('dispatches closed event when dialog closes', async () => {
-      controller.open()
-      await nextFrame()
-
-      const eventPromise = waitForEvent(element, 'shadcn--dialog:closed')
-      controller.close()
-
-      const event = await eventPromise
-      expect(event).toBeTruthy()
-      expect(event.type).toBe('shadcn--dialog:closed')
-    })
-
-    test('does not dispatch opened event if already open', async () => {
-      controller.open()
-      await nextFrame()
-
-      let eventCount = 0
-      element.addEventListener('shadcn--dialog:opened', () => eventCount++)
-
-      controller.open()
-      await nextFrame()
-
-      expect(eventCount).toBe(0)
-    })
-
-    test('does not dispatch closed event if already closed', () => {
-      let eventCount = 0
-      element.addEventListener('shadcn--dialog:closed', () => eventCount++)
-
-      controller.close()
-
-      expect(eventCount).toBe(0)
-    })
-  })
-
-  describe('Close Actions', () => {
-    test('closes dialog when close button is clicked', async () => {
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const closeButton = portal.querySelector('[data-action*="shadcn--dialog#close"]')
-
-      expect(controller.openValue).toBe(true)
-      click(closeButton)
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('wires up close actions on portal elements', async () => {
-      const closeHtml = `
-        <div data-controller="shadcn--dialog">
-          <button data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#toggle">Open</button>
-          <template data-shadcn--dialog-target="template">
-            <div data-shadcn--dialog-target="overlay"></div>
-            <div data-shadcn--dialog-target="content" role="dialog">
-              <button data-action="click->shadcn--dialog#close">Close 1</button>
-              <button data-action="click->shadcn--dialog#close">Close 2</button>
-            </div>
-          </template>
-        </div>
-      `
-
-      cleanupController(application)
-      const setup = await setupController(DialogController, closeHtml, 'shadcn--dialog')
-      application = setup.application
-      controller = setup.controller
-
-      controller.open()
-      await nextFrame()
-
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      const closeButtons = portal.querySelectorAll('[data-action*="shadcn--dialog#close"]')
-
-      expect(closeButtons.length).toBe(2)
-
-      click(closeButtons[1])
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe('Cleanup and Disconnect', () => {
-    test('removes portal when controller disconnects', async () => {
-      controller.open()
-      await nextFrame()
-
-      let portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-
-      controller.disconnect()
-
-      portal = document.querySelector('.shadcn-dialog-portal')
-      expect(portal).toBeNull()
-    })
-
-    test('restores body overflow when controller disconnects', async () => {
-      controller.open()
-      await nextFrame()
-      expect(document.body.style.overflow).toBe('hidden')
-
-      controller.disconnect()
-      expect(document.body.style.overflow).toBe('')
-    })
-
-    test('removes event listeners when controller disconnects', async () => {
-      controller.open()
-      await nextFrame()
-
-      controller.disconnect()
-
-      // Try to trigger events - should not cause errors
-      keydown(document, 'Escape')
-      keydown(document, 'Tab')
-
-      // Should not throw errors
-      expect(true).toBe(true)
-    })
-
-    test('closes dialog and cleans up when disconnecting', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      controller.disconnect()
-
-      expect(document.body.style.overflow).toBe('')
-      const portal = document.querySelector('.shadcn-dialog-portal')
-      expect(portal).toBeNull()
-    })
-  })
-
-  describe('openValueChanged Callback', () => {
-    test('triggers when open() is called', async () => {
-      expect(controller.openValue).toBe(false)
-
-      // open() sets openValue to true, which triggers openValueChanged
-      controller.open()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-    })
-
-    test('triggers when close() is called', async () => {
-      controller.open()
-      await nextFrame()
-      expect(controller.openValue).toBe(true)
-
-      // close() sets openValue to false, which triggers openValueChanged
-      controller.close()
-      expect(controller.openValue).toBe(false)
-
-      // Body overflow should be restored
-      expect(document.body.style.overflow).toBe('')
-    })
-
-    test('value can be changed programmatically from closed to open', async () => {
-      expect(controller.openValue).toBe(false)
-
-      // The openValueChanged callback will call open() when value changes to true
-      // But open() checks if already open and returns early
-      // So we need to use the public API: toggle() or open()
-      controller.open()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-      const portal = await waitForPortal('.shadcn-dialog-portal')
-      expect(portal).toBeTruthy()
-    })
-  })
-
-  describe('Edge Cases', () => {
-    test('handles rapid open/close calls', async () => {
-      controller.open()
-      controller.close()
-      controller.open()
-      controller.close()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test('handles missing template target gracefully', async () => {
-      const noTemplateHtml = `
-        <div data-controller="shadcn--dialog">
-          <button data-action="click->shadcn--dialog#toggle">Open</button>
-        </div>
-      `
-
-      cleanupController(application)
-      const setup = await setupController(DialogController, noTemplateHtml, 'shadcn--dialog')
-      application = setup.application
-      controller = setup.controller
-
-      // Should not throw error
-      controller.open()
-      await nextFrame()
-
-      const portal = document.querySelector('.shadcn-dialog-portal')
-      expect(portal).toBeNull()
-    })
-
-    test('handles missing overlay target', async () => {
-      const noOverlayHtml = `
-        <div data-controller="shadcn--dialog">
-          <button data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#toggle">Open</button>
-          <template data-shadcn--dialog-target="template">
-            <div data-shadcn--dialog-target="content" role="dialog">
-              <p>Content</p>
-            </div>
-          </template>
-        </div>
-      `
-
-      cleanupController(application)
-      const setup = await setupController(DialogController, noOverlayHtml, 'shadcn--dialog')
-      application = setup.application
-      controller = setup.controller
-
-      controller.open()
-      await nextFrame()
-
-      // Should not throw error
-      expect(controller.openValue).toBe(true)
-    })
-
-    test('handles multiple dialogs on same page', async () => {
-      const multiDialogHtml = `
-        <div>
-          <div data-controller="shadcn--dialog">
-            <button data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#toggle">Open 1</button>
-            <template data-shadcn--dialog-target="template">
-              <div data-shadcn--dialog-target="overlay" class="overlay-1"></div>
-              <div data-shadcn--dialog-target="content" role="dialog" class="content-1">
-                <button data-action="click->shadcn--dialog#close">Close 1</button>
-              </div>
-            </template>
-          </div>
-          <div data-controller="shadcn--dialog">
-            <button data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#toggle">Open 2</button>
-            <template data-shadcn--dialog-target="template">
-              <div data-shadcn--dialog-target="overlay" class="overlay-2"></div>
-              <div data-shadcn--dialog-target="content" role="dialog" class="content-2">
-                <button data-action="click->shadcn--dialog#close">Close 2</button>
-              </div>
-            </template>
-          </div>
-        </div>
-      `
-
-      cleanupController(application)
-      document.body.innerHTML = multiDialogHtml
-
-      const app = Application.start()
-      app.register('shadcn--dialog', DialogController)
-
-      await nextFrame()
-
-      const dialogs = document.querySelectorAll('[data-controller="shadcn--dialog"]')
-      const trigger1 = dialogs[0].querySelector('[data-shadcn--dialog-target="trigger"]')
-      const trigger2 = dialogs[1].querySelector('[data-shadcn--dialog-target="trigger"]')
-
-      click(trigger1)
-      await nextFrame()
-
-      let portals = document.querySelectorAll('.shadcn-dialog-portal')
-      expect(portals.length).toBe(1)
-      expect(portals[0].querySelector('.content-1')).toBeTruthy()
-
-      click(trigger2)
-      await nextFrame()
-
-      portals = document.querySelectorAll('.shadcn-dialog-portal')
-      expect(portals.length).toBe(2)
-      expect(portals[1].querySelector('.content-2')).toBeTruthy()
-
-      app.stop()
-      document.querySelectorAll('.shadcn-dialog-portal').forEach(p => p.remove())
-    })
-  })
-})