velvetkit 0.1.0.beta

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

@@ -0,0 +1,206 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::SwitchTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  # ── Input element ────────────────────────────────────────────────────────────
+
+  def test_renders_input_with_role_switch
+    render_inline(UI::Switch.new(name: "notify"))
+    input = page.find("input[type='checkbox']", visible: :all)
+    assert_equal "switch", input[:role]
+  end
+
+  def test_input_is_visually_hidden_via_sr_only
+    render_inline(UI::Switch.new(name: "notify"))
+    classes = page.find("input[type='checkbox']", visible: :all)[:class].split
+    assert_includes classes, "peer"
+    assert_includes classes, "sr-only"
+  end
+
+  def test_input_does_not_carry_track_classes
+    # Native browser tick painted whenever <input type=checkbox> stays in flow
+    # — we keep it sr-only so no track/visual classes belong on the input.
+    render_inline(UI::Switch.new(name: "notify"))
+    classes = page.find("input[type='checkbox']", visible: :all)[:class].split
+    refute_includes classes, "rounded-full"
+    refute_includes classes, "bg-input"
+    refute_includes classes, "appearance-none"
+  end
+
+  def test_checked_sets_checked_attribute
+    render_inline(UI::Switch.new(name: "notify", checked: true))
+    input = page.find("input[type='checkbox']", visible: :all)
+    assert input["checked"].present?
+  end
+
+  def test_value_defaults_to_one
+    render_inline(UI::Switch.new(name: "notify"))
+    assert_equal "1", page.find("input[type='checkbox']", visible: :all)[:value]
+  end
+
+  def test_custom_value
+    render_inline(UI::Switch.new(name: "notify", value: "on"))
+    assert_equal "on", page.find("input[type='checkbox']", visible: :all)[:value]
+  end
+
+  def test_disabled_sets_disabled_attribute
+    render_inline(UI::Switch.new(name: "notify", disabled: true))
+    input = page.find("input[type='checkbox'][disabled]", visible: :all)
+    assert input.disabled?
+  end
+
+  def test_required_sets_required_attribute
+    render_inline(UI::Switch.new(name: "notify", required: true))
+    assert_selector "input[type='checkbox'][required]", visible: :all
+  end
+
+  def test_data_attributes_passthrough
+    render_inline(UI::Switch.new(name: "notify", data: { test_id: "sw-x" }))
+    assert_selector "input[type='checkbox'][data-test-id='sw-x']", visible: :all
+  end
+
+  def test_auto_generated_id_when_label_present
+    render_inline(UI::Switch.new(name: "notify", label: "Notify"))
+    input = page.find("input[type='checkbox']", visible: :all)
+    assert input[:id].present?
+    assert input[:id].start_with?("ui-sw-")
+  end
+
+  # ── Track (sibling span) ─────────────────────────────────────────────────────
+
+  def test_track_span_uses_peer_checked_for_state
+    render_inline(UI::Switch.new(name: "notify"))
+    track = page.all("span", visible: :all).find { |s|
+      s[:class].to_s.include?("peer-checked:bg-primary")
+    }
+    assert track, "track span with peer-checked:bg-primary should exist"
+    classes = track[:class].split
+    assert_includes classes, "rounded-full"
+    assert_includes classes, "bg-input"
+    assert_includes classes, "peer-checked:bg-primary"
+  end
+
+  def test_track_span_has_focus_ring_via_peer_focus_visible
+    render_inline(UI::Switch.new(name: "notify"))
+    track = page.all("span", visible: :all).find { |s|
+      s[:class].to_s.include?("peer-focus:ring-2")
+    }
+    assert track, "track span with peer-focus:ring-2 should exist"
+    classes = track[:class].split
+    assert_includes classes, "peer-focus:ring-primary"
+    assert_includes classes, "peer-focus:ring-offset-1"
+  end
+
+  # ── Thumb ────────────────────────────────────────────────────────────────────
+
+  def test_thumb_span_present_with_default_translate_class
+    render_inline(UI::Switch.new(name: "notify"))
+    thumb = page.all("span", visible: :all).find { |s|
+      s[:class].to_s.include?("peer-checked:translate-x-")
+    }
+    assert thumb, "thumb span should exist"
+    classes = thumb[:class].split
+    assert_includes classes, "rounded-full"
+    assert_includes classes, "bg-white"
+    assert_includes classes, "peer-checked:translate-x-5"
+  end
+
+  # ── Sizes ────────────────────────────────────────────────────────────────────
+
+  def test_size_sm_renders_smaller_track_and_thumb
+    render_inline(UI::Switch.new(name: "notify", size: :sm))
+    spans = page.all("span", visible: :all)
+    root  = spans.find { |s| s[:class].to_s.include?("inline-flex shrink-0") }
+    assert_includes root[:class].split, "w-8"
+    assert_includes root[:class].split, "h-4"
+    thumb = spans.find { |s| s[:class].to_s.include?("peer-checked:translate-x-") }
+    assert_includes thumb[:class].split, "w-3"
+    assert_includes thumb[:class].split, "h-3"
+    assert_includes thumb[:class].split, "peer-checked:translate-x-4"
+  end
+
+  def test_size_lg_renders_larger_track_and_thumb
+    render_inline(UI::Switch.new(name: "notify", size: :lg))
+    spans = page.all("span", visible: :all)
+    root  = spans.find { |s| s[:class].to_s.include?("inline-flex shrink-0") }
+    assert_includes root[:class].split, "w-12"
+    assert_includes root[:class].split, "h-6"
+    thumb = spans.find { |s| s[:class].to_s.include?("peer-checked:translate-x-") }
+    assert_includes thumb[:class].split, "w-5"
+    assert_includes thumb[:class].split, "h-5"
+    assert_includes thumb[:class].split, "peer-checked:translate-x-6"
+  end
+
+  # ── Wrapper / label ──────────────────────────────────────────────────────────
+
+  def test_label_renders_label_element_with_for_id
+    render_inline(UI::Switch.new(name: "notify", label: "Enable notifications"))
+    label_el = page.find("label")
+    input_el = page.find("input[type='checkbox']", visible: :all)
+    assert_equal label_el["for"], input_el[:id]
+    assert_match(/Enable notifications/, label_el.text)
+  end
+
+  # The checkbox is visually hidden, so without a <label> around it a click on
+  # the track reaches nothing and the switch can't be flipped by mouse.
+  def test_without_visible_label_the_switch_is_still_a_clickable_label
+    render_inline(UI::Switch.new(name: "notify", aria: { label: "Notifications" }))
+    label_el = page.find("label")
+    assert label_el.has_css?("input[type='checkbox']", visible: :all)
+    assert_empty label_el.text.strip
+  end
+
+  # White in both themes: in dark mode the background token is near black,
+  # which made the knob vanish into the track.
+  def test_thumb_is_white_in_both_themes
+    render_inline(UI::Switch.new(name: "notify"))
+    thumb = page.all("span", visible: :all).find { |s| s[:class].to_s.include?("rounded-full") && s[:class].to_s.include?("shadow") }
+    assert_includes thumb[:class].split, "bg-white"
+  end
+
+  def test_disabled_wrapper_dims
+    render_inline(UI::Switch.new(name: "notify", disabled: true, label: "Notifications"))
+    classes = page.find("label")[:class].split
+    assert_includes classes, "cursor-not-allowed"
+    assert_includes classes, "opacity-60"
+  end
+
+  def test_required_label_shows_styled_asterisk
+    render_inline(UI::Switch.new(name: "notify", label: "Sub", required: true))
+    asterisk = page.find("label span.text-destructive")
+    assert_match(/\*/, asterisk.text)
+    classes = asterisk[:class].split
+    assert_includes classes, "text-destructive"
+    assert_includes classes, "ml-0.5"
+  end
+
+  def test_non_required_label_has_no_destructive_span
+    render_inline(UI::Switch.new(name: "notify", label: "Sub"))
+    refute_selector "label span.text-destructive"
+  end
+
+  def test_label_text_renders_as_span_with_typography
+    render_inline(UI::Switch.new(name: "notify", label: "Toggle"))
+    span = page.find("label").all("span").find { |s| s.text.strip.start_with?("Toggle") }
+    assert span, "label text span should exist"
+    classes = span[:class].split
+    assert_includes classes, "text-sm"
+    assert_includes classes, "leading-none"
+  end
+
+  # ── User-class merge ────────────────────────────────────────────────────────
+
+  def test_user_class_lands_on_track_not_input
+    render_inline(UI::Switch.new(name: "notify", class: "ring-orange-500"))
+    track = page.all("span", visible: :all).find { |s|
+      s[:class].to_s.include?("peer-checked:bg-primary")
+    }
+    assert_includes track[:class].split, "ring-orange-500"
+    input_classes = page.find("input[type='checkbox']", visible: :all)[:class].split
+    refute_includes input_classes, "ring-orange-500"
+  end
+end

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

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::TableTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_table
+    render_inline(UI::Table.new) do |table|
+      table.with_head do |head|
+        head.with_column { "Name" }
+        head.with_column(align: :end) { "Amount" }
+      end
+      table.with_row do |row|
+        row.with_cell { "Aditi Rao" }
+        row.with_cell(align: :end) { "12" }
+      end
+      table.with_row do |row|
+        row.with_cell { "Arjun Nair" }
+        row.with_cell(align: :end) { "13" }
+      end
+    end
+  end
+
+  def test_renders_a_semantic_table
+    render_table
+    assert_selector "table thead tr th", count: 2
+    assert_selector "table tbody tr", count: 2
+    assert_selector "table tbody tr:first-child td", text: "Aditi Rao"
+  end
+
+  # Screen readers announce a header cell differently from a data cell, so the
+  # distinction has to be real markup rather than styling.
+  def test_header_cells_are_th_with_a_scope
+    render_table
+    assert_equal "col", page.find("thead th", text: "Name")[:scope]
+  end
+
+  # A long table scrolls sideways on a phone rather than breaking the page.
+  def test_wraps_the_table_in_a_horizontal_scroll_container
+    render_table
+    assert_includes page.find("div", match: :first)[:class].split, "overflow-x-auto"
+  end
+
+  def test_alignment_applies_to_matching_head_and_body_cells
+    render_table
+    assert_includes page.find("thead th", text: "Amount")[:class].split, "text-right"
+    assert_includes page.find("tbody td", text: "12")[:class].split, "text-right"
+  end
+
+  def test_caption_is_rendered_when_given
+    render_inline(UI::Table.new(caption: "Invoices")) do |table|
+      table.with_row { |row| row.with_cell { "x" } }
+    end
+    assert_selector "table caption", text: "Invoices"
+  end
+
+  def test_no_caption_element_without_one
+    render_table
+    assert_no_selector "caption"
+  end
+
+  # An empty table should say so rather than render a bare header.
+  def test_empty_state_replaces_the_body_when_there_are_no_rows
+    render_inline(UI::Table.new) do |table|
+      table.with_head { |head| head.with_column { "Name" } }
+      table.with_empty_state { "No invoices yet" }
+    end
+    assert_text "No invoices yet"
+    assert_no_selector "tbody tr td", text: "Aditi"
+  end
+
+  def test_empty_state_is_ignored_once_rows_exist
+    render_inline(UI::Table.new) do |table|
+      table.with_head { |head| head.with_column { "Name" } }
+      table.with_empty_state { "No invoices yet" }
+      table.with_row { |row| row.with_cell { "Aditi Rao" } }
+    end
+    assert_no_text "No invoices yet"
+    assert_selector "tbody td", text: "Aditi Rao"
+  end
+
+  def test_rows_can_be_marked_selected
+    render_inline(UI::Table.new) do |table|
+      table.with_row(selected: true) { |row| row.with_cell { "Aditi" } }
+    end
+    assert_equal "true", page.find("tbody tr")[:"aria-selected"]
+  end
+
+  def test_user_class_overrides_default_via_tailwind_merge
+    render_inline(UI::Table.new(class: "text-base")) do |table|
+      table.with_row { |row| row.with_cell { "x" } }
+    end
+    classes = page.find("table")[:class].split
+    assert_includes classes, "text-base"
+    refute_includes classes, "text-sm"
+  end
+
+  def test_html_attrs_pass_through
+    render_inline(UI::Table.new(id: "invoices", data: { test_id: "t" })) do |table|
+      table.with_row { |row| row.with_cell { "x" } }
+    end
+    assert_selector "table#invoices[data-test-id='t']"
+  end
+end

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

