velvetkit 0.1.0.beta

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

@@ -0,0 +1,251 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::InputTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  # ── Default render ───────────────────────────────────────────────────────────
+
+  def test_renders_input_tag
+    render_inline(UI::Input.new)
+    assert_selector "input"
+    refute_selector "div"
+  end
+
+  def test_default_type_is_text
+    render_inline(UI::Input.new)
+    assert_selector "input[type='text']"
+  end
+
+  def test_default_size_classes_present
+    render_inline(UI::Input.new)
+    inp = page.find("input")
+    assert_includes inp[:class], "h-9"
+  end
+
+  def test_default_has_border_and_background
+    render_inline(UI::Input.new)
+    inp = page.find("input")
+    assert_includes inp[:class], "border-input"
+    assert_includes inp[:class], "bg-background"
+  end
+
+  # ── Type variants ────────────────────────────────────────────────────────────
+
+  def test_type_email
+    render_inline(UI::Input.new(type: :email))
+    assert_selector "input[type='email']"
+  end
+
+  def test_type_password
+    render_inline(UI::Input.new(type: :password))
+    assert_selector "input[type='password']"
+  end
+
+  def test_type_number
+    render_inline(UI::Input.new(type: :number))
+    assert_selector "input[type='number']"
+  end
+
+  def test_type_search
+    render_inline(UI::Input.new(type: :search))
+    assert_selector "input[type='search']"
+  end
+
+  # ── Size variants ────────────────────────────────────────────────────────────
+
+  def test_size_sm
+    render_inline(UI::Input.new(size: :sm))
+    inp = page.find("input")
+    classes = inp[:class].split
+    assert_includes classes, "h-8"
+    assert_includes classes, "text-xs"
+  end
+
+  def test_size_default
+    render_inline(UI::Input.new(size: :default))
+    assert_selector "input.h-9"
+  end
+
+  def test_size_lg
+    render_inline(UI::Input.new(size: :lg))
+    inp = page.find("input")
+    assert_includes inp[:class], "h-10"
+  end
+
+  # ── Error / invalid state ────────────────────────────────────────────────────
+
+  def test_error_state_sets_aria_invalid
+    render_inline(UI::Input.new(error: true, variant: :error))
+    assert_selector "input[aria-invalid='true']"
+  end
+
+  def test_error_state_adds_destructive_ring_class
+    render_inline(UI::Input.new(variant: :error))
+    inp = page.find("input")
+    assert_includes inp[:class], "border-destructive"
+  end
+
+  def test_no_error_does_not_set_aria_invalid
+    render_inline(UI::Input.new)
+    refute_selector "input[aria-invalid]"
+  end
+
+  # ── Disabled state ───────────────────────────────────────────────────────────
+
+  def test_disabled_sets_html_disabled
+    render_inline(UI::Input.new(disabled: true))
+    assert_selector "input[disabled]"
+  end
+
+  def test_disabled_adds_cursor_class
+    render_inline(UI::Input.new(disabled: true))
+    inp = page.find("input[disabled]")
+    assert_includes inp[:class], "disabled:cursor-not-allowed"
+  end
+
+  # ── Placeholder ──────────────────────────────────────────────────────────────
+
+  def test_placeholder_passes_through
+    render_inline(UI::Input.new(placeholder: "Enter email…"))
+    assert_selector "input[placeholder='Enter email…']"
+  end
+
+  # ── Name / id / value ────────────────────────────────────────────────────────
+
+  def test_name_and_id_pass_through
+    render_inline(UI::Input.new(name: "user[email]", id: "user_email"))
+    assert_selector "input#user_email[name='user[email]']"
+  end
+
+  def test_value_passes_through
+    render_inline(UI::Input.new(value: "hello@example.com"))
+    assert_selector "input[value='hello@example.com']"
+  end
+
+  # ── User-class merge ─────────────────────────────────────────────────────────
+
+  def test_user_class_merges_via_tailwind_merge
+    render_inline(UI::Input.new(class: "bg-red-100"))
+    inp = page.find("input")
+    classes = inp[:class].split
+    refute_includes classes, "bg-background"
+    assert_includes classes, "bg-red-100"
+  end
+
+  # ── Arbitrary html_attrs ─────────────────────────────────────────────────────
+
+  def test_html_attrs_pass_through
+    render_inline(UI::Input.new(id: "q", data: { test_id: "search" }))
+    assert_selector "input#q[data-test-id='search']"
+  end
+
+  def test_autocomplete_passes_through
+    render_inline(UI::Input.new(autocomplete: "email"))
+    assert_selector "input[autocomplete='email']"
+  end
+
+  # ── Label ────────────────────────────────────────────────────────────────────
+
+  def test_label_renders_label_element_as_sibling_of_input
+    render_inline(UI::Input.new(label: "Email"))
+    assert_selector "label", text: "Email"
+    # input must be a sibling, not a descendant
+    assert_selector "div > label + input"
+    refute_selector "label > input"
+  end
+
+  def test_label_for_attribute_links_to_input_id
+    render_inline(UI::Input.new(label: "Email"))
+    label = page.find("label")
+    input = page.find("input")
+    assert_equal input[:id], label[:for]
+    assert input[:id].to_s.start_with?("ui-input-")
+  end
+
+  def test_explicit_id_is_preserved_and_linked
+    render_inline(UI::Input.new(label: "Email", id: "user_email"))
+    assert_selector "label[for='user_email']"
+    assert_selector "input#user_email"
+  end
+
+  def test_label_with_size_variant
+    render_inline(UI::Input.new(label: "Email", label_size: :sm))
+    label = page.find("label")
+    assert_includes label[:class], "text-sm"
+  end
+
+  def test_required_label_shows_styled_asterisk_span
+    render_inline(UI::Input.new(label: "Email", required: true))
+    assert_selector "label", text: "Email *"
+    asterisk = page.find("label span.text-destructive")
+    assert_match(/\*/, asterisk.text)
+  end
+
+  def test_required_sets_html_required_on_input
+    render_inline(UI::Input.new(label: "Email", required: true))
+    assert_selector "input[required]"
+  end
+
+  def test_required_without_label_still_sets_html_required
+    render_inline(UI::Input.new(required: true))
+    assert_selector "input[required]"
+  end
+
+  def test_non_required_label_no_asterisk
+    render_inline(UI::Input.new(label: "Email"))
+    assert_selector "label", text: "Email"
+    refute_selector "label span.text-destructive"
+    refute_selector "input[required]"
+  end
+
+  def test_disabled_input_with_label_propagates_disabled_to_label
+    render_inline(UI::Input.new(label: "Email", disabled: true))
+    label = page.find("label")
+    assert_includes label[:class], "text-muted-foreground"
+  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::Input.new(form: form_builder_for(User.new), field: :email, type: :email))
+    assert_selector "input[name='user[email]'][type='email']"
+  end
+
+  def test_label_is_derived_from_the_attribute_name
+    render_inline(UI::Input.new(form: form_builder_for(User.new), field: :email, type: :email))
+    assert_selector "label", text: "Email"
+  end
+
+  def test_derived_label_is_associated_with_the_input
+    render_inline(UI::Input.new(form: form_builder_for(User.new), field: :email, type: :email))
+    assert_equal page.find("label")[:for], page.find("input")[:id]
+  end
+
+  def test_explicit_label_overrides_the_derived_one
+    render_inline(UI::Input.new(form: form_builder_for(User.new), field: :email, label: "Work email"))
+    assert_selector "label", text: "Work email"
+  end
+
+  def test_label_false_opts_out
+    render_inline(UI::Input.new(form: form_builder_for(User.new), field: :email, label: false))
+    assert_no_selector "label"
+  end
+
+  def test_no_label_without_a_form_binding
+    render_inline(UI::Input.new(name: "user[email]"))
+    assert_no_selector "label"
+  end
+end

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

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::LabelTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_default
+    render_inline(UI::Label.new) { "Email" }
+    assert_selector "label", text: "Email"
+  end
+
+  def test_renders_label_tag
+    render_inline(UI::Label.new) { "Name" }
+    assert_selector "label"
+    refute_selector "div"
+  end
+
+  def test_default_size_classes
+    render_inline(UI::Label.new) { "Label" }
+    lbl = page.find("label")
+    assert_includes lbl[:class], "text-sm"
+  end
+
+  def test_size_xs
+    render_inline(UI::Label.new(size: :xs)) { "Tiny" }
+    assert_selector "label.text-xs"
+  end
+
+  def test_size_sm
+    render_inline(UI::Label.new(size: :sm)) { "Small" }
+    assert_selector "label.text-sm"
+  end
+
+  def test_size_lg
+    render_inline(UI::Label.new(size: :lg)) { "Large" }
+    assert_selector "label.text-base"
+  end
+
+  def test_weight_normal
+    render_inline(UI::Label.new(weight: :normal)) { "Light" }
+    lbl = page.find("label")
+    assert_includes lbl[:class], "font-normal"
+  end
+
+  def test_weight_medium_is_default
+    render_inline(UI::Label.new) { "Default" }
+    lbl = page.find("label")
+    assert_includes lbl[:class], "font-medium"
+  end
+
+  def test_weight_semibold
+    render_inline(UI::Label.new(weight: :semibold)) { "Bold" }
+    lbl = page.find("label")
+    assert_includes lbl[:class], "font-semibold"
+  end
+
+  def test_for_attribute_passes_through
+    render_inline(UI::Label.new(for: "email_field")) { "Email" }
+    assert_selector "label[for='email_field']", text: "Email"
+  end
+
+  def test_required_appends_asterisk
+    render_inline(UI::Label.new(required: true)) { "Name" }
+    lbl = page.find("label")
+    assert_match(/Name/, lbl.text)
+    assert_selector "label span", text: "*"
+  end
+
+  def test_required_false_does_not_append_asterisk
+    render_inline(UI::Label.new(required: false)) { "Name" }
+    refute_selector "label span"
+  end
+
+  def test_disabled_applies_muted_class
+    render_inline(UI::Label.new(disabled: true)) { "Off" }
+    lbl = page.find("label")
+    classes = lbl[:class].split
+    assert_includes classes, "text-muted-foreground"
+    assert_includes classes, "cursor-not-allowed"
+  end
+
+  def test_user_class_overrides_default_via_tailwind_merge
+    render_inline(UI::Label.new(class: "text-lg")) { "Override" }
+    lbl = page.find("label")
+    classes = lbl[:class].split
+    refute_includes classes, "text-sm"
+    assert_includes classes, "text-lg"
+  end
+
+  def test_html_attrs_pass_through
+    render_inline(UI::Label.new(id: "my-label", data: { test_id: "lbl" })) { "Test" }
+    assert_selector "label#my-label[data-test-id='lbl']", text: "Test"
+  end
+end

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

