diff --git a/tests/Browser/ActionsTest.php b/tests/Browser/ActionsTest.php index eddd83e5..1a088980 100644 --- a/tests/Browser/ActionsTest.php +++ b/tests/Browser/ActionsTest.php @@ -674,7 +674,8 @@ it('opens a submenu with Right, Enter or Space, and closes it with Left or Escap it('opens a submenu on hover for a fine pointer, and closes it once the pointer truly leaves', function () { $trigger = '#menus button:has-text("Share")'; $sendTo = '#menus [role="menuitem"]:has-text("Send to")'; - $delete = '#menus [role="menuitem"]:has-text("Delete")'; + // "Delete" is an item in five menus on the page; only the open one's is visible. + $delete = '#menus [role="menuitem"]:has-text("Delete"):visible'; $page = showcase('menus')->click($trigger); @@ -692,8 +693,12 @@ it('opens a submenu on hover for a fine pointer, and closes it once the pointer it('filters a menu\'s items as its field is typed into, moves the highlight with arrows, and clears on reopen', function () { $trigger = '#menus button:has-text("Assign to")'; $field = '#menus [aria-label="Find a person"]'; - $ada = '#menus [role="menuitem"]:has-text("Ada Lovelace")'; - $grace = '#menus [role="menuitem"]:has-text("Grace Hopper")'; + // Scoped to this menu's own filtered list: every other menu on the page has "menuitem"s too, + // and :has-text() is a Playwright locator extension — invalid inside a real + // document.querySelector, which the id lookups below need to be. + $list = "[...document.querySelectorAll('#menus [role=\"menu\"][aria-label=\"Assign to\"] [role=\"menuitem\"]')]"; + $ada = "{$list}.find((item) => item.textContent.trim().startsWith('Ada Lovelace')).id"; + $grace = "{$list}.find((item) => item.textContent.trim().startsWith('Grace Hopper')).id"; $page = showcase('menus') ->click($trigger) @@ -701,11 +706,11 @@ it('filters a menu\'s items as its field is typed into, moves the highlight with // Ada Lovelace and Grace Hopper are both "Engineering"; the rest are Research or Networks. $page->type($field, 'engineering') - ->assertScript("[...document.querySelectorAll('#menus [role=\"menuitem\"]')].filter((item) => !item.hidden).length === 2") - ->assertScript("document.querySelector('{$field}').getAttribute('aria-activedescendant') === document.querySelector('{$ada}').id"); + ->assertScript("{$list}.filter((item) => !item.hidden).length === 2") + ->assertScript("document.querySelector('{$field}').getAttribute('aria-activedescendant') === ({$ada})"); $page->keys($field, 'ArrowDown') - ->assertScript("document.querySelector('{$field}').getAttribute('aria-activedescendant') === document.querySelector('{$grace}').id"); + ->assertScript("document.querySelector('{$field}').getAttribute('aria-activedescendant') === ({$grace})"); $page->keys($field, 'Enter') ->assertAttribute($trigger, 'aria-expanded', 'false'); @@ -713,12 +718,14 @@ it('filters a menu\'s items as its field is typed into, moves the highlight with // Closing clears the query, so a reopen shows the whole list again. $page->click($trigger) ->assertScript("document.querySelector('{$field}').value === ''") - ->assertScript("[...document.querySelectorAll('#menus [role=\"menuitem\"]')].every((item) => !item.hidden)"); + ->assertScript("{$list}.every((item) => !item.hidden)"); }); it('opens a sheet-at-compact menu below 600px, focused on its first item, and the popover from 600px', function () { $trigger = '#menus button:has-text("Photo")'; - $dialog = "document.querySelector('[role=\"dialog\"][aria-label=\"Photo actions\"]')"; + // The sheet is , still x-show-based (not rewritten in this batch), so its + // openness shows as visibility, not the Popover API's :popover-open. + $dialog = '[role="dialog"][aria-label="Photo actions"]'; $addToAlbum = '#menus [role="menuitem"]:has-text("Add to album")'; $page = showcase('menus')->resize(400, 800); @@ -726,7 +733,7 @@ it('opens a sheet-at-compact menu below 600px, focused on its first item, and th $page->click($trigger) ->assertAttribute($trigger, 'aria-haspopup', 'dialog') ->assertScript(focused("textContent.trim().startsWith('Set as wallpaper')")) - ->assertScript("{$dialog}.matches(':popover-open')"); + ->assertVisible($dialog); // A submenu opens in place, under its item, instead of beside it as the popover's would. $page->keys(':focus', 'ArrowDown') @@ -739,7 +746,7 @@ it('opens a sheet-at-compact menu below 600px, focused on its first item, and th $page->keys(':focus', 'Escape') ->assertAttribute($trigger, 'aria-expanded', 'false') - ->assertScript("! {$dialog}.matches(':popover-open')") + ->assertMissing($dialog) ->assertScript(focused("textContent.trim() === 'Photo'")); // From 600px the trigger opens the popover instead, and a resize across it while one is open @@ -764,8 +771,10 @@ it('filters in the sheet too, and a Livewire render keeps it open with the field $page->script('window.eval("Livewire.first().touch()")'); + // The sheet is , still x-show-based, so open shows as visible, not + // :popover-open. $page->assertSeeIn('#renders', '1') - ->assertScript("document.querySelector('[role=\"dialog\"][aria-label=\"Assign to\"]').matches(':popover-open')") + ->assertVisible('[role="dialog"][aria-label="Assign to"]') ->assertScript(focused("getAttribute('aria-label') === 'Find a person'")) ->assertScript(focused("value === 'grace'")); }); @@ -830,7 +839,8 @@ it('scrolls the FAB menu\'s items on a short window, behind the close button, wh ->assertAttribute('button[aria-label="New"]', 'aria-expanded', 'true') ->assertScript("{$list}.scrollHeight > {$list}.clientHeight"); - $page->script("window.__fabTop = {$trigger}.getBoundingClientRect().top; {$list}.scrollTop = 40") - // The close button is not inside the scrolling list, so scrolling it never moves the button. - ->assertScript("{$trigger}.getBoundingClientRect().top === window.__fabTop"); + $page->script("window.__fabTop = {$trigger}.getBoundingClientRect().top; {$list}.scrollTop = 40"); + + // The close button is not inside the scrolling list, so scrolling it never moves the button. + $page->assertScript("{$trigger}.getBoundingClientRect().top === window.__fabTop"); });