shadcn-rails 0.1.0 → 0.2.1

data/__tests__/controllers/collapsible_controller.test.js

@@ -1,407 +0,0 @@
-import { Application } from "@hotwired/stimulus"
-import CollapsibleController from "../../app/assets/javascripts/shadcn/controllers/collapsible_controller.js"
-import { setupController, cleanupController, click, nextFrame, wait } from '../helpers/stimulus-test-helper.js'
-
-describe("CollapsibleController", () => {
-  let application
-  let element
-  let controller
-
-  afterEach(() => {
-    cleanupController(application)
-  })
-
-  describe("basic rendering and initialization", () => {
-    const basicHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false"
-           data-shadcn--collapsible-disabled-value="false">
-        <button data-shadcn--collapsible-target="trigger"
-                data-action="click->shadcn--collapsible#toggle">
-          Toggle
-        </button>
-        <div data-shadcn--collapsible-target="content" hidden>
-          <p>Collapsible content</p>
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, basicHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("initializes with closed state", () => {
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("initializes with disabled false", () => {
-      expect(controller.disabledValue).toBe(false)
-    })
-
-    test("sets data-state closed on element", () => {
-      expect(element.dataset.state).toBe("closed")
-    })
-
-    test("sets data-state closed on content", () => {
-      expect(controller.contentTarget.dataset.state).toBe("closed")
-    })
-
-    test("content is hidden initially", () => {
-      expect(controller.contentTarget.hidden).toBe(true)
-    })
-  })
-
-  describe("toggle functionality", () => {
-    const toggleHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false">
-        <button data-shadcn--collapsible-target="trigger"
-                data-action="click->shadcn--collapsible#toggle">
-          Toggle
-        </button>
-        <div data-shadcn--collapsible-target="content" hidden>
-          Content
-        </div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, toggleHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("toggles open state when closed", async () => {
-      controller.toggle()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("toggles closed state when open", async () => {
-      controller.openValue = true
-      controller.toggle()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("updates element data-state on toggle", async () => {
-      controller.toggle()
-      await nextFrame()
-
-      expect(element.dataset.state).toBe("open")
-    })
-
-    test("updates content data-state on toggle", async () => {
-      controller.toggle()
-      await nextFrame()
-
-      expect(controller.contentTarget.dataset.state).toBe("open")
-    })
-
-    test("shows content when toggled open", async () => {
-      controller.toggle()
-      await nextFrame()
-
-      expect(controller.contentTarget.hidden).toBe(false)
-    })
-
-    test("dispatches opened event when opening", async () => {
-      let eventFired = false
-      element.addEventListener("shadcn--collapsible:opened", () => {
-        eventFired = true
-      })
-
-      controller.toggle()
-      await nextFrame()
-
-      expect(eventFired).toBe(true)
-    })
-
-    test("dispatches closed event when closing", async () => {
-      controller.openValue = true
-      controller.updateState()
-
-      let eventFired = false
-      element.addEventListener("shadcn--collapsible:closed", () => {
-        eventFired = true
-      })
-
-      controller.toggle()
-      await nextFrame()
-
-      expect(eventFired).toBe(true)
-    })
-  })
-
-  describe("open and close methods", () => {
-    const methodsHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false">
-        <button data-shadcn--collapsible-target="trigger">Toggle</button>
-        <div data-shadcn--collapsible-target="content" hidden>Content</div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, methodsHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("open() sets openValue to true", async () => {
-      controller.open()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("open() updates state", async () => {
-      controller.open()
-      await nextFrame()
-
-      expect(element.dataset.state).toBe("open")
-    })
-
-    test("close() sets openValue to false", async () => {
-      controller.openValue = true
-      controller.close()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("close() updates state", async () => {
-      controller.openValue = true
-      controller.updateState()
-      controller.close()
-      await nextFrame()
-
-      expect(element.dataset.state).toBe("closed")
-    })
-  })
-
-  describe("disabled state", () => {
-    const disabledHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false"
-           data-shadcn--collapsible-disabled-value="true">
-        <button data-shadcn--collapsible-target="trigger"
-                data-action="click->shadcn--collapsible#toggle">Toggle</button>
-        <div data-shadcn--collapsible-target="content" hidden>Content</div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, disabledHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("toggle does not change state when disabled", async () => {
-      controller.toggle()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("open does not change state when disabled", async () => {
-      controller.open()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-
-    test("close still works when disabled", async () => {
-      // Force open state
-      controller.openValue = true
-      controller.disabledValue = true
-
-      controller.close()
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe("initial open state", () => {
-    const openHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="true">
-        <button data-shadcn--collapsible-target="trigger">Toggle</button>
-        <div data-shadcn--collapsible-target="content">Content</div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, openHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("initializes with open state", () => {
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("sets data-state open on element", () => {
-      expect(element.dataset.state).toBe("open")
-    })
-
-    test("content is visible initially", () => {
-      expect(controller.contentTarget.hidden).toBe(false)
-    })
-  })
-
-  describe("programmatic value change", () => {
-    const programmaticHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false">
-        <button data-shadcn--collapsible-target="trigger">Toggle</button>
-        <div data-shadcn--collapsible-target="content" hidden>Content</div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, programmaticHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("openValueChanged callback updates state", async () => {
-      controller.openValue = true
-      await nextFrame()
-
-      expect(element.dataset.state).toBe("open")
-    })
-
-    test("changing openValue shows content", async () => {
-      controller.openValue = true
-      await nextFrame()
-
-      expect(controller.contentTarget.hidden).toBe(false)
-    })
-  })
-
-  describe("click handler", () => {
-    const clickHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false">
-        <button data-shadcn--collapsible-target="trigger"
-                data-action="click->shadcn--collapsible#toggle">Toggle</button>
-        <div data-shadcn--collapsible-target="content" hidden>Content</div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, clickHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("toggles on trigger click", async () => {
-      click(controller.triggerTarget)
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("toggles back on second click", async () => {
-      click(controller.triggerTarget)
-      await nextFrame()
-      click(controller.triggerTarget)
-      await nextFrame()
-
-      expect(controller.openValue).toBe(false)
-    })
-  })
-
-  describe("without content target", () => {
-    const noContentHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false">
-        <button data-shadcn--collapsible-target="trigger"
-                data-action="click->shadcn--collapsible#toggle">Toggle</button>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, noContentHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("works without content target", async () => {
-      expect(() => {
-        controller.toggle()
-      }).not.toThrow()
-
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("updates element state without content", async () => {
-      controller.toggle()
-      await nextFrame()
-
-      expect(element.dataset.state).toBe("open")
-    })
-  })
-
-  describe("multiple toggles", () => {
-    const multipleHTML = `
-      <div data-controller="shadcn--collapsible"
-           data-shadcn--collapsible-open-value="false">
-        <button data-shadcn--collapsible-target="trigger"
-                data-action="click->shadcn--collapsible#toggle">Toggle</button>
-        <div data-shadcn--collapsible-target="content" hidden>Content</div>
-      </div>
-    `
-
-    beforeEach(async () => {
-      const setup = await setupController(CollapsibleController, multipleHTML, 'shadcn--collapsible')
-      application = setup.application
-      element = setup.element
-      controller = setup.controller
-    })
-
-    test("handles rapid toggles", async () => {
-      controller.toggle() // open
-      controller.toggle() // close
-      controller.toggle() // open
-      await nextFrame()
-
-      expect(controller.openValue).toBe(true)
-    })
-
-    test("dispatches events for each toggle", async () => {
-      let openedCount = 0
-      let closedCount = 0
-
-      element.addEventListener("shadcn--collapsible:opened", () => openedCount++)
-      element.addEventListener("shadcn--collapsible:closed", () => closedCount++)
-
-      // Note: The controller dispatches events from both toggle() and openValueChanged()
-      // so each toggle fires two events. This is the current behavior.
-      controller.toggle() // open
-      await nextFrame()
-      controller.toggle() // close
-      await nextFrame()
-      controller.toggle() // open
-      await nextFrame()
-
-      // Events fire twice per toggle (from toggle() and openValueChanged())
-      expect(openedCount).toBe(4) // 2 opens * 2 events each
-      expect(closedCount).toBe(2) // 1 close * 2 events
-    })
-  })
-})