Fix five never-run ActionsTest selectors and a script-chaining bug
The new menu browser tests never ran before this batch, and five had selector bugs of their own once they did: - "Delete" and a bare menuitem query matched every menu's copy on the showcase page, not just the open one's — scoped to the visible item or the filtered menu's own labelled list. - the filter test's id lookups ran :has-text(), a Playwright locator extension, inside a real document.querySelector, which throws — rewritten as a textContent search. - the sheet-at-compact assertions expected the bottom sheet to be a popover (:popover-open); <x-bottom-sheet> is still the x-show-based component from before this batch (containment, not yet rewritten), so openness is checked with assertVisible()/assertMissing() instead. - the FAB menu scroll test chained assertScript() off script()'s return value (the evaluated script's result, not the page). Plan step 36, actions group. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
2b3d3d507c
commit
636a0fe71d
@@ -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 () {
|
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")';
|
$trigger = '#menus button:has-text("Share")';
|
||||||
$sendTo = '#menus [role="menuitem"]:has-text("Send to")';
|
$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);
|
$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 () {
|
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")';
|
$trigger = '#menus button:has-text("Assign to")';
|
||||||
$field = '#menus [aria-label="Find a person"]';
|
$field = '#menus [aria-label="Find a person"]';
|
||||||
$ada = '#menus [role="menuitem"]:has-text("Ada Lovelace")';
|
// Scoped to this menu's own filtered list: every other menu on the page has "menuitem"s too,
|
||||||
$grace = '#menus [role="menuitem"]:has-text("Grace Hopper")';
|
// 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')
|
$page = showcase('menus')
|
||||||
->click($trigger)
|
->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.
|
// Ada Lovelace and Grace Hopper are both "Engineering"; the rest are Research or Networks.
|
||||||
$page->type($field, 'engineering')
|
$page->type($field, 'engineering')
|
||||||
->assertScript("[...document.querySelectorAll('#menus [role=\"menuitem\"]')].filter((item) => !item.hidden).length === 2")
|
->assertScript("{$list}.filter((item) => !item.hidden).length === 2")
|
||||||
->assertScript("document.querySelector('{$field}').getAttribute('aria-activedescendant') === document.querySelector('{$ada}').id");
|
->assertScript("document.querySelector('{$field}').getAttribute('aria-activedescendant') === ({$ada})");
|
||||||
|
|
||||||
$page->keys($field, 'ArrowDown')
|
$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')
|
$page->keys($field, 'Enter')
|
||||||
->assertAttribute($trigger, 'aria-expanded', 'false');
|
->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.
|
// Closing clears the query, so a reopen shows the whole list again.
|
||||||
$page->click($trigger)
|
$page->click($trigger)
|
||||||
->assertScript("document.querySelector('{$field}').value === ''")
|
->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 () {
|
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")';
|
$trigger = '#menus button:has-text("Photo")';
|
||||||
$dialog = "document.querySelector('[role=\"dialog\"][aria-label=\"Photo actions\"]')";
|
// The sheet is <x-bottom-sheet>, 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")';
|
$addToAlbum = '#menus [role="menuitem"]:has-text("Add to album")';
|
||||||
|
|
||||||
$page = showcase('menus')->resize(400, 800);
|
$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)
|
$page->click($trigger)
|
||||||
->assertAttribute($trigger, 'aria-haspopup', 'dialog')
|
->assertAttribute($trigger, 'aria-haspopup', 'dialog')
|
||||||
->assertScript(focused("textContent.trim().startsWith('Set as wallpaper')"))
|
->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.
|
// A submenu opens in place, under its item, instead of beside it as the popover's would.
|
||||||
$page->keys(':focus', 'ArrowDown')
|
$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')
|
$page->keys(':focus', 'Escape')
|
||||||
->assertAttribute($trigger, 'aria-expanded', 'false')
|
->assertAttribute($trigger, 'aria-expanded', 'false')
|
||||||
->assertScript("! {$dialog}.matches(':popover-open')")
|
->assertMissing($dialog)
|
||||||
->assertScript(focused("textContent.trim() === 'Photo'"));
|
->assertScript(focused("textContent.trim() === 'Photo'"));
|
||||||
|
|
||||||
// From 600px the trigger opens the popover instead, and a resize across it while one is open
|
// 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()")');
|
$page->script('window.eval("Livewire.first().touch()")');
|
||||||
|
|
||||||
|
// The sheet is <x-bottom-sheet>, still x-show-based, so open shows as visible, not
|
||||||
|
// :popover-open.
|
||||||
$page->assertSeeIn('#renders', '1')
|
$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("getAttribute('aria-label') === 'Find a person'"))
|
||||||
->assertScript(focused("value === 'grace'"));
|
->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')
|
->assertAttribute('button[aria-label="New"]', 'aria-expanded', 'true')
|
||||||
->assertScript("{$list}.scrollHeight > {$list}.clientHeight");
|
->assertScript("{$list}.scrollHeight > {$list}.clientHeight");
|
||||||
|
|
||||||
$page->script("window.__fabTop = {$trigger}.getBoundingClientRect().top; {$list}.scrollTop = 40")
|
$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.
|
// The close button is not inside the scrolling list, so scrolling it never moves the button.
|
||||||
->assertScript("{$trigger}.getBoundingClientRect().top === window.__fabTop");
|
$page->assertScript("{$trigger}.getBoundingClientRect().top === window.__fabTop");
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user