velvetkit 0.1.0.beta

data/registry/test/components/ui/select_test.rb

@@ -0,0 +1,181 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::SelectTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  TEAMS = [ [ "Design", 1 ], [ "Engineering", 2 ], [ "Marketing", 3 ] ].freeze
+
+  Member = Struct.new(:team_id) do
+    def to_model = self
+    def model_name = ActiveModel::Name.new(self.class, nil, "Member")
+    def persisted? = false
+  end
+
+  def form_builder_for(record = Member.new)
+    ActionView::Helpers::FormBuilder.new(:member, record, vc_test_controller.view_context, {})
+  end
+
+  def trigger = page.find("button[role='combobox']")
+  def listbox = page.find("[role='listbox']", visible: :all)
+  def native = page.find("select", visible: :all)
+
+  # --- the visible control (WAI-ARIA select-only combobox) ---------------
+
+  def test_trigger_is_a_collapsed_combobox_controlling_the_listbox
+    render_inline(UI::Select.new(name: "section", options: TEAMS))
+    assert_equal "button", trigger[:type]
+    assert_equal "listbox", trigger["aria-haspopup"]
+    assert_equal "false", trigger["aria-expanded"]
+    assert_equal listbox[:id], trigger["aria-controls"]
+    assert page.find("[data-ui--select-target='panel']", visible: :all)[:hidden], "the panel starts closed"
+  end
+
+  def test_each_option_is_an_aria_option_carrying_its_value
+    render_inline(UI::Select.new(name: "section", options: TEAMS))
+    options = page.all("[role='option']", visible: :all)
+    assert_equal [ "1", "2", "3" ], options.map { _1["data-value"] }
+    assert_equal [ "Design", "Engineering", "Marketing" ], options.map { _1.text(:all).strip }
+  end
+
+  def test_selected_option_is_marked_and_shown_on_the_trigger
+    render_inline(UI::Select.new(name: "section", options: TEAMS, selected: 2))
+    assert_equal "true", page.find("[role='option'][data-value='2']", visible: :all)["aria-selected"]
+    assert_equal "false", page.find("[role='option'][data-value='1']", visible: :all)["aria-selected"]
+    assert_includes trigger.text, "Engineering"
+  end
+
+  def test_prompt_shows_when_nothing_is_selected_and_clears_the_value
+    render_inline(UI::Select.new(name: "section", options: TEAMS, prompt: "Choose a team"))
+    assert_includes trigger.text, "Choose a team"
+    assert_selector "[role='option'][data-value='']", text: "Choose a team", visible: :all
+  end
+
+  def test_without_a_prompt_the_first_option_shows_as_a_native_select_would
+    render_inline(UI::Select.new(name: "section", options: TEAMS))
+    assert_includes trigger.text, "Design"
+  end
+
+  def test_plain_values_are_their_own_labels
+    render_inline(UI::Select.new(name: "role", options: %w[Admin Editor], selected: "Editor"))
+    assert_includes trigger.text, "Editor"
+    assert_selector "[role='option'][data-value='Admin']", visible: :all
+  end
+
+  # --- the value, carried by a hidden native select ------------------------
+
+  def test_a_hidden_native_select_carries_the_name_value_and_options
+    render_inline(UI::Select.new(name: "section", options: TEAMS, selected: 3))
+    assert_equal "section", native[:name]
+    assert_equal "-1", native[:tabindex]
+    assert_equal "true", native["aria-hidden"]
+    assert_includes native[:class], "sr-only"
+    assert_selector "select option[value='3'][selected]", visible: :all
+  end
+
+  def test_required_and_disabled_reach_the_native_select_and_the_trigger
+    render_inline(UI::Select.new(name: "section", options: TEAMS, required: true, disabled: true))
+    assert native[:required]
+    assert native[:disabled]
+    assert trigger[:disabled]
+  end
+
+  def test_extra_attributes_stay_on_the_native_select_so_change_listeners_keep_working
+    render_inline(UI::Select.new(name: "section", options: TEAMS, id: "section-picker", data: { action: "change->filters#apply" }))
+    assert_equal "section-picker", native[:id]
+    assert_equal "change->filters#apply", native["data-action"]
+  end
+
+  # --- label, states, sizes ---------------------------------------------
+
+  def test_label_is_associated_with_the_trigger
+    render_inline(UI::Select.new(name: "section", options: TEAMS, label: "Team"))
+    assert_equal trigger[:id], page.find("label")[:for]
+  end
+
+  def test_error_marks_the_trigger_invalid
+    render_inline(UI::Select.new(name: "section", options: TEAMS, error: true))
+    assert_equal "true", trigger["aria-invalid"]
+    assert_includes trigger[:class], "border-destructive"
+  end
+
+  def test_sizes
+    { sm: "h-8", default: "h-9", lg: "h-10" }.each do |size, height|
+      render_inline(UI::Select.new(name: "s", options: TEAMS, size: size))
+      assert_includes trigger[:class].split, height
+    end
+  end
+
+  def test_user_class_goes_on_the_trigger
+    render_inline(UI::Select.new(name: "s", options: TEAMS, class: "w-48"))
+    assert_includes trigger[:class].split, "w-48"
+  end
+
+  def test_wires_the_stimulus_controller
+    render_inline(UI::Select.new(name: "s", options: TEAMS))
+    assert_selector "[data-controller='ui--select']"
+    assert_equal "trigger", trigger["data-ui--select-target"]
+    assert_equal "listbox", listbox["data-ui--select-target"]
+    assert_equal "native", native["data-ui--select-target"]
+  end
+
+  # --- form builder --------------------------------------------------------
+
+  def test_form_binding_scopes_the_name_and_reads_the_value
+    render_inline(UI::Select.new(form: form_builder_for(Member.new(2)), field: :team_id, options: TEAMS))
+    assert_equal "member[team_id]", native[:name]
+    assert_includes trigger.text, "Engineering"
+    assert_equal "true", page.find("[role='option'][data-value='2']", visible: :all)["aria-selected"]
+  end
+
+  def test_form_binding_derives_the_label
+    render_inline(UI::Select.new(form: form_builder_for, field: :team_id, options: TEAMS))
+    assert_selector "label", text: "Team"
+  end
+  # --- searchable ------------------------------------------------------------
+
+  def test_searchable_adds_a_search_box_that_controls_the_listbox
+    render_inline(UI::Select.new(name: "s", options: TEAMS, searchable: true))
+    search = page.find("input[type='search']", visible: :all)
+    assert_equal "search", search["data-ui--select-target"]
+    assert_equal listbox[:id], search["aria-controls"]
+    assert_equal "Search", search[:placeholder]
+    assert_selector "[data-ui--select-target='empty']", text: "No matches", visible: :all
+  end
+
+  def test_not_searchable_by_default
+    render_inline(UI::Select.new(name: "s", options: TEAMS))
+    assert_no_selector "input[type='search']", visible: :all
+  end
+
+  # --- multiple --------------------------------------------------------------
+
+  def test_multiple_marks_every_chosen_option_and_posts_an_array
+    render_inline(UI::Select.new(name: "tags", options: TEAMS, multiple: true, selected: [ 1, 3 ]))
+    assert_equal "true", listbox["aria-multiselectable"]
+    assert native[:multiple]
+    assert_equal "tags[]", native[:name]
+    assert_equal %w[true false true], page.all("[role='option']", visible: :all).map { _1["aria-selected"] }
+    assert_includes trigger.text, "Design, Marketing"
+  end
+
+  def test_multiple_summarises_more_than_two_choices
+    render_inline(UI::Select.new(name: "tags", options: TEAMS, multiple: true, selected: [ 1, 2, 3 ]))
+    assert_includes trigger.text, "3 selected"
+  end
+
+  def test_multiple_with_nothing_chosen_shows_the_prompt_and_offers_no_blank_option
+    render_inline(UI::Select.new(name: "tags", options: TEAMS, multiple: true, prompt: "Pick sections"))
+    assert_includes trigger.text, "Pick sections"
+    assert_no_selector "[role='option'][data-value='']", visible: :all
+  end
+
+  def test_multiple_hands_the_summary_wording_to_the_controller
+    render_inline(UI::Select.new(name: "tags", options: TEAMS, multiple: true))
+    root = page.find("[data-controller='ui--select']")
+    assert_equal "true", root["data-ui--select-multiple-value"]
+    assert_equal "%{count} selected", root["data-ui--select-summary-value"]
+  end
+end

