libra/tests/Feature/Public/AboutPageTest.php

<?php

// AC1: Route & Navigation
test('about page is accessible at /about', function () {
    $this->get('/about')
        ->assertOk();
});

test('about page route is named about', function () {
    expect(route('about'))->toEndWith('/about');
});

// AC2: Page Structure
test('about page uses public layout', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('data-test="main-navigation"', false)
        ->assertSee('<footer', false);
});

// AC3: Hero Section Container
test('about page hero section has dark forest green background', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('bg-[#2D3624]', false);
});

// AC4: Page Title
test('about page displays title in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('About Us');
});

test('about page displays title in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('من نحن');
});

// AC5: Tagline Display
test('about page displays tagline in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Committed to Justice – Grounded in Dignity – Driven to Advocate');
});

test('about page displays tagline in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('ملتزمون بالعدالة – متجذرون بالكرامة – مدفوعون للدفاع');
});

// AC6: Identity Statement
test('about page displays identity statement in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('A legal institution woven from the fabric of society, using research as a tool of power to serve justice.');
});

test('about page displays identity statement in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('مؤسسة قانونية منسوجة من نسيج المجتمع، تستخدم البحث كأداة قوة لخدمة العدالة.');
});

// AC8: RTL Support - Verified via locale setting (RTL is handled by layout)
test('about page sets correct language direction for Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('dir="rtl"', false);
});

test('about page sets correct language direction for English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('dir="ltr"', false);
});

// Navigation Link Tests
test('navigation contains about us link in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/')
        ->assertOk()
        ->assertSee('About Us')
        ->assertSee('href="'.route('about').'"', false);
});

test('navigation contains about us link in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/')
        ->assertOk()
        ->assertSee('من نحن')
        ->assertSee('href="'.route('about').'"', false);
});

test('about link in navigation has data-test attribute', function () {
    $this->get('/')
        ->assertOk()
        ->assertSee('data-test="nav-about"', false);
});

test('mobile navigation contains about us link', function () {
    $this->get('/')
        ->assertOk()
        ->assertSee('data-test="mobile-nav-about"', false);
});

// Story 16.2: Vision & Mission Section Tests

// AC1: Vision Section Container
test('about page has vision section with white background', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('bg-white py-8', false);
});

// AC2: Vision Section Header
test('about page displays vision title in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Our Vision');
});

test('about page displays vision title in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('رؤيتنا');
});

// AC3: Vision Statement
test('about page displays vision statement in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Libra is woven from the fabric of society');
});

test('about page displays vision statement in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('ليبرا منسوجة من نسيج المجتمع');
});

// AC4: Mission Section Container
test('about page has mission section with cream background', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('bg-background py-8', false);
});

// AC5: Mission Section Header
test('about page displays mission title in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Our Mission');
});

test('about page displays mission title in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('مهمتنا');
});

// AC6: Mission Cards - Institution
test('about page displays institution mission card in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('For Our Institution')
        ->assertSee('Libra works at the heart of society');
});

test('about page displays institution mission card in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('لمؤسستنا')
        ->assertSee('تعمل ليبرا في قلب المجتمع');
});

// AC6: Mission Cards - Society
test('about page displays society mission card in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('For Society')
        ->assertSee('Libra Scholarship for Law and Palestinian Arts');
});

test('about page displays society mission card in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('للمجتمع')
        ->assertSee('منحة ليبرا للقانون والفنون الفلسطينية');
});

// AC6: Mission Cards - Diaspora
test('about page displays diaspora mission card in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('For Palestinians in the Diaspora')
        ->assertSee('platform for listening to Palestinians in the diaspora');
});

test('about page displays diaspora mission card in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('للفلسطينيين في الشتات')
        ->assertSee('منصة للاستماع إلى الفلسطينيين في الشتات');
});

// AC7: Mission Card Styling
test('about page mission cards have correct styling', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('bg-white rounded-lg shadow-sm p-6', false);
});

// AC8: Responsive Grid
test('about page mission cards use responsive grid', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('grid-cols-1 md:grid-cols-2 lg:grid-cols-3', false);
});

// AC7: Icons present (Flux renders icons as inline SVGs)
test('about page mission cards have icons', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('<svg', false); // Flux icons render as inline SVGs
});

// Story 16.3: Values Section Tests

// AC1: Values Section Container
test('about page has values section with white background', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('bg-white py-8 sm:py-12 lg:py-[60px]', false);
});

// AC2: Values Section Header
test('about page displays values title in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Our Values');
});

test('about page displays values title in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('قيمنا');
});

// AC3: Values Introduction
test('about page displays values intro in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('These values start in the field and return to the people.');
});

test('about page displays values intro in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('هذه القيم تبدأ من الميدان وتعود إلى الناس.');
});

// AC4: Six Value Cards - English
test('about page displays integrity value in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Integrity');
});

test('about page displays justice value in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Justice');
});

test('about page displays knowledge value in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Knowledge');
});

test('about page displays women empowerment value in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee("Women's Empowerment");
});

test('about page displays professionalism value in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Professionalism');
});

test('about page displays social innovation value in English', function () {
    $this->withSession(['locale' => 'en'])
        ->get('/about')
        ->assertOk()
        ->assertSee('Social Innovation');
});

// AC4: Six Value Cards - Arabic
test('about page displays integrity value in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('النزاهة');
});

test('about page displays justice value in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('العدالة');
});

test('about page displays knowledge value in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('المعرفة');
});

test('about page displays women empowerment value in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('تمكين المرأة');
});

test('about page displays professionalism value in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('الاحترافية');
});

test('about page displays social innovation value in Arabic', function () {
    $this->withSession(['locale' => 'ar'])
        ->get('/about')
        ->assertOk()
        ->assertSee('الابتكار الاجتماعي');
});

// AC5: Value Card Styling
test('about page value cards have correct styling', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('bg-background rounded-xl p-6 text-center hover:shadow-md transition-shadow', false);
});

// AC6: Responsive Grid
test('about page value cards use responsive grid', function () {
    $this->get('/about')
        ->assertOk()
        ->assertSee('grid-cols-2 md:grid-cols-3 lg:grid-cols-6', false);
});