complete story 13.1

2026-01-04 22:34:05 +02:00
parent 37d9276a2c
commit b5ef8f9d28
3 changed files with 181 additions and 12 deletions
@@ -0,0 +1,137 @@
+<?php
+
+use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Blade;
+
+describe('Language Toggle Light Variant', function () {
+    test('light variant inactive language uses text-primary class', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        // English link (inactive when locale is 'ar') should use text-primary
+        expect($html)
+            ->toContain('text-primary')
+            ->toContain('hover:text-cta-hover')
+            ->toContain('hover:bg-primary/10');
+    });
+
+    test('light variant separator uses text-primary/50 class', function () {
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        expect($html)->toContain('text-primary/50');
+    });
+
+    test('light variant does not use old text-body classes for inactive', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        // Should NOT contain the old classes
+        expect($html)
+            ->not->toContain('text-body/70')
+            ->not->toContain('hover:text-body');
+    });
+
+    test('light variant separator does not use old text-body/30 class', function () {
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        expect($html)->not->toContain('text-body/30');
+    });
+});
+
+describe('Language Toggle Dark Variant', function () {
+    test('dark variant inactive language uses text-off-white class', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="dark" />');
+
+        // English link (inactive when locale is 'ar') should use text-off-white
+        expect($html)
+            ->toContain('text-off-white')
+            ->toContain('hover:text-cta')
+            ->toContain('hover:bg-active-hover');
+    });
+
+    test('dark variant separator uses text-cta/50 class', function () {
+        $html = Blade::render('<x-language-toggle variant="dark" />');
+
+        expect($html)->toContain('text-cta/50');
+    });
+
+    test('dark variant does not use light variant classes', function () {
+        App::setLocale('ar');
+
+        $html = Blade::render('<x-language-toggle variant="dark" />');
+
+        // Should NOT contain light variant classes
+        expect($html)
+            ->not->toContain('text-primary/50')
+            ->not->toContain('hover:text-cta-hover')
+            ->not->toContain('hover:bg-primary/10');
+    });
+});
+
+describe('Language Toggle Active State', function () {
+    test('active language has correct styling regardless of variant', function () {
+        App::setLocale('ar');
+
+        $lightHtml = Blade::render('<x-language-toggle variant="light" />');
+        $darkHtml = Blade::render('<x-language-toggle variant="dark" />');
+
+        // Both variants should show active state styling for Arabic
+        expect($lightHtml)
+            ->toContain('bg-active')
+            ->toContain('text-white')
+            ->toContain('font-bold');
+
+        expect($darkHtml)
+            ->toContain('bg-active')
+            ->toContain('text-white')
+            ->toContain('font-bold');
+    });
+
+    test('English shows active state when locale is English', function () {
+        App::setLocale('en');
+
+        $html = Blade::render('<x-language-toggle variant="light" />');
+
+        // Should still have active styling classes present
+        expect($html)
+            ->toContain('bg-active')
+            ->toContain('text-white')
+            ->toContain('font-bold');
+    });
+});
+
+describe('Language Toggle Default Variant', function () {
+    test('default variant is dark', function () {
+        App::setLocale('ar');
+
+        $defaultHtml = Blade::render('<x-language-toggle />');
+        $darkHtml = Blade::render('<x-language-toggle variant="dark" />');
+
+        // Default should behave same as dark variant
+        expect($defaultHtml)
+            ->toContain('text-off-white')
+            ->toContain('text-cta/50');
+    });
+});
+
+describe('Language Toggle Structure', function () {
+    test('contains both Arabic and English language links', function () {
+        $html = Blade::render('<x-language-toggle />');
+
+        expect($html)
+            ->toContain('العربية')
+            ->toContain('English')
+            ->toContain('language-switch-ar')
+            ->toContain('language-switch-en');
+    });
+
+    test('contains separator between languages', function () {
+        $html = Blade::render('<x-language-toggle />');
+
+        expect($html)->toContain('|');
+    });
+});