velvetkit 0.1.0.beta

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

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Dialog::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_dialog(trigger_args = {}, &block)
+    render_inline(UI::Dialog.new(id: "profile-dialog")) do |dlg|
+      dlg.with_trigger(**trigger_args) { "Open" }
+      dlg.with_content { |c| c.with_title("Hi"); block&.call(c) }
+    end
+  end
+
+  def test_default_renders_ui_button
+    render_dialog
+    btn = page.find("[data-ui--dialog-target='trigger']")
+    assert_equal "button", btn.tag_name
+    assert_equal "button", btn[:type]
+    assert_equal "Open",   btn.text.strip
+    classes = btn[:class].split
+    assert_includes classes, "bg-primary"
+    assert_includes classes, "h-9"
+  end
+
+  def test_variant_option_passed_to_button
+    render_dialog(variant: :outline)
+    btn = page.find("[data-ui--dialog-target='trigger']")
+    assert_includes btn[:class], "border-input"
+  end
+
+  def test_size_option_passed_to_button
+    render_dialog(size: :sm)
+    btn = page.find("[data-ui--dialog-target='trigger']")
+    assert_includes btn[:class].split, "h-8"
+  end
+
+  def test_as_renders_alternate_tag
+    render_dialog(as: :a, href: "#open")
+    el = page.find("[data-ui--dialog-target='trigger']")
+    assert_equal "a", el.tag_name
+    assert_equal "#open", el[:href]
+  end
+
+  def test_data_action_wires_open
+    render_dialog
+    action = page.find("[data-ui--dialog-target='trigger']")["data-action"]
+    assert_match(/click->ui--dialog#open/, action)
+  end
+
+  def test_aria_attributes_link_to_dialog
+    render_dialog
+    btn    = page.find("[data-ui--dialog-target='trigger']")
+    dialog = page.find("dialog", visible: :all)
+    assert_equal "dialog",        btn["aria-haspopup"]
+    assert_equal "false",         btn["aria-expanded"]
+    assert_equal dialog[:id],     btn["aria-controls"]
+    assert_equal "profile-dialog", dialog[:id]
+  end
+
+  def test_user_class_merge
+    render_dialog(class: "px-8")
+    classes = page.find("[data-ui--dialog-target='trigger']")[:class].split
+    assert_includes classes, "px-8"
+  end
+
+  def test_caller_data_action_is_preserved_alongside_open_action
+    render_dialog(data: { action: "mouseenter->something#hover" })
+    action = page.find("[data-ui--dialog-target='trigger']")["data-action"]
+    assert_match(/mouseenter->something#hover/, action)
+    assert_match(/click->ui--dialog#open/,      action)
+  end
+end

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::DialogTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_dialog(**opts)
+    render_inline(UI::Dialog.new(**opts)) do |dialog|
+      dialog.with_trigger { "Open dialog" }
+      dialog.with_content do |content|
+        content.with_title { "Edit profile" }
+        content.with_description { "Make changes to your profile here." }
+        "Dialog body"
+      end
+    end
+  end
+
+  def test_root_carries_controller
+    render_dialog
+    assert_selector "[data-controller~='ui--dialog']"
+  end
+
+  def test_dialog_element_has_generated_id
+    render_dialog
+    dialog = page.find("dialog", visible: :all)
+    assert dialog[:id].present?
+    assert dialog[:id].start_with?("ui-dialog-")
+  end
+
+  def test_trigger_and_content_render
+    result = render_dialog
+    assert_text "Open dialog"
+    assert result.to_html.include?("Dialog body")
+  end
+
+  def test_custom_id_lands_on_dialog_element
+    render_dialog(id: "profile-dialog")
+    assert_selector "dialog#profile-dialog", visible: :all
+  end
+
+  def test_user_class_merge
+    render_dialog(class: "my-dialog-root")
+    classes = page.find("[data-controller~='ui--dialog']")[:class].split
+    assert_includes classes, "my-dialog-root"
+    assert_includes classes, "contents"
+  end
+
+  def test_html_attrs_passthrough
+    render_dialog(data: { test_id: "dialog-x" })
+    assert_selector "[data-controller~='ui--dialog'][data-test-id='dialog-x']"
+  end
+end

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

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::DividerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_horizontal_hr_by_default
+    render_inline(UI::Divider.new)
+    hr = page.find("hr")
+    classes = hr[:class].split
+    assert_includes classes, "border-t"
+    assert_includes classes, "w-full"
+  end
+
+  def test_renders_vertical_orientation
+    render_inline(UI::Divider.new(orientation: :vertical))
+    hr = page.find("hr")
+    classes = hr[:class].split
+    assert_includes classes, "border-l"
+    assert_includes classes, "self-stretch"
+    assert_includes classes, "h-full"
+  end
+
+  def test_with_label_renders_wrapper_div
+    render_inline(UI::Divider.new(label: "OR"))
+    assert_selector "div.flex"
+    assert_selector "span", text: "OR"
+  end
+
+  def test_label_has_muted_foreground_color
+    render_inline(UI::Divider.new(label: "Section"))
+    span = page.find("span")
+    classes = span[:class].split
+    assert_includes classes, "text-muted-foreground"
+    assert_includes classes, "text-xs"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Divider.new(class: "my-4"))
+    hr = page.find("hr")
+    classes = hr[:class].split
+    assert_includes classes, "my-4"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Divider.new(data: { test_id: "divider-x" }))
+    assert_selector "hr[data-test-id='divider-x']"
+  end
+
+  def test_label_wrapper_includes_user_class
+    render_inline(UI::Divider.new(label: "OR", class: "gap-4"))
+    div = page.find("div")
+    classes = div[:class].split
+    assert_includes classes, "gap-4"
+    assert_includes classes, "flex"
+  end
+
+  def test_labelled_rules_share_the_row_instead_of_each_taking_it_all
+    render_inline(UI::Divider.new(label: "OR"))
+    rules = page.all("hr")
+    assert_equal 2, rules.size
+    rules.each do |rule|
+      assert_includes rule[:class].split, "flex-1"
+      refute_includes rule[:class].split, "w-full"
+    end
+  end
+end

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::IconTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_i_tag_with_lucide_data_attribute
+    render_inline UI::Icon.new(name: "menu")
+    icon = page.find("i", visible: :all)
+    assert_equal "menu", icon["data-lucide"]
+  end
+
+  def test_default_size_classes
+    render_inline UI::Icon.new(name: "menu")
+    icon = page.find("i", visible: :all)
+    classes = icon[:class].split
+    assert_includes classes, "w-5"
+    assert_includes classes, "h-5"
+  end
+
+  def test_size_xs
+    render_inline UI::Icon.new(name: "menu", size: :xs)
+    icon = page.find("i", visible: :all)
+    classes = icon[:class].split
+    assert_includes classes, "w-3"
+    assert_includes classes, "h-3"
+  end
+
+  def test_size_sm
+    render_inline UI::Icon.new(name: "menu", 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::Icon.new(name: "menu", 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::Icon.new(name: "menu", 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::Icon.new(name: "menu", class: "text-red-500")
+    classes = page.find("i", visible: :all)[:class].split
+    assert_includes classes, "text-red-500"
+    assert_includes classes, "w-5"
+  end
+
+  def test_renders_nothing_when_name_blank
+    render_inline UI::Icon.new(name: "")
+    assert_no_selector "i", visible: :all
+  end
+
+  def test_renders_nothing_when_name_nil
+    render_inline UI::Icon.new(name: nil)
+    assert_no_selector "i", visible: :all
+  end
+
+  def test_html_attrs_pass_through
+    render_inline UI::Icon.new(name: "menu", id: "header-menu", aria: { label: "Open menu" })
+    icon = page.find("i", visible: :all)
+    assert_equal "header-menu", icon[:id]
+    assert_equal "Open menu", icon["aria-label"]
+  end
+
+  def test_data_attributes_keep_the_icon_name
+    render_inline(UI::Icon.new(name: "copy", data: { clipboard_target: "idle" }))
+    icon = page.find("i", visible: :all)
+    assert_equal "copy", icon["data-lucide"]
+    assert_equal "idle", icon["data-clipboard-target"]
+  end
+end

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

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::ImageTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_img_with_asset_path
+    render_inline(UI::Image.new(src: "brand-logo.svg"))
+    assert_selector "img"
+    assert_match %r{/(assets/)?brand-logo}, page.find("img")[:src]
+  end
+
+  def test_default_rounded_and_base_classes
+    render_inline(UI::Image.new(src: "brand-logo.svg"))
+    classes = page.find("img")[:class].split
+    assert_includes classes, "rounded-sm"
+    assert_includes classes, "block"
+    assert_includes classes, "max-w-full"
+  end
+
+  def test_rounded_variant
+    render_inline(UI::Image.new(src: "brand-logo.svg", rounded: :lg))
+    classes = page.find("img")[:class].split
+    assert_includes classes, "rounded-lg"
+    refute_includes classes, "rounded-sm"
+  end
+
+  # Velvet sized the wrapper div instead of the image; these must land on <img>.
+  def test_width_and_height_apply_to_the_image
+    render_inline(UI::Image.new(src: "brand-logo.svg", width: "14px", height: "20px"))
+    style = page.find("img")[:style]
+    assert_includes style, "width: 14px"
+    assert_includes style, "height: 20px"
+  end
+
+  def test_numeric_dimensions_get_px_units
+    render_inline(UI::Image.new(src: "brand-logo.svg", width: 42))
+    assert_includes page.find("img")[:style], "width: 42px"
+  end
+
+  def test_omits_style_when_no_dimensions_given
+    render_inline(UI::Image.new(src: "brand-logo.svg"))
+    assert_nil page.find("img")[:style].presence
+  end
+
+  def test_alt_defaults_to_humanized_filename
+    render_inline(UI::Image.new(src: "brand-logo.png"))
+    assert_equal "Brand logo", page.find("img")[:alt]
+  end
+
+  def test_explicit_alt_wins
+    render_inline(UI::Image.new(src: "brand-logo.png", alt: "Brand logo"))
+    assert_equal "Brand logo", page.find("img")[:alt]
+  end
+
+  def test_lazy_loading_by_default
+    render_inline(UI::Image.new(src: "brand-logo.svg"))
+    assert_equal "lazy", page.find("img")[:loading]
+  end
+
+  def test_user_class_override_via_tailwind_merge
+    render_inline(UI::Image.new(src: "brand-logo.svg", rounded: :lg, class: "rounded-none"))
+    classes = page.find("img")[:class].split
+    assert_includes classes, "rounded-none"
+    refute_includes classes, "rounded-lg"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Image.new(src: "brand-logo.svg", id: "logo", data: { test_id: "img" }))
+    assert_selector "img#logo[data-test-id='img']"
+  end
+end

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

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::InputGroupTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  # ── Wrapper ──────────────────────────────────────────────────────────────────
+
+  def test_renders_wrapper_div_with_group_role
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "Search")
+    end
+    assert_selector "div[role='group'][data-slot='input-group']"
+  end
+
+  def test_wrapper_has_border_class
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "x")
+    end
+    wrapper = page.find("div[data-slot='input-group']")
+    assert_includes wrapper[:class], "border-input"
+  end
+
+  # ── Field slot ───────────────────────────────────────────────────────────────
+
+  def test_field_renders_input_inside_wrapper
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "Email")
+    end
+    assert_selector "div[data-slot='input-group'] input[placeholder='Email']"
+  end
+
+  def test_field_input_has_no_border
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "x")
+    end
+    inp = page.find("input")
+    classes = inp[:class].split
+    assert_includes classes, "border-0!"
+  end
+
+  def test_field_input_has_transparent_background
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "x")
+    end
+    inp = page.find("input")
+    assert_includes inp[:class], "bg-transparent"
+  end
+
+  def test_field_input_has_data_slot
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "x")
+    end
+    assert_selector "input[data-slot='input-group-control']"
+  end
+
+  def test_field_forwards_type
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(type: :email, placeholder: "Email")
+    end
+    assert_selector "input[type='email']"
+  end
+
+  def test_field_error_sets_aria_invalid
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(error: true, placeholder: "x")
+    end
+    assert_selector "input[aria-invalid='true']"
+  end
+
+  def test_field_error_adds_destructive_class_to_wrapper
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(error: true, placeholder: "x")
+    end
+    wrapper = page.find("div[data-slot='input-group']")
+    assert_includes wrapper[:class], "border-destructive"
+  end
+
+  def test_field_disabled_sets_disabled_on_input
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(disabled: true, placeholder: "x")
+    end
+    assert_selector "input[disabled]"
+  end
+
+  # ── Addon slot ───────────────────────────────────────────────────────────────
+
+  def test_addon_renders_with_data_slot
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_addon(align: "inline-start") { "@" }
+      g.with_field(placeholder: "x")
+    end
+    assert_selector "[data-slot='input-group-addon']"
+  end
+
+  def test_addon_inline_start_has_order_first
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_addon(align: "inline-start") { "pre" }
+      g.with_field(placeholder: "x")
+    end
+    addon = page.find("[data-slot='input-group-addon']")
+    assert_includes addon[:class], "order-first"
+  end
+
+  def test_addon_inline_end_has_order_last
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_field(placeholder: "x")
+      g.with_addon(align: "inline-end") { "post" }
+    end
+    addon = page.find("[data-slot='input-group-addon']")
+    assert_includes addon[:class], "order-last"
+  end
+
+  def test_addon_renders_icon_sub_slot
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_addon(align: "inline-start") do |addon|
+        addon.with_icon(name: "mail")
+      end
+      g.with_field(placeholder: "Email")
+    end
+    assert_selector "[data-slot='input-group-addon'] i[data-lucide='mail']"
+  end
+
+  def test_multiple_addons
+    render_inline(UI::InputGroup.new) do |g|
+      g.with_addon(align: "inline-start") { "$" }
+      g.with_addon(align: "inline-end") { ".00" }
+      g.with_field(placeholder: "Amount")
+    end
+    assert_equal 2, page.all("[data-slot='input-group-addon']").size
+  end
+
+  # ── html_attrs passthrough ───────────────────────────────────────────────────
+
+  def test_wrapper_html_attrs_pass_through
+    render_inline(UI::InputGroup.new(id: "my-group")) do |g|
+      g.with_field(placeholder: "x")
+    end
+    assert_selector "div#my-group[data-slot='input-group']"
+  end
+end