amare/tests/Browser/MotionTest.php

<?php

declare(strict_types=1);

use App\Models\PortfolioCase;
use App\Models\Service;
use App\Models\SiteSetting;
use App\Models\Testimonial;
use Illuminate\Foundation\Testing\RefreshDatabase;

uses(RefreshDatabase::class);

beforeEach(function (): void {
    SiteSetting::instance()->update([
        'hero_title' => 'Celebrações com propósito',
        'default_og_image_path' => 'media/hero.jpg',
        'default_og_image_alt' => 'Capa editorial',
    ]);

    Service::factory()->published()->featured()->create([
        'title' => 'Casamentos',
        'summary' => 'Assessoria completa',
    ]);
});

it('keeps reduced-motion home final and free of ornamental chapter counters', function (): void {
    PortfolioCase::factory()->published()->create([
        'is_featured' => true,
    ]);
    Testimonial::factory()->published()->create([
        'quote' => 'Relato publicado.',
    ]);

    $page = $this->visit('/', [
        'reducedMotion' => 'reduce',
    ]);

    $state = $page->script(<<<'JS'
        () => {
            const hero = document.querySelector('[data-motion="page-open"]');
            const title = document.querySelector('#hero-heading');
            const index = document.querySelector('[data-chapter-index]');
            const active = document.querySelector('[data-chapter-index] [aria-current="true"]');
            const titleStyle = title ? getComputedStyle(title) : null;
            const finalReveals = [...document.querySelectorAll('[data-reveal]')]
                .every((node) => node.classList.contains('is-revealed'));
            const flow = document.querySelector('.home-chapters');
            const chapters = Array.from(document.querySelectorAll('.home-chapter'));
            const folios = Array.from(document.querySelectorAll('[data-home-folio]'));

            return {
                heroActive: hero?.classList.contains('is-active') ?? false,
                titleOpacity: titleStyle ? Number.parseFloat(titleStyle.opacity) : 0,
                hasIndex: Boolean(index),
                hasActiveChapter: Boolean(active),
                finalReveals,
                enhancementEnabled: document.documentElement.hasAttribute('data-motion'),
                reset: flow ? getComputedStyle(flow).counterReset : '',
                increments: chapters.map((chapter) => getComputedStyle(chapter).counterIncrement),
                folioCount: folios.length,
            };
        }
    JS);

    expect($state['heroActive'])->toBeTrue();
    expect($state['titleOpacity'])->toBeGreaterThan(0.9);
    expect($state['hasIndex'])->toBeFalse();
    expect($state['hasActiveChapter'])->toBeFalse();
    expect($state['finalReveals'])->toBeTrue();
    expect($state['enhancementEnabled'])->toBeFalse();
    expect($state['reset'])->toBe('none');
    expect($state['increments'])->each->toBe('none');
    expect($state['folioCount'])->toBe(0);
});

