livewire-material/tests/Feature/Components/CarouselTest.php

<?php

use Illuminate\Support\Facades\File;
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;

it('is a carousel region of focusable slides named n of m', function () {
    $html = (string) $this->blade(<<<'BLADE'
        <x-carousel label="Recent uploads">
            <x-carousel-item><img src="/a.jpg" alt="A lake" /></x-carousel-item>
            <x-carousel-item><img src="/b.jpg" alt="A hill" /></x-carousel-item>
            <x-carousel-item><img src="/c.jpg" alt="A town" /></x-carousel-item>
        </x-carousel>
        BLADE);

    preg_match('/id="(material-carousel-[a-z0-9]+)"/', $html, $scroller);

    expect($scroller)->not->toBeEmpty()
        ->and($html)
        ->toContain('x-data="materialCarousel"')
        ->toContain('role="region"')
        ->toContain('aria-roledescription="carousel"')
        ->toContain('aria-label="Recent uploads"')
        ->toContain('aria-roledescription="slide"')
        ->toContain('aria-label="1 of 3"')
        ->toContain('aria-label="2 of 3"')
        ->toContain('aria-label="3 of 3"')
        ->toContain('<img src="/a.jpg" alt="A lake" />')
        ->not->toContain('[material-carousel-position]')
        ->and(substr_count($html, 'role="group"'))->toBe(3)
        // M3 puts the tab stop on each item and tells you not to focus the container.
        ->and(substr_count($html, 'tabindex="0"'))->toBe(3)
        // The item's own interaction is the shared focus-ring class, never a hand-rolled one.
        ->and(substr_count($html, 'class="md-focus-ring"'))->toBe(3)
        ->and($html)->toMatch('/<div\s+x-ref="scroller"(?:(?!tabindex)[^>])*>/');
});

it('counts the slides of a carousel inside a slide on their own', function () {
    $html = (string) $this->blade(<<<'BLADE'
        <x-carousel label="Outer">
            <x-carousel-item>
                <x-carousel label="Inner">
                    <x-carousel-item>1</x-carousel-item>
                    <x-carousel-item>2</x-carousel-item>
                    <x-carousel-item>3</x-carousel-item>
                </x-carousel>
            </x-carousel-item>
            <x-carousel-item>Two</x-carousel-item>
        </x-carousel>
        BLADE);

    expect($html)
        ->toContain('aria-label="1 of 3"')
        ->toContain('aria-label="3 of 3"')
        ->toContain('aria-label="1 of 2"')
        ->toContain('aria-label="2 of 2"');
});

it('browses many by default: 186px items that snap one at a time, 205px high', function () {
    $html = (string) $this->blade('<x-carousel><x-carousel-item>A</x-carousel-item></x-carousel>');

    expect($html)
        ->toContain('data-md-carousel="multi-browse"')
        ->toContain('aria-label="Carousel"')
        ->toContain('--material-carousel-item-width: 186px; --material-carousel-slot: 186px; --material-carousel-height: 205px')
        ->toContain('x-ref="probe"')
        ->toContain('data-md-padding="16"')
        ->toContain('data-md-padding-end="16"')
        ->toContain('data-md-carousel-item')
        ->not->toContain('data-md-centered');

    $carousel = ComponentStylesheet::read('carousel');
    $item = ComponentStylesheet::read('carousel-item');

    // The specs table's 16dp leading/trailing and 8dp top/bottom padding, and one item per swipe.
    expect($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-scroller]"))
        ->toHaveKey('overflow-x', 'auto')
        ->toHaveKey('padding-block', 'var(--md-sys-measurement-space100)')
        ->and($item->declarations('[data-md-carousel-item]'))
        ->toHaveKey('scroll-snap-align', 'start')
        ->toHaveKey('scroll-snap-stop', 'always')
        ->and($item->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item]"))
        ->toHaveKey('width', 'var(--material-carousel-slot)')
        ->toHaveKey('border-radius', 'var(--md-sys-shape-corner-xl)');
});

