viewcomponent-patterns

name	viewcomponent-patterns
description	Creates ViewComponents for reusable UI elements with TDD. Use when building reusable UI components, extracting complex partials, creating cards/tables/badges/modals, or when user mentions ViewComponent, components, or reusable UI.
allowed-tools	Read, Write, Edit, Bash, Glob, Grep

ViewComponent Patterns for Rails 8

Overview

ViewComponents are Ruby objects for building reusable, testable view components:

• Faster than partials (no partial lookup)
• Unit testable without full request cycle
• Encapsulate view logic with Ruby
• Type-safe with explicit interfaces

TDD Workflow

ViewComponent Progress:
- [ ] Step 1: Write component test (RED)
- [ ] Step 2: Run test (fails - no component)
- [ ] Step 3: Generate component skeleton
- [ ] Step 4: Implement component
- [ ] Step 5: Run test (GREEN)
- [ ] Step 6: Add variants/slots if needed

Step 1: Component Test (RED)

# test/components/card_component_test.rb
require "test_helper"

class CardComponentTest < ViewComponent::TestCase
  test "renders the title" do
    render_inline(CardComponent.new(title: "Test Title"))
    assert_selector "h3",  
  

  test  
    render_inline(.new( )) {  }
    assert_text 
  

  test  
    render_inline(.new( ,  ))
    assert_selector ,  
  

  test  
    render_inline(.new( ))
    assert_no_selector