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('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('scrolls the list on a short window, behind the close button, which stays fixed', 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('');
$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');
});