velvetkit 0.1.0.beta

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

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::PasswordInputTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_a_masked_input_inside_an_input_group
+    render_inline(UI::PasswordInput.new(name: "user[password]"))
+    assert_selector "[data-slot='input-group']"
+    assert_selector "input[type='password'][name='user[password]']"
+  end
+
+  def test_wires_the_stimulus_controller_and_input_target
+    render_inline(UI::PasswordInput.new(name: "user[password]"))
+    assert_selector "[data-controller='ui--password-visibility']"
+    assert_selector "input[data-ui--password-visibility-target='input']"
+  end
+
+  def test_toggle_button_wires_action_and_accessible_name
+    render_inline(UI::PasswordInput.new(name: "user[password]"))
+    button = page.find("button[data-ui--password-visibility-target='toggle']")
+    assert_includes button[:"data-action"], "ui--password-visibility#toggle"
+    assert_equal "Show password", button[:"aria-label"]
+    assert_equal "false", button[:"aria-pressed"]
+  end
+
+  def test_renders_both_toggle_icons_with_hide_hidden_initially
+    render_inline(UI::PasswordInput.new(name: "user[password]"))
+    assert_selector "span[data-ui--password-visibility-target='iconShow']"
+    hide = page.find("span[data-ui--password-visibility-target='iconHide']", visible: :all)
+    assert_includes hide[:style].to_s, "display: none"
+  end
+
+  def test_required_and_disabled_pass_through
+    render_inline(UI::PasswordInput.new(name: "user[password]", required: true, disabled: true))
+    input = page.find("input[type='password']", visible: :all)
+    assert input[:required].present?
+    assert input[:disabled].present?
+  end
+
+  # Velvet hardcoded a placeholder in its template, shadowing the caller's.
+  def test_caller_placeholder_is_not_overridden
+    render_inline(UI::PasswordInput.new(name: "user[password]", placeholder: "Your secret"))
+    assert_equal "Your secret", page.find("input[type='password']")[:placeholder]
+  end
+
+  def test_no_placeholder_by_default
+    render_inline(UI::PasswordInput.new(name: "user[password]"))
+    assert_nil page.find("input[type='password']")[:placeholder].presence
+  end
+
+  def test_error_state_marks_input_invalid
+    render_inline(UI::PasswordInput.new(name: "user[password]", error: true))
+    assert_equal "true", page.find("input[type='password']")[:"aria-invalid"]
+  end
+
+  def test_user_class_reaches_the_group_wrapper
+    render_inline(UI::PasswordInput.new(name: "user[password]", class: "mt-4"))
+    assert_includes page.find("[data-slot='input-group']")[:class].split, "mt-4"
+  end
+
+  # --- form-builder binding + automatic labels (Rails convention) ---
+
+  # Stands in for an app model: the builder needs only a name and attributes.
+  class User
+    include ActiveModel::Model
+    attr_accessor :email, :password, :remember_me
+  end
+
+  def form_builder_for(record)
+    ActionView::Helpers::FormBuilder.new(:user, record, vc_test_controller.view_context, {})
+  end
+
+  def test_form_binding_scopes_the_field_name
+    render_inline(UI::PasswordInput.new(form: form_builder_for(User.new), field: :password))
+    assert_selector "input[name='user[password]'][type='password']"
+  end
+
+  def test_label_is_derived_from_the_attribute_name
+    render_inline(UI::PasswordInput.new(form: form_builder_for(User.new), field: :password))
+    assert_selector "label", text: "Password"
+  end
+
+  # The input sits inside the group's border, so the label must render outside
+  # it while still pointing at the field.
+  def test_derived_label_sits_outside_the_group_and_is_associated
+    render_inline(UI::PasswordInput.new(form: form_builder_for(User.new), field: :password))
+    assert_equal page.find("label")[:for], page.find("input[type='password']")[:id]
+    assert_no_selector "[data-slot='input-group'] label"
+  end
+
+  def test_label_false_opts_out
+    render_inline(UI::PasswordInput.new(form: form_builder_for(User.new), field: :password, label: false))
+    assert_no_selector "label"
+  end
+end

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

