velvetkit 0.1.0.beta

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

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::BaseTest < ViewComponent::TestCase
+  # Component tests do not need DB fixtures. Test_helper applies `fixtures :all`
+  # globally; admin_users fixtures are pre-existing-broken (duplicate empty emails).
+  # Skip fixture setup for this test class.
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  class Probe < UI::Base
+    def call
+      tag.div(class: cn(*@parts)) { "x" }
+    end
+
+    def initialize(*parts)
+      @parts = parts
+    end
+  end
+
+  def test_cn_concatenates_string_classes
+    render_inline Probe.new("p-2", "rounded-md")
+    assert_selector "div.p-2.rounded-md"
+  end
+
+  def test_cn_drops_nil_and_blank_inputs
+    render_inline Probe.new("p-2", nil, "", "rounded-md")
+    assert_selector "div.p-2.rounded-md"
+  end
+
+  def test_cn_supports_conditional_hash
+    render_inline Probe.new("base", { "active-class" => true, "hidden-class" => false })
+    div = page.find("div")
+    assert_includes div[:class], "base"
+    assert_includes div[:class], "active-class"
+    refute_includes div[:class], "hidden-class"
+  end
+
+  def test_cn_resolves_tailwind_conflicts_user_wins
+    render_inline Probe.new("bg-primary text-primary-foreground", "bg-red-500")
+    div = page.find("div")
+    refute_includes div[:class], "bg-primary"
+    assert_includes div[:class], "bg-red-500"
+    assert_includes div[:class], "text-primary-foreground"
+  end
+
+  class VariantProbe < UI::Base
+    variants(
+      base: "btn",
+      variants: {
+        variant: { default: "bg-primary", outline: "border" },
+        size:    { sm: "h-8", lg: "h-10" }
+      },
+      defaults: { variant: :default, size: :sm },
+      compound: [
+        { when: { variant: :outline, size: :lg }, class: "border-2" }
+      ]
+    )
+
+    def initialize(variant: nil, size: nil)
+      @variant = variant
+      @size = size
+    end
+
+    def call
+      tag.button(class: variant_classes(variant: @variant, size: @size)) { "x" }
+    end
+  end
+
+  def test_variants_uses_defaults_when_no_props_passed
+    render_inline VariantProbe.new
+    btn = page.find("button")
+    assert_includes btn[:class], "btn"
+    assert_includes btn[:class], "bg-primary"
+    assert_includes btn[:class], "h-8"
+  end
+
+  def test_variants_overrides_defaults_with_passed_props
+    render_inline VariantProbe.new(variant: :outline, size: :lg)
+    btn = page.find("button")
+    assert_includes btn[:class], "border"
+    assert_includes btn[:class], "h-10"
+    refute_includes btn[:class], "bg-primary"
+  end
+
+  def test_variants_applies_compound_rule_when_all_conditions_match
+    render_inline VariantProbe.new(variant: :outline, size: :lg)
+    btn = page.find("button")
+    assert_includes btn[:class], "border-2"
+  end
+
+  def test_variants_skips_compound_rule_when_any_condition_misses
+    render_inline VariantProbe.new(variant: :outline, size: :sm)
+    btn = page.find("button")
+    refute_includes btn[:class], "border-2"
+  end
+end