data/registry/test/components/ui/sheet/content_test.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Sheet::ContentTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_sheet(side: :right, **content_opts, &block)
+    render_inline(UI::Sheet.new(id: "profile-sheet")) do |sheet|
+      sheet.with_trigger { "Open" }
+      sheet.with_content(side: side, **content_opts) { |c| block.call(c) }
+    end
+  end
+
+  # ── Native dialog wrapper ────────────────────────────────────────────────
+
+  def test_renders_native_dialog_element
+    render_sheet { |c| c.with_title("Hi") }
+    assert_selector "dialog[data-ui--dialog-target='content']", visible: :all
+  end
+
+  def test_dialog_has_data_state_closed_by_default
+    render_sheet { |c| c.with_title("Hi") }
+    assert_equal "closed", page.find("dialog", visible: :all)["data-state"]
+    assert_nil page.find("dialog", visible: :all)[:open]
+  end
+
+  def test_dialog_id_matches_root
+    render_sheet { |c| c.with_title("Hi") }
+    assert_equal "profile-sheet", page.find("dialog", visible: :all)[:id]
+  end
+
+  def test_panel_present_inside_dialog
+    render_sheet { |c| c.with_title("Hi") }
+    assert_selector "[data-ui--dialog-part='panel']", visible: :all
+  end
+
+  # ── Side variants ────────────────────────────────────────────────────────
+
+  def test_default_side_is_right
+    render_sheet { |c| c.with_title("Hi") }
+    panel = page.find("[data-ui--dialog-part='panel']", visible: :all)
+    assert_includes panel[:class], "right-0"
+    assert_includes panel[:class], "h-full"
+    assert_includes panel[:class], "max-w-md"
+  end
+
+  def test_left_side_positions_sheet_on_left
+    render_sheet(side: :left) { |c| c.with_title("Hi") }
+    panel = page.find("[data-ui--dialog-part='panel']", visible: :all)
+    assert_includes panel[:class], "left-0"
+  end
+
+  def test_top_side_positions_sheet_on_top
+    render_sheet(side: :top) { |c| c.with_title("Hi") }
+    panel = page.find("[data-ui--dialog-part='panel']", visible: :all)
+    assert_includes panel[:class], "top-0"
+    assert_includes panel[:class], "inset-x-0"
+    assert_includes panel[:class], "max-h-[80vh]"
+  end
+
+  def test_bottom_side_positions_sheet_on_bottom
+    render_sheet(side: :bottom) { |c| c.with_title("Hi") }
+    panel = page.find("[data-ui--dialog-part='panel']", visible: :all)
+    assert_includes panel[:class], "bottom-0"
+  end
+
+  # ── Title / description ──────────────────────────────────────────────────
+
+  def test_title_text_arg_renders_h2
+    render_sheet { |c| c.with_title("Are you sure?") }
+    title = page.find("dialog h2", visible: :all)
+    assert_equal "Are you sure?", title.text.strip
+  end
+
+  def test_description_text_arg_renders_p
+    render_sheet do |c|
+      c.with_title("Hi")
+      c.with_description("This action cannot be undone.")
+    end
+    desc = page.find("dialog p", visible: :all)
+    assert_equal "This action cannot be undone.", desc.text.strip
+  end
+
+  def test_description_links_via_aria_describedby
+    render_sheet do |c|
+      c.with_title("Hi")
+      c.with_description("Body")
+    end
+    dialog = page.find("dialog", visible: :all)
+    desc   = page.find("dialog p", visible: :all)
+    assert_equal "profile-sheet-description", desc[:id]
+    assert_equal desc[:id], dialog["aria-describedby"]
+  end
+
+  # ── Footer ───────────────────────────────────────────────────────────────
+
+  def test_footer_block_renders_in_footer_element
+    render_sheet do |c|
+      c.with_title("Hi")
+      c.with_footer do
+        '<button type="button">Confirm</button>'.html_safe
+      end
+    end
+    assert_selector "dialog footer", visible: :all
+    assert_selector "dialog footer button", text: "Confirm", visible: :all
+  end
+
+  def test_no_footer_means_no_footer_element
+    render_sheet { |c| c.with_title("Hi") }
+    assert_no_selector "dialog footer", visible: :all
+  end
+
+  # ── Close button ─────────────────────────────────────────────────────────
+
+  def test_close_button_default_present
+    render_sheet { |c| c.with_title("Hi") }
+    btn = page.find("dialog button[aria-label='Close']", visible: :all)
+    assert_match(/click->ui--dialog#close/, btn["data-action"])
+  end
+
+  def test_close_button_can_be_disabled
+    render_sheet(show_close: false) { |c| c.with_title("Hi") }
+    assert_no_selector "dialog button[aria-label='Close']", visible: :all
+  end
+
+  # ── User class merge on panel ────────────────────────────────────────────
+
+  def test_user_class_merges_into_panel
+    render_sheet(class: "border-red-500") { |c| c.with_title("Hi") }
+    panel = page.find("[data-ui--dialog-part='panel']", visible: :all)
+    assert_includes panel[:class].split, "border-red-500"
+  end
+end

data/registry/test/components/ui/sheet/trigger_test.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Sheet::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_trigger_reuses_dialog_behavior
+    render_inline(UI::Sheet.new(id: "profile-sheet")) do |sheet|
+      sheet.with_trigger { "Open" }
+      sheet.with_content { |c| c.with_title("Hi") }
+    end
+
+    trigger = page.find("[data-ui--dialog-target='trigger']")
+    assert_equal "dialog", trigger["aria-haspopup"]
+    assert_equal "profile-sheet", trigger["aria-controls"]
+    assert trigger["data-action"].include?("click->ui--dialog#open")
+    assert_equal "Open", trigger.text.strip
+    # Should render as UI::Button by default
+    assert_includes trigger[:class].split, "bg-primary"
+  end
+end

data/registry/test/components/ui/sheet_test.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::SheetTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_sheet(**opts)
+    render_inline(UI::Sheet.new(**opts)) do |sheet|
+      sheet.with_trigger { "Open sheet" }
+      sheet.with_content do |content|
+        content.with_title { "Edit profile" }
+        content.with_description { "Make changes to your profile here." }
+        "Sheet body"
+      end
+    end
+  end
+
+  def test_root_carries_dialog_controller
+    render_sheet
+    assert_selector "[data-controller~='ui--dialog']"
+  end
+
+  def test_dialog_element_has_generated_id
+    render_sheet
+    dialog = page.find("dialog", visible: :all)
+    assert dialog[:id].present?
+    assert dialog[:id].start_with?("ui-sheet-")
+  end
+
+  def test_custom_id_lands_on_dialog_element
+    render_sheet(id: "profile-sheet")
+    assert_selector "dialog#profile-sheet", visible: :all
+  end
+
+  def test_user_class_merge
+    render_sheet(class: "my-sheet-root")
+    classes = page.find("[data-controller~='ui--dialog']")[:class].split
+    assert_includes classes, "my-sheet-root"
+    assert_includes classes, "contents"
+  end
+end

data/registry/test/components/ui/sidebar/menu_button_test.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Sidebar::MenuButtonTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_active_button_sets_data_active
+    render_inline(UI::Sidebar::MenuButton.new("#", active: true)) { "Dashboard" }
+    link = page.find("a", text: "Dashboard")
+    assert_equal "true", link[:"data-active"]
+    assert_includes link[:class], "data-[active=true]:bg-sidebar-primary/10"
+  end
+
+  # Active is a primary tint while hover stays the neutral sidebar accent, so
+  # hovering an inactive item can't be mistaken for the current page.
+  def test_active_styling_is_distinct_from_hover
+    render_inline(UI::Sidebar::MenuButton.new("#", active: true)) { "Dashboard" }
+    classes = page.find("a", text: "Dashboard")[:class]
+    assert_includes classes, "data-[active=true]:text-sidebar-primary"
+    assert_includes classes, "data-[active=true]:font-semibold"
+    assert_includes classes, "hover:bg-sidebar-accent"
+  end
+
+  def test_allows_aria_current
+    render_inline(UI::Sidebar::MenuButton.new("#", current: "page")) { "Dashboard" }
+    link = page.find("a", text: "Dashboard")
+    assert_equal "page", link[:"aria-current"]
+  end
+
+  def test_active_sets_aria_current_page_by_default
+    render_inline(UI::Sidebar::MenuButton.new("#", active: true)) { "Dashboard" }
+    link = page.find("a", text: "Dashboard")
+    assert_equal "page", link[:"aria-current"]
+  end
+
+  def test_active_does_not_override_explicit_current
+    render_inline(UI::Sidebar::MenuButton.new("#", active: true, current: "step")) { "Dashboard" }
+    link = page.find("a", text: "Dashboard")
+    assert_equal "step", link[:"aria-current"]
+  end
+end

data/registry/test/components/ui/sidebar/trigger_test.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Sidebar::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_trigger_wires_toggle_action
+    render_inline(UI::Sidebar::Trigger.new(sidebar_id: "main-sidebar"))
+    button = page.find("button")
+    assert_equal "main-sidebar", button[:"aria-controls"]
+    assert_equal "true", button[:"aria-expanded"]
+    assert_equal "Toggle sidebar", button[:"aria-label"]
+    assert button[:"data-action"].include?("ui--sidebar#toggle")
+  end
+end

data/registry/test/components/ui/sidebar/wrapper_test.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Sidebar::WrapperTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_controller_and_css_vars
+    render_inline(UI::Sidebar::Wrapper.new) { "x" }
+    wrapper = page.find("[data-controller~='ui--sidebar']")
+    assert_includes wrapper[:class], "group/sidebar-wrapper"
+    assert_includes wrapper[:style], "--sidebar-width:"
+  end
+end

data/registry/test/components/ui/sidebar_test.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::SidebarTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_sidebar(**opts)
+    render_inline(UI::Sidebar.new(**opts)) do |sidebar|
+      sidebar.with_sidebar_header { "Header" }
+      sidebar.with_sidebar_content do |content|
+        content.with_sidebar_group do |group|
+          group.with_label("Applications")
+          group.with_menu do |menu|
+            menu.with_menu_item do |item|
+              item.with_menu_button("#", active: true) { "Dashboard" }
+            end
+          end
+        end
+      end
+    end
+  end
+
+  def test_renders_aside_with_sidebar_target
+    render_sidebar
+    aside = page.find("aside[data-ui--sidebar-target='sidebar']")
+    assert_equal "expanded", aside[:"data-state"]
+    assert_equal "none", aside[:"data-collapsible"]
+  end
+
+  def test_custom_id_preserved
+    render_sidebar(id: "main-sidebar")
+    assert_selector "aside#main-sidebar"
+  end
+
+  def test_user_class_merge
+    render_sidebar(class: "custom-sidebar")
+    classes = page.find("aside")[:class].split
+    assert_includes classes, "custom-sidebar"
+    assert_includes classes, "peer"
+  end
+end

data/registry/test/components/ui/spinner_test.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::SpinnerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_loader_icon_with_animate_spin
+    render_inline UI::Spinner.new
+    icon = page.find("i", visible: :all)
+    assert_equal "loader", icon["data-lucide"]
+    assert_includes icon[:class].split, "animate-spin"
+  end
+
+  def test_default_size_classes
+    render_inline UI::Spinner.new
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "w-5"
+    assert_includes classes, "h-5"
+  end
+
+  def test_size_xs
+    render_inline UI::Spinner.new(size: :xs)
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "w-3"
+    assert_includes classes, "h-3"
+  end
+
+  def test_size_sm
+    render_inline UI::Spinner.new(size: :sm)
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "w-4"
+    assert_includes classes, "h-4"
+  end
+
+  def test_size_lg
+    render_inline UI::Spinner.new(size: :lg)
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "w-6"
+    assert_includes classes, "h-6"
+  end
+
+  def test_size_xl
+    render_inline UI::Spinner.new(size: :xl)
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "w-8"
+    assert_includes classes, "h-8"
+  end
+
+  def test_user_class_merges
+    render_inline UI::Spinner.new(class: "text-primary")
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "text-primary"
+    assert_includes classes, "animate-spin"
+  end
+
+  def test_html_attrs_pass_through
+    render_inline UI::Spinner.new(aria: { label: "Loading" })
+    icon = page.find("i", visible: :all)
+    assert_equal "Loading", icon["aria-label"]
+  end
+end