blade(<<<'BLADE'

BLADE); preg_match('/anchor-name: (--material-menu-([a-z0-9]+))/', $html, $anchor); expect($anchor)->not->toBeEmpty() ->and($html) ->toContain('x-data="materialMenu"') ->toContain('') ->toContain('popover="auto"') ->toContain('role="menu"') ->toContain('aria-label="Share actions"') ->toContain("id=\"material-menu-{$anchor[2]}\"") ->toContain("position-anchor: {$anchor[1]}") ->toContain('bg-surface-container-low') ->toContain('[position-area:bottom_span-right]'); }); it('scrolls a menu too long for the window instead of running off it', function () { expect((string) $this->blade('

')) ->toContain('max-h-[min(18rem,calc(100dvh-2rem))] overflow-y-auto') ->not->toContain('overflow-visible'); }); it('opens at the position asked for, in the vibrant colours on request', function () { $html = (string) $this->blade('

'); expect($html)->toContain('[position-area:top_span-left]')->toContain('bg-tertiary-container text-on-tertiary-container'); }); it('draws an item as a menuitem button', function () { $html = (string) $this->blade(''); expect($html) ->toContain('role="menuitem"') ->toContain('tabindex="-1"') ->toContain('type="button"') ->toContain('wire:click="download"') ->toContain('Download') ->toContain('⌘D') ->toContain('As a ZIP') ->toContain('size-5 text-on-surface-variant'); }); it('makes a selectable item a menuitemcheckbox, ticked at its end', function () { $check = trim((string) file_get_contents(__DIR__.'/../../../resources/svg/symbols/outlined-20/check.svg')); $check = substr($check, (int) strpos($check, '><') + 1); expect((string) $this->blade('')) ->toContain('role="menuitemcheckbox"') ->toContain('aria-checked="true"') ->toContain('bg-tertiary-container') ->toContain('data-keep-open') ->toContain($check) ->and((string) $this->blade('')) ->toContain('aria-checked="false"') ->not->toContain($check) ->and((string) $this->blade('')) ->not->toContain($check); }); it('gives an item M3\'s 48px row and 16px sides, and the separator its 8px', function () { expect((string) $this->blade(''))->toContain('min-h-12')->toContain('px-4') ->and((string) $this->blade(''))->toContain('mx-4 my-2') ->and((string) $this->blade(''))->toContain('px-4 pt-2 pb-1'); }); it('marks the page an item leads to, and carries a badge', function () { $html = (string) $this->blade(''); expect($html) ->toContain('role="menuitem"') ->toContain('aria-current="page"') ->not->toContain('aria-checked') ->toContain('bg-secondary-container text-on-secondary-container') ->toContain('>3<') ->and((string) $this->blade('')) ->not->toContain('aria-current') ->not->toContain('secondary-container'); }); it('links an item, and keeps a disabled one out of reach', function () { $this->blade('') ->assertSee('href="/settings"', false) ->assertSee('wire:navigate', false); $this->blade('') ->assertSee('aria-disabled="true"', false) ->assertSee('pointer-events-none', false); }); it('separates and labels groups', function () { $this->blade('')->assertSee('role="separator"', false); $this->blade('

') ->assertSee('role="group" aria-label="Sort by"', false); }); it('separates clusters by a gap instead of a divider when asked', function () { $html = (string) $this->blade('

'); // M3 Expressive's grouped layout: 2px between the items of a cluster, 8px between clusters — // the same 8px the divider keeps above and below its line. expect($html) ->toContain('role="group"') ->toContain('not-first:mt-2') ->toContain('space-y-0.5') ->not->toContain('aria-label') ->not->toContain('py-1 first:pt-0') ->and((string) $this->blade('

')) ->toContain('aria-label="Then"') ->toContain('space-y-0.5') ->and((string) $this->blade('

')) ->toContain('py-1 first:pt-0 last:pb-0') ->not->toContain('space-y-0.5'); }); it('adds icon-class to the leading icon, over its own colour but not over disabled', function () { $leading = fn (string $html): string => preg_match('/]*class="([^"]*)"/', $html, $icon) ? $icon[1] : ''; expect($leading((string) $this->blade(''))) ->toBe('size-5 [:where(&)]:text-on-surface-variant text-sport-run') ->and($leading((string) $this->blade(''))) ->toBe('size-5 [:where(&)]:text-on-tertiary-container text-sport-run') ->and($leading((string) $this->blade(''))) ->toBe('size-5 text-sport-run text-on-surface/38!') ->and($leading((string) $this->blade(''))) ->toBe('size-5 text-on-surface-variant') ->and((string) $this->blade('')) ->not->toContain('text-sport-run'); }); it('opens a submenu beside the item that holds it', function () { $html = (string) $this->blade(<<<'BLADE' BLADE); preg_match('/anchor-name: (--material-submenu-([a-z0-9]+))/', $html, $anchor); expect($anchor)->not->toBeEmpty() ->and($html) ->toContain('x-data="materialSubmenu"') ->toContain('x-on:keydown.right.prevent.stop="open(\'first\')"') ->toContain('x-on:pointerenter="hover($event)"') ->toContain('aria-haspopup="menu"') ->toContain('aria-expanded="false"') ->toContain("aria-controls=\"material-submenu-{$anchor[2]}\"") ->toContain("id=\"material-submenu-{$anchor[2]}\"") ->toContain("position-anchor: {$anchor[1]}") ->toContain('data-submenu') ->toContain('aria-label="Send to"') ->toContain('[position-area:inline-end_span-block-end]') ->toContain('[position-try-fallbacks:flip-inline]') // Opening a submenu chooses nothing, so the menu around it stays where it was. ->toContain('data-keep-open') ->toContain('A person'); }); it('marks a submenu item with a chevron instead of a tick', function () { $chevron = trim((string) file_get_contents(__DIR__.'/../../../resources/svg/symbols/outlined-20/chevron_right.svg')); $chevron = substr($chevron, (int) strpos($chevron, '><') + 1); expect((string) $this->blade('')) ->toContain($chevron) ->toContain('rtl:-scale-x-100') ->and((string) $this->blade('')) ->not->toContain($chevron); }); it('embeds a text field that filters the list, as a combobox over the menu', function () { $html = (string) $this->blade('

'); preg_match('/id="(material-menu-[a-z0-9]+)"/', $html, $id); expect($id)->not->toBeEmpty() ->and($html) ->toContain('data-menu-filter') ->toContain('role="combobox"') ->toContain('aria-autocomplete="list"') ->toContain("aria-controls=\"{$id[1]}-list\"") ->toContain('aria-label="Find a person"') ->toContain('placeholder="Find a person"') ->toContain('x-on:input="refine()"') ->toContain('x-on:keydown.stop="search($event)"') ->toContain('

toContain('Nothing matches') // A text field is not something a `role="menu"` may hold, so the list moves inside it. ->toContain("

toMatch('/]*popover="auto"(?![^>]*role="menu")/'); }); it('names a bare filter field, and leaves a plain menu alone', function () { expect((string) $this->blade('

')) ->toContain('aria-label="Filter"') ->and((string) $this->blade('

')) ->not->toContain('data-menu-filter') ->not->toContain('role="combobox"') ->toMatch('/]*popover="auto"[^>]*role="menu"/'); }); it('tells a vibrant menu apart, so the submenus inside it take the same container', function () { expect((string) $this->blade('

')) ->toContain('data-menu') ->toContain('data-vibrant') ->and((string) $this->blade('

')) ->toContain('data-menu') ->not->toContain('data-vibrant'); }); it('opens a sheet-at-compact menu\'s items in a modal bottom sheet as well as the popover', function () { $html = (string) $this->blade(<<<'BLADE'

BLADE); preg_match('/id="material-menu-([a-z0-9]+)"/', $html, $key); expect($key)->not->toBeEmpty(); [$popover, $sheet] = explode('