@@ -0,0 +1,226 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Popover::ContentTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    result = render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Popover content" }
+    end
+    assert result.to_html.include?("Popover content")
+  end
+
+  def test_has_role_dialog
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    assert_selector "[role='dialog']", visible: false
+  end
+
+  def test_has_aria_modal_false
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "false", content[:"aria-modal"]
+  end
+
+  def test_is_initially_hidden
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert content[:hidden].present?
+  end
+
+  def test_has_data_target
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "content", content[:"data-ui--popover-target"]
+  end
+
+  def test_default_side_top
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "top", content[:"data-side"]
+  end
+
+  def test_custom_side
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(side: :right) { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "right", content[:"data-side"]
+  end
+
+  def test_custom_align
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(align: :end) { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "end", content[:"data-align"]
+  end
+
+  def test_has_animation_classes
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert content[:class].include?("animate-in")
+    assert content[:class].include?("fade-in-0")
+  end
+
+  def test_has_arrow_element
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    assert_selector "[data-ui--popover-target='arrow']", visible: false
+  end
+
+  def test_has_default_width
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert content[:class].include?("w-72")
+  end
+
+  def test_has_popover_styling
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert content[:class].include?("bg-popover")
+    assert content[:class].include?("text-popover-foreground")
+    assert content[:class].include?("rounded-md")
+    assert content[:class].include?("shadow-md")
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(class: "custom-content") { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_includes content[:class].split, "custom-content"
+  end
+
+  def test_renders_title
+    result = render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content do |content|
+        content.with_title { "My Title" }
+        "Body content"
+      end
+    end
+    assert result.to_html.include?("My Title")
+  end
+
+  def test_title_has_heading_classes
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content do |content|
+        content.with_title { "My Title" }
+        "Body"
+      end
+    end
+    title = page.find("h3", text: "My Title", visible: false)
+    assert title[:class].include?("font-semibold")
+  end
+
+  def test_title_sets_aria_labelledby
+    render_inline(UI::Popover.new(id: "test-popover")) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content do |content|
+        content.with_title { "My Title" }
+        "Body"
+      end
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "ui-popover-title-test-popover", content[:"aria-labelledby"]
+  end
+
+  def test_show_close_button
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(show_close: true) { "Content" }
+    end
+    close_button = page.find("button[aria-label='Close']", visible: false)
+    assert close_button.present?
+  end
+
+  def test_close_button_has_action
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(show_close: true) { "Content" }
+    end
+    close_button = page.find("button[aria-label='Close']", visible: false)
+    assert close_button[:"data-action"].include?("click->ui--popover#close")
+  end
+
+  def test_close_button_uses_ghost_variant
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(show_close: true) { "Content" }
+    end
+    close_button = page.find("button[aria-label='Close']", visible: false)
+    assert close_button[:class].include?("hover:bg-accent")
+  end
+
+  def test_arrow_has_data_side_attribute
+    # Arrow has data-side attribute that Floating UI can update dynamically
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(side: :top) { "Content" }
+    end
+    arrow = page.find("[data-ui--popover-target='arrow']", visible: false)
+    assert_equal "top", arrow[:"data-side"]
+  end
+
+  # The arrow is a square turned 45°. Only the two edges that make its outer
+  # point carry a border; the inner two sit over the popover and stay bare,
+  # or they show as a line inside the popover.
+  def test_arrow_borders_only_its_outer_point_on_every_side
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    classes = page.find("[data-ui--popover-target='arrow']", visible: false)[:class].split
+    { top: %w[r b], bottom: %w[l t], left: %w[t r], right: %w[b l] }.each do |side, edges|
+      shown = classes.filter_map { |c| c[/\Adata-\[side=#{side}\]:border-([trbl])\z/, 1] }
+      assert_equal edges.sort, shown.sort, "side=#{side}"
+    end
+    refute(classes.any? { |c| c.match?(/\Aborder-[trbl]\z/) }, "no border outside a side variant")
+  end
+
+  def test_arrow_side_matches_content_side
+    # Arrow's data-side matches the content's data-side
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content(side: :bottom) { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    arrow = page.find("[data-ui--popover-target='arrow']", visible: false)
+    assert_equal content[:"data-side"], arrow[:"data-side"]
+    assert_equal "bottom", arrow[:"data-side"]
+  end
+end

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

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Popover::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger text" }
+      popover.with_content { "Content" }
+    end
+    assert_text "Trigger text"
+  end
+
+  def test_has_aria_attributes
+    render_inline(UI::Popover.new(id: "test-id")) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    trigger = page.find("button[data-ui--popover-target='trigger']")
+    assert_equal "true", trigger[:"aria-haspopup"]
+    assert_equal "false", trigger[:"aria-expanded"]
+    assert_equal "ui-popover-content-test-id", trigger[:"aria-controls"]
+  end
+
+  def test_has_data_target
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    assert_selector "button[data-ui--popover-target='trigger']"
+  end
+
+  def test_has_toggle_action
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    trigger = page.find("button[data-ui--popover-target='trigger']")
+    assert trigger[:"data-action"].include?("click->ui--popover#toggle")
+  end
+
+  def test_renders_as_button_with_default_variant
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    trigger = page.find("button[data-ui--popover-target='trigger']")
+    assert trigger[:class].include?("border")
+    assert trigger[:class].include?("bg-background")
+  end
+
+  def test_custom_variant
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger(variant: :default) { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    trigger = page.find("button[data-ui--popover-target='trigger']")
+    assert trigger[:class].include?("bg-primary")
+    assert trigger[:class].include?("text-primary-foreground")
+  end
+
+  def test_custom_size
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger(size: :sm) { "Small" }
+      popover.with_content { "Content" }
+    end
+    trigger = page.find("button[data-ui--popover-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::Popover.new) do |popover|
+      popover.with_trigger(class: "custom-trigger") { "Trigger" }
+      popover.with_content { "Content" }
+    end
+    trigger = page.find("button[data-ui--popover-target='trigger']")
+    assert_includes trigger[:class].split, "custom-trigger"
+  end
+end

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

@@ -0,0 +1,101 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::PopoverTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_popover
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Open Popover" }
+      popover.with_content { "Popover content" }
+    end
+  end
+
+  def test_root_renders_trigger_and_content
+    result = render_popover
+    assert_text "Open Popover"
+    assert result.to_html.include?("Popover content")
+  end
+
+  def test_trigger_has_aria_attributes
+    render_popover
+    trigger = page.find("[data-ui--popover-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-popover-content-")
+  end
+
+  def test_trigger_has_click_action
+    render_popover
+    trigger = page.find("[data-ui--popover-target='trigger']")
+    assert trigger[:"data-action"].include?("click->ui--popover#toggle")
+  end
+
+  def test_content_has_role_dialog
+    render_popover
+    assert_selector "[role='dialog']", visible: false
+  end
+
+  def test_content_is_initially_hidden
+    render_popover
+    content = page.find("[role='dialog']", visible: false)
+    assert content[:hidden].present?
+  end
+
+  def test_content_has_data_targets
+    render_popover
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "content", content[:"data-ui--popover-target"]
+  end
+
+  def test_default_side_is_top
+    render_popover
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "top", content[:"data-side"]
+  end
+
+  def test_custom_side
+    render_inline(UI::Popover.new) do |popover|
+      popover.with_trigger { "Open" }
+      popover.with_content(side: :bottom) { "Content" }
+    end
+    content = page.find("[role='dialog']", visible: false)
+    assert_equal "bottom", content[:"data-side"]
+  end
+
+  def test_default_width_280px
+    render_popover
+    content = page.find("[role='dialog']", visible: false)
+    assert content[:class].include?("w-72") # 72 * 4px = 288px (Tailwind w-72 is 18rem/288px)
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Popover.new(id: "my-popover")) do |popover|
+      popover.with_trigger { "Open" }
+      popover.with_content { "Content" }
+    end
+    assert_selector "#my-popover"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Popover.new(class: "my-custom-class")) do |popover|
+      popover.with_trigger { "Open" }
+      popover.with_content { "Content" }
+    end
+    root = page.find("[data-controller='ui--popover']")
+    classes = root[:class].split
+    assert_includes classes, "my-custom-class"
+    assert_includes classes, "inline-block"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Popover.new(data: { test_id: "popover-x" })) do |popover|
+      popover.with_trigger { "Open" }
+      popover.with_content { "Content" }
+    end
+    assert_selector "[data-controller='ui--popover'][data-test-id='popover-x']"
+  end
+end

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

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::RadioGroup::ItemTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_render_without_group_context_returns_nothing
+    item = UI::RadioGroup::Item.new(value: "free", label: "Free")
+    render_inline(item)
+    refute page.text.present?
+  end
+end

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

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::RadioGroupTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_radiogroup_role
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free") { "Free" }
+    end
+    assert_selector "[role='radiogroup']"
+  end
+
+  def test_auto_generates_id
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free")
+    end
+    rg = page.find("[role='radiogroup']")
+    assert rg[:id].present?
+    assert rg[:id].start_with?("ui-rg-")
+  end
+
+  def test_user_class_passthrough
+    render_inline(UI::RadioGroup.new(name: "plan", class: "gap-4")) { "" }
+    classes = page.find("[role='radiogroup']")[:class].split
+    assert_includes classes, "gap-4"
+    assert_includes classes, "flex"
+    assert_includes classes, "flex-col"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::RadioGroup.new(name: "plan", data: { test_id: "rg-x" })) { "" }
+    assert_selector "[role='radiogroup'][data-test-id='rg-x']"
+  end
+
+  def test_renders_items
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free", label: "Free")
+      rg.with_item(value: "pro", label: "Pro")
+    end
+    inputs = page.all("input[type='radio']")
+    assert_equal 2, inputs.size
+  end
+
+  def test_items_share_same_name
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free")
+      rg.with_item(value: "pro")
+    end
+    inputs = page.all("input[type='radio']")
+    assert_equal "plan", inputs.first[:name]
+    assert_equal "plan", inputs.last[:name]
+  end
+
+  def test_checked_item_reflects_group_value
+    render_inline(UI::RadioGroup.new(name: "plan", value: "pro")) do |rg|
+      rg.with_item(value: "free", label: "Free")
+      rg.with_item(value: "pro", label: "Pro")
+    end
+    inputs = page.all("input[type='radio']")
+    refute inputs.first["checked"].present?
+    assert inputs.last["checked"].present?
+  end
+
+  def test_item_label_renders_with_for_id
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free", label: "Free plan")
+    end
+    label_el = page.find("label")
+    input_el = page.find("input[type='radio']")
+    assert_equal label_el["for"], input_el[:id]
+    assert_match(/Free plan/, label_el.text)
+  end
+
+  def test_item_without_label_no_label_element
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free")
+    end
+    refute_selector "label"
+  end
+
+  def test_disabled_group_disables_all_items
+    render_inline(UI::RadioGroup.new(name: "plan", disabled: true)) do |rg|
+      rg.with_item(value: "free", label: "Free")
+      rg.with_item(value: "pro", label: "Pro")
+    end
+    inputs = page.all("input[type='radio']")
+    inputs.each { |i| assert i.disabled? }
+  end
+
+  def test_required_group_sets_required_on_items
+    render_inline(UI::RadioGroup.new(name: "plan", required: true)) do |rg|
+      rg.with_item(value: "free", label: "Free")
+      rg.with_item(value: "pro", label: "Pro")
+    end
+    inputs = page.all("input[type='radio']")
+    inputs.each { |i| assert i["required"].present? }
+  end
+
+  def test_required_label_shows_asterisk
+    render_inline(UI::RadioGroup.new(name: "plan", required: true)) do |rg|
+      rg.with_item(value: "free", label: "Free")
+    end
+    label_el = page.find("label")
+    assert_match(/Free \*/, label_el.text)
+  end
+
+  def test_disabled_item_wrapper_dims
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free", label: "Free", disabled: true)
+    end
+    label_el = page.find("label")
+    classes = label_el[:class].split
+    assert_includes classes, "cursor-not-allowed"
+    assert_includes classes, "opacity-60"
+  end
+
+  def test_item_dot_appears_when_checked
+    render_inline(UI::RadioGroup.new(name: "plan", value: "pro")) do |rg|
+      rg.with_item(value: "pro", label: "Pro")
+    end
+    input = page.find("input[type='radio'][checked]")
+    dot = page.find("span.rounded-full.bg-primary-foreground", visible: :all)
+    classes = dot[:class].split
+    assert_includes classes, "bg-primary-foreground"
+  end
+
+  def test_item_box_has_rounded_full_and_checked_states
+    render_inline(UI::RadioGroup.new(name: "plan")) do |rg|
+      rg.with_item(value: "free")
+    end
+    classes = page.find("input[type='radio']")[:class].split
+    assert_includes classes, "rounded-full"
+    assert_includes classes, "peer"
+    assert_includes classes, "appearance-none"
+  end
+end