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

<?php

use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;

/**
 * The attributes of the rendered FAB, by name.
 *
 * @return array<string, string>
 */
function fabAttributes(string $blade): array
{
    preg_match('/<(?:button|a)\b([^>]*)>/', (string) test()->blade($blade), $tag);
    preg_match_all('/([\w:.-]+)(?:="([^"]*)")?/', $tag[1] ?? '', $pairs, PREG_SET_ORDER);

    return collect($pairs)->mapWithKeys(fn (array $pair): array => [$pair[1] => $pair[2] ?? ''])->all();
}

it('draws a FAB in its container colour, named by its tooltip', function () {
    $css = ComponentStylesheet::read('fab');

    expect(fabAttributes('<x-fab icon="add" tooltip="New share" />'))->toMatchArray([
        'data-md-fab' => 'data-md-fab',
        'data-md-size' => 'sm',
        'data-md-color' => 'primary',
        'data-md-variant' => 'container',
        'type' => 'button',
        'aria-label' => 'New share',
    ])
        ->not->toHaveKey('data-md-extended')
        ->and((string) $this->blade('<x-fab icon="add" tooltip="New share" />'))->toContain('popover="manual"')
        ->and($css->declarations('[data-md-fab]'))->toMatchArray([
            'background-color' => 'var(--md-fab-container)',
            'color' => 'var(--md-fab-on-container)',
            'box-shadow' => 'var(--md-sys-elevation-3)',
            'block-size' => 'var(--md-fab-size)',
            'border-radius' => 'var(--md-fab-corner)',
        ])
        ->and($css->declarations('[data-md-fab]:hover', ['@media (hover: hover)']))->toBe(['box-shadow' => 'var(--md-sys-elevation-4)'])
        ->and($css->declarations('[data-md-fab]:not([data-md-extended])'))->toBe(['inline-size' => 'var(--md-fab-size)']);
});

it('sizes a FAB at 56, 80 and 96px', function (string $size, string $px, string $corner, int $icon) {
    expect((string) $this->blade("<x-fab icon=\"add\" size=\"{$size}\" aria-label=\"Add\" />"))->toContain("data-md-size=\"{$size}\"")->toContain("--md-icon-size: {$icon}px")
        ->and(ComponentStylesheet::read('fab')->declarations("[data-md-fab][data-md-size='{$size}']"))->toMatchArray([
            '--md-fab-size' => $px,
            '--md-fab-corner' => "var(--md-sys-shape-corner-{$corner})",
        ]);
})->with([
    'sm' => ['sm', '56px', 'lg', 24],
    'md' => ['md', '80px', 'lg-increased', 28],
    'lg' => ['lg', '96px', 'xl', 32],
]);

it('fills the FAB\'s glyph, as M3 asks twice over', function () {
    $svg = trim((string) file_get_contents(__DIR__.'/../../../resources/svg/symbols/filled/add.svg'));
    $filled = substr($svg, (int) strpos($svg, '><') + 1);

    expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain($filled)
        ->and((string) $this->blade('<x-fab-menu label="New" />'))->toContain($filled);
});

it('extends with a label, in the colour itself when filled', function () {
    expect(fabAttributes('<x-fab icon="upload" label="Upload" size="md" color="tertiary" variant="filled" />'))
        ->toMatchArray(['data-md-size' => 'md', 'data-md-color' => 'tertiary', 'data-md-variant' => 'filled', 'data-md-extended' => 'data-md-extended'])
        ->not->toHaveKey('aria-label')
        ->and((string) $this->blade('<x-fab icon="upload" label="Upload" />'))->toContain('<span>Upload</span>')
        ->and(ComponentStylesheet::read('fab')->declarations("[data-md-fab][data-md-variant='filled']"))->toBe([
            'background-color' => 'var(--md-fab-color)',
            'color' => 'var(--md-fab-on-color)',
        ])
        ->and(ComponentStylesheet::read('fab')->declarations("[data-md-fab][data-md-color='tertiary']"))->toMatchArray([
            '--md-fab-color' => 'var(--md-sys-color-tertiary)',
            '--md-fab-container' => 'var(--md-sys-color-tertiary-container)',
        ]);
});

