velvetkit 0.1.0.beta

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::TabsTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_tabs(default_value: "a", variant: :line)
+    render_inline(UI::Tabs.new(default_value: default_value, 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_root_carries_controller
+    render_tabs
+    root = page.find("[data-controller~='ui--tabs']")
+    assert_equal "a", root["data-ui--tabs-active-value"]
+  end
+
+  def test_default_value_selects_active_tab
+    render_tabs(default_value: "b")
+    root = page.find("[data-controller~='ui--tabs']")
+    assert_equal "b", root["data-ui--tabs-active-value"]
+  end
+
+  def test_inactive_panel_is_hidden
+    render_tabs(default_value: "a")
+    assert_selector "[role='tabpanel'][data-value='b'][hidden]", visible: :all
+    assert_no_selector "[role='tabpanel'][data-value='a'][hidden]", visible: :all
+  end
+
+  def test_active_panel_not_hidden
+    render_tabs(default_value: "a")
+    panel = page.find("[role='tabpanel'][data-value='a']")
+    refute panel[:hidden].present?
+  end
+
+  def test_root_has_auto_generated_id
+    render_tabs
+    root = page.find("[data-controller~='ui--tabs']")
+    assert root[:id].present?
+    assert root[:id].start_with?("ui-tabs-")
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Tabs.new(default_value: "a", id: "my-tabs")) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") { "A" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+    end
+    assert_selector "[data-controller~='ui--tabs']#my-tabs"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Tabs.new(default_value: "a", class: "my-custom-class")) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") { "A" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+    end
+    classes = page.find("[data-controller~='ui--tabs']")[:class].split
+    assert_includes classes, "my-custom-class"
+    assert_includes classes, "w-full"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Tabs.new(default_value: "a", data: { test_id: "tabs-x" })) do |tabs|
+      tabs.with_list do |list|
+        list.with_trigger(value: "a") { "A" }
+      end
+      tabs.with_panel(value: "a") { "panel-a" }
+    end
+    assert_selector "[data-controller~='ui--tabs'][data-test-id='tabs-x']"
+  end
+
+  def test_panels_rendered_at_root_level
+    render_tabs
+    panels = page.all("[role='tabpanel']", visible: :all)
+    assert_equal 2, panels.size
+  end
+end

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

