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

<?php

it('draws a FAB in its container colour, named by its tooltip', function () {
    expect((string) $this->blade('<x-fab icon="add" tooltip="New share" />'))
        ->toContain('size-14 rounded-corner-lg')
        ->toContain('bg-primary-container text-on-primary-container')
        ->toContain('shadow-elevation-3')
        ->toContain('aria-label="New share"')
        ->toContain('popover="manual"');
});

it('sizes a FAB at 56, 80 and 96px', function (string $size, string $classes, string $icon) {
    expect((string) $this->blade("<x-fab icon=\"add\" size=\"{$size}\" aria-label=\"Add\" />"))->toContain($classes)->toContain($icon);
})->with([
    'sm' => ['sm', 'size-14 rounded-corner-lg', 'size-6'],
    'md' => ['md', 'size-20 rounded-corner-lg-increased', 'size-7'],
    'lg' => ['lg', 'size-24 rounded-corner-xl', 'size-8'],
]);

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', function () {
    expect((string) $this->blade('<x-fab icon="upload" label="Upload" size="md" color="tertiary" variant="filled" />'))
        ->toContain('h-20 min-w-20 gap-4 px-[26px] rounded-corner-lg-increased type-title-lg')
        ->toContain('bg-tertiary text-on-tertiary')
        ->toContain('<span>Upload</span>')
        ->not->toContain('aria-label');
});

it('gives the extended FAB M3\'s gaps and its 80px minimum width', function (string $size, string $classes) {
    expect((string) $this->blade("<x-fab icon=\"add\" label=\"New\" size=\"{$size}\" />"))->toContain($classes);
})->with([
    'sm' => ['sm', 'h-14 min-w-20 gap-2'],
    'md' => ['md', 'h-20 min-w-20 gap-4'],
    'lg' => ['lg', 'h-24 min-w-24 gap-5'],
]);

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 />');

    expect($html)
        ->toContain('x-data="materialFab"')
        ->toContain('x-bind:data-collapsed="collapsed ? &#039;&#039; : null"')
        ->toContain('data-fab-collapsible')
        ->toContain('data-fab-size="lg"')
        // The label is clipped, never removed, so the collapsed FAB keeps its name.
        ->toContain('<span data-fab-label><span>New share</span></span>');

    // 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-fab');
});

it('cannot be disabled, because M3 says to remove a FAB instead', function () {
    $html = (string) $this->blade('<x-fab icon="add" aria-label="New" disabled />');

    // `disabled` is no longer a prop, so it falls through as a plain attribute rather than
    // painting M3's disabled treatment.
    expect($html)->not->toContain('disabled:bg-on-surface/10')->not->toContain('disabled:shadow-none');
});

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