it('takes the item width in pixels or as a CSS length, and a height and padding', function () {
    expect((string) $this->blade('<x-carousel item-width="220" height="18rem" padding="24"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('--material-carousel-item-width: 220px; --material-carousel-slot: 220px; --material-carousel-height: 18rem')
        ->toContain('data-md-padding="24"')
        ->and((string) $this->blade('<x-carousel layout="uncontained"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('data-md-padding="16"')
        ->toContain('data-md-padding-end="0"')
        ->and((string) $this->blade('<x-carousel item-width="40%"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('--material-carousel-item-width: 40%;');
});

it('lays out a hero that fills the width unless capped, centred on request', function () {
    $filled = (string) $this->blade('<x-carousel layout="hero" centered><x-carousel-item>A</x-carousel-item></x-carousel>');

    expect($filled)
        ->toContain('data-md-carousel="hero"')
        ->toContain('data-md-centered')
        ->toContain('--material-carousel-slot: calc(100% - 64px)')
        ->not->toContain('x-ref="probe"')
        ->not->toContain('--material-carousel-item-width')
        ->and((string) $this->blade('<x-carousel layout="hero" item-width="600"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('--material-carousel-item-width: 600px')
        ->toContain('x-ref="probe"')
        ->not->toContain('data-md-centered');

    $carousel = ComponentStylesheet::read('carousel');

    // multi-browse and hero are the two snap-scrolling layouts (uncontained and multi-aspect
    // keep default scrolling, M3's recommendation for each).
    expect($carousel->declarations("[data-md-carousel='multi-browse'] > [data-md-carousel-scroller], [data-md-carousel='hero'] > [data-md-carousel-scroller]"))
        ->toBe(['scroll-snap-type' => 'x mandatory']);
});

it('leaves an uncontained carousel unsnapped, and scrolls a full-screen one down the page', function () {
    $carousel = ComponentStylesheet::read('carousel');
    $item = ComponentStylesheet::read('carousel-item');

    expect((string) $this->blade('<x-carousel layout="uncontained" item-width="180"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('data-md-carousel="uncontained"')
        ->toContain('--material-carousel-item-width: 180px')
        ->and($carousel->has("[data-md-carousel='uncontained'] > [data-md-carousel-scroller]"))->toBeFalse()
        ->and((string) $this->blade('<x-carousel layout="full-screen" centered controls><x-carousel-item label="Morning">A</x-carousel-item></x-carousel>'))
        ->toContain('data-md-carousel="full-screen"')
        ->toContain('data-md-padding="0" data-md-padding-end="0"')
        ->toContain('aria-label="Previous"')
        ->not->toContain('--material-carousel-slot')
        ->not->toContain('x-ref="probe"')
        ->not->toContain('data-md-centered')
        ->and((string) $this->blade('<x-carousel layout="sideways"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('data-md-carousel="multi-browse"');

    // M3: one edge-to-edge item at a time, scrolled vertically, 16px apart, no corner, no mask,
    // and never wider than the medium window it is meant for (C-11).
    expect($carousel->declarations("[data-md-carousel='full-screen'] > [data-md-carousel-scroller]"))
        ->toBe([
            'margin-inline' => 'auto',
            'height' => 'var(--material-carousel-height)',
            'max-width' => '840px',
            'flex-direction' => 'column',
            'gap' => 'var(--md-sys-measurement-space200)',
            'overflow-x' => 'hidden',
            'overflow-y' => 'auto',
            'overscroll-behavior-y' => 'contain',
            'scroll-snap-type' => 'y mandatory',
        ])
        ->and($item->declarations("[data-md-carousel='full-screen'] > [data-md-carousel-scroller] > [data-md-carousel-item]"))
        ->toBe(['width' => '100%'])
        // Only a masked layout (not full-screen, not multi-aspect) shifts and clips the surface.
        ->and($item->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']):not([data-md-carousel='multi-aspect']) > [data-md-carousel-scroller] > [data-md-carousel-item] > [data-md-carousel-surface]"))
        ->toBe([
            'border-radius' => 'var(--md-sys-shape-corner-xl)',
            'translate' => 'var(--material-carousel-shift) 0',
            'clip-path' => 'inset(0 var(--material-carousel-inset, 0px) round var(--md-sys-shape-corner-xl))',
        ]);
});

it('offers previous and next buttons for fine pointers, always, or never', function () {
    $auto = (string) $this->blade('<x-carousel><x-carousel-item>A</x-carousel-item></x-carousel>');

    preg_match('/id="(material-carousel-[a-z0-9]+)"/', $auto, $scroller);

    expect($auto)
        ->toContain('data-md-carousel-controls="auto"')
        ->toContain('data-md-carousel-previous')
        ->toContain('data-md-carousel-next')
        ->toContain('aria-label="Previous"')
        ->toContain('aria-label="Next"')
        ->toContain('x-on:click="previous()"')
        ->toContain('x-on:click="next()"')
        ->toContain("aria-controls=\"{$scroller[1]}\"")
        ->and(substr_count($auto, "aria-controls=\"{$scroller[1]}\""))->toBe(2);

    expect((string) $this->blade('<x-carousel controls><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->toContain('data-md-carousel-controls="always"')
        ->toContain('aria-label="Next"');

    expect((string) $this->blade('<x-carousel :controls="false"><x-carousel-item>A</x-carousel-item></x-carousel>'))
        ->not->toContain('data-md-carousel-controls')
        ->not->toContain('aria-label="Previous"')
        ->not->toContain('aria-label="Next"');

    $carousel = ComponentStylesheet::read('carousel');

    expect($carousel->declarations("[data-md-carousel] > [data-md-carousel-controls='always']"))
        ->toBe(['display' => 'flex'])
        ->and($carousel->declarations("[data-md-carousel] > [data-md-carousel-controls='auto']", ['@media (pointer: fine)']))
        ->toBe(['display' => 'flex'])
        // The button carries no class of its own, and mirrors whole in RTL rather than through
        // an icon prop button.blade.php does not expose.
        ->and($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:dir(rtl), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:dir(rtl)"))
        ->toBe(['transform' => 'scaleX(-1)']);
});

it('lays a label over an item on a scrim, and passes attributes to the item', function () {
    $html = (string) $this->blade('<x-carousel-item label="Lake Constance" wire:key="lake"><img src="/a.jpg" alt="" /></x-carousel-item>');

    expect($html)
        ->toContain('data-md-carousel-item')
        ->toContain('wire:key="lake"')
        ->toContain('data-md-carousel-label')
        ->toContain('data-md-carousel-label-text')
        ->toContain('Lake Constance')
        ->and((string) $this->blade('<x-carousel-item>A</x-carousel-item>'))
        ->not->toContain('data-md-carousel-label');

    $item = ComponentStylesheet::read('carousel-item');

    // The scrim under the label and the item's literal white ink over it are deliberate (C-25).
    expect($item->declarations('[data-md-carousel-surface] > [data-md-carousel-label]'))
        ->toHaveKey('background', 'linear-gradient(to top, color-mix(in srgb, var(--md-sys-color-scrim) 60%, transparent), transparent)')
        ->and($item->declarations('[data-md-carousel-label] > [data-md-carousel-label-text]'))
        ->toBe([
            'overflow' => 'hidden',
            'color' => 'white',
            'font' => 'var(--md-sys-typescale-title-md)',
            'letter-spacing' => 'var(--md-sys-typescale-title-md-tracking)',
            'text-overflow' => 'ellipsis',
            'white-space' => 'nowrap',
            'translate' => 'var(--material-carousel-label-shift) 0',
        ]);
});

it('lets a multi-aspect carousel size each item by its own ratio, between 9:16 and 16:9', function () {
    $html = (string) $this->blade(<<<'BLADE'
        <x-carousel layout="multi-aspect" label="Clips" height="180">
            <x-carousel-item aspect="16/9">A</x-carousel-item>
            <x-carousel-item aspect="9:16">B</x-carousel-item>
            <x-carousel-item>C</x-carousel-item>
            <x-carousel-item aspect="4">D</x-carousel-item>
            <x-carousel-item aspect="0.1">E</x-carousel-item>
        </x-carousel>
        BLADE);

    expect($html)
        ->toContain('data-md-carousel="multi-aspect"')
        ->toContain('--material-carousel-pad: 16px')
        ->toContain('--material-carousel-height: 180px')
        ->toContain('data-md-padding="16" data-md-padding-end="0"')
        // M3's own range holds whatever the item asks for: 16/9 at the top, 9/16 at the bottom.
        ->toContain('aspect-ratio: 1.7778')
        ->toContain('aspect-ratio: 0.5625')
        ->toContain('aspect-ratio: 1')
        ->not->toContain('--material-carousel-slot')
        ->not->toContain('x-ref="probe"')
        ->and(substr_count($html, 'aspect-ratio: 1.7778'))->toBe(2)
        ->and((string) $this->blade('<x-carousel><x-carousel-item aspect="16/9">A</x-carousel-item></x-carousel>'))
        ->not->toContain('aspect-ratio');

    $carousel = ComponentStylesheet::read('carousel');
    $item = ComponentStylesheet::read('carousel-item');

    // Uncontained scrolling, and nothing masks an item whose width is its own.
    expect($carousel->declarations("[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller]"))
        ->toBe(['padding-inline-start' => 'var(--material-carousel-pad)'])
        ->and($item->declarations("[data-md-carousel='multi-aspect'] > [data-md-carousel-scroller] > [data-md-carousel-item]"))
        ->toBe(['width' => 'auto', 'border-radius' => 'var(--md-sys-shape-corner-xl)']);
});

it('rings a focused item 3px inside its edge, and reveals an item the row cuts off under reduced motion', function () {
    expect(ComponentStylesheet::read('carousel-item')->declarations('[data-md-carousel-item]:focus-visible'))->toBe(['outline-offset' => '-3px'])
        ->and(File::get(__DIR__.'/../../../resources/js/carousel.js'))->toContain('if (state.measured || state.reducedMotion.matches) {');
});