velvetkit 0.1.0.beta

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

@@ -0,0 +1,184 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::AlertTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_div_with_role_alert
+    render_inline(UI::Alert.new) { "Default alert" }
+    div = page.find("[role='alert']")
+    assert div.present?
+  end
+
+  def test_default_variant_classes
+    render_inline(UI::Alert.new) { "x" }
+    classes = page.find("[role='alert']")[:class].split
+    assert_includes classes, "bg-background"
+    assert_includes classes, "text-foreground"
+    assert_includes classes, "border-input"
+  end
+
+  def test_destructive_variant
+    render_inline(UI::Alert.new(variant: :destructive)) { "Error" }
+    classes = page.find("[role='alert']")[:class].split
+    assert_includes classes, "bg-destructive/10"
+    assert_includes classes, "text-destructive"
+    assert_includes classes, "border-destructive/30"
+  end
+
+  def test_warning_variant
+    render_inline(UI::Alert.new(variant: :warning)) { "Warn" }
+    classes = page.find("[role='alert']")[:class].split
+    assert_includes classes, "bg-amber-50"
+    assert_includes classes, "text-amber-800"
+    assert_includes classes, "border-amber-300"
+  end
+
+  def test_success_variant
+    render_inline(UI::Alert.new(variant: :success)) { "OK" }
+    classes = page.find("[role='alert']")[:class].split
+    assert_includes classes, "bg-emerald-50"
+    assert_includes classes, "text-emerald-800"
+    assert_includes classes, "border-emerald-300"
+  end
+
+  def test_info_variant
+    render_inline(UI::Alert.new(variant: :info)) { "Info" }
+    classes = page.find("[role='alert']")[:class].split
+    assert_includes classes, "bg-sky-50"
+    assert_includes classes, "text-sky-800"
+    assert_includes classes, "border-sky-300"
+  end
+
+  def test_default_variant_renders_default_icon_info
+    render_inline(UI::Alert.new) { "Default" }
+    icons = page.all("i", visible: :all)
+    assert_equal 1, icons.size
+    assert_equal "info", icons.first["data-lucide"]
+  end
+
+  def test_destructive_variant_renders_circle_alert_icon
+    render_inline(UI::Alert.new(variant: :destructive)) { "Error" }
+    icons = page.all("i", visible: :all)
+    assert_equal 1, icons.size
+    assert_equal "circle-alert", icons.first["data-lucide"]
+  end
+
+  def test_success_variant_renders_circle_check_icon
+    render_inline(UI::Alert.new(variant: :success)) { "Success" }
+    icons = page.all("i", visible: :all)
+    assert_equal 1, icons.size
+    assert_equal "circle-check", icons.first["data-lucide"]
+  end
+
+  def test_custom_icon_slot_overrides_default
+    render_inline(UI::Alert.new(variant: :default)) do |alert|
+      alert.with_icon(name: "badge-check")
+      "Custom icon"
+    end
+    icons = page.all("i", visible: :all)
+    assert_equal 1, icons.size
+    assert_equal "badge-check", icons.first["data-lucide"]
+  end
+
+  def test_title_slot_renders
+    render_inline(UI::Alert.new) do |alert|
+      alert.with_title { "Heads up" }
+    end
+    assert_selector "[role='alert'] h5", text: "Heads up"
+  end
+
+  def test_description_slot_renders
+    render_inline(UI::Alert.new) do |alert|
+      alert.with_description { "Description text" }
+    end
+    assert_selector "[role='alert'] div", text: "Description text"
+  end
+
+  def test_title_and_description_together
+    render_inline(UI::Alert.new) do |alert|
+      alert.with_title { "Title" }
+      alert.with_description { "Body" }
+    end
+    alert_el = page.find("[role='alert']")
+    assert_equal "TitleBody", alert_el.text.gsub(/\s+/, "")
+  end
+
+  def test_user_class_override_via_tailwind_merge
+    render_inline(UI::Alert.new(class: "bg-red-500")) { "Custom" }
+    classes = page.find("[role='alert']")[:class].split
+    refute_includes classes, "bg-background"
+    assert_includes classes, "bg-red-500"
+  end
+
+  def test_description_renders_html_content
+    render_inline(UI::Alert.new) do |alert|
+      alert.with_description { "Click <a href='/docs'>here</a> for details".html_safe }
+    end
+    assert_selector "[role='alert'] a[href='/docs']", text: "here"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Alert.new(id: "my-alert", data: { test_id: "alert-x" })) { "x" }
+    assert_selector "[role='alert']#my-alert[data-test-id='alert-x']"
+  end
+
+  def test_base_class_structure
+    render_inline(UI::Alert.new) { "x" }
+    classes = page.find("[role='alert']")[:class].split
+    assert_includes classes, "rounded-md"
+    assert_includes classes, "border"
+    assert_includes classes, "p-4"
+    # Layout switched from grid to flex (icon + content row).
+    assert_includes classes, "flex"
+    assert_includes classes, "items-start"
+  end
+
+  # Dismissible close button
+
+  def test_dismissible_false_does_not_render_close_button
+    render_inline(UI::Alert.new(dismissible: false)) { "Not dismissible" }
+    refute_selector "[role='alert'] button"
+  end
+
+  def test_dismissible_true_renders_close_button
+    render_inline(UI::Alert.new(dismissible: true)) { "Dismissible" }
+    assert_selector "[role='alert'] button[aria-label='Close alert']"
+  end
+
+  def test_close_button_renders_x_icon
+    render_inline(UI::Alert.new(dismissible: true)) { "Dismissible" }
+    icons = page.all("[role='alert'] button i")
+    assert_equal 1, icons.size
+    assert_equal "x", icons.first["data-lucide"]
+  end
+
+  def test_close_button_has_dismiss_action
+    render_inline(UI::Alert.new(dismissible: true)) { "Dismissible" }
+    button = page.find("[role='alert'] button")
+    assert_includes button["data-action"], "click->ui--alert#dismiss"
+  end
+
+  def test_close_button_is_positioned_at_top_right
+    render_inline(UI::Alert.new(dismissible: true)) { "Dismissible" }
+    button = page.find("[role='alert'] button")
+    classes = button[:class].split
+    assert_includes classes, "shrink-0"
+    assert_includes classes, "-mr-1"
+    assert_includes classes, "-mt-1"
+  end
+
+  def test_dismissible_alert_has_data_controller
+    render_inline(UI::Alert.new(dismissible: true)) { "Dismissible" }
+    alert = page.find("[role='alert']")
+    assert_equal "ui--alert", alert["data-controller"]
+  end
+
+  def test_non_dismissible_alert_has_no_data_controller
+    render_inline(UI::Alert.new(dismissible: false)) { "Not dismissible" }
+    alert = page.find("[role='alert']")
+    refute alert["data-controller"].present?
+  end
+end

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

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::AvatarGroupTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_list_container
+    render_inline(UI::AvatarGroup.new) do |group|
+      group.with_avatar { "A" }
+      group.with_avatar { "B" }
+    end
+    assert_selector "div[role='list']"
+  end
+
+  def test_avatars_have_listitem_role
+    render_inline(UI::AvatarGroup.new) do |group|
+      group.with_avatar { "A" }
+    end
+    assert_selector "[data-slot='avatar'][role='listitem']"
+  end
+
+  def test_renders_all_avatars
+    render_inline(UI::AvatarGroup.new) do |group|
+      group.with_avatar { "A" }
+      group.with_avatar { "B" }
+      group.with_avatar { "C" }
+    end
+    avatars = page.all("[data-slot='avatar']")
+    assert_equal 3, avatars.size
+  end
+
+  def test_overflow_has_aria_label
+    render_inline(UI::AvatarGroup.new(max: 2)) do |group|
+      group.with_avatar { "A" }
+      group.with_avatar { "B" }
+      group.with_avatar { "C" }
+      group.with_avatar { "D" }
+    end
+    overflow = page.find("span[aria-label]")
+    assert_equal "2 more users", overflow["aria-label"]
+  end
+
+  def test_overflow_visible_count
+    render_inline(UI::AvatarGroup.new(max: 2)) do |group|
+      group.with_avatar { "A" }
+      group.with_avatar { "B" }
+      group.with_avatar { "C" }
+      group.with_avatar { "D" }
+    end
+    avatars = page.all("[data-slot='avatar']")
+    assert_equal 2, avatars.size
+    assert_selector "span", text: "+2"
+  end
+
+  def test_no_overflow_when_within_max
+    render_inline(UI::AvatarGroup.new(max: 5)) do |group|
+      group.with_avatar { "A" }
+      group.with_avatar { "B" }
+    end
+    refute_selector "span[aria-label]"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::AvatarGroup.new(class: "my-group")) do |group|
+      group.with_avatar { "A" }
+    end
+    classes = page.find("div[role='list']")[:class].split
+    assert_includes classes, "my-group"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::AvatarGroup.new(data: { test_id: "grp" })) do |group|
+      group.with_avatar { "A" }
+    end
+    assert_selector "div[data-test-id='grp']"
+  end
+end

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