it('gives the extended FAB M3\'s gaps and its minimum width', function (string $size, string $gap, string $padding, string $type, string $minimum) {
    $css = ComponentStylesheet::read('fab');

    expect($css->declarations("[data-md-fab][data-md-extended][data-md-size='{$size}']"))->toMatchArray([
        'gap' => $gap,
        'padding-inline' => $padding,
        'font' => "var(--md-sys-typescale-{$type})",
    ])
        ->and($css->declarations("[data-md-fab][data-md-size='{$size}']"))->toMatchArray(['--md-fab-extended-min' => $minimum])
        ->and($css->declarations('[data-md-fab][data-md-extended]'))->toBe(['min-inline-size' => 'var(--md-fab-extended-min)']);
})->with([
    'sm' => ['sm', 'var(--md-sys-measurement-space100)', 'var(--md-sys-measurement-space200)', 'title-md', '80px'],
    'md' => ['md', 'var(--md-sys-measurement-space200)', '26px', 'title-lg', '80px'],
    'lg' => ['lg', '20px', '28px', 'headline-sm', '96px'],
]);

it('collapses an extended FAB to a FAB on scroll when asked', function () {
    $html = (string) $this->blade('<x-fab icon="add" label="New share" size="lg" collapse-on-scroll />');
    $css = ComponentStylesheet::read('fab');

    expect($html)
        ->toContain('x-data="materialFab"')
        ->toContain('x-bind:data-md-collapsed="collapsed ? &#039;&#039; : null"')
        ->toContain('data-md-collapse-on-scroll')
        ->toContain('data-md-size="lg"')
        // The label is clipped, never removed, so the collapsed FAB keeps its name.
        ->toContain('<span data-md-fab-label><span>New share</span></span>')
        ->and($css->declarations('[data-md-fab][data-md-collapse-on-scroll][data-md-collapsed]'))->toBe(['min-inline-size' => 'var(--md-fab-size)', 'gap' => '0'])
        ->and($css->declarations('[data-md-fab][data-md-collapse-on-scroll][data-md-collapsed] [data-md-fab-label]'))->toBe(['grid-template-columns' => '0fr', 'opacity' => '0'])
        ->and($css->declarations("[data-md-fab][data-md-collapse-on-scroll][data-md-size='lg'][data-md-collapsed]"))->toBe(['padding-inline' => 'var(--md-sys-measurement-space400)'])
        // Width and gap on the spatial spring, colour and shadow on the effects spring.
        ->and($css->declarations('[data-md-fab][data-md-collapse-on-scroll]')['transition-property'])->toBe('min-inline-size, padding-inline, gap, box-shadow, background-color, color');

    // A plain FAB has nothing to collapse, and an extended FAB without a glyph would collapse to nothing.
    expect((string) $this->blade('<x-fab icon="add" aria-label="New" collapse-on-scroll />'))->not->toContain('materialFab')
        ->and((string) $this->blade('<x-fab label="New share" collapse-on-scroll />'))->not->toContain('materialFab')
        ->and((string) $this->blade('<x-fab icon="add" label="New share" />'))->not->toContain('materialFab')->toContain('<span>New share</span>');
});

it('marks its root for the places that draw a nested FAB their own way', function () {
    expect((string) $this->blade('<x-fab icon="add" aria-label="New" />'))->toContain('data-md-fab')->not->toContain('class=');
});

it('cannot be disabled, because M3 says to remove a FAB instead', function () {
    // `disabled` is not a prop, so it falls through as a plain attribute, and the stylesheet
    // draws no disabled treatment for it.
    expect((string) $this->blade('<x-fab icon="add" aria-label="New" disabled />'))->toContain('disabled="disabled"')
        ->and(ComponentStylesheet::read('fab')->css)->not->toContain(':disabled');
});

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('aria-label="New"')
        ->toContain('bg-secondary-container text-on-secondary-container aria-expanded:bg-secondary aria-expanded:text-on-secondary')
        ->toContain('aria-expanded:rounded-corner-full')
        ->toContain('role="menu"')
        ->toContain('[position-area:top_span-left]')
        ->toContain('role="menuitem"')
        ->toContain('wire:click="upload"')
        ->toContain('h-14')
        ->toContain('Upload files')
        ->toContain('max-h-[calc(100dvh-8rem)] overflow-y-auto')
        ->toContain('data-fab-menu');
});

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);
});