complete story 9.6 with qa tests

2026-01-03 02:09:27 +02:00
parent 67502af83d
commit 35591d76b4
6 changed files with 499 additions and 29 deletions
@@ -0,0 +1,192 @@
+<?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-cream')
+        ->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-cream')
+        ->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-gold')
+        ->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-gold')
+        ->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-cream')
+        ->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-gold')
+        ->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-navy');
+});
+
+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-gold/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-gold/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-cream')
+        ->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-gold/10') // Icon container
+        ->toContain('1,234')      // Value
+        ->toContain('Total Sales') // Label
+        ->toContain('+25%')       // Trend
+        ->toContain('text-success'); // Positive trend color
+});