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

<?php

use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;

it('opens a FAB menu of end-aligned actions above it', function () {
    $html = (string) $this->blade(<<<'BLADE'
        <x-fab-menu label="New" color="secondary">
            <x-fab-menu-item label="Upload files" icon="upload_file" color="secondary" wire:click="upload" />
        </x-fab-menu>
        BLADE);

    expect($html)
        ->toContain('x-data="materialMenu"')
        ->toContain('data-md-fab-menu')
        ->toContain('aria-label="New"')
        ->toContain('data-md-fab-menu-trigger')
        ->toContain('data-md-color="secondary"')
        ->toContain('role="menu"')
        ->toContain('data-md-fab-menu-popover')
        ->toContain('data-md-position="top-end"')
        ->toContain('data-md-fab-menu-item')
        ->toContain('role="menuitem"')
        ->toContain('wire:click="upload"')
        ->toContain('Upload files')
        ->and(ComponentStylesheet::read('fab-menu')->declarations('[data-md-fab-menu-popover]'))->toMatchArray([
            'max-block-size' => 'calc(100dvh - 128px)',
            'overflow-y' => 'auto',
        ])
        ->and(ComponentStylesheet::read('fab-menu')->declarations("[data-md-fab-menu-trigger][aria-expanded='true']"))->toBe([
            'border-radius' => 'var(--md-sys-shape-corner-full)',
            'background-color' => 'var(--md-fab-menu-color)',
            'color' => 'var(--md-fab-menu-on-color)',
        ]);
});

it('draws the trigger and its items from the foundation\'s shared classes, not their own', function () {
    $html = (string) $this->blade(<<<'BLADE'
        <x-fab-menu label="New">
            <x-fab-menu-item label="Upload files" icon="upload_file" />
        </x-fab-menu>
        BLADE);

    expect($html)
        ->toContain('class="md-state-layer md-focus-ring" aria-label="New"')
        ->toMatch('/<button class="md-state-layer md-focus-ring" data-md-fab-menu-item="data-md-fab-menu-item"/')
        ->and(ComponentStylesheet::read('fab-menu')->has('[data-md-fab-menu-trigger]::before'))->toBeFalse()
        ->and(ComponentStylesheet::read('fab-menu-item')->has('[data-md-fab-menu-item]::before'))->toBeFalse();
});

it('names the FAB menu even when the caller forgets to', function () {
    expect((string) $this->blade('<x-fab-menu />'))
        ->toContain('aria-label="Toggle menu"')
        ->and(substr_count((string) $this->blade('<x-fab-menu />'), 'aria-label="Toggle menu"'))->toBe(2);
});

it('swaps its open icon for a close icon while the menu is open', function () {
    $html = (string) $this->blade('<x-fab-menu icon="add" />');
    $css = ComponentStylesheet::read('fab-menu');

    expect($html)
        ->toContain('data-md-fab-menu-icon')
        ->toContain('data-md-fab-menu-close-icon')
        ->toContain('--md-icon-size: 20px')
        ->and($css->declarations('[data-md-fab-menu-close-icon]'))->toBe(['display' => 'none'])
        ->and($css->declarations("[data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-icon]"))->toBe(['display' => 'none'])
        ->and($css->declarations("[data-md-fab-menu-trigger][aria-expanded='true'] [data-md-fab-menu-close-icon]"))->toBe(['display' => 'inline-flex']);
});

it('opens at the corner asked for, secondary and tertiary in their own colours', function () {
    $css = ComponentStylesheet::read('fab-menu');

    expect((string) $this->blade('<x-fab-menu position="bottom-start" />'))->toContain('data-md-position="bottom-start"')
        ->and($css->declarations("[data-md-fab-menu-popover][data-md-position='bottom-start']"))->toMatchArray(['position-area' => 'bottom span-right'])
        ->and($css->declarations("[data-md-fab-menu-trigger][data-md-color='tertiary']"))->toBe([
            '--md-fab-menu-container' => 'var(--md-sys-color-tertiary-container)',
            '--md-fab-menu-on-container' => 'var(--md-sys-color-on-tertiary-container)',
            '--md-fab-menu-color' => 'var(--md-sys-color-tertiary)',
            '--md-fab-menu-on-color' => 'var(--md-sys-color-on-tertiary)',
        ]);
});

it('sinks the items back while the list closes, from the popover\'s own open state', function () {
    expect(ComponentStylesheet::read('fab-menu')->declarations('[data-md-fab-menu-popover]:not(:popover-open) > *'))->toBe([
        'translate' => '0 var(--md-sys-measurement-space100)',
        'opacity' => '0',
    ]);
});

it('gives an item its icon, colour and the exit fab-menu.css drives from the popover', function () {
    $html = (string) $this->blade('<x-fab-menu-item label="Upload a folder" icon="drive_folder_upload" color="tertiary" />');
    $css = ComponentStylesheet::read('fab-menu-item');

    expect($html)
        ->toContain('data-md-fab-menu-item')
        ->toContain('data-md-color="tertiary"')
        ->toContain('role="menuitem"')
        ->toContain('tabindex="-1"')
        ->toContain('type="button"')
        ->toContain('--md-icon-size: 24px')
        ->toContain('Upload a folder')
        ->and($css->declarations("[data-md-fab-menu-item][data-md-color='tertiary']"))->toBe([
            '--md-fab-menu-item-container' => 'var(--md-sys-color-tertiary-container)',
            '--md-fab-menu-item-on-container' => 'var(--md-sys-color-on-tertiary-container)',
        ])
        ->and($css->declarations('[data-md-fab-menu-item]', ['@starting-style']))->toBe([
            'translate' => '0 var(--md-sys-measurement-space100)',
            'opacity' => '0',
        ]);
});

it('links a FAB menu item, with wire:navigate unless external', function () {
    expect((string) $this->blade('<x-fab-menu-item label="Open" link="/open" />'))
        ->toContain('href="/open"')
        ->toContain('wire:navigate')
        ->not->toContain('target="_blank"')
        ->and((string) $this->blade('<x-fab-menu-item label="Open" link="/open" external />'))
        ->toContain('target="_blank"')
        ->toContain('rel="noopener"')
        ->not->toContain('wire:navigate');
});