data/registry/test/components/ui/breadcrumb/ellipsis_test.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Breadcrumb::EllipsisTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_li
+    render_inline(UI::Breadcrumb::Ellipsis.new)
+    assert_selector "li"
+  end
+
+  def test_renders_ellipsis_icon
+    render_inline(UI::Breadcrumb::Ellipsis.new)
+    assert_selector "li i[data-lucide='ellipsis']"
+  end
+
+  def test_static_ellipsis_is_fully_decorative
+    render_inline(UI::Breadcrumb::Ellipsis.new)
+    assert_selector "li > span[role='presentation']"
+    assert_selector "li > span[aria-hidden='true']"
+    refute_selector "li .sr-only"
+  end
+
+  def test_user_class_override
+    render_inline(UI::Breadcrumb::Ellipsis.new(class: "my-ellipsis"))
+    classes = page.find("li > span")[:class].split
+    assert_includes classes, "my-ellipsis"
+  end
+
+  def test_renders_popover_when_content_present
+    render_inline(UI::Breadcrumb::Ellipsis.new) do
+      "<a href=\"/docs\">Documentation</a>".html_safe
+    end
+    assert_selector "li button[aria-label='More breadcrumb pages']"
+    assert_selector "li i[data-lucide='ellipsis']"
+  end
+
+  def test_popover_content_includes_provided_html
+    render_inline(UI::Breadcrumb::Ellipsis.new) do
+      "<li>Docs</li><li>Components</li>".html_safe
+    end
+    assert_selector "li button[aria-label='More breadcrumb pages']"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Breadcrumb::Ellipsis.new(id: "my-ellipsis", data: { test_id: "ell" }))
+    assert_selector "li#my-ellipsis[data-test-id='ell']"
+  end
+end

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

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Breadcrumb::ItemTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_li
+    render_inline(UI::Breadcrumb::Item.new) { "Item" }
+    assert_selector "li", text: "Item"
+  end
+
+  def test_default_classes
+    render_inline(UI::Breadcrumb::Item.new) { "x" }
+    classes = page.find("li")[:class].split
+    assert_includes classes, "inline-flex"
+    assert_includes classes, "items-center"
+    assert_includes classes, "gap-1.5"
+  end
+
+  def test_user_class_override
+    render_inline(UI::Breadcrumb::Item.new(class: "my-item")) { "x" }
+    classes = page.find("li")[:class].split
+    assert_includes classes, "my-item"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Breadcrumb::Item.new(id: "my-item", data: { test_id: "item" })) { "x" }
+    assert_selector "li#my-item[data-test-id='item']"
+  end
+
+  def test_renders_with_link
+    render_inline(UI::Breadcrumb::Item.new) do
+      "<a href=\"/\">Home</a>".html_safe
+    end
+    assert_selector "li a[href='/']", text: "Home"
+  end
+end

data/registry/test/components/ui/breadcrumb/list_test.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Breadcrumb::ListTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_ol
+    render_inline(UI::Breadcrumb::List.new) { "Items" }
+    assert_selector "ol", text: "Items"
+  end
+
+  def test_default_classes
+    render_inline(UI::Breadcrumb::List.new) { "x" }
+    classes = page.find("ol")[:class].split
+    assert_includes classes, "flex"
+    assert_includes classes, "flex-wrap"
+    assert_includes classes, "items-center"
+    assert_includes classes, "gap-1.5"
+    assert_includes classes, "break-words"
+  end
+
+  def test_user_class_override
+    render_inline(UI::Breadcrumb::List.new(class: "my-list")) { "x" }
+    classes = page.find("ol")[:class].split
+    assert_includes classes, "my-list"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Breadcrumb::List.new(id: "my-list", data: { test_id: "list" })) { "x" }
+    assert_selector "ol#my-list[data-test-id='list']"
+  end
+end

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

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Breadcrumb::SeparatorTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_li_with_presentation_role
+    render_inline(UI::Breadcrumb::Separator.new)
+    assert_selector "li[role='presentation']"
+  end
+
+  def test_renders_slash
+    render_inline(UI::Breadcrumb::Separator.new)
+    assert_selector "li span", text: "/"
+  end
+
+  def test_span_is_aria_hidden
+    render_inline(UI::Breadcrumb::Separator.new)
+    span = page.find("li > span")
+    assert_equal "true", span["aria-hidden"]
+  end
+
+  def test_default_classes
+    render_inline(UI::Breadcrumb::Separator.new)
+    classes = page.find("li > span")[:class].split
+    assert_includes classes, "text-muted-foreground/70"
+  end
+
+  def test_user_class_override
+    render_inline(UI::Breadcrumb::Separator.new(class: "my-sep"))
+    classes = page.find("li > span")[:class].split
+    assert_includes classes, "my-sep"
+  end
+end

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

