shadcn-rails 0.1.0 → 0.2.1

data/__tests__/controllers/select_controller.test.js

@@ -1,674 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-import SelectController from "../../app/assets/javascripts/shadcn/controllers/select_controller.js"
-import { setupController, cleanupController, click, nextFrame, keydown } from '../helpers/stimulus-test-helper.js'
-
-describe("SelectController", () => {
-  let application
-  let element
-  let controller
-
-  afterEach(() => {
-    cleanupController(application)
-  })
-
-  describe("basic rendering and initialization", () => {
-    const basicHTML = `
-      <div data-controller="shadcn--select"
-           data-shadcn--select-value-value="">
-        <button data-shadcn--select-target="trigger"
-                role="combobox"
-                aria-expanded="false"
-                data-action="click->shadcn--select#toggle keydown->shadcn--select#handleKeydown">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content"
-             role="listbox"
-             hidden
-             data-state="closed">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               role="option"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Apple</div>
-          <div data-shadcn--select-target="item"
-               data-value="banana"
-               role="option"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Banana</div>
-          <div data-shadcn--select-target="item"
-               data-value="cherry"
-               role="option"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Cherry</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, basicHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("initializes with closed state", () => {
-      expect(controller.isOpen).toBe(false)
-    })
-
-    test("initializes with empty value", () => {
-      expect(controller.valueValue).toBe("")
-    })
-
-    test("content is hidden by default", () => {
-      expect(controller.contentTarget.hidden).toBe(true)
-      expect(controller.contentTarget.dataset.state).toBe("closed")
-    })
-
-    test("trigger has correct aria-expanded", () => {
-      expect(controller.triggerTarget.getAttribute("aria-expanded")).toBe("false")
-    })
-  })
-
-  describe("opening and closing", () => {
-    const basicHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger"
-                role="combobox"
-                aria-expanded="false"
-                data-action="click->shadcn--select#toggle keydown->shadcn--select#handleKeydown">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <div data-shadcn--select-target="content"
-             role="listbox"
-             hidden
-             data-state="closed">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Apple</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, basicHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("opens on toggle", () => {
-      controller.toggle()
-
-      expect(controller.isOpen).toBe(true)
-      expect(controller.contentTarget.hidden).toBe(false)
-      expect(controller.contentTarget.dataset.state).toBe("open")
-      expect(controller.triggerTarget.getAttribute("aria-expanded")).toBe("true")
-    })
-
-    test("closes when already open", () => {
-      controller.open()
-      controller.toggle()
-
-      expect(controller.isOpen).toBe(false)
-      expect(controller.triggerTarget.getAttribute("aria-expanded")).toBe("false")
-    })
-
-    test("dispatches opened event on open", () => {
-      let eventFired = false
-      element.addEventListener("shadcn--select:opened", () => {
-        eventFired = true
-      })
-
-      controller.open()
-      expect(eventFired).toBe(true)
-    })
-
-    test("dispatches closed event on close", () => {
-      let eventFired = false
-      element.addEventListener("shadcn--select:closed", () => {
-        eventFired = true
-      })
-
-      controller.open()
-      controller.close()
-      expect(eventFired).toBe(true)
-    })
-
-    test("opens with trigger click", async () => {
-      click(controller.triggerTarget)
-      await nextFrame()
-
-      expect(controller.isOpen).toBe(true)
-    })
-
-    test("does not re-open if already open", () => {
-      controller.open()
-      const dispatchSpy = jest.spyOn(controller, 'dispatch')
-
-      controller.open()
-
-      // Should not dispatch opened event again
-      expect(dispatchSpy).not.toHaveBeenCalledWith("opened")
-    })
-  })
-
-  describe("item selection", () => {
-    const selectionHTML = `
-      <div data-controller="shadcn--select"
-           data-shadcn--select-value-value="">
-        <button data-shadcn--select-target="trigger"
-                data-action="click->shadcn--select#toggle">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content"
-             hidden
-             data-state="closed">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Apple</div>
-          <div data-shadcn--select-target="item"
-               data-value="banana"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Banana</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, selectionHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("selects item when clicked", async () => {
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      click(appleItem)
-      await nextFrame()
-
-      expect(controller.valueValue).toBe("apple")
-    })
-
-    test("updates display text on selection", async () => {
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      click(appleItem)
-      await nextFrame()
-
-      expect(controller.displayTarget.textContent).toBe("Apple")
-    })
-
-    test("updates hidden input value on selection", async () => {
-      controller.open()
-      const bananaItem = controller.itemTargets[1]
-      click(bananaItem)
-      await nextFrame()
-
-      expect(controller.inputTarget.value).toBe("banana")
-    })
-
-    test("closes dropdown after selection", async () => {
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      click(appleItem)
-      await nextFrame()
-
-      expect(controller.isOpen).toBe(false)
-    })
-
-    test("dispatches change event on selection", async () => {
-      let eventDetail = null
-      element.addEventListener("shadcn--select:change", (e) => {
-        eventDetail = e.detail
-      })
-
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      click(appleItem)
-      await nextFrame()
-
-      expect(eventDetail).not.toBeNull()
-      expect(eventDetail.value).toBe("apple")
-    })
-
-    test("updates aria-selected on items", async () => {
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      const bananaItem = controller.itemTargets[1]
-      click(appleItem)
-      await nextFrame()
-
-      expect(appleItem.getAttribute("aria-selected")).toBe("true")
-      expect(bananaItem.getAttribute("aria-selected")).toBe("false")
-    })
-  })
-
-  describe("disabled items", () => {
-    const disabledHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               data-action="click->shadcn--select#select">Apple</div>
-          <div data-shadcn--select-target="item"
-               data-value="banana"
-               data-disabled
-               data-action="click->shadcn--select#select">Banana (Disabled)</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, disabledHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("does not select disabled item", async () => {
-      controller.open()
-      const disabledItem = controller.itemTargets[1]
-      click(disabledItem)
-      await nextFrame()
-
-      expect(controller.valueValue).toBe("")
-    })
-
-    test("enabledItems excludes disabled items", () => {
-      const enabled = controller.enabledItems
-      expect(enabled.length).toBe(1)
-      expect(enabled[0].dataset.value).toBe("apple")
-    })
-  })
-
-  describe("keyboard navigation", () => {
-    const keyboardHTML = `
-      <div data-controller="shadcn--select"
-           data-action="keydown.escape->shadcn--select#close">
-        <button data-shadcn--select-target="trigger"
-                data-action="click->shadcn--select#toggle keydown->shadcn--select#handleKeydown">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content"
-             hidden
-             data-state="closed">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Apple</div>
-          <div data-shadcn--select-target="item"
-               data-value="banana"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Banana</div>
-          <div data-shadcn--select-target="item"
-               data-value="cherry"
-               tabindex="-1"
-               data-action="click->shadcn--select#select">Cherry</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, keyboardHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("opens on Enter key when closed", () => {
-      controller.handleKeydown({ key: "Enter", preventDefault: jest.fn() })
-
-      expect(controller.isOpen).toBe(true)
-    })
-
-    test("opens on Space key when closed", () => {
-      controller.handleKeydown({ key: " ", preventDefault: jest.fn() })
-
-      expect(controller.isOpen).toBe(true)
-    })
-
-    test("opens on ArrowDown key when closed", () => {
-      controller.handleKeydown({ key: "ArrowDown", preventDefault: jest.fn() })
-
-      expect(controller.isOpen).toBe(true)
-    })
-
-    test("closes on Escape key when open", () => {
-      controller.open()
-      controller.handleKeydown({ key: "Escape", preventDefault: jest.fn() })
-
-      expect(controller.isOpen).toBe(false)
-    })
-
-    test("navigates down with ArrowDown", () => {
-      controller.open()
-      controller.focusedIndex = 0
-
-      controller.handleKeydown({ key: "ArrowDown", preventDefault: jest.fn() })
-
-      expect(controller.focusedIndex).toBe(1)
-    })
-
-    test("navigates up with ArrowUp", () => {
-      controller.open()
-      controller.focusedIndex = 1
-
-      controller.handleKeydown({ key: "ArrowUp", preventDefault: jest.fn() })
-
-      expect(controller.focusedIndex).toBe(0)
-    })
-
-    test("wraps to first item from last with ArrowDown", () => {
-      controller.open()
-      controller.focusedIndex = 2
-
-      controller.handleKeydown({ key: "ArrowDown", preventDefault: jest.fn() })
-
-      expect(controller.focusedIndex).toBe(0)
-    })
-
-    test("wraps to last item from first with ArrowUp", () => {
-      controller.open()
-      controller.focusedIndex = 0
-
-      controller.handleKeydown({ key: "ArrowUp", preventDefault: jest.fn() })
-
-      expect(controller.focusedIndex).toBe(2)
-    })
-
-    test("jumps to first item with Home", () => {
-      controller.open()
-      controller.focusedIndex = 2
-
-      controller.handleKeydown({ key: "Home", preventDefault: jest.fn() })
-
-      expect(controller.focusedIndex).toBe(0)
-    })
-
-    test("jumps to last item with End", () => {
-      controller.open()
-      controller.focusedIndex = 0
-
-      controller.handleKeydown({ key: "End", preventDefault: jest.fn() })
-
-      expect(controller.focusedIndex).toBe(2)
-    })
-
-    test("selects focused item on Enter", async () => {
-      controller.open()
-      controller.focusedIndex = 1
-
-      controller.handleKeydown({ key: "Enter", preventDefault: jest.fn() })
-      await nextFrame()
-
-      expect(controller.valueValue).toBe("banana")
-    })
-
-    test("selects focused item on Space", async () => {
-      controller.open()
-      controller.focusedIndex = 0
-
-      controller.handleKeydown({ key: " ", preventDefault: jest.fn() })
-      await nextFrame()
-
-      expect(controller.valueValue).toBe("apple")
-    })
-  })
-
-  describe("initial value", () => {
-    const initialValueHTML = `
-      <div data-controller="shadcn--select"
-           data-shadcn--select-value-value="banana">
-        <button data-shadcn--select-target="trigger">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               data-action="click->shadcn--select#select">Apple</div>
-          <div data-shadcn--select-target="item"
-               data-value="banana"
-               data-action="click->shadcn--select#select">Banana</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, initialValueHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("initializes with pre-set value", () => {
-      expect(controller.valueValue).toBe("banana")
-    })
-
-    test("sets display text from initial value", () => {
-      expect(controller.displayTarget.textContent).toBe("Banana")
-    })
-
-    test("marks correct item as selected on init", () => {
-      const bananaItem = controller.itemTargets[1]
-      expect(bananaItem.getAttribute("aria-selected")).toBe("true")
-    })
-
-    test("focuses current value item when opening", async () => {
-      const focusSpy = jest.spyOn(controller.itemTargets[1], 'focus')
-      controller.open()
-      await nextFrame()
-
-      expect(focusSpy).toHaveBeenCalled()
-    })
-  })
-
-  describe("click outside", () => {
-    const clickOutsideHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger"
-                data-action="click->shadcn--select#toggle">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <div data-shadcn--select-target="content" hidden>
-          <div data-shadcn--select-target="item" data-value="apple">Apple</div>
-        </div>
-      </div>
-      <div id="outside">Outside Element</div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, clickOutsideHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("closes when clicking outside", async () => {
-      controller.open()
-      await nextFrame()
-
-      const outsideElement = document.getElementById("outside")
-      click(outsideElement)
-      await nextFrame()
-
-      expect(controller.isOpen).toBe(false)
-    })
-
-    test("does not close when clicking inside", async () => {
-      controller.open()
-      await nextFrame()
-
-      click(controller.contentTarget)
-      await nextFrame()
-
-      expect(controller.isOpen).toBe(true)
-    })
-  })
-
-  describe("trigger width synchronization", () => {
-    const widthSyncHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger"
-                style="width: 200px;"
-                data-action="click->shadcn--select#toggle">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <div data-shadcn--select-target="content" hidden>
-          <div data-shadcn--select-target="item" data-value="apple">Apple</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, widthSyncHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("sets trigger width CSS variable on open", async () => {
-      controller.open()
-      await nextFrame()
-
-      const cssVar = controller.contentTarget.style.getPropertyValue('--radix-select-trigger-width')
-      expect(cssVar).toBeTruthy()
-    })
-  })
-
-  describe("check icon visibility", () => {
-    const checkIconHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content">
-          <div data-shadcn--select-target="item"
-               data-value="apple"
-               data-action="click->shadcn--select#select">
-            Apple
-            <span data-shadcn--select-target="checkIcon" style="opacity: 0;">✓</span>
-          </div>
-          <div data-shadcn--select-target="item"
-               data-value="banana"
-               data-action="click->shadcn--select#select">
-            Banana
-            <span data-shadcn--select-target="checkIcon" style="opacity: 0;">✓</span>
-          </div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, checkIconHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("shows check icon for selected item", async () => {
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      click(appleItem)
-      await nextFrame()
-
-      const checkIcon = appleItem.querySelector('[data-shadcn--select-target="checkIcon"]')
-      expect(checkIcon.style.opacity).toBe("1")
-    })
-
-    test("hides check icon for non-selected items", async () => {
-      controller.open()
-      const appleItem = controller.itemTargets[0]
-      click(appleItem)
-      await nextFrame()
-
-      const bananaItem = controller.itemTargets[1]
-      const checkIcon = bananaItem.querySelector('[data-shadcn--select-target="checkIcon"]')
-      expect(checkIcon.style.opacity).toBe("0")
-    })
-  })
-
-  describe("programmatic value change", () => {
-    const programmaticHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger">
-          <span data-shadcn--select-target="display">Select...</span>
-        </button>
-        <input type="hidden" data-shadcn--select-target="input" name="fruit">
-        <div data-shadcn--select-target="content">
-          <div data-shadcn--select-target="item" data-value="apple">Apple</div>
-          <div data-shadcn--select-target="item" data-value="banana">Banana</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, programmaticHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("selectByValue updates value without dispatch when specified", () => {
-      let eventFired = false
-      element.addEventListener("shadcn--select:change", () => {
-        eventFired = true
-      })
-
-      controller.selectByValue("apple", false)
-
-      expect(controller.valueValue).toBe("apple")
-      expect(eventFired).toBe(false)
-    })
-
-    test("selectByValue dispatches change when dispatch is true", () => {
-      let eventDetail = null
-      element.addEventListener("shadcn--select:change", (e) => {
-        eventDetail = e.detail
-      })
-
-      controller.selectByValue("banana", true)
-
-      expect(eventDetail).not.toBeNull()
-      expect(eventDetail.value).toBe("banana")
-    })
-  })
-
-  describe("disconnect cleanup", () => {
-    const disconnectHTML = `
-      <div data-controller="shadcn--select">
-        <button data-shadcn--select-target="trigger">Select...</button>
-        <div data-shadcn--select-target="content" hidden>
-          <div data-shadcn--select-target="item" data-value="apple">Apple</div>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(SelectController, disconnectHTML, 'shadcn--select')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("cleans up event listeners on disconnect", () => {
-      controller.open()
-
-      const closeSpy = jest.spyOn(controller, 'close')
-      controller.disconnect()
-
-      expect(closeSpy).toHaveBeenCalled()
-    })
-  })
-})