velvetkit 0.1.0.beta

data/registry/test/components/ui/menu/item_test.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Menu::ItemTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_as_button_by_default
+    render_inline(UI::Menu::Item.new) { "Item text" }
+    assert_selector "button", text: "Item text"
+  end
+
+  def test_renders_as_link_with_href
+    render_inline(UI::Menu::Item.new(href: "/profile")) { "Profile" }
+    assert_selector "a[href='/profile']", text: "Profile"
+  end
+
+  def test_renders_label_param
+    render_inline(UI::Menu::Item.new("Label text"))
+    assert_selector "button", text: "Label text"
+  end
+
+  def test_renders_block_over_label
+    render_inline(UI::Menu::Item.new("Label text")) { "Block text" }
+    assert_selector "button", text: "Block text"
+    refute_text "Label text"
+  end
+
+  def test_has_role_menuitem
+    render_inline(UI::Menu::Item.new) { "Item" }
+    assert_selector "[role='menuitem']"
+  end
+
+  def test_has_tabindex_minus_one
+    render_inline(UI::Menu::Item.new) { "Item" }
+    item = page.find("[role='menuitem']")
+    assert_equal "-1", item[:tabindex]
+  end
+
+  def test_has_data_target
+    render_inline(UI::Menu::Item.new) { "Item" }
+    assert_selector "[data-ui--menu-target='item']"
+  end
+
+  def test_disabled_state
+    render_inline(UI::Menu::Item.new(disabled: true)) { "Disabled" }
+    item = page.find("[role='menuitem']")
+    assert item[:disabled].present?
+    assert_equal "true", item[:"data-disabled"]
+  end
+
+  def test_default_variant
+    render_inline(UI::Menu::Item.new) { "Item" }
+    item = page.find("[role='menuitem']")
+    refute_includes item[:class].split, "text-destructive"
+  end
+
+  def test_destructive_variant
+    render_inline(UI::Menu::Item.new(variant: :destructive)) { "Delete" }
+    item = page.find("[role='menuitem']")
+    assert_includes item[:class].split, "text-destructive"
+  end
+
+  def test_inset_padding
+    render_inline(UI::Menu::Item.new(inset: true)) { "Item" }
+    item = page.find("[role='menuitem']")
+    assert_includes item[:class].split, "pl-8"
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Menu::Item.new(class: "custom-item")) { "Item" }
+    item = page.find("[role='menuitem']")
+    assert_includes item[:class].split, "custom-item"
+  end
+end

data/registry/test/components/ui/menu/label_test.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Menu::LabelTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    render_inline(UI::Menu::Label.new) { "My Label" }
+    assert_text "My Label"
+  end
+
+  def test_renders_label_param
+    render_inline(UI::Menu::Label.new("Label text"))
+    assert_text "Label text"
+  end
+
+  def test_renders_block_over_label
+    render_inline(UI::Menu::Label.new("Label text")) { "Block text" }
+    assert_text "Block text"
+    refute_text "Label text"
+  end
+
+  def test_has_styling
+    render_inline(UI::Menu::Label.new) { "Label" }
+    label = page.find("div", text: "Label")
+    assert label[:class].include?("font-semibold")
+    assert label[:class].include?("text-muted-foreground")
+  end
+
+  def test_inset_padding
+    render_inline(UI::Menu::Label.new(inset: true)) { "Label" }
+    label = page.find("div", text: "Label")
+    assert_includes label[:class].split, "pl-8"
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Menu::Label.new(class: "custom-label")) { "Label" }
+    label = page.find("div", text: "Label")
+    assert_includes label[:class].split, "custom-label"
+  end
+end

data/registry/test/components/ui/menu/separator_test.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Menu::SeparatorTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_separator
+    render_inline(UI::Menu::Separator.new)
+    assert_selector "[role='separator']"
+  end
+
+  def test_has_horizontal_orientation
+    render_inline(UI::Menu::Separator.new)
+    sep = page.find("[role='separator']")
+    assert_equal "horizontal", sep[:"aria-orientation"]
+  end
+
+  def test_has_styling
+    render_inline(UI::Menu::Separator.new)
+    sep = page.find("[role='separator']")
+    assert sep[:class].include?("bg-muted")
+    assert sep[:class].include?("h-px")
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Menu::Separator.new(class: "custom-sep"))
+    sep = page.find("[role='separator']")
+    assert_includes sep[:class].split, "custom-sep"
+  end
+end

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