@@ -0,0 +1,84 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::TextTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_paragraph_by_default
+    render_inline(UI::Text.new) { "Hello world" }
+    assert_selector "p", text: "Hello world"
+  end
+
+  def test_renders_as_span
+    render_inline(UI::Text.new(as: :span)) { "Inline text" }
+    assert_selector "span", text: "Inline text"
+  end
+
+  def test_renders_as_div
+    render_inline(UI::Text.new(as: :div)) { "Block text" }
+    assert_selector "div", text: "Block text"
+  end
+
+  def test_default_classes
+    render_inline(UI::Text.new) { "x" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "text-base"
+    assert_includes classes, "font-normal"
+    assert_includes classes, "text-foreground"
+    # Note: leading-normal is in base but tailwind_merge may remove it
+  end
+
+  def test_size_variants
+    render_inline(UI::Text.new(size: :sm)) { "Small" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "text-sm"
+    refute_includes classes, "text-base"
+  end
+
+  def test_weight_variants
+    render_inline(UI::Text.new(weight: :bold)) { "Bold" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "font-bold"
+    refute_includes classes, "font-normal"
+  end
+
+  def test_tone_variants
+    render_inline(UI::Text.new(tone: :muted)) { "Muted" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "text-muted-foreground"
+    refute_includes classes, "text-foreground"
+  end
+
+  def test_destructive_tone
+    render_inline(UI::Text.new(tone: :destructive)) { "Error" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "text-destructive"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Text.new(class: "text-center")) { "Centered" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "text-center"
+  end
+
+  def test_user_class_overrides_defaults
+    render_inline(UI::Text.new(class: "font-light")) { "Light" }
+    classes = page.find("p")[:class].split
+    refute_includes classes, "font-normal"
+    assert_includes classes, "font-light"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Text.new(id: "my-text", data: { test: "x" })) { "y" }
+    assert_selector "p#my-text[data-test='x']"
+  end
+
+  def test_large_heading_size
+    render_inline(UI::Text.new(size: :"4xl", weight: :bold)) { "Hero" }
+    classes = page.find("p")[:class].split
+    assert_includes classes, "text-4xl"
+    assert_includes classes, "font-bold"
+  end
+end

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::ThemeToggleTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_wires_the_theme_controller
+    render_inline(UI::ThemeToggle.new)
+    assert_selector "[data-controller='ui--theme']"
+  end
+
+  def test_trigger_has_an_accessible_name
+    render_inline(UI::ThemeToggle.new)
+    assert_equal "Change theme", page.find("button[aria-haspopup]")[:"aria-label"]
+  end
+
+  def test_custom_label
+    render_inline(UI::ThemeToggle.new(label: "Appearance"))
+    assert_equal "Appearance", page.find("button[aria-haspopup]")[:"aria-label"]
+  end
+
+  def test_offers_all_three_preferences
+    render_inline(UI::ThemeToggle.new)
+    themes = page.all("[data-ui--theme-target='option']", visible: :all).map { |o| o[:"data-theme"] }
+    assert_equal %w[light dark system], themes
+  end
+
+  def test_options_wire_the_select_action
+    render_inline(UI::ThemeToggle.new)
+    page.all("[data-ui--theme-target='option']", visible: :all).each do |option|
+      assert_includes option[:"data-action"], "ui--theme#select"
+    end
+  end
+
+  # aria-checked is only valid on a radio/checkbox role, so the options must
+  # not fall back to UI::Menu::Item's default role="menuitem".
+  def test_options_use_the_radio_role_for_aria_checked
+    render_inline(UI::ThemeToggle.new)
+    options = page.all("[data-ui--theme-target='option']", visible: :all)
+    assert_equal 3, options.size
+    options.each do |option|
+      assert_equal "menuitemradio", option[:role]
+      assert_equal "false", option[:"aria-checked"]
+    end
+  end
+
+  # lucide swaps each <i data-lucide> for an <svg> on first render, so the
+  # element is gone afterwards and the icon cannot be changed by attribute.
+  # All three are rendered and shown by the preference on <html data-theme>:
+  # the sun for light, which is the default (and before any script runs).
+  def test_trigger_icon_follows_the_preference_with_light_by_default
+    render_inline(UI::ThemeToggle.new)
+    trigger = page.find("button[aria-haspopup]")
+    icon = ->(name) { trigger.find("i[data-lucide='#{name}']", visible: :all)[:class].split }
+    sun = icon.("sun")
+    assert_includes sun, "block"
+    assert_includes sun, "in-data-[theme=dark]:hidden"
+    assert_includes sun, "in-data-[theme=system]:hidden"
+    assert_includes icon.("moon"), "in-data-[theme=dark]:block"
+    assert_includes icon.("monitor"), "in-data-[theme=system]:block"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::ThemeToggle.new(id: "theme", data: { test_id: "tt" }))
+    assert_selector "#theme[data-test-id='tt']"
+  end
+
+  # The checked option needs a persistent background, not just a focus ring —
+  # otherwise nothing shows which theme is active once focus moves.
+  def test_options_carry_the_checked_state_styling
+    render_inline(UI::ThemeToggle.new)
+    option = page.all("[data-ui--theme-target='option']", visible: :all).first
+    classes = option[:class].split
+    assert_includes classes, "aria-checked:bg-accent"
+    assert_includes classes, "aria-checked:font-medium"
+  end
+
+  def test_each_option_has_a_check_indicator_shown_only_when_checked
+    render_inline(UI::ThemeToggle.new)
+    page.all("[data-ui--theme-target='option']", visible: :all).each do |option|
+      check = option.find("i[data-lucide='check']", visible: :all)
+      assert_includes check[:class].split, "hidden"
+      assert_includes check[:class].split, "group-aria-checked:block"
+    end
+  end
+end

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

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Tooltip::ContentTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    result = render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Tooltip content" }
+    end
+    # Tooltip content is hidden by default, check it's in the HTML
+    assert result.to_html.include?("Tooltip content")
+  end
+
+  def test_has_role_tooltip
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    assert_selector "[role='tooltip']", visible: false
+  end
+
+  def test_is_initially_hidden
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert content[:hidden].present?
+  end
+
+  def test_has_data_target
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "content", content[:"data-ui--tooltip-target"]
+  end
+
+  def test_default_side_top
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "top", content[:"data-side"]
+  end
+
+  def test_custom_side
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content(side: :right) { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "right", content[:"data-side"]
+  end
+
+  def test_custom_align
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content(align: :end) { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "end", content[:"data-align"]
+  end
+
+  def test_has_animation_classes
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert content[:class].include?("animate-in")
+    assert content[:class].include?("fade-in-0")
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content(class: "custom-content") { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert_includes content[:class].split, "custom-content"
+  end
+
+  # Both tokens invert together, so the tooltip stays readable in either theme.
+  # A pinned near-white (text-slate-50) sat on a near-white bg-foreground in
+  # dark mode and was unreadable.
+  def test_uses_inverted_surface_tokens
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    classes = content[:class].split
+    assert_includes classes, "bg-foreground"
+    assert_includes classes, "text-background"
+    refute_includes classes, "text-slate-50"
+  end
+
+  def test_does_not_clip_overflow
+    # Floating UI positions the arrow partially outside the content box
+    # via negative staticSide offset; overflow-hidden would clip it.
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    classes = page.find("[role='tooltip']", visible: false)[:class].split
+    refute_includes classes, "overflow-hidden"
+  end
+
+  def test_has_arrow_element
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    assert_selector "[data-ui--tooltip-target='arrow']", visible: false
+  end
+
+  def test_arrow_has_matching_background_and_rotation
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    arrow = page.find("[data-ui--tooltip-target='arrow']", visible: false)
+    classes = arrow[:class].split
+    assert_includes classes, "bg-foreground"
+    assert_includes classes, "rotate-45"
+    assert_includes classes, "absolute"
+  end
+end

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

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Tooltip::TriggerTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_content
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger text" }
+      tooltip.with_content { "Content" }
+    end
+    assert_text "Trigger text"
+  end
+
+  def test_has_aria_describedby
+    render_inline(UI::Tooltip.new(id: "test-id")) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    trigger = page.find("[data-ui--tooltip-target='trigger']")
+    assert_equal "ui-tooltip-content-test-id", trigger[:"aria-describedby"]
+  end
+
+  def test_has_data_target
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    assert_selector "[data-ui--tooltip-target='trigger']"
+  end
+
+  def test_has_interaction_actions
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    trigger = page.find("[data-ui--tooltip-target='trigger']")
+    assert trigger[:"data-action"].include?("mouseenter->ui--tooltip#show")
+    assert trigger[:"data-action"].include?("mouseleave->ui--tooltip#hide")
+  end
+
+  def test_custom_class_merge
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger(class: "custom-trigger") { "Trigger" }
+      tooltip.with_content { "Content" }
+    end
+    trigger = page.find("[data-ui--tooltip-target='trigger']")
+    assert_includes trigger[:class].split, "custom-trigger"
+  end
+end

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

@@ -0,0 +1,97 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::TooltipTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def render_tooltip
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Hover me" }
+      tooltip.with_content { "Tooltip text" }
+    end
+  end
+
+  def test_root_renders_trigger_and_content
+    result = render_tooltip
+    assert_text "Hover me"
+    # Tooltip content is hidden by default, check it's in the HTML
+    assert result.to_html.include?("Tooltip text")
+  end
+
+  def test_trigger_has_aria_describedby
+    render_tooltip
+    trigger = page.find("[data-ui--tooltip-target='trigger']")
+    assert trigger[:"aria-describedby"].present?
+    assert trigger[:"aria-describedby"].start_with?("ui-tooltip-content-")
+  end
+
+  def test_trigger_has_interaction_actions
+    render_tooltip
+    trigger = page.find("[data-ui--tooltip-target='trigger']")
+    assert trigger[:"data-action"].include?("mouseenter->ui--tooltip#show")
+    assert trigger[:"data-action"].include?("mouseleave->ui--tooltip#hide")
+    assert trigger[:"data-action"].include?("focus->ui--tooltip#show")
+    assert trigger[:"data-action"].include?("blur->ui--tooltip#hide")
+  end
+
+  def test_content_has_role_tooltip
+    render_tooltip
+    assert_selector "[role='tooltip']", visible: false
+  end
+
+  def test_content_is_initially_hidden
+    render_tooltip
+    content = page.find("[role='tooltip']", visible: false)
+    assert content[:hidden].present?
+  end
+
+  def test_content_has_data_targets
+    render_tooltip
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "content", content[:"data-ui--tooltip-target"]
+  end
+
+  def test_default_side_is_top
+    render_tooltip
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "top", content[:"data-side"]
+  end
+
+  def test_custom_side
+    render_inline(UI::Tooltip.new) do |tooltip|
+      tooltip.with_trigger { "Hover me" }
+      tooltip.with_content(side: :bottom) { "Tooltip text" }
+    end
+    content = page.find("[role='tooltip']", visible: false)
+    assert_equal "bottom", content[:"data-side"]
+  end
+
+  def test_custom_id_preserved
+    render_inline(UI::Tooltip.new(id: "my-tooltip")) do |tooltip|
+      tooltip.with_trigger { "Hover me" }
+      tooltip.with_content { "Tooltip text" }
+    end
+    assert_selector "#my-tooltip"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Tooltip.new(class: "my-custom-class")) do |tooltip|
+      tooltip.with_trigger { "Hover me" }
+      tooltip.with_content { "Tooltip text" }
+    end
+    root = page.find("[data-controller='ui--tooltip']")
+    classes = root[:class].split
+    assert_includes classes, "my-custom-class"
+    assert_includes classes, "inline-block"
+  end
+
+  def test_html_attrs_passthrough
+    render_inline(UI::Tooltip.new(data: { test_id: "tooltip-x" })) do |tooltip|
+      tooltip.with_trigger { "Hover me" }
+      tooltip.with_content { "Tooltip text" }
+    end
+    assert_selector "[data-controller='ui--tooltip'][data-test-id='tooltip-x']"
+  end
+end

data/registry/test/components/ui/typography/code_blockquote_test.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Typography::CodeTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_code_tag
+    render_inline(UI::Typography::Code.new) { "npm install" }
+    assert_selector "code", text: "npm install"
+  end
+
+  def test_has_mono_font_and_background
+    render_inline(UI::Typography::Code.new) { "x" }
+    classes = page.find("code")[:class].split
+    assert_includes classes, "font-mono"
+    assert_includes classes, "bg-muted"
+    assert_includes classes, "rounded"
+  end
+
+  def test_size_variants
+    render_inline(UI::Typography::Code.new(size: :sm)) { "small" }
+    classes = page.find("code")[:class].split
+    assert_includes classes, "text-xs"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Typography::Code.new(class: "text-destructive")) { "x" }
+    classes = page.find("code")[:class].split
+    assert_includes classes, "text-destructive"
+  end
+end
+
+class UI::Typography::BlockquoteTest < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_blockquote_tag
+    render_inline(UI::Typography::Blockquote.new) { "A famous quote" }
+    assert_selector "blockquote", text: "A famous quote"
+  end
+
+  def test_has_left_border_and_italic
+    render_inline(UI::Typography::Blockquote.new) { "x" }
+    classes = page.find("blockquote")[:class].split
+    assert_includes classes, "border-l-2"
+    assert_includes classes, "italic"
+    assert_includes classes, "pl-6"
+  end
+
+  def test_user_class_merge
+    render_inline(UI::Typography::Blockquote.new(class: "mt-8")) { "x" }
+    classes = page.find("blockquote")[:class].split
+    assert_includes classes, "mt-8"
+  end
+end

data/registry/test/components/ui/typography/heading_test.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class UI::Typography::H1Test < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_h1_tag
+    render_inline(UI::Typography::H1.new) { "Heading 1" }
+    assert_selector "h1", text: "Heading 1"
+  end
+
+  def test_has_correct_classes
+    render_inline(UI::Typography::H1.new) { "x" }
+    classes = page.find("h1")[:class].split
+    assert_includes classes, "text-4xl"
+    assert_includes classes, "font-bold"
+  end
+end
+
+class UI::Typography::H2Test < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_h2_tag
+    render_inline(UI::Typography::H2.new) { "Heading 2" }
+    assert_selector "h2", text: "Heading 2"
+  end
+
+  def test_has_correct_classes
+    render_inline(UI::Typography::H2.new) { "x" }
+    classes = page.find("h2")[:class].split
+    assert_includes classes, "text-3xl"
+    assert_includes classes, "font-semibold"
+  end
+end
+
+class UI::Typography::H3Test < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_h3_tag
+    render_inline(UI::Typography::H3.new) { "Heading 3" }
+    assert_selector "h3", text: "Heading 3"
+  end
+
+  def test_has_correct_classes
+    render_inline(UI::Typography::H3.new) { "x" }
+    classes = page.find("h3")[:class].split
+    assert_includes classes, "text-2xl"
+    assert_includes classes, "font-semibold"
+  end
+end
+
+class UI::Typography::H4Test < ViewComponent::TestCase
+  def setup_fixtures(*); end
+  def teardown_fixtures(*); end
+
+  def test_renders_h4_tag
+    render_inline(UI::Typography::H4.new) { "Heading 4" }
+    assert_selector "h4", text: "Heading 4"
+  end
+
+  def test_has_correct_classes
+    render_inline(UI::Typography::H4.new) { "x" }
+    classes = page.find("h4")[:class].split
+    assert_includes classes, "text-xl"
+    assert_includes classes, "font-semibold"
+  end
+end