@@ -0,0 +1,276 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::BreadcrumbTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_breadcrumb(items, size: :sm, max_items: nil, collapse_at: :middle)
+    render_inline(UI::Breadcrumb.new(size: size, max_items: max_items, collapse_at: collapse_at)) do |breadcrumb|
+      items.each do |item|
+        breadcrumb.with_item(**item)
+      end
+    end
+  end
+
+  def long_items
+    [
+      { href: "/a", text: "A" },
+      { href: "/b", text: "B" },
+      { href: "/c", text: "C" },
+      { href: "/d", text: "D" },
+      { href: "/e", text: "E" },
+      { href: "/f", text: "F" }
+    ]
+  end
+
+  def simple_items
+    [
+      { href: "/groups", text: "Workspace" },
+      { href: "/groups/website", text: "Website" },
+      { href: "/issues", text: "Issues" }
+    ]
+  end
+
+  # Structure
+
+  def test_renders_nav_landmark
+    render_breadcrumb(simple_items)
+    nav = page.find("nav[aria-label='Breadcrumb']")
+    assert nav.present?
+  end
+
+  def test_renders_ordered_list
+    render_breadcrumb(simple_items)
+    assert_selector "nav ol"
+  end
+
+  def test_renders_all_items_as_links
+    render_breadcrumb(simple_items)
+    links = page.all("nav ol li a")
+    assert_equal 3, links.size
+  end
+
+  def test_each_item_is_a_link
+    render_breadcrumb(simple_items)
+    links = page.all("nav ol a")
+    assert_equal 3, links.size
+    assert_equal "Workspace", links[0].text.strip
+    assert_equal "Website", links[1].text.strip
+  end
+
+  def test_links_have_href
+    render_breadcrumb(simple_items)
+    links = page.all("nav ol a")
+    assert_equal "/groups", links[0][:href]
+    assert_equal "/groups/website", links[1][:href]
+    assert_equal "/issues", links[2][:href]
+  end
+
+  def test_single_item_no_separator
+    render_breadcrumb([ { href: "/", text: "Home" } ])
+    refute_selector "span[aria-hidden='true']"
+  end
+
+  # Separators
+
+  def test_separator_between_items
+    render_breadcrumb(simple_items)
+    separators = page.all("span[aria-hidden='true']")
+    assert_equal 2, separators.size
+  end
+
+  def test_separator_is_slash
+    render_breadcrumb(simple_items)
+    sep = page.all("span[aria-hidden='true']").first
+    assert_includes sep.text, "/"
+  end
+
+  def test_separator_is_aria_hidden
+    render_breadcrumb(simple_items)
+    sep = page.all("span[aria-hidden='true']").first
+    assert_equal "true", sep["aria-hidden"]
+  end
+
+  # aria-current
+
+  def test_last_item_has_aria_current_page
+    render_breadcrumb(simple_items)
+    last_link = page.all("nav ol a").last
+    assert_equal "page", last_link["aria-current"]
+  end
+
+  def test_non_last_items_do_not_have_aria_current
+    render_breadcrumb(simple_items)
+    first_link = page.all("nav ol a").first
+    refute first_link["aria-current"].present?
+  end
+
+  # Sizes
+
+  def test_sm_is_default
+    render_breadcrumb(simple_items)
+    classes = page.find("nav")[:class].split
+    assert_includes classes, "text-xs"
+  end
+
+  def test_md_size
+    render_breadcrumb(simple_items, size: :md)
+    classes = page.find("nav")[:class].split
+    assert_includes classes, "text-sm"
+  end
+
+  # Avatar
+
+  def test_item_with_avatar
+    items = [
+      { href: "/groups/website", text: "Website", avatar_src: "/avatar.png" },
+      { href: "/issues", text: "Issues" }
+    ]
+    render_breadcrumb(items)
+    assert_selector "nav ol img[src='/avatar.png']"
+  end
+
+  # Truncation
+
+  def test_non_last_items_truncated
+    render_breadcrumb(simple_items)
+    first_link = page.all("nav ol a").first
+    classes = first_link[:class].split
+    assert_includes classes, "max-w-32"
+    assert_includes classes, "truncate"
+  end
+
+  def test_last_item_not_truncated
+    render_breadcrumb(simple_items)
+    last_link = page.all("nav ol a").last
+    classes = last_link[:class].split
+    refute_includes classes, "max-w-32"
+  end
+
+  # Data attributes for Stimulus decoupling
+
+  def test_items_have_breadcrumb_data_attrs
+    render_breadcrumb(simple_items)
+    first_li = page.all("nav ol li").first
+    assert_equal "/groups", first_li["data-breadcrumb-href"]
+    assert_equal "Workspace", first_li["data-breadcrumb-text"]
+  end
+
+  def test_last_item_has_data_last_attribute
+    render_breadcrumb(simple_items)
+    last_li = page.all("nav ol li").last
+    assert_equal "true", last_li["data-last"]
+  end
+
+  def test_non_last_items_do_not_have_data_last
+    render_breadcrumb(simple_items)
+    first_li = page.all("nav ol li").first
+    refute first_li["data-last"].present?
+  end
+
+  # Separator icon customization
+
+  def test_custom_separator_icon
+    skip "separator_icon option changes slash character — tested manually in previews"
+  end
+
+  # User class merge
+
+  def test_user_class_merge
+    render_inline(UI::Breadcrumb.new(class: "my-nav")) do |breadcrumb|
+      breadcrumb.with_item(href: "/", text: "Home")
+    end
+    classes = page.find("nav")[:class].split
+    assert_includes classes, "my-nav"
+  end
+
+  # HTML attrs passthrough
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Breadcrumb.new(data: { test_id: "bc" })) do |breadcrumb|
+      breadcrumb.with_item(href: "/", text: "Home")
+    end
+    assert_selector "nav[data-test-id='bc']"
+  end
+
+  # Auto-ellipsis — collapse_at: :middle (default)
+
+  def test_middle_collapse_shows_first_and_last
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :middle)
+    links = page.all("nav ol a")
+    texts = links.map { |a| a.text.strip }
+    # budget=2, head=1, tail=1 → A + E + F
+    assert_equal [ "A", "E", "F" ], texts
+  end
+
+  def test_middle_collapse_renders_auto_ellipsis
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :middle)
+    assert_selector "nav ol button[aria-label='More breadcrumb pages']"
+  end
+
+  def test_middle_collapse_hidden_items_in_dropdown
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :middle)
+    html = page.native.inner_html
+    # Hidden items (C, D, E) should be inside the collapsed popover list
+    assert_includes html, "Collapsed breadcrumb pages"
+    assert_includes html, 'href="/c"'
+    assert_includes html, 'href="/d"'
+    assert_includes html, 'href="/e"'
+  end
+
+  def test_middle_collapse_has_separators_around_ellipsis
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :middle)
+    separators = page.all("nav ol span[aria-hidden='true']")
+    # A > B > ... > F  →  3 separators
+    assert_equal 3, separators.size
+  end
+
+  def test_middle_collapse_renders_auto_ellipsis
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :middle)
+    assert_selector "nav ol button[aria-label='More breadcrumb pages']"
+  end
+
+  # Auto-ellipsis — collapse_at: :start
+
+  def test_start_collapse_shows_last_items
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :start)
+    links = page.all("nav ol a")
+    texts = links.map { |a| a.text.strip }
+    assert_equal [ "D", "E", "F" ], texts
+  end
+
+  def test_start_collapse_renders_auto_ellipsis_first
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :start)
+    # Ellipsis should be the first element after the first separator
+    first_button = page.all("nav ol button").first
+    assert_equal "More breadcrumb pages", first_button["aria-label"]
+  end
+
+  # Auto-ellipsis — collapse_at: :end
+
+  def test_end_collapse_shows_first_items
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :end)
+    links = page.all("nav ol a")
+    texts = links.map { |a| a.text.strip }
+    # budget=2 prefix + current → A, B + F
+    assert_equal [ "A", "B", "F" ], texts
+  end
+
+  def test_end_collapse_renders_auto_ellipsis_last
+    render_breadcrumb(long_items, max_items: 3, collapse_at: :end)
+    buttons = page.all("nav ol button")
+    assert_equal 1, buttons.size
+    assert_equal "More breadcrumb pages", buttons.last["aria-label"]
+  end
+
+  # Auto-ellipsis — no truncation needed
+
+  def test_no_truncation_when_items_within_max
+    render_breadcrumb(simple_items, max_items: 5, collapse_at: :middle)
+    links = page.all("nav ol a")
+    assert_equal 3, links.size
+    refute_selector "nav ol button"
+  end
+end