@@ -0,0 +1,95 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::LinkTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_default_link_variant
+    render_inline(UI::Link.new(href: "/docs")) { "Learn more" }
+    link = page.find("a", text: "Learn more")
+    classes = link[:class].split
+    assert_equal "/docs", link[:href]
+    assert_includes classes, "text-primary"
+    assert_includes classes, "underline-offset-4"
+    refute_includes classes, "px-3"
+    refute_includes classes, "px-4"
+    refute_includes classes, "px-8"
+    refute_includes classes, "py-2"
+    refute_includes classes, "h-8"
+    refute_includes classes, "h-9"
+    refute_includes classes, "h-10"
+  end
+
+  def test_renders_button_style_default_variant
+    render_inline(UI::Link.new(href: "/signup", variant: :default, button_variant: true)) { "Sign up" }
+    link = page.find("a", text: "Sign up")
+    classes = link[:class].split
+    assert_includes classes, "bg-primary"
+    assert_includes classes, "text-primary-foreground"
+  end
+
+  def test_renders_outline_variant
+    render_inline(UI::Link.new(variant: :outline, button_variant: true)) { "Outline" }
+    link = page.find("a", text: "Outline")
+    classes = link[:class].split
+    assert_includes classes, "border"
+    assert_includes classes, "bg-background"
+  end
+
+  def test_renders_destructive_variant
+    render_inline(UI::Link.new(variant: :destructive, button_variant: true)) { "Delete" }
+    link = page.find("a", text: "Delete")
+    classes = link[:class].split
+    assert_includes classes, "bg-destructive"
+    assert_includes classes, "focus:ring-destructive"
+  end
+
+  def test_size_sm
+    render_inline(UI::Link.new(size: :sm, button_variant: true)) { "Small" }
+    classes = page.find("a", text: "Small")[:class].split
+    assert_includes classes, "h-8"
+    assert_includes classes, "text-xs"
+  end
+
+  def test_size_lg
+    render_inline(UI::Link.new(size: :lg, button_variant: true)) { "Large" }
+    classes = page.find("a", text: "Large")[:class].split
+    assert_includes classes, "h-10"
+    assert_includes classes, "px-8"
+  end
+
+  def test_user_class_overrides_default
+    render_inline(UI::Link.new(class: "bg-red-500", variant: :default, button_variant: true)) { "Custom" }
+    classes = page.find("a", text: "Custom")[:class].split
+    refute_includes classes, "bg-primary"
+    assert_includes classes, "bg-red-500"
+  end
+
+  def test_html_attrs_pass_through
+    render_inline(UI::Link.new(id: "docs-link", data: { test_id: "docs" }, target: "_blank")) { "Docs" }
+    assert_selector "a#docs-link[data-test-id='docs'][target='_blank']", text: "Docs"
+  end
+
+  def test_leading_icon_renders_before_content
+    render_inline(UI::Link.new(href: "/next")) do |link|
+      link.with_leading_icon(name: "arrow-right")
+      "Continue"
+    end
+
+    anchor = page.find("a", text: "Continue")
+    assert_equal "arrow-right", anchor.find("i", visible: :all)["data-lucide"]
+    assert_match(/<i[^>]*data-lucide="arrow-right".*Continue/m, anchor.native.to_html)
+  end
+
+  def test_trailing_icon_renders_after_content
+    render_inline(UI::Link.new(href: "/next")) do |link|
+      link.with_trailing_icon(name: "arrow-right")
+      "Continue"
+    end
+
+    anchor = page.find("a", text: "Continue")
+    assert_match(/Continue.*<i[^>]*data-lucide="arrow-right"/m, anchor.native.to_html)
+  end
+end

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

