blade(<<<'BLADE' 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' BLADE); expect($html) ->toContain('class="md-state-layer md-focus-ring" aria-label="New"') ->toMatch('/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('')) ->toContain('aria-label="Toggle menu"') ->and(substr_count((string) $this->blade(''), '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(''); $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(''))->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, in the popover and in its exit copy', function () { expect((string) $this->blade(''))->toContain('data-md-popover-exit') ->and(ComponentStylesheet::read('fab-menu')->declarations('[data-md-fab-menu-popover]:not(:popover-open) > *, [data-md-fab-menu-popover][data-md-popover-closing] > *'))->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(''); $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('')) ->toContain('href="/open"') ->toContain('wire:navigate') ->not->toContain('target="_blank"') ->and((string) $this->blade('')) ->toContain('target="_blank"') ->toContain('rel="noopener"') ->not->toContain('wire:navigate'); });