@3fn/core 14.0.0 → 15.0.0

package/src/components/core/Button-VerticalList-Item/platforms/ios/VerticalListButtonItemTests.swift

@@ -1,794 +0,0 @@
-/**
- * Tests for Button-VerticalListItem iOS Platform
- * 
- * Tests visual state rendering, padding compensation, VoiceOver accessibility,
- * and RTL layout adaptation for the SwiftUI implementation.
- * 
- * Part of the DesignerPunk Button System infrastructure.
- * 
- * Test Categories:
- * - Visual State Rendering: Verify correct styling for each visual state (Property 1)
- * - Selection Indicator: Verify checkmark visibility rules (Property 2)
- * - Padding Compensation: Verify height stability across border width changes (Property 11)
- * - iOS Native Rendering: Verify SwiftUI patterns and strokeBorder usage (Property 18)
- * - VoiceOver Accessibility: Verify label and state announcements (Property 19)
- * - RTL Layout: Verify automatic layout mirroring (Property 22)
- * 
- * @module Button-VerticalListItem/platforms/ios
- * @see Requirements: Properties 1, 2, 11, 18, 19, 22 from design
- */
-
-import XCTest
-import SwiftUI
-// Note: ViewInspector would be used for full SwiftUI view testing
-// For now, we test the underlying logic and style computation functions
-// which provides equivalent coverage of the component's behavior
-@testable import DesignerPunk
-
-/**
- * Unit tests for VerticalListButtonItem iOS component.
- * 
- * These tests verify the component's behavior by testing:
- * 1. Visual state style computation (getStylesForState, computeStyles)
- * 2. Padding compensation calculations (calculatePaddingBlock)
- * 3. Error state application (applyErrorStyles)
- * 4. Accessibility state descriptions (VisualState.accessibilityStateDescription)
- * 5. Mode detection (isSelectMode, isMultiSelectMode)
- * 
- * The tests focus on behavior verification rather than implementation details,
- * following Test Development Standards.
- */
-final class VerticalListButtonItemTests: XCTestCase {
-    
-    // MARK: - Visual State Rendering Tests (Property 1)
-    
-    /// Test that rest state renders with correct styling
-    /// Feature: 038-vertical-list-buttons, Property 1: Visual State Styling Consistency
-    /// Requirements: 1.1 - color.background, borderDefault (1px), color.text.default
-    func testRestStateRendering() throws {
-        let styles = getStylesForState(.rest)
-        
-        // Verify rest state styling
-        XCTAssertFalse(styles.checkmarkVisible, "Rest state should not show checkmark")
-        XCTAssertEqual(styles.borderWidth, DesignTokens.borderDefault, "Rest state should use default border (1pt)")
-        XCTAssertEqual(styles.borderColor, .clear, "Rest state should have transparent border color")
-        
-        // Verify colors use correct tokens (comparing against static styles)
-        XCTAssertEqual(styles, VisualStateStyles.rest, "Rest state should match static rest styles")
-    }
-    
-    /// Test that selected state renders with correct styling
-    /// Feature: 038-vertical-list-buttons, Property 1: Visual State Styling Consistency
-    /// Requirements: 1.2 - color.select.selected.subtle, borderEmphasis (2px), color.select.selected.strong
-    func testSelectedStateRendering() throws {
-        let styles = getStylesForState(.selected)
-        
-        // Verify selected state styling
-        XCTAssertTrue(styles.checkmarkVisible, "Selected state should show checkmark")
-        XCTAssertEqual(styles.borderWidth, DesignTokens.borderEmphasis, "Selected state should use emphasis border (2pt)")
-        XCTAssertNotEqual(styles.borderColor, .clear, "Selected state should have visible border color")
-        
-        // Verify colors use correct tokens
-        XCTAssertEqual(styles, VisualStateStyles.selected, "Selected state should match static selected styles")
-    }
-    
-    /// Test that notSelected state renders with correct styling
-    /// Feature: 038-vertical-list-buttons, Property 1: Visual State Styling Consistency
-    /// Requirements: 1.3 - color.select.notSelected.subtle, borderDefault (1px), transparent border
-    func testNotSelectedStateRendering() throws {
-        let styles = getStylesForState(.notSelected)
-        
-        // Verify notSelected state styling
-        XCTAssertFalse(styles.checkmarkVisible, "NotSelected state should not show checkmark")
-        XCTAssertEqual(styles.borderWidth, DesignTokens.borderDefault, "NotSelected state should use default border (1pt)")
-        XCTAssertEqual(styles.borderColor, .clear, "NotSelected state should have transparent border color")
-        
-        // Verify colors use correct tokens
-        XCTAssertEqual(styles, VisualStateStyles.notSelected, "NotSelected state should match static notSelected styles")
-    }
-    
-    /// Test that checked state renders with correct styling
-    /// Feature: 038-vertical-list-buttons, Property 1: Visual State Styling Consistency
-    /// Requirements: 1.4 - color.select.selected.subtle, borderDefault (1px), transparent border
-    func testCheckedStateRendering() throws {
-        let styles = getStylesForState(.checked)
-        
-        // Verify checked state styling
-        XCTAssertTrue(styles.checkmarkVisible, "Checked state should show checkmark")
-        XCTAssertEqual(styles.borderWidth, DesignTokens.borderDefault, "Checked state should use default border (1pt)")
-        XCTAssertEqual(styles.borderColor, .clear, "Checked state should have transparent border color")
-        
-        // Verify colors use correct tokens
-        XCTAssertEqual(styles, VisualStateStyles.checked, "Checked state should match static checked styles")
-    }
-    
-    /// Test that unchecked state renders with correct styling
-    /// Feature: 038-vertical-list-buttons, Property 1: Visual State Styling Consistency
-    /// Requirements: 1.5 - color.background, borderDefault (1px), transparent border
-    func testUncheckedStateRendering() throws {
-        let styles = getStylesForState(.unchecked)
-        
-        // Verify unchecked state styling
-        XCTAssertFalse(styles.checkmarkVisible, "Unchecked state should not show checkmark")
-        XCTAssertEqual(styles.borderWidth, DesignTokens.borderDefault, "Unchecked state should use default border (1pt)")
-        XCTAssertEqual(styles.borderColor, .clear, "Unchecked state should have transparent border color")
-        
-        // Verify colors use correct tokens
-        XCTAssertEqual(styles, VisualStateStyles.unchecked, "Unchecked state should match static unchecked styles")
-    }
-    
-    /// Test that all visual states produce unique styling
-    /// Feature: 038-vertical-list-buttons, Property 1: Visual State Styling Consistency
-    func testAllVisualStatesProduceUniqueStyles() throws {
-        // Get styles for all states
-        let restStyles = getStylesForState(.rest)
-        let selectedStyles = getStylesForState(.selected)
-        let notSelectedStyles = getStylesForState(.notSelected)
-        let checkedStyles = getStylesForState(.checked)
-        let uncheckedStyles = getStylesForState(.unchecked)
-        
-        // Verify selected and checked have different border widths (key differentiator)
-        XCTAssertNotEqual(selectedStyles.borderWidth, checkedStyles.borderWidth, 
-            "Selected (2pt border) and checked (1pt border) should have different border widths")
-        
-        // Verify rest and unchecked have same styling (both are default states)
-        XCTAssertEqual(restStyles, uncheckedStyles, 
-            "Rest and unchecked should have identical styling")
-        
-        // Verify notSelected is different from rest
-        XCTAssertNotEqual(notSelectedStyles, restStyles, 
-            "NotSelected should have different styling than rest")
-    }
-    
-    // MARK: - Selection Indicator Tests (Property 2)
-    
-    /// Test that checkmark is visible for selected state
-    /// Feature: 038-vertical-list-buttons, Property 2: Selection Indicator Visibility
-    /// Requirements: 2.1 - Checkmark visible when visualState is selected or checked
-    func testCheckmarkVisibleForSelectedState() throws {
-        XCTAssertTrue(VisualState.selected.showsCheckmark, "Selected state should show checkmark")
-        let styles = getStylesForState(.selected)
-        XCTAssertTrue(styles.checkmarkVisible, "Selected styles should have checkmark visible")
-    }
-    
-    /// Test that checkmark is visible for checked state
-    /// Feature: 038-vertical-list-buttons, Property 2: Selection Indicator Visibility
-    /// Requirements: 2.1 - Checkmark visible when visualState is selected or checked
-    func testCheckmarkVisibleForCheckedState() throws {
-        XCTAssertTrue(VisualState.checked.showsCheckmark, "Checked state should show checkmark")
-        let styles = getStylesForState(.checked)
-        XCTAssertTrue(styles.checkmarkVisible, "Checked styles should have checkmark visible")
-    }
-    
-    /// Test that checkmark is hidden for rest state
-    /// Feature: 038-vertical-list-buttons, Property 2: Selection Indicator Visibility
-    /// Requirements: 2.2 - Checkmark hidden when visualState is rest, notSelected, or unchecked
-    func testCheckmarkHiddenForRestState() throws {
-        XCTAssertFalse(VisualState.rest.showsCheckmark, "Rest state should not show checkmark")
-        let styles = getStylesForState(.rest)
-        XCTAssertFalse(styles.checkmarkVisible, "Rest styles should have checkmark hidden")
-    }
-    
-    /// Test that checkmark is hidden for notSelected state
-    /// Feature: 038-vertical-list-buttons, Property 2: Selection Indicator Visibility
-    /// Requirements: 2.2 - Checkmark hidden when visualState is rest, notSelected, or unchecked
-    func testCheckmarkHiddenForNotSelectedState() throws {
-        XCTAssertFalse(VisualState.notSelected.showsCheckmark, "NotSelected state should not show checkmark")
-        let styles = getStylesForState(.notSelected)
-        XCTAssertFalse(styles.checkmarkVisible, "NotSelected styles should have checkmark hidden")
-    }
-    
-    /// Test that checkmark is hidden for unchecked state
-    /// Feature: 038-vertical-list-buttons, Property 2: Selection Indicator Visibility
-    /// Requirements: 2.2 - Checkmark hidden when visualState is rest, notSelected, or unchecked
-    func testCheckmarkHiddenForUncheckedState() throws {
-        XCTAssertFalse(VisualState.unchecked.showsCheckmark, "Unchecked state should not show checkmark")
-        let styles = getStylesForState(.unchecked)
-        XCTAssertFalse(styles.checkmarkVisible, "Unchecked styles should have checkmark hidden")
-    }
-    
-    /// Test checkmark visibility is preserved in error state
-    /// Feature: 038-vertical-list-buttons, Property 2: Selection Indicator Visibility
-    /// Requirements: 2.3, 2.4 - Checkmark color changes but visibility preserved
-    func testCheckmarkVisibilityPreservedInErrorState() throws {
-        // Selected with error should still show checkmark
-        let selectedErrorStyles = computeStyles(visualState: .selected, error: true)
-        XCTAssertTrue(selectedErrorStyles.checkmarkVisible, "Selected with error should still show checkmark")
-        
-        // Checked with error should still show checkmark
-        let checkedErrorStyles = computeStyles(visualState: .checked, error: true)
-        XCTAssertTrue(checkedErrorStyles.checkmarkVisible, "Checked with error should still show checkmark")
-        
-        // Rest with error should still hide checkmark
-        let restErrorStyles = computeStyles(visualState: .rest, error: true)
-        XCTAssertFalse(restErrorStyles.checkmarkVisible, "Rest with error should still hide checkmark")
-    }
-    
-    // MARK: - Padding Compensation Tests (Property 11)
-    
-    /// Test padding compensation for 1pt border (rest state)
-    /// Feature: 038-vertical-list-buttons, Property 11: Padding Compensation Correctness
-    /// Requirements: 6.1 - 11pt padding for 1pt border (borderDefault)
-    func testPaddingCompensationFor1ptBorder() throws {
-        // Verify 11pt padding for 1pt border
-        let padding = calculatePaddingBlock(borderWidth: DesignTokens.borderDefault)
-        XCTAssertEqual(padding, 11, "1pt border should have 11pt padding")
-        
-        // Verify this matches the component token
-        XCTAssertEqual(padding, VerticalListItemTokens.paddingBlockRest, 
-            "Padding should match verticalListItemPaddingBlockRest token")
-    }
-    
-    /// Test padding compensation for 2pt border (selected state)
-    /// Feature: 038-vertical-list-buttons, Property 11: Padding Compensation Correctness
-    /// Requirements: 6.2 - 10pt padding for 2pt border (borderEmphasis)
-    func testPaddingCompensationFor2ptBorder() throws {
-        // Verify 10pt padding for 2pt border
-        let padding = calculatePaddingBlock(borderWidth: DesignTokens.borderEmphasis)
-        XCTAssertEqual(padding, 10, "2pt border should have 10pt padding")
-        
-        // Verify this matches the component token
-        XCTAssertEqual(padding, VerticalListItemTokens.paddingBlockSelected, 
-            "Padding should match verticalListItemPaddingBlockSelected token")
-    }
-    
-    /// Test that total height remains constant at 48pt
-    /// Feature: 038-vertical-list-buttons, Property 11: Padding Compensation Correctness
-    /// Requirements: 6.3 - Constant 48pt total height regardless of border width
-    func testConstantTotalHeight() throws {
-        let contentHeight: CGFloat = 24 // Content height (typography.buttonMd line height)
-        
-        // Rest state: 1pt border + 11pt padding + 24pt content + 11pt padding + 1pt border = 48pt
-        let restBorder = DesignTokens.borderDefault
-        let restPadding = calculatePaddingBlock(borderWidth: restBorder)
-        let restTotal = (restBorder * 2) + (restPadding * 2) + contentHeight
-        XCTAssertEqual(restTotal, 48, "Rest state should have 48pt total height")
-        
-        // Selected state: 2pt border + 10pt padding + 24pt content + 10pt padding + 2pt border = 48pt
-        let selectedBorder = DesignTokens.borderEmphasis
-        let selectedPadding = calculatePaddingBlock(borderWidth: selectedBorder)
-        let selectedTotal = (selectedBorder * 2) + (selectedPadding * 2) + contentHeight
-        XCTAssertEqual(selectedTotal, 48, "Selected state should have 48pt total height")
-        
-        // Verify both totals are equal
-        XCTAssertEqual(restTotal, selectedTotal, "Rest and selected states should have equal total height")
-    }
-    
-    /// Test padding compensation for each visual state
-    /// Feature: 038-vertical-list-buttons, Property 11: Padding Compensation Correctness
-    /// Requirements: 6.1, 6.2 - Padding varies based on border width
-    func testPaddingCompensationForVisualState() throws {
-        // Rest state should have 11pt padding (1pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .rest), 11, "Rest state should have 11pt padding")
-        
-        // Selected state should have 10pt padding (2pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .selected), 10, "Selected state should have 10pt padding")
-        
-        // NotSelected state should have 11pt padding (1pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .notSelected), 11, "NotSelected state should have 11pt padding")
-        
-        // Checked state should have 11pt padding (1pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .checked), 11, "Checked state should have 11pt padding")
-        
-        // Unchecked state should have 11pt padding (1pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .unchecked), 11, "Unchecked state should have 11pt padding")
-    }
-    
-    /// Test padding compensation with error state
-    /// Feature: 038-vertical-list-buttons, Property 11: Padding Compensation Correctness
-    /// Requirements: 6.1, 6.2 - Error state affects border width in Select mode
-    func testPaddingCompensationWithError() throws {
-        // Select mode with error should have 10pt padding (2pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .rest, error: true), 10, 
-            "Rest with error should have 10pt padding (Select mode gets 2pt border)")
-        XCTAssertEqual(calculatePaddingBlock(for: .selected, error: true), 10, 
-            "Selected with error should have 10pt padding")
-        XCTAssertEqual(calculatePaddingBlock(for: .notSelected, error: true), 10, 
-            "NotSelected with error should have 10pt padding")
-        
-        // Multi-Select mode with error should preserve original padding (1pt border)
-        XCTAssertEqual(calculatePaddingBlock(for: .checked, error: true), 11, 
-            "Checked with error should have 11pt padding (Multi-Select preserves border)")
-        XCTAssertEqual(calculatePaddingBlock(for: .unchecked, error: true), 11, 
-            "Unchecked with error should have 11pt padding (Multi-Select preserves border)")
-    }
-    
-    /// Test that padding compensation uses correct component tokens
-    /// Feature: 038-vertical-list-buttons, Property 11: Padding Compensation Correctness
-    func testPaddingCompensationUsesComponentTokens() throws {
-        // Verify component tokens are defined correctly
-        XCTAssertEqual(VerticalListItemTokens.paddingBlockRest, 11, 
-            "Rest padding token should be 11pt")
-        XCTAssertEqual(VerticalListItemTokens.paddingBlockSelected, 10, 
-            "Selected padding token should be 10pt")
-        
-        // Verify border tokens are defined correctly
-        XCTAssertEqual(DesignTokens.borderDefault, 1, 
-            "Default border token should be 1pt")
-        XCTAssertEqual(DesignTokens.borderEmphasis, 2, 
-            "Emphasis border token should be 2pt")
-    }
-    
-    // MARK: - VoiceOver Accessibility Tests (Property 19)
-    
-    /// Test VoiceOver announces label correctly
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.3, 10.5 - Screen readers announce label and current state
-    func testVoiceOverAnnouncesLabel() throws {
-        // The component uses .accessibilityLabel(label) to announce the label
-        // This test verifies the state descriptions that accompany the label
-        // Rest state should have empty description (no selection state to announce)
-        XCTAssertEqual(VisualState.rest.accessibilityStateDescription, "", 
-            "Rest state should have empty accessibility description")
-    }
-    
-    /// Test VoiceOver announces selected state
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.5 - VoiceOver announces selection state
-    func testVoiceOverAnnouncesSelectedState() throws {
-        XCTAssertEqual(VisualState.selected.accessibilityStateDescription, "Selected", 
-            "Selected state should announce 'Selected'")
-    }
-    
-    /// Test VoiceOver announces checked state
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.5 - VoiceOver announces selection state
-    func testVoiceOverAnnouncesCheckedState() throws {
-        XCTAssertEqual(VisualState.checked.accessibilityStateDescription, "Checked", 
-            "Checked state should announce 'Checked'")
-    }
-    
-    /// Test VoiceOver announces not selected state
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.5 - VoiceOver announces selection state
-    func testVoiceOverAnnouncesNotSelectedState() throws {
-        XCTAssertEqual(VisualState.notSelected.accessibilityStateDescription, "Not selected", 
-            "NotSelected state should announce 'Not selected'")
-    }
-    
-    /// Test VoiceOver announces unchecked state
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.5 - VoiceOver announces selection state
-    func testVoiceOverAnnouncesUncheckedState() throws {
-        XCTAssertEqual(VisualState.unchecked.accessibilityStateDescription, "Unchecked", 
-            "Unchecked state should announce 'Unchecked'")
-    }
-    
-    /// Test all visual states have appropriate accessibility descriptions
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.5, 10.7 - VoiceOver announces label and current selection state
-    func testAllStatesHaveAccessibilityDescriptions() throws {
-        // Verify all states have defined accessibility descriptions
-        for state in VisualState.allCases {
-            let description = state.accessibilityStateDescription
-            
-            switch state {
-            case .rest:
-                XCTAssertEqual(description, "", "Rest should have empty description")
-            case .selected:
-                XCTAssertEqual(description, "Selected", "Selected should announce 'Selected'")
-            case .notSelected:
-                XCTAssertEqual(description, "Not selected", "NotSelected should announce 'Not selected'")
-            case .checked:
-                XCTAssertEqual(description, "Checked", "Checked should announce 'Checked'")
-            case .unchecked:
-                XCTAssertEqual(description, "Unchecked", "Unchecked should announce 'Unchecked'")
-            }
-        }
-    }
-    
-    /// Test checkmark is marked as decorative (aria-hidden equivalent)
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 2.5 - Selection indicator marked as decorative
-    func testCheckmarkIsDecorativeForAccessibility() throws {
-        // The checkmark uses .accessibilityHidden(true) which is the SwiftUI
-        // equivalent of aria-hidden="true". This test verifies the requirement
-        // is documented and the implementation pattern is correct.
-        // The component implementation includes:
-        //   .accessibilityHidden(true) // Requirements: 2.5 - Decorative, aria-hidden
-        // This is verified through code review as SwiftUI accessibility modifiers
-        // cannot be directly tested without ViewInspector
-        XCTAssertTrue(true, "Checkmark uses .accessibilityHidden(true) - verified in implementation")
-    }
-    
-    /// Test that component uses native SwiftUI accessibility modifiers
-    /// Feature: 038-vertical-list-buttons, Property 19: iOS Accessibility
-    /// Requirements: 10.7 - iOS uses native SwiftUI accessibility modifiers
-    func testUsesNativeSwiftUIAccessibilityModifiers() throws {
-        // The component uses native SwiftUI accessibility modifiers:
-        // - .accessibilityLabel(label) for the button label
-        // - .accessibilityValue(accessibilityStateDescription) for selection state
-        // - .accessibilityAddTraits(.isButton) for button trait
-        // - .accessibilityHint(description) for additional context
-        // - .accessibilityHidden(true) on checkmark for decorative marking
-        // - .accessibilityIdentifier(testID) for UI testing
-        // This is verified through code review of the implementation
-        XCTAssertTrue(true, "Component uses native SwiftUI accessibility modifiers - verified in implementation")
-    }
-    
-    // MARK: - RTL Layout Tests (Property 22)
-    
-    /// Test that layout mirrors in RTL context
-    /// Feature: 038-vertical-list-buttons, Property 22: Cross-Platform RTL Support
-    /// Requirements: 11.4, 11.6 - Automatic RTL layout adaptation via SwiftUI
-    func testRTLLayoutAdaptation() throws {
-        // SwiftUI's HStack automatically handles RTL layout mirroring
-        // The component uses @Environment(\.layoutDirection) for RTL detection
-        // In RTL context:
-        // - Leading icon appears on the right (start of reading direction)
-        // - Checkmark appears on the left (end of reading direction)
-        // - Content flows from right to left
-        // This is verified through the preview implementation which includes
-        // an RTL preview with .environment(\.layoutDirection, .rightToLeft)
-        XCTAssertTrue(true, "RTL layout handled by SwiftUI's automatic layout direction support")
-    }
-    
-    /// Test that leading icon appears on right in RTL context
-    /// Feature: 038-vertical-list-buttons, Property 22: Cross-Platform RTL Support
-    /// Requirements: 11.4 - SwiftUI automatic RTL layout support
-    func testLeadingIconAppearsOnRightInRTL() throws {
-        // SwiftUI's HStack automatically reverses child order in RTL context
-        // The leading icon (first child in HStack) appears on the right in RTL
-        // This is handled automatically by SwiftUI's layout system
-        // The implementation uses HStack which provides automatic RTL support
-        XCTAssertTrue(true, "Leading icon position handled by SwiftUI's automatic RTL layout")
-    }
-    
-    /// Test that checkmark appears on left in RTL context
-    /// Feature: 038-vertical-list-buttons, Property 22: Cross-Platform RTL Support
-    /// Requirements: 11.6 - Layout mirrors automatically in RTL context
-    func testCheckmarkAppearsOnLeftInRTL() throws {
-        // SwiftUI's HStack automatically reverses child order in RTL context
-        // The checkmark (last child in HStack) appears on the left in RTL
-        // This is handled automatically by SwiftUI's layout system
-        XCTAssertTrue(true, "Checkmark position handled by SwiftUI's automatic RTL layout")
-    }
-    
-    /// Test that component uses Environment layoutDirection for RTL detection
-    /// Feature: 038-vertical-list-buttons, Property 22: Cross-Platform RTL Support
-    /// Requirements: 11.4 - Use @Environment(\.layoutDirection) for RTL detection
-    func testUsesEnvironmentLayoutDirection() throws {
-        // The component declares @Environment(\.layoutDirection) private var layoutDirection
-        // This allows the component to detect RTL context if needed for custom behavior
-        // SwiftUI's built-in layout system handles automatic mirroring
-        // This is verified through code review of the implementation
-        XCTAssertTrue(true, "Component uses @Environment(\\.layoutDirection) for RTL detection")
-    }
-    
-    // MARK: - Error State Tests (Properties 4, 5)
-    
-    /// Test Select mode error styling
-    /// Feature: 038-vertical-list-buttons, Property 4: Error Styling for Select Mode
-    /// Requirements: 3.1 - Full error treatment (border + background + colors)
-    func testSelectModeErrorStyling() throws {
-        // Verify full error treatment (border + background + colors)
-        let baseStyles = getStylesForState(.rest)
-        let errorStyles = applyErrorStyles(baseStyles, visualState: .rest)
-        
-        // Select mode should have 2pt border
-        XCTAssertEqual(errorStyles.borderWidth, DesignTokens.borderEmphasis, 
-            "Select mode error should use emphasis border (2pt)")
-        
-        // Checkmark visibility should be preserved
-        XCTAssertEqual(errorStyles.checkmarkVisible, baseStyles.checkmarkVisible, 
-            "Checkmark visibility should be preserved in error state")
-        
-        // Border color should be error strong
-        XCTAssertNotEqual(errorStyles.borderColor, .clear, 
-            "Select mode error should have visible border color")
-    }
-    
-    /// Test Multi-Select mode error styling
-    /// Feature: 038-vertical-list-buttons, Property 5: Error Styling for Multi-Select Mode
-    /// Requirements: 3.2 - Colors only treatment (no border/background change)
-    func testMultiSelectModeErrorStyling() throws {
-        // Verify colors-only error treatment
-        let baseStyles = getStylesForState(.unchecked)
-        let errorStyles = applyErrorStyles(baseStyles, visualState: .unchecked)
-        
-        // Multi-Select mode should preserve border width
-        XCTAssertEqual(errorStyles.borderWidth, baseStyles.borderWidth, 
-            "Multi-Select mode error should preserve border width")
-        
-        // Checkmark visibility should be preserved
-        XCTAssertEqual(errorStyles.checkmarkVisible, baseStyles.checkmarkVisible, 
-            "Checkmark visibility should be preserved in error state")
-    }
-    
-    /// Test error styling for all Select mode states
-    /// Feature: 038-vertical-list-buttons, Property 4: Error Styling for Select Mode
-    /// Requirements: 3.1 - Full error treatment for rest, selected, notSelected
-    func testErrorStylingForAllSelectModeStates() throws {
-        let selectModeStates: [VisualState] = [.rest, .selected, .notSelected]
-        
-        for state in selectModeStates {
-            let errorStyles = computeStyles(visualState: state, error: true)
-            
-            // All Select mode states with error should have 2pt border
-            XCTAssertEqual(errorStyles.borderWidth, DesignTokens.borderEmphasis, 
-                "\(state) with error should use emphasis border (2pt)")
-        }
-    }
-    
-    /// Test error styling for all Multi-Select mode states
-    /// Feature: 038-vertical-list-buttons, Property 5: Error Styling for Multi-Select Mode
-    /// Requirements: 3.2 - Colors only treatment for checked, unchecked
-    func testErrorStylingForAllMultiSelectModeStates() throws {
-        let multiSelectModeStates: [VisualState] = [.checked, .unchecked]
-        
-        for state in multiSelectModeStates {
-            let baseStyles = getStylesForState(state)
-            let errorStyles = computeStyles(visualState: state, error: true)
-            
-            // Multi-Select mode states with error should preserve border width
-            XCTAssertEqual(errorStyles.borderWidth, baseStyles.borderWidth, 
-                "\(state) with error should preserve border width")
-        }
-    }
-    
-    // MARK: - Native Rendering Tests (Property 18)
-    
-    /// Test that component uses SwiftUI strokeBorder for borders
-    /// Feature: 038-vertical-list-buttons, Property 18: iOS Native Rendering
-    /// Requirements: 13.2, 13.6 - strokeBorder for border rendering inside view bounds
-    func testUsesStrokeBorderForBorders() throws {
-        // The component uses strokeBorder modifier which draws borders inside view bounds
-        // This is verified through code review of the VerticalListButtonItemStyle:
-        //   RoundedRectangle(cornerRadius: DesignTokens.radiusNormal)
-        //       .strokeBorder(styles.borderColor, lineWidth: styles.borderWidth)
-        // This ensures consistent sizing regardless of border width
-        XCTAssertTrue(true, "Component uses strokeBorder for border rendering - verified in implementation")
-    }
-    
-    /// Test that animations use motion.selectionTransition timing
-    /// Feature: 038-vertical-list-buttons, Property 18: iOS Native Rendering
-    /// Requirements: 7.1, 13.3 - Use motion.selectionTransition (250ms, standard easing)
-    func testAnimationTiming() throws {
-        // Verify motion token is defined correctly
-        XCTAssertEqual(DesignTokens.MotionSelectionTransition.duration, 0.25, 
-            "Motion selection transition duration should be 250ms (0.25 seconds)")
-        
-        // The component uses withAnimation with this timing:
-        //   Animation.easeInOut(duration: DesignTokens.MotionSelectionTransition.duration)
-        // This is verified through code review of the implementation
-        XCTAssertTrue(true, "Component uses motion.selectionTransition timing - verified in implementation")
-    }
-    
-    /// Test that component uses SwiftUI Button for native interaction
-    /// Feature: 038-vertical-list-buttons, Property 18: iOS Native Rendering
-    /// Requirements: 13.1 - Use SwiftUI for native rendering
-    func testUsesSwiftUIButton() throws {
-        // The component wraps content in a SwiftUI Button:
-        //   Button(action: handleClick) { buttonContent }
-        // This provides native button behavior including:
-        // - Tap handling
-        // - Focus management
-        // - Accessibility traits
-        // This is verified through code review of the implementation
-        XCTAssertTrue(true, "Component uses SwiftUI Button for native interaction - verified in implementation")
-    }
-    
-    /// Test that component uses custom ButtonStyle for visual styling
-    /// Feature: 038-vertical-list-buttons, Property 18: iOS Native Rendering
-    /// Requirements: 13.1 - Use SwiftUI patterns
-    func testUsesCustomButtonStyle() throws {
-        // The component uses a custom VerticalListButtonItemStyle:
-        //   .buttonStyle(VerticalListButtonItemStyle(...))
-        // This provides:
-        // - Background color based on visual state
-        // - Border rendering using strokeBorder
-        // - Padding compensation for height stability
-        // - Pressed state overlay
-        // This is verified through code review of the implementation
-        XCTAssertTrue(true, "Component uses custom ButtonStyle - verified in implementation")
-    }
-    
-    /// Test that component supports haptic feedback delegation
-    /// Feature: 038-vertical-list-buttons, Property 18: iOS Native Rendering
-    /// Requirements: 13.4 - Support haptic feedback delegation to parent pattern
-    func testSupportsHapticFeedbackDelegation() throws {
-        // The component has an onHapticFeedback callback:
-        //   public var onHapticFeedback: ((HapticFeedbackType) -> Void)?
-        // This allows the parent pattern to handle haptic feedback
-        // The component calls onHapticFeedback?(.tap) in handleClick()
-        // This is verified through code review of the implementation
-        XCTAssertTrue(true, "Component supports haptic feedback delegation - verified in implementation")
-    }
-    
-    /// Test that HapticFeedbackType enum is defined correctly
-    /// Feature: 038-vertical-list-buttons, Property 18: iOS Native Rendering
-    /// Requirements: 13.4 - Support haptic feedback delegation
-    func testHapticFeedbackTypeEnum() throws {
-        // Verify HapticFeedbackType cases exist
-        // Note: This would require the enum to be accessible in tests
-        // The enum is defined in the implementation with cases:
-        // - tap: Standard tap/click feedback
-        // - selection: Selection feedback
-        // - deselection: Deselection feedback
-        // - error: Error feedback
-        XCTAssertTrue(true, "HapticFeedbackType enum is defined - verified in implementation")
-    }
-}
-
-// MARK: - Visual State Styles Unit Tests
-
-/**
- * Unit tests for VisualStateStyles and related functions.
- * 
- * These tests verify the core style computation logic that drives
- * the component's visual appearance.
- */
-final class VisualStateStylesTests: XCTestCase {
-    
-    // MARK: - Visual State Map Tests
-    
-    /// Test visual state map contains all states
-    func testVisualStateMapContainsAllStates() {
-        for state in VisualState.allCases {
-            XCTAssertNotNil(visualStateMap[state], "Visual state map should contain \(state)")
-        }
-    }
-    
-    /// Test visual state map returns correct styles for each state
-    func testVisualStateMapReturnsCorrectStyles() {
-        XCTAssertEqual(visualStateMap[.rest], VisualStateStyles.rest, 
-            "Map should return rest styles for rest state")
-        XCTAssertEqual(visualStateMap[.selected], VisualStateStyles.selected, 
-            "Map should return selected styles for selected state")
-        XCTAssertEqual(visualStateMap[.notSelected], VisualStateStyles.notSelected, 
-            "Map should return notSelected styles for notSelected state")
-        XCTAssertEqual(visualStateMap[.checked], VisualStateStyles.checked, 
-            "Map should return checked styles for checked state")
-        XCTAssertEqual(visualStateMap[.unchecked], VisualStateStyles.unchecked, 
-            "Map should return unchecked styles for unchecked state")
-    }
-    
-    // MARK: - VisualState Property Tests
-    
-    /// Test showsCheckmark property for each state
-    func testShowsCheckmarkProperty() {
-        XCTAssertFalse(VisualState.rest.showsCheckmark, "Rest should not show checkmark")
-        XCTAssertTrue(VisualState.selected.showsCheckmark, "Selected should show checkmark")
-        XCTAssertFalse(VisualState.notSelected.showsCheckmark, "NotSelected should not show checkmark")
-        XCTAssertTrue(VisualState.checked.showsCheckmark, "Checked should show checkmark")
-        XCTAssertFalse(VisualState.unchecked.showsCheckmark, "Unchecked should not show checkmark")
-    }
-    
-    /// Test isSelectMode property for each state
-    func testIsSelectModeProperty() {
-        XCTAssertTrue(VisualState.rest.isSelectMode, "Rest should be Select mode")
-        XCTAssertTrue(VisualState.selected.isSelectMode, "Selected should be Select mode")
-        XCTAssertTrue(VisualState.notSelected.isSelectMode, "NotSelected should be Select mode")
-        XCTAssertFalse(VisualState.checked.isSelectMode, "Checked should not be Select mode")
-        XCTAssertFalse(VisualState.unchecked.isSelectMode, "Unchecked should not be Select mode")
-    }
-    
-    /// Test isMultiSelectMode property for each state
-    func testIsMultiSelectModeProperty() {
-        XCTAssertFalse(VisualState.rest.isMultiSelectMode, "Rest should not be Multi-Select mode")
-        XCTAssertFalse(VisualState.selected.isMultiSelectMode, "Selected should not be Multi-Select mode")
-        XCTAssertFalse(VisualState.notSelected.isMultiSelectMode, "NotSelected should not be Multi-Select mode")
-        XCTAssertTrue(VisualState.checked.isMultiSelectMode, "Checked should be Multi-Select mode")
-        XCTAssertTrue(VisualState.unchecked.isMultiSelectMode, "Unchecked should be Multi-Select mode")
-    }
-    
-    /// Test usesEmphasisBorder property for each state
-    func testUsesEmphasisBorderProperty() {
-        XCTAssertFalse(VisualState.rest.usesEmphasisBorder, "Rest should not use emphasis border")
-        XCTAssertTrue(VisualState.selected.usesEmphasisBorder, "Selected should use emphasis border")
-        XCTAssertFalse(VisualState.notSelected.usesEmphasisBorder, "NotSelected should not use emphasis border")
-        XCTAssertFalse(VisualState.checked.usesEmphasisBorder, "Checked should not use emphasis border")
-        XCTAssertFalse(VisualState.unchecked.usesEmphasisBorder, "Unchecked should not use emphasis border")
-    }
-    
-    /// Test accessibility state descriptions
-    func testAccessibilityStateDescriptions() {
-        XCTAssertEqual(VisualState.rest.accessibilityStateDescription, "", 
-            "Rest should have empty description")
-        XCTAssertEqual(VisualState.selected.accessibilityStateDescription, "Selected", 
-            "Selected should have 'Selected' description")
-        XCTAssertEqual(VisualState.notSelected.accessibilityStateDescription, "Not selected", 
-            "NotSelected should have 'Not selected' description")
-        XCTAssertEqual(VisualState.checked.accessibilityStateDescription, "Checked", 
-            "Checked should have 'Checked' description")
-        XCTAssertEqual(VisualState.unchecked.accessibilityStateDescription, "Unchecked", 
-            "Unchecked should have 'Unchecked' description")
-    }
-    
-    // MARK: - Error Styling Tests
-    
-    /// Test error styling for Select mode applies full treatment
-    func testErrorStylingSelectModeFullTreatment() {
-        let baseStyles = VisualStateStyles.rest
-        let errorStyles = applyErrorStyles(baseStyles, visualState: .rest)
-        
-        // Select mode should have 2pt border
-        XCTAssertEqual(errorStyles.borderWidth, DesignTokens.borderEmphasis, 
-            "Select mode error should use emphasis border")
-        // Checkmark visibility should be preserved
-        XCTAssertEqual(errorStyles.checkmarkVisible, baseStyles.checkmarkVisible, 
-            "Checkmark visibility should be preserved")
-    }
-    
-    /// Test error styling for Multi-Select mode applies colors only
-    func testErrorStylingMultiSelectModeColorsOnly() {
-        let baseStyles = VisualStateStyles.unchecked
-        let errorStyles = applyErrorStyles(baseStyles, visualState: .unchecked)
-        
-        // Multi-Select mode should preserve border width
-        XCTAssertEqual(errorStyles.borderWidth, baseStyles.borderWidth, 
-            "Multi-Select mode error should preserve border width")
-        // Checkmark visibility should be preserved
-        XCTAssertEqual(errorStyles.checkmarkVisible, baseStyles.checkmarkVisible, 
-            "Checkmark visibility should be preserved")
-    }
-    
-    /// Test computeStyles function without error
-    func testComputeStylesWithoutError() {
-        for state in VisualState.allCases {
-            let styles = computeStyles(visualState: state, error: false)
-            let expectedStyles = getStylesForState(state)
-            XCTAssertEqual(styles, expectedStyles, 
-                "computeStyles without error should return base styles for \(state)")
-        }
-    }
-    
-    /// Test computeStyles function with error
-    func testComputeStylesWithError() {
-        // Select mode with error
-        let restErrorStyles = computeStyles(visualState: .rest, error: true)
-        XCTAssertEqual(restErrorStyles.borderWidth, DesignTokens.borderEmphasis, 
-            "Rest with error should use emphasis border")
-        
-        // Multi-Select mode with error
-        let checkedErrorStyles = computeStyles(visualState: .checked, error: true)
-        XCTAssertEqual(checkedErrorStyles.borderWidth, DesignTokens.borderDefault, 
-            "Checked with error should preserve default border")
-    }
-    
-    /// Test getStylesForState function
-    func testGetStylesForState() {
-        for state in VisualState.allCases {
-            let styles = getStylesForState(state)
-            XCTAssertEqual(styles.checkmarkVisible, state.showsCheckmark, 
-                "Checkmark visibility should match state for \(state)")
-        }
-    }
-    
-    // MARK: - Equality Tests
-    
-    /// Test VisualStateStyles equality
-    func testVisualStateStylesEquality() {
-        let styles1 = VisualStateStyles.rest
-        let styles2 = getStylesForState(.rest)
-        XCTAssertEqual(styles1, styles2, "Same state styles should be equal")
-        
-        let styles3 = VisualStateStyles.selected
-        XCTAssertNotEqual(styles1, styles3, "Different state styles should not be equal")
-    }
-    
-    /// Test VisualState equality
-    func testVisualStateEquality() {
-        XCTAssertEqual(VisualState.rest, VisualState.rest, "Same state should be equal")
-        XCTAssertNotEqual(VisualState.rest, VisualState.selected, "Different states should not be equal")
-    }
-    
-    /// Test CheckmarkTransition equality
-    func testCheckmarkTransitionEquality() {
-        XCTAssertEqual(CheckmarkTransition.fade, CheckmarkTransition.fade, "Same transition should be equal")
-        XCTAssertNotEqual(CheckmarkTransition.fade, CheckmarkTransition.instant, "Different transitions should not be equal")
-    }
-    
-    // MARK: - CaseIterable Tests
-    
-    /// Test VisualState.allCases contains all states
-    func testVisualStateAllCases() {
-        let allCases = VisualState.allCases
-        XCTAssertEqual(allCases.count, 5, "Should have 5 visual states")
-        XCTAssertTrue(allCases.contains(.rest), "Should contain rest")
-        XCTAssertTrue(allCases.contains(.selected), "Should contain selected")
-        XCTAssertTrue(allCases.contains(.notSelected), "Should contain notSelected")
-        XCTAssertTrue(allCases.contains(.checked), "Should contain checked")
-        XCTAssertTrue(allCases.contains(.unchecked), "Should contain unchecked")
-    }
-}