@@ -0,0 +1,109 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Menu::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger text" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    assert_text "Trigger text"
+  end
+
+  def test_has_aria_attributes
+    render_inline(UI::Menu.new(id: "test-id")) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']")
+    assert_equal "true", trigger[:"aria-haspopup"]
+    assert_equal "false", trigger[:"aria-expanded"]
+    assert trigger[:"aria-controls"].start_with?("ui-menu-content-")
+  end
+
+  def test_has_data_target
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    assert_selector "button[data-ui--menu-target='trigger']"
+  end
+
+  def test_has_toggle_action
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']")
+    assert trigger[:"data-action"].include?("click->ui--menu#toggle")
+  end
+
+  def test_has_keydown_action
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']")
+    assert trigger[:"data-action"].include?("keydown->ui--menu#triggerKeydown")
+  end
+
+  def test_renders_as_button_with_default_variant
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']")
+    assert trigger[:class].include?("border")
+    assert trigger[:class].include?("bg-background")
+  end
+
+  def test_custom_variant
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger(variant: :default) { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']")
+    assert trigger[:class].include?("bg-primary")
+  end
+
+  def test_custom_size
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger(size: :sm) { "Small" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']", text: "Small")
+    assert trigger[:class].include?("h-8")
+    assert trigger[:class].include?("text-xs")
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger(class: "custom-trigger") { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    trigger = page.find("button[data-ui--menu-target='trigger']")
+    assert_includes trigger[:class].split, "custom-trigger"
+  end
+end

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

@@ -0,0 +1,152 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::MenuTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_menu
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Open Menu" }
+      menu.with_content do |content|
+        content.with_label("My Account")
+        content.with_item("Profile")
+        content.with_item("Settings")
+        content.with_divider
+        content.with_item("Logout", variant: :destructive)
+      end
+    end
+  end
+
+  def test_root_renders_trigger_and_content
+    result = render_menu
+    assert_text "Open Menu"
+    assert_text "Profile"
+    assert_text "Settings"
+    assert_text "Logout"
+  end
+
+  def test_trigger_has_aria_attributes
+    render_menu
+    trigger = page.find("[data-ui--menu-target='trigger']")
+    assert_equal "true", trigger[:"aria-haspopup"]
+    assert_equal "false", trigger[:"aria-expanded"]
+    assert trigger[:"aria-controls"].present?
+    assert trigger[:"aria-controls"].start_with?("ui-menu-content-")
+  end
+
+  def test_trigger_has_toggle_action
+    render_menu
+    trigger = page.find("[data-ui--menu-target='trigger']")
+    assert trigger[:"data-action"].include?("click->ui--menu#toggle")
+    assert trigger[:"data-action"].include?("keydown->ui--menu#triggerKeydown")
+  end
+
+  def test_content_has_role_menu
+    render_menu
+    assert_selector "[role='menu']", visible: false
+  end
+
+  def test_content_has_vertical_orientation
+    render_menu
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "vertical", content[:"aria-orientation"]
+  end
+
+  def test_content_is_initially_hidden
+    render_menu
+    content = page.find("[role='menu']", visible: false)
+    assert content[:hidden].present?
+  end
+
+  def test_default_side_is_bottom
+    render_menu
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "bottom", content[:"data-side"]
+  end
+
+  def test_default_align_is_start
+    render_menu
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "start", content[:"data-align"]
+  end
+
+  def test_custom_side
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Open" }
+      menu.with_content(side: :top) do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "top", content[:"data-side"]
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Menu.new(id: "my-menu")) do |menu|
+      menu.with_trigger { "Open" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    assert_selector "#my-menu"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Menu.new(class: "my-custom-class")) do |menu|
+      menu.with_trigger { "Open" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    root = page.find("[data-controller='ui--menu']")
+    classes = root[:class].split
+    assert_includes classes, "my-custom-class"
+    assert_includes classes, "relative"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Menu.new(data: { test_id: "menu-x" })) do |menu|
+      menu.with_trigger { "Open" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    assert_selector "[data-controller='ui--menu'][data-test-id='menu-x']"
+  end
+
+  def test_content_with_collected_items
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Open" }
+      menu.with_content do |content|
+        content.with_label("Account")
+        content.with_item("Profile", href: "/profile")
+        content.with_item("Settings")
+        content.with_divider
+        content.with_item("Logout", variant: :destructive)
+      end
+    end
+
+    assert_selector "[role='menu']", visible: false
+    assert_text "Account"
+    assert_selector "a[href='/profile']", text: "Profile", visible: false
+    assert_selector "[role='menuitem']", text: "Settings", visible: false
+    assert_selector "[role='separator']", visible: false
+    assert_selector "[role='menuitem']", text: "Logout", visible: false
+  end
+
+  def test_item_with_block_content
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Open" }
+      menu.with_content do |content|
+        content.with_item do
+          safe_join([ tag.div("Icon", class: "icon"), "Profile" ])
+        end
+      end
+    end
+
+    assert_text "Icon"
+    assert_text "Profile"
+  end
+end

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

@@ -0,0 +1,118 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::NativeSelectTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  TEAMS = [ [ "Design", 1 ], [ "Engineering", 2 ] ].freeze
+
+  def test_renders_a_native_select_with_options
+    render_inline(UI::NativeSelect.new(name: "member[team_id]", options: TEAMS))
+    assert_selector "select[name='member[team_id]']"
+    assert_selector "select option", count: 2
+    assert_selector "select option[value='2']", text: "Engineering"
+  end
+
+  # Native rather than a custom listbox: it gets the platform picker on a
+  # phone, keyboard support and screen-reader behaviour for free.
+  def test_accepts_a_plain_array_of_strings
+    render_inline(UI::NativeSelect.new(name: "board", options: %w[cbse icse]))
+    assert_selector "option[value='cbse']", text: "cbse"
+  end
+
+  def test_marks_the_selected_option
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, selected: 2))
+    assert_equal "selected", page.find("option[value='2']")[:selected]
+    assert_nil page.find("option[value='1']")[:selected]
+  end
+
+  # Without a prompt a select silently submits its first option, so a required
+  # choice looks already-made.
+  def test_prompt_renders_a_blank_first_option
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, prompt: "Choose a team"))
+    first = page.all("option").first
+    assert_equal "", first[:value]
+    assert_equal "Choose a team", first.text
+  end
+
+  def test_label_is_associated_with_the_select
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, label: "Team"))
+    assert_equal page.find("label")[:for], page.find("select")[:id]
+    assert_selector "label", text: "Team"
+  end
+
+  def test_no_label_element_without_one
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS))
+    assert_no_selector "label"
+  end
+
+  def test_required_and_disabled_pass_through
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, required: true, disabled: true))
+    select = page.find("select", visible: :all)
+    assert select[:required].present?
+    assert select[:disabled].present?
+  end
+
+  def test_error_state_marks_the_select_invalid
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, error: true))
+    assert_equal "true", page.find("select")[:"aria-invalid"]
+    assert_includes page.find("select")[:class].split, "border-destructive"
+  end
+
+  def test_sizes_change_the_control_height
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, size: :sm))
+    assert_includes page.find("select")[:class].split, "h-8"
+  end
+
+  def test_user_class_overrides_default_via_tailwind_merge
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, class: "h-20"))
+    classes = page.find("select")[:class].split
+    assert_includes classes, "h-20"
+    refute_includes classes, "h-9"
+  end
+
+  def test_html_attrs_pass_through
+    render_inline(UI::NativeSelect.new(name: "s", options: TEAMS, id: "sec", data: { test_id: "x" }))
+    assert_selector "select#sec[data-test-id='x']"
+  end
+
+  # --- form binding ---
+  #
+  # The label alone is not enough: a bound select must also render a scoped
+  # name, or the form submits nothing for the field.
+
+  # A plain object rather than a tenant-scoped model: the component only needs
+  # something the form builder can name fields against.
+  Member = Struct.new(:team_id) do
+    def self.human_attribute_name(name, *) = name.to_s.humanize
+    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 test_form_binding_scopes_the_field_name
+    render_inline(UI::NativeSelect.new(form: form_builder_for, field: :team_id,
+                                 options: TEAMS))
+    assert_selector "select[name='member[team_id]']"
+  end
+
+  def test_form_binding_derives_the_label_and_associates_it
+    render_inline(UI::NativeSelect.new(form: form_builder_for, field: :team_id,
+                                 options: TEAMS))
+    assert_selector "label"
+    assert_equal page.find("label")[:for], page.find("select")[:id]
+  end
+
+  def test_form_binding_still_renders_the_prompt_and_selection
+    render_inline(UI::NativeSelect.new(form: form_builder_for, field: :team_id,
+                                 options: TEAMS, prompt: "Choose", selected: 2))
+    assert_equal "", page.all("option").first[:value]
+    assert_equal "selected", page.find("option[value='2']")[:selected]
+  end
+end

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

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::PaginationTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def pagy(count:, page: 1, limit: 25)
+    Pagy::Offset.new(count: count, page: page, limit: limit)
+  end
+
+  def render_pagination(**options, &block)
+    render_inline(UI::Pagination.new(**options), &block)
+  end
+
+  # Controls on a single page are noise.
+  def test_renders_nothing_for_a_single_page
+    render_pagination(pagy: pagy(count: 10))
+    assert_no_selector "nav"
+  end
+
+  def test_renders_a_labelled_nav_with_page_links
+    render_pagination(pagy: pagy(count: 240))
+    assert_selector "nav[aria-label]"
+    assert_selector "nav ul li"
+    assert_selector "a", text: "2"
+  end
+
+  # An office wants to know where it is in the list, not just which page.
+  def test_shows_a_record_range_summary
+    render_pagination(pagy: pagy(count: 240, page: 2))
+    assert_text "Showing 26–50 of 240"
+  end
+
+  def test_marks_the_current_page
+    render_pagination(pagy: pagy(count: 240, page: 3))
+    current = page.find("a[aria-current='page']")
+    assert_equal "3", current.text.strip
+    assert_equal 1, page.all("a[aria-current='page']").size
+  end
+
+  # Previous on page one, and next on the last page, would go nowhere.
+  def test_previous_is_inert_on_the_first_page
+    render_pagination(pagy: pagy(count: 240, page: 1))
+    assert_no_selector "a[aria-label='Go to previous page']"
+    assert_selector "a[aria-label='Go to next page']"
+  end
+
+  def test_next_is_inert_on_the_last_page
+    render_pagination(pagy: pagy(count: 240, page: 10))
+    assert_selector "a[aria-label='Go to previous page']"
+    assert_no_selector "a[aria-label='Go to next page']"
+  end
+
+  # A hundred pages of links is unusable, so the middle collapses.
+  def test_collapses_long_ranges_around_the_current_page
+    render_pagination(pagy: pagy(count: 2_500, page: 50))
+    numbers = page.all("nav a").map(&:text).select { |t| t.match?(/\A\d+\z/) }
+    assert_includes numbers, "1"
+    assert_includes numbers, "100"
+    assert_includes numbers, "50"
+    refute_includes numbers, "25", "the middle of a long range should collapse"
+    assert_selector "span[aria-hidden='true']", minimum: 1
+  end
+
+  def test_shows_every_page_when_the_range_is_short
+    render_pagination(pagy: pagy(count: 100))
+    numbers = page.all("nav a").map(&:text).select { |t| t.match?(/\A\d+\z/) }
+    assert_equal %w[1 2 3 4], numbers
+  end
+
+  # The caller owns the routes, so the component takes a block.
+  def test_builds_urls_from_the_given_block
+    render_inline(UI::Pagination.new(pagy: pagy(count: 240)) { |p| "/invoices?page=#{p}" })
+    assert_selector "a[href='/invoices?page=2']"
+  end
+
+  # Laid out by the width it is given, not the screen's: in a narrow card on
+  # a wide screen, the screen-width layout squeezed the summary and the
+  # links into one row and they overlapped.
+  def test_lays_out_by_its_container_not_the_screen
+    render_inline(UI::Pagination.new(pagy: pagy(count: 240, page: 5)) { |p| "/invoices?page=#{p}" })
+    with_class = ->(name) { "contains(concat(' ', normalize-space(@class), ' '), ' #{name} ')" }
+    container = page.find(:xpath, "//div[#{with_class.("@container")}]")
+    row = container.find(:xpath, "./div")
+    assert_includes row[:class].split, "@lg:flex-row"
+    refute(row[:class].split.any? { _1.start_with?("sm:") }, "no screen breakpoints")
+    assert_includes page.find("ul")[:class].split, "flex-wrap"
+    assert_equal 2, page.all(:xpath, "//span[#{with_class.("@md:inline")}]", visible: :all).size
+  end
+end