@@ -0,0 +1,93 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Tabs::ContentTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_content(default_value: "a")
+    render_inline(UI::Tabs.new(default_value: default_value)) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") { "A" }
+        list.with_trigger(value: "b") { "B" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+      tabs.with_panel(value: "b") { "panel-b" }
+    end
+  end
+
+  def test_renders_tabpanel_role
+    render_content
+    assert_selector "[role='tabpanel']"
+  end
+
+  def test_aria_labelledby_matches_trigger_id
+    render_content
+    panel = page.find("[role='tabpanel'][data-value='a']")
+    trigger = page.find("[role='tab'][data-value='a']")
+    assert_equal trigger[:id], panel["aria-labelledby"]
+  end
+
+  def test_tabindex_zero
+    render_content
+    panel = page.find("[role='tabpanel']")
+    assert_equal "0", panel[:tabindex]
+  end
+
+  def test_data_state_active_when_active
+    render_content(default_value: "a")
+    panel = page.find("[role='tabpanel'][data-state='active']")
+    assert_equal "a", panel["data-value"]
+  end
+
+  def test_data_state_inactive_when_inactive
+    render_content(default_value: "a")
+    panel = page.find("[role='tabpanel'][data-state='inactive']", visible: :all)
+    assert_equal "b", panel["data-value"]
+  end
+
+  def test_data_ui_tabs_target_panel
+    render_content
+    panel = page.find("[role='tabpanel']")
+    assert_equal "panel", panel["data-ui--tabs-target"]
+  end
+
+  def test_hidden_when_inactive
+    render_content(default_value: "a")
+    panel = page.find("[role='tabpanel'][data-value='b']", visible: :all)
+    assert panel[:hidden].present?
+  end
+
+  def test_not_hidden_when_active
+    render_content(default_value: "a")
+    panel = page.find("[role='tabpanel'][data-value='a']")
+    refute panel[:hidden].present?
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Tabs.new(default_value: "a")) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") { "A" }
+      end
+      tabs.with_panel(value: "a", class: "my-panel") { "panel-a" }
+    end
+    classes = page.find("[role='tabpanel']")[:class].split
+    assert_includes classes, "my-panel"
+    assert_includes classes, "mt-2"
+  end
+
+  def test_auto_generated_panel_id
+    render_content
+    panel = page.find("[role='tabpanel']")
+    assert panel[:id].present?
+    assert panel[:id].start_with?("ui-panel-")
+  end
+
+  def test_panel_id_matches_trigger_aria_controls
+    render_content
+    panel = page.find("[role='tabpanel'][data-value='a']")
+    trigger = page.find("[role='tab'][data-value='a']")
+    assert_equal panel[:id], trigger["aria-controls"]
+  end
+end

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Tabs::ListTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_list(variant: :line)
+    render_inline(UI::Tabs.new(default_value: "a", variant: variant)) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") { "A" }
+        list.with_trigger(value: "b") { "B" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+      tabs.with_panel(value: "b") { "panel-b" }
+    end
+  end
+
+  def test_renders_tablist_role
+    render_list
+    assert_selector "[role='tablist']"
+  end
+
+  def test_line_variant_classes
+    render_list(variant: :line)
+    classes = page.find("[role='tablist']")[:class].split
+    assert_includes classes, "inline-flex"
+    assert_includes classes, "border-b"
+    assert_includes classes, "border-input"
+  end
+
+  def test_pill_variant_classes
+    render_list(variant: :pill)
+    classes = page.find("[role='tablist']")[:class].split
+    assert_includes classes, "bg-muted"
+    assert_includes classes, "p-1"
+    assert_includes classes, "rounded-md"
+  end
+
+  def test_solid_variant_classes
+    render_list(variant: :solid)
+    classes = page.find("[role='tablist']")[:class].split
+    assert_includes classes, "border"
+    assert_includes classes, "divide-x"
+    assert_includes classes, "bg-background"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Tabs.new(default_value: "a")) do |tabs|
+      tabs.with_list(class: "my-list-class") do |list|
+        list.with_trigger(value: "a") { "A" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+    end
+    classes = page.find("[role='tablist']")[:class].split
+    assert_includes classes, "my-list-class"
+  end
+
+  def test_triggers_rendered_inside_list
+    render_list
+    triggers = page.all("[role='tablist'] [role='tab']")
+    assert_equal 2, triggers.size
+  end
+end

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

@@ -0,0 +1,159 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Tabs::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_trigger(variant: :line, size: :default, disabled: false)
+    render_inline(UI::Tabs.new(default_value: "a", variant: variant, size: size)) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a", disabled: disabled) { "A" }
+        list.with_trigger(value: "b") { "B" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+      tabs.with_panel(value: "b") { "panel-b" }
+    end
+  end
+
+  def test_renders_button_with_role_tab
+    render_trigger
+    btn = page.find("[role='tab'][data-value='a']")
+    assert_equal "button", btn.tag_name
+    assert_equal "tab", btn[:role]
+  end
+
+  def test_type_button
+    render_trigger
+    btn = page.find("[role='tab'][data-value='a']")
+    assert_equal "button", btn[:type]
+  end
+
+  def test_aria_selected_true_when_active
+    render_trigger
+    active = page.find("[role='tab'][aria-selected='true']")
+    assert_equal "a", active["data-value"]
+  end
+
+  def test_aria_selected_false_when_inactive
+    render_trigger
+    inactive = page.find("[role='tab'][aria-selected='false']")
+    assert_equal "b", inactive["data-value"]
+  end
+
+  def test_aria_controls_matches_panel_id
+    render_trigger
+    trigger = page.find("[role='tab'][data-value='a']")
+    panel = page.find("[role='tabpanel'][data-value='a']")
+    assert_equal panel[:id], trigger["aria-controls"]
+  end
+
+  def test_tabindex_zero_when_active
+    render_trigger
+    active = page.find("[role='tab'][tabindex='0']")
+    assert_equal "a", active["data-value"]
+  end
+
+  def test_tabindex_minus_one_when_inactive
+    render_trigger
+    inactive = page.find("[role='tab'][tabindex='-1']")
+    assert_equal "b", inactive["data-value"]
+  end
+
+  def test_data_state_active_when_active
+    render_trigger
+    active = page.find("[role='tab'][data-state='active']")
+    assert_equal "a", active["data-value"]
+  end
+
+  def test_data_state_inactive_when_inactive
+    render_trigger
+    inactive = page.find("[role='tab'][data-state='inactive']")
+    assert_equal "b", inactive["data-value"]
+  end
+
+  def test_data_action_includes_click_and_keydown
+    render_trigger
+    btn = page.find("[role='tab'][data-value='a']")
+    assert_includes btn["data-action"], "click->ui--tabs#activate"
+    assert_includes btn["data-action"], "keydown->ui--tabs#keydown"
+  end
+
+  def test_data_ui_tabs_target_trigger
+    render_trigger
+    btn = page.find("[role='tab'][data-value='a']")
+    assert_equal "trigger", btn["data-ui--tabs-target"]
+  end
+
+  def test_disabled_sets_disabled_attribute
+    render_trigger(disabled: true)
+    btn = page.find("[role='tab'][disabled]")
+    assert btn.disabled?
+    assert_equal "a", btn["data-value"]
+  end
+
+  def test_leading_icon_slot
+    render_inline(UI::Tabs.new(default_value: "a")) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") do |trigger|
+          trigger.with_leading_icon(name: "user")
+          "Account"
+        end
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+    end
+    icon = page.find("[role='tab'][data-value='a'] i", visible: :all)
+    assert_equal "user", icon["data-lucide"]
+  end
+
+  def test_line_variant_size_sm
+    render_trigger(variant: :line, size: :sm)
+    btn = page.find("[role='tab'][data-value='a']")
+    classes = btn[:class].split
+    assert_includes classes, "h-8"
+    assert_includes classes, "text-xs"
+  end
+
+  def test_line_variant_size_lg
+    render_trigger(variant: :line, size: :lg)
+    btn = page.find("[role='tab'][data-value='a']")
+    classes = btn[:class].split
+    assert_includes classes, "h-11"
+    assert_includes classes, "text-base"
+  end
+
+  def test_pill_variant_size_default
+    render_trigger(variant: :pill, size: :default)
+    btn = page.find("[role='tab'][data-value='a']")
+    classes = btn[:class].split
+    assert_includes classes, "h-8"
+    assert_includes classes, "text-sm"
+  end
+
+  def test_solid_variant_size_default
+    render_trigger(variant: :solid, size: :default)
+    btn = page.find("[role='tab'][data-value='a']")
+    classes = btn[:class].split
+    assert_includes classes, "h-10"
+    assert_includes classes, "text-sm"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Tabs.new(default_value: "a")) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a", class: "my-trigger") { "A" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+    end
+    classes = page.find("[role='tab']")[:class].split
+    assert_includes classes, "my-trigger"
+  end
+
+  def test_auto_generated_id
+    render_trigger
+    btn = page.find("[role='tab'][data-value='a']")
+    assert btn[:id].present?
+    assert btn[:id].start_with?("ui-tab-")
+  end
+end