libra/tests/Feature/Components/CardComponentTest.php

<?php

use Illuminate\Support\Facades\Blade;

// ============================================
// Card Component Tests
// ============================================

test('card component renders with default variant', function () {
    $html = Blade::render('<x-ui.card>Card content</x-ui.card>');

    expect($html)
        ->toContain('bg-off-white')
        ->toContain('rounded-lg')
        ->toContain('p-6')
        ->toContain('shadow-card')
        ->toContain('Card content');
});

test('card component renders with elevated variant', function () {
    $html = Blade::render('<x-ui.card variant="elevated">Elevated card</x-ui.card>');

    expect($html)
        ->toContain('bg-off-white')
        ->toContain('rounded-lg')
        ->toContain('p-6')
        ->toContain('shadow-md')
        ->not->toContain('shadow-card')
        ->toContain('Elevated card');
});

test('card component applies hover classes when hover is true', function () {
    $html = Blade::render('<x-ui.card :hover="true">Hoverable card</x-ui.card>');

    expect($html)
        ->toContain('hover:shadow-card-hover')
        ->toContain('hover:-translate-y-0.5')
        ->toContain('transition-all')
        ->toContain('cursor-pointer')
        ->toContain('Hoverable card');
});

test('card component does not apply hover classes when hover is false', function () {
    $html = Blade::render('<x-ui.card :hover="false">Non-hoverable card</x-ui.card>');

    expect($html)
        ->not->toContain('hover:shadow-card-hover')
        ->not->toContain('hover:-translate-y-0.5')
        ->not->toContain('cursor-pointer')
        ->toContain('Non-hoverable card');
});

test('card component applies highlight border when highlight is true', function () {
    $html = Blade::render('<x-ui.card :highlight="true">Highlighted card</x-ui.card>');

    expect($html)
        ->toContain('border-s-4')
        ->toContain('border-warm-gray')
        ->toContain('Highlighted card');
});

test('card component does not apply highlight border when highlight is false', function () {
    $html = Blade::render('<x-ui.card :highlight="false">Normal card</x-ui.card>');

    expect($html)
        ->not->toContain('border-s-4')
        ->not->toContain('border-warm-gray')
        ->toContain('Normal card');
});

test('card component allows custom classes via attributes', function () {
    $html = Blade::render('<x-ui.card class="custom-class">Custom class card</x-ui.card>');

    expect($html)
        ->toContain('custom-class')
        ->toContain('bg-off-white')
        ->toContain('Custom class card');
});

test('card component supports multiple props together', function () {
    $html = Blade::render('<x-ui.card variant="elevated" :hover="true" :highlight="true">Full featured card</x-ui.card>');

    expect($html)
        ->toContain('shadow-md')
        ->toContain('hover:shadow-card-hover')
        ->toContain('hover:-translate-y-0.5')
        ->toContain('cursor-pointer')
        ->toContain('border-s-4')
        ->toContain('border-warm-gray')
        ->toContain('Full featured card');
});

// ============================================
// Stat Card Component Tests
// ============================================

test('stat card displays value and label correctly', function () {
    $html = Blade::render('<x-ui.stat-card value="42" label="Total Items" />');

    expect($html)
        ->toContain('42')
        ->toContain('Total Items')
        ->toContain('text-2xl')
        ->toContain('font-bold')
        ->toContain('text-charcoal');
});

test('stat card renders icon when provided', function () {
    $html = Blade::render('<x-ui.stat-card icon="users" value="100" label="Users" />');

    expect($html)
        ->toContain('bg-warm-gray/10')
        ->toContain('rounded-lg')
        ->toContain('100')
        ->toContain('Users');
});

test('stat card hides icon container when icon is null', function () {
    $html = Blade::render('<x-ui.stat-card value="50" label="Items" />');

    // Icon container should not be rendered when icon is null
    expect($html)
        ->not->toContain('bg-warm-gray/10')
        ->toContain('50')
        ->toContain('Items');
});

test('stat card shows positive trend with plus prefix and success color', function () {
    $html = Blade::render('<x-ui.stat-card value="75" label="Growth" :trend="15" />');

    expect($html)
        ->toContain('+15%')
        ->toContain('text-success')
        ->toContain('75')
        ->toContain('Growth');
});

test('stat card shows negative trend with danger color', function () {
    $html = Blade::render('<x-ui.stat-card value="30" label="Decline" :trend="-10" />');

    expect($html)
        ->toContain('-10%')
        ->toContain('text-danger')
        ->not->toContain('text-success')
        ->toContain('30')
        ->toContain('Decline');
});

test('stat card shows zero trend with neutral color', function () {
    $html = Blade::render('<x-ui.stat-card value="50" label="Stable" :trend="0" />');

    expect($html)
        ->toContain('0%')
        ->toContain('text-charcoal/50')
        ->not->toContain('text-success')
        ->not->toContain('text-danger')
        ->toContain('50')
        ->toContain('Stable');
});

test('stat card hides trend indicator when trend is null', function () {
    $html = Blade::render('<x-ui.stat-card value="25" label="No Trend" />');

    // Should not contain any trend percentage display
    expect($html)
        ->not->toContain('text-success')
        ->not->toContain('text-danger')
        ->not->toContain('text-charcoal/50')
        ->toContain('25')
        ->toContain('No Trend');
});

test('stat card is wrapped in a card component', function () {
    $html = Blade::render('<x-ui.stat-card value="100" label="Wrapped" />');

    // Should contain card styling
    expect($html)
        ->toContain('bg-off-white')
        ->toContain('rounded-lg')
        ->toContain('p-6');
});

test('stat card displays all elements together', function () {
    $html = Blade::render('<x-ui.stat-card icon="chart-bar" value="1,234" label="Total Sales" :trend="25" />');

    expect($html)
        ->toContain('bg-warm-gray/10') // Icon container
        ->toContain('1,234')      // Value
        ->toContain('Total Sales') // Label
        ->toContain('+25%')       // Trend
        ->toContain('text-success'); // Positive trend color
});