it('opens home motion, reveals once, and allows CTA during open', function (): void {
    $page = $this->visit('/', [
        'reducedMotion' => 'no-preference',
    ]);

    $page->script(<<<'JS'
        () => new Promise((resolve) => {
            const wait = () => {
                const hero = document.querySelector('[data-motion="page-open"]');
                if (hero?.classList.contains('is-active')) {
                    resolve(true);
                    return;
                }
                requestAnimationFrame(wait);
            };
            wait();
            setTimeout(() => resolve(false), 2000);
        })
    JS);

    $opening = $page->script(<<<'JS'
        () => {
            const hero = document.querySelector('[data-motion="page-open"]');
            const beatDurations = [...hero.querySelectorAll('[data-motion-beat]')]
                .map((beat) => Number.parseFloat(getComputedStyle(beat).transitionDuration));
            const vertentesItems = [...document.querySelectorAll('[data-chapter="vertentes"] [data-reveal]')];

            return {
                active: hero?.classList.contains('is-active') ?? false,
                beatDurations,
                vertentesIndexes: vertentesItems.map((item) => item.style.getPropertyValue('--motion-index')),
            };
        }
    JS);

    expect($opening['active'])->toBeTrue();
    expect($opening['beatDurations'])->each->toBe(0.5);
    expect($opening['vertentesIndexes'])->toBe(['0', '1', '2']);

    $beforeReveal = $page->script(<<<'JS'
        () => document.querySelector('#briefing-heading')?.closest('[data-reveal]')?.classList.contains('is-revealed') ?? false
    JS);

    $page->script(<<<'JS'
        () => {
            document.querySelector('#briefing-heading')?.scrollIntoView({ block: 'center' });
            return true;
        }
    JS);

    $page->script(<<<'JS'
        () => new Promise((resolve) => {
            const target = document.querySelector('#briefing-heading')?.closest('[data-reveal]');
            const wait = () => {
                if (target?.classList.contains('is-revealed')) {
                    resolve(true);
                    return;
                }
                requestAnimationFrame(wait);
            };
            wait();
            setTimeout(() => resolve(false), 2000);
        })
    JS);

    $page->script('() => window.scrollTo({ top: 0, behavior: "instant" })');

    $afterReveal = $page->script(<<<'JS'
        () => document.querySelector('#briefing-heading')?.closest('[data-reveal]')?.classList.contains('is-revealed') ?? false
    JS);

    expect($beforeReveal)->toBeFalse();
    expect($afterReveal)->toBeTrue();

    $page->script(<<<'JS'
        () => {
            const opening = document.querySelector('[data-motion="page-open"]');
            opening?.classList.remove('is-active');
            requestAnimationFrame(() => opening?.classList.add('is-active'));
            return true;
        }
    JS);

    $page->click('[data-testid="home-primary-cta"]');

    $page->assertPathIs('/contato');
});

it('keeps content and navigation usable without javascript', function (): void {
    $page = $this->visit('/', [
        'javaScriptEnabled' => false,
    ]);

    $page
        ->assertVisible('#hero-heading')
        ->assertVisible('[data-testid="home-primary-cta"]')
        ->click('[data-testid="home-primary-cta"]');

    $page->assertPathIs('/contato');
});

it('keeps targets final when intersection observer is unavailable', function (): void {
    $page = $this->visit('/');
    $rawPage = $page->page();
    $url = $rawPage->url();

    $rawPage->context()->addInitScript('window.IntersectionObserver = undefined;');
    $rawPage->goto($url);

    $state = $page->script(<<<'JS'
        () => ({
            enhancementEnabled: document.documentElement.hasAttribute('data-motion'),
            pagesFinal: [...document.querySelectorAll('[data-motion="page-open"]')]
                .every((node) => node.classList.contains('is-active')),
            revealsFinal: [...document.querySelectorAll('[data-reveal]')]
                .every((node) => node.classList.contains('is-revealed')),
        })
    JS);

    expect($state)->toBe([
        'enhancementEnabled' => false,
        'pagesFinal' => true,
        'revealsFinal' => true,
    ]);
});

it('avoids horizontal overflow on visual public routes at desktop and mobile', function (): void {
    $case = PortfolioCase::factory()->published()->create([
        'slug' => 'casamento-jardim',
    ]);

    $routes = [
        '/',
        '/servicos',
        '/portfolio',
        '/portfolio/'.$case->slug,
        '/sobre',
        '/contato',
        '/briefing',
        '/privacidade',
        '/__missing-public-motion',
    ];

    $viewports = [[1440, 1000], [390, 844]];

    $page = $this->visit($routes[0], [
        'reducedMotion' => 'no-preference',
    ]);

    foreach ($routes as $index => $route) {
        if ($index > 0) {
            $page->navigate($route);
        }

        foreach ($viewports as [$width, $height]) {
            $page->resize($width, $height);

            $overflow = $page->script('() => document.documentElement.scrollWidth - document.documentElement.clientWidth');

            expect($overflow)->toBeLessThanOrEqual(0);
        }
    }
});