@@ -0,0 +1,233 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Menu::ContentTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Menu content")
+      end
+    end
+    assert result.to_html.include?("Menu content")
+  end
+
+  def test_has_role_menu
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    assert_selector "[role='menu']", visible: false
+  end
+
+  def test_has_vertical_orientation
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "vertical", content[:"aria-orientation"]
+  end
+
+  def test_is_initially_hidden
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert content[:hidden].present?
+  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
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "content", content[:"data-ui--menu-target"]
+  end
+
+  def test_default_side_bottom
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "bottom", content[:"data-side"]
+  end
+
+  def test_custom_side
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      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_align
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content(align: :end) do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert_equal "end", content[:"data-align"]
+  end
+
+  def test_has_animation_classes
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert content[:class].include?("animate-in")
+    assert content[:class].include?("fade-in-0")
+  end
+
+  def test_has_min_width
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert content[:class].include?("min-w-[8rem]")
+  end
+
+  def test_has_popover_styling
+    render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", 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::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content(class: "custom-content") do |content|
+        content.with_item("Item")
+      end
+    end
+    content = page.find("[role='menu']", visible: false)
+    assert_includes content[:class].split, "custom-content"
+  end
+
+  def test_collects_items
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_label("Account")
+        content.with_item("Profile")
+        content.with_item("Settings")
+        content.with_divider
+        content.with_item("Logout")
+      end
+    end
+
+    assert result.to_html.include?("Account")
+    assert result.to_html.include?("Profile")
+    assert result.to_html.include?("Settings")
+    assert result.to_html.include?("Logout")
+  end
+
+  def test_renders_separator
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item 1")
+        content.with_divider
+        content.with_item("Item 2")
+      end
+    end
+
+    assert_selector "[role='separator']", visible: false
+  end
+
+  def test_renders_label
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_label("My Label")
+        content.with_item("Item")
+      end
+    end
+
+    assert_text "My Label"
+    assert_selector "div", text: "My Label", visible: false
+  end
+
+  def test_item_as_link
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Profile", href: "/profile")
+      end
+    end
+
+    assert_selector "a[href='/profile']", text: "Profile", visible: false
+  end
+
+  def test_item_with_variant
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Delete", variant: :destructive)
+      end
+    end
+
+    item = page.find("[role='menuitem']", text: "Delete", visible: false)
+    assert_includes item[:class].split, "text-destructive"
+  end
+
+  def test_item_with_inset
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Item", inset: true)
+      end
+    end
+
+    item = page.find("[role='menuitem']", text: "Item", visible: false)
+    assert_includes item[:class].split, "pl-8"
+  end
+
+  def test_disabled_item
+    result = render_inline(UI::Menu.new) do |menu|
+      menu.with_trigger { "Trigger" }
+      menu.with_content do |content|
+        content.with_item("Disabled", disabled: true)
+      end
+    end
+
+    item = page.find("[role='menuitem']", text: "Disabled", visible: false)
+    assert_equal "true", item[:"data-disabled"]
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Menu::GroupTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    render_inline(UI::Menu::Group.new) { "Group content" }
+    assert_text "Group content"
+  end
+
+  def test_has_role_group
+    render_inline(UI::Menu::Group.new) { "Group" }
+    assert_selector "[role='group']"
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Menu::Group.new(class: "custom-group")) { "Group" }
+    group = page.find("[role='group']")
+    assert_includes group[:class].split, "custom-group"
+  end
+end