@@ -0,0 +1,129 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::AvatarTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def avatar_el
+    page.find("[data-slot='avatar']")
+  end
+
+  def test_renders_span
+    render_inline(UI::Avatar.new) { "JD" }
+    assert avatar_el.present?
+  end
+
+  def test_default_shape_is_circle
+    render_inline(UI::Avatar.new) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "rounded-full"
+  end
+
+  def test_rounded_shape
+    render_inline(UI::Avatar.new(shape: :rounded)) { "PJ" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "rounded-md"
+  end
+
+  def test_sm_size
+    render_inline(UI::Avatar.new(size: :sm)) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "h-6"
+    assert_includes classes, "w-6"
+  end
+
+  def test_default_size
+    render_inline(UI::Avatar.new) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "h-10"
+    assert_includes classes, "w-10"
+  end
+
+  def test_default_color
+    render_inline(UI::Avatar.new) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "bg-muted"
+    assert_includes classes, "text-foreground/70"
+  end
+
+  def test_primary_color
+    render_inline(UI::Avatar.new(color: :primary)) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "bg-primary"
+    assert_includes classes, "text-primary-foreground"
+  end
+
+  def test_destructive_color
+    render_inline(UI::Avatar.new(color: :destructive)) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "bg-destructive"
+    assert_includes classes, "text-white"
+  end
+
+  def test_amber_color
+    render_inline(UI::Avatar.new(color: :amber)) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "bg-amber-500"
+    assert_includes classes, "text-white"
+  end
+
+  def test_fallback_is_aria_hidden
+    render_inline(UI::Avatar.new) { "JD" }
+    fallback = avatar_el.find("span")
+    assert_equal "true", fallback["aria-hidden"]
+  end
+
+  def test_standalone_with_alt_gets_role_img
+    render_inline(UI::Avatar.new(alt: "John Doe")) { "JD" }
+    assert_equal "img", avatar_el[:role]
+    assert_equal "John Doe", avatar_el["aria-label"]
+  end
+
+  def test_standalone_without_alt_has_no_role
+    render_inline(UI::Avatar.new) { "JD" }
+    refute avatar_el[:role].present?
+  end
+
+  def test_image_slot
+    render_inline(UI::Avatar.new) do |avatar|
+      avatar.with_image(src: "https://example.com/avatar.jpg", alt: "Jane Doe")
+    end
+    assert_selector "[data-slot='avatar'] img[src='https://example.com/avatar.jpg'][alt='Jane Doe']"
+  end
+
+  def test_image_prevents_fallback
+    render_inline(UI::Avatar.new) do |avatar|
+      avatar.with_image(src: "https://example.com/avatar.jpg")
+    end
+    assert_selector "[data-slot='avatar'] img"
+    assert_equal 0, avatar_el.all("span").size
+  end
+
+  def test_fallback_slot_overrides_default
+    render_inline(UI::Avatar.new) do |avatar|
+      avatar.with_fallback { "FB" }
+    end
+    assert_selector "[data-slot='avatar'] > span", text: "FB"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Avatar.new(class: "border-2")) { "JD" }
+    classes = avatar_el[:class].split
+    assert_includes classes, "border-2"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Avatar.new(id: "my-avatar", data: { test_id: "av" })) { "JD" }
+    assert_selector "[data-slot='avatar']#my-avatar[data-test-id='av']"
+  end
+
+  # Fills the gap between sm (24px) and default (40px).
+  def test_size_md
+    render_inline(UI::Avatar.new(size: :md)) { "JD" }
+    classes = page.find("[data-slot='avatar']")[:class].split
+    assert_includes classes, "h-8"
+    assert_includes classes, "w-8"
+  end
+end

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

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::BadgeTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_span_with_default_classes
+    render_inline(UI::Badge.new) { "New" }
+    span = page.find("span")
+    classes = span[:class].split
+    assert_includes classes, "bg-primary"
+    assert_includes classes, "rounded-full"
+    assert_equal "New", span.text.strip
+  end
+
+  def test_outline_variant_has_border_and_no_bg
+    render_inline(UI::Badge.new(variant: :outline)) { "x" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "border-input"
+    refute_includes classes, "bg-primary"
+  end
+
+  def test_secondary_variant
+    render_inline(UI::Badge.new(variant: :secondary)) { "Secondary" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "bg-secondary"
+    assert_includes classes, "text-secondary-foreground"
+  end
+
+  def test_destructive_variant
+    render_inline(UI::Badge.new(variant: :destructive)) { "Error" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "bg-destructive"
+    assert_includes classes, "text-white"
+    refute_includes classes, "bg-primary"
+  end
+
+  def test_success_variant
+    render_inline(UI::Badge.new(variant: :success)) { "OK" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "bg-emerald-500"
+    assert_includes classes, "text-white"
+  end
+
+  def test_warning_variant
+    render_inline(UI::Badge.new(variant: :warning)) { "Warn" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "bg-amber-500"
+    assert_includes classes, "text-white"
+  end
+
+  def test_size_sm
+    render_inline(UI::Badge.new(size: :sm)) { "Tiny" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "h-5"
+    assert_includes classes, "px-1.5"
+    assert_includes classes, "text-[10px]"
+  end
+
+  def test_size_lg
+    render_inline(UI::Badge.new(size: :lg)) { "Large" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "h-7"
+    assert_includes classes, "px-2.5"
+    assert_includes classes, "text-sm"
+  end
+
+  def test_leading_icon_slot
+    render_inline(UI::Badge.new) do |badge|
+      badge.with_leading_icon(name: "badge-check")
+      "Verified"
+    end
+    span = page.find("span")
+    icon = span.find("i", visible: :all)
+    assert_equal "badge-check", icon["data-lucide"]
+    assert_match(/<i[^>]*data-lucide="badge-check".*Verified/m, span.native.to_html)
+  end
+
+  def test_user_class_override_via_tailwind_merge
+    render_inline(UI::Badge.new(class: "bg-red-500")) { "Custom" }
+    classes = page.find("span")[:class].split
+    refute_includes classes, "bg-primary"
+    assert_includes classes, "bg-red-500"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Badge.new(id: "my-badge", data: { test_id: "badge-x" })) { "x" }
+    assert_selector "span#my-badge[data-test-id='badge-x']"
+  end
+
+  def test_default_size_classes
+    render_inline(UI::Badge.new) { "Default" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "h-6"
+    assert_includes classes, "px-2"
+    assert_includes classes, "text-xs"
+  end
+
+  def test_base_class_structure
+    render_inline(UI::Badge.new) { "Base" }
+    classes = page.find("span")[:class].split
+    assert_includes classes, "inline-flex"
+    assert_includes classes, "rounded-full"
+    assert_includes classes, "font-medium"
+    assert_includes classes, "whitespace-nowrap"
+    assert_includes classes, "border"
+    assert_includes classes, "border-transparent"
+    assert_includes classes, "transition-colors"
+  end
+end

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

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::BannerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def banner_el
+    page.find("[data-slot='banner']")
+  end
+
+  def test_renders_container
+    render_inline(UI::Banner.new) { "Message" }
+    assert banner_el.present?
+  end
+
+  def test_default_variant_is_introduction
+    render_inline(UI::Banner.new) { "x" }
+    classes = banner_el[:class].split
+    assert_includes classes, "bg-primary/10"
+    assert_includes classes, "border-primary/20"
+  end
+
+  def test_promotion_variant
+    render_inline(UI::Banner.new(variant: :promotion)) { "x" }
+    classes = banner_el[:class].split
+    assert_includes classes, "bg-accent"
+    assert_includes classes, "border-accent-foreground/20"
+  end
+
+  def test_full_width
+    render_inline(UI::Banner.new(full_width: true)) { "x" }
+    classes = banner_el[:class].split
+    assert_includes classes, "w-full"
+  end
+
+  def test_not_full_width_by_default
+    render_inline(UI::Banner.new) { "x" }
+    classes = banner_el[:class].split
+    refute_includes classes, "w-full"
+  end
+
+  def test_renders_without_body_text
+    render_inline(UI::Banner.new) do |banner|
+      banner.with_title { "Just a title" }
+    end
+    assert_selector "[data-slot='banner'] h4", text: "Just a title"
+    refute_selector "[data-slot='banner'] p"
+  end
+
+  def test_renders_title_slot
+    render_inline(UI::Banner.new) do |banner|
+      banner.with_title { "Try new feature" }
+      "Description here."
+    end
+    assert_selector "h4", text: "Try new feature"
+    assert_selector "[data-slot='banner'] p", text: /Description here/
+  end
+
+  def test_renders_action_slot
+    render_inline(UI::Banner.new) do |banner|
+      banner.with_action { "Get started" }
+    end
+    assert_selector "[data-slot='banner'] div", text: "Get started"
+  end
+
+  def test_renders_illustration_slot
+    render_inline(UI::Banner.new) do |banner|
+      banner.with_illustration do
+        "<img src='test.svg' alt='' />".html_safe
+      end
+    end
+    assert_selector "[data-slot='banner'] img[src='test.svg']"
+  end
+
+  def test_renders_leading_icon_slot
+    render_inline(UI::Banner.new) do |banner|
+      banner.with_leading_icon(name: "info")
+    end
+    assert_selector "[data-slot='banner'] i[data-lucide='info']"
+  end
+
+  def test_dismiss_button_uses_button_component
+    render_inline(UI::Banner.new) { "Message" }
+    assert_selector "button[aria-label='Dismiss']"
+    assert_selector "button[aria-label='Dismiss'] i[data-lucide='x']"
+  end
+
+  def test_dismiss_button_wired_to_controller
+    render_inline(UI::Banner.new) { "x" }
+    dismiss = page.find("button[aria-label='Dismiss']")
+    assert_includes dismiss["data-action"], "ui--banner#dismiss"
+  end
+
+  def test_custom_dismiss_icon
+    render_inline(UI::Banner.new(dismiss_icon: "check")) { "x" }
+    assert_selector "button[aria-label='Dismiss'] i[data-lucide='check']"
+  end
+
+  def test_dismissible_false_hides_close
+    render_inline(UI::Banner.new(dismissible: false)) { "x" }
+    refute_selector "button[aria-label='Dismiss']"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Banner.new(class: "my-banner")) { "x" }
+    classes = banner_el[:class].split
+    assert_includes classes, "my-banner"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Banner.new(id: "my-id", data: { test_id: "b" })) { "x" }
+    assert_selector "[data-slot='banner']#my-id[data-test-id='b']"
+  end
+end