Press once whatever a second press would open over or undo
tests / feature (8.4) (push) Successful in 1m50s
tests / feature (8.5) (push) Successful in 1m54s
tests / browser (chrome, chromium) (push) Successful in 7m52s
tests / browser (firefox, firefox) (push) Successful in 11m56s
tests / browser (safari, webkit) (push) Successful in 12m35s
tests / feature (8.4) (push) Successful in 1m50s
tests / feature (8.5) (push) Successful in 1m54s
tests / browser (chrome, chromium) (push) Successful in 7m52s
tests / browser (firefox, firefox) (push) Successful in 11m56s
tests / browser (safari, webkit) (push) Successful in 12m35s
The browser plugin runs every call on a page again when its first attempt takes over a second, and on the runner a press can. For most presses that costs nothing. For two kinds it breaks the test: a press that opens a dialog, a sheet, a full-screen view or a modal rail over its own trigger, whose second press can never land, and a press that changes state a second one would change again — a menu trigger, a toggle, a chip, a range picker's day, a paging key, a Save. The bottom sheet with preset heights timed out on WebKit that way after the date picker had on Firefox. Every such press in the browser suite now goes through pressOnce(), 253 of them across sixteen files, not only the ones the runner happened to catch; focus moves inside an open view, Escape, links and plain "set" actions keep the retry, which is harmless for them. Two samples that were still racing the machine: - The standard side sheet's exit is caught half-way with its motion stretched, as every other mid-exit sample is, and fullSpeed() takes the stretch off again before the test times a reopen against the real exit. Under load on Linux WebKit it had failed two runs in five; it passes ten in ten. - The switch-and-checkbox row measures its widths once, so it now waits for the resize to land and the brand face to load before it does. Browser 300 passed on Firefox and WebKitGTK in a Linux container held to two busy cores, and on Chrome, Firefox and WebKit on macOS. Feature 1159 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
ad230e0f48
commit
ebdc2ef2e1
+188
-100
@@ -167,8 +167,10 @@ it('opens a menu from the keyboard, on the last item with ArrowUp', function ()
|
||||
|
||||
$page->script("document.querySelector('".MORE."').focus()");
|
||||
|
||||
$page->keys(':focus', 'ArrowUp')
|
||||
->assertAttribute(MORE, 'aria-expanded', 'true')
|
||||
// ArrowUp on the trigger opens the menu, same as clicking it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys(':focus', 'ArrowUp');
|
||||
|
||||
$page->assertAttribute(MORE, 'aria-expanded', 'true')
|
||||
->assertScript(focused("textContent.trim().startsWith('Delete')"));
|
||||
});
|
||||
|
||||
@@ -176,7 +178,10 @@ it('shows no state layer on a disabled menu item even when keyboard focus reache
|
||||
$trigger = '#menus button:has-text("Sort")';
|
||||
$reset = '#menus [role="menuitem"]:has-text("Reset")';
|
||||
|
||||
$page = showcase('menus')->click($trigger);
|
||||
$page = showcase('menus');
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
// M3 keeps a disabled item reachable so a person can find out it is there, but
|
||||
// .md-state-layer withholds the layer itself from [aria-disabled="true"] (interaction.css).
|
||||
@@ -189,21 +194,28 @@ it('shows no state layer on a disabled menu item even when keyboard focus reache
|
||||
it('opens a menu the moment the page can be used', function () {
|
||||
// The guard against a light-dismiss press reopening the menu once measured from the page's
|
||||
// time origin, and swallowed every click in the first quarter second.
|
||||
visit('/material/menus')
|
||||
->click(MORE)
|
||||
->assertAttribute(MORE, 'aria-expanded', 'true');
|
||||
$page = visit('/material/menus');
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click(MORE);
|
||||
|
||||
$page->assertAttribute(MORE, 'aria-expanded', 'true');
|
||||
});
|
||||
|
||||
it('closes a menu when an item is chosen, but not one that keeps it open', function () {
|
||||
$page = showcase('menus');
|
||||
|
||||
$page->click(MORE)
|
||||
->click('#menus [role="menuitem"]:has-text("Download")')
|
||||
->assertAttribute(MORE, 'aria-expanded', 'false');
|
||||
// Opens the menu, then an item closes it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click(MORE)
|
||||
->click('#menus [role="menuitem"]:has-text("Download")');
|
||||
|
||||
$page->click('#menus button:has-text("Sort")')
|
||||
->click('#menus [role="menuitemcheckbox"]:has-text("Largest")')
|
||||
->assertScript("document.querySelector('#menus [role=\"menu\"][aria-label=\"Sort\"]').matches(':popover-open')");
|
||||
$page->assertAttribute(MORE, 'aria-expanded', 'false');
|
||||
|
||||
// Opens the menu, then a checkbox item toggles: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#menus button:has-text("Sort")')
|
||||
->click('#menus [role="menuitemcheckbox"]:has-text("Largest")');
|
||||
|
||||
$page->assertScript("document.querySelector('#menus [role=\"menu\"][aria-label=\"Sort\"]').matches(':popover-open')");
|
||||
});
|
||||
|
||||
it('shows a tooltip on keyboard focus and hides it on Escape', function () {
|
||||
@@ -239,9 +251,13 @@ it('moves a connected group\'s choice with the arrow keys', function () {
|
||||
it('rounds a split button\'s trailing half while its menu is open', function () {
|
||||
$trailing = "document.querySelector('[data-md-split=\"trailing\"]')";
|
||||
|
||||
showcase()
|
||||
->click('[data-md-split="trailing"] >> nth=0')
|
||||
->assertScript("{$trailing}.getAttribute('aria-expanded') === 'true'")
|
||||
$page = showcase();
|
||||
|
||||
// Opens the split button's menu over the trailing half that triggers it: pressOnce(),
|
||||
// tests/Pest.php.
|
||||
pressOnce($page)->click('[data-md-split="trailing"] >> nth=0');
|
||||
|
||||
$page->assertScript("{$trailing}.getAttribute('aria-expanded') === 'true'")
|
||||
->assertScript("getComputedStyle({$trailing}).borderTopLeftRadius === ({$trailing}.offsetHeight / 2) + 'px'");
|
||||
});
|
||||
|
||||
@@ -257,9 +273,12 @@ it('keeps a connected segment\'s small inner corners, which a 9999px outer corne
|
||||
it('turns the FAB into a close button while its menu is open', function () {
|
||||
$fab = "document.querySelector('button[aria-label=\"New\"]')";
|
||||
|
||||
$page = showcase()
|
||||
->click('button[aria-label="New"]')
|
||||
->assertScript("{$fab}.getAttribute('aria-expanded') === 'true'")
|
||||
$page = showcase();
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('button[aria-label="New"]');
|
||||
|
||||
$page->assertScript("{$fab}.getAttribute('aria-expanded') === 'true'")
|
||||
->assertScript(focused("textContent.trim() === 'Upload files'"));
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
@@ -327,14 +346,19 @@ it('hangs a menu on its menu button, even when the button is fixed to a corner o
|
||||
$page->assertSeeIn('#renders', '1')
|
||||
->script("document.querySelector('[data-test=\"fab\"]').focus()");
|
||||
|
||||
$page->keys(':focus', 'ArrowDown')
|
||||
->assertAttribute('@fab', 'aria-expanded', 'true')
|
||||
// ArrowDown on the trigger opens the menu, same as clicking it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys(':focus', 'ArrowDown');
|
||||
|
||||
$page->assertAttribute('@fab', 'aria-expanded', 'true')
|
||||
->assertScript($above);
|
||||
|
||||
// A button that also anchors its own tooltip keeps it, and the menu hangs under the button.
|
||||
$page->resize(1024, 800)
|
||||
->click('@more')
|
||||
->assertAttribute('@more', 'aria-expanded', 'true')
|
||||
$page->resize(1024, 800);
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('@more');
|
||||
|
||||
$page->assertAttribute('@more', 'aria-expanded', 'true')
|
||||
->assertScript("(() => { const names = getComputedStyle(document.querySelector('[data-test=\"more\"]')).getPropertyValue('anchor-name'); return names.includes('--material-button-') && names.includes('--material-menu-'); })()")
|
||||
->assertScript('(({ control, menu }) => menu.top >= control.bottom && menu.top - control.bottom <= 16 && Math.abs(menu.left - control.left) <= 16)('.menuAgainst('more', 'Share actions').')');
|
||||
});
|
||||
@@ -373,8 +397,10 @@ it('paints a group\'s hint and a menu item\'s icon in the colour their classes n
|
||||
it('keeps a menu open while the component around it renders, and closes it cleanly after', function () {
|
||||
$page = menuMorphProbe()->assertNoJavaScriptErrors();
|
||||
|
||||
$page->click('@sort')
|
||||
->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('@sort');
|
||||
|
||||
$page->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
|
||||
$page->script('window.eval("Livewire.first().touch()")');
|
||||
|
||||
@@ -390,9 +416,11 @@ it('keeps a menu open while the component around it renders, and closes it clean
|
||||
->assertScript(focused("dataset.test === 'sort'"));
|
||||
|
||||
// Opened from the keyboard: a press this soon after the menu closed is taken for the
|
||||
// light-dismiss press and ignored.
|
||||
$page->keys('@sort', 'ArrowDown')
|
||||
->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
// light-dismiss press and ignored. ArrowDown on the trigger opens the menu, same as clicking
|
||||
// it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys('@sort', 'ArrowDown');
|
||||
|
||||
$page->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
|
||||
$page->script('window.eval("Livewire.first().touch()")');
|
||||
|
||||
@@ -406,15 +434,20 @@ it('closes a menu on a second press of its menu button, and after the component
|
||||
$page = menuMorphProbe();
|
||||
|
||||
// The press closes the menu before its click reaches the button: the guard against that click
|
||||
// opening it again once waited for the queued toggle event, which comes after the click.
|
||||
$page->click('@sort')
|
||||
->assertAttribute('@sort', 'aria-expanded', 'true')
|
||||
->click('@sort')
|
||||
->assertAttribute('@sort', 'aria-expanded', 'false')
|
||||
// opening it again once waited for the queued toggle event, which comes after the click. Each
|
||||
// press toggles it, so each is pressed once: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('@sort');
|
||||
|
||||
$page->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
|
||||
pressOnce($page)->click('@sort');
|
||||
|
||||
$page->assertAttribute('@sort', 'aria-expanded', 'false')
|
||||
->assertScript('! '.SORT_MENU.".matches(':popover-open')");
|
||||
|
||||
$page->keys('@sort', 'ArrowDown')
|
||||
->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
pressOnce($page)->keys('@sort', 'ArrowDown');
|
||||
|
||||
$page->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
|
||||
$page->script('window.eval("Livewire.first().touch()")');
|
||||
|
||||
@@ -422,30 +455,36 @@ it('closes a menu on a second press of its menu button, and after the component
|
||||
$page->assertSeeIn('#renders', '1')
|
||||
->wait(0.3);
|
||||
|
||||
$page->click('@sort')
|
||||
->assertAttribute('@sort', 'aria-expanded', 'false')
|
||||
pressOnce($page)->click('@sort');
|
||||
|
||||
$page->assertAttribute('@sort', 'aria-expanded', 'false')
|
||||
->assertScript('! '.SORT_MENU.".matches(':popover-open')");
|
||||
});
|
||||
|
||||
it('keeps a menu open while a keep-open item\'s action runs', function () {
|
||||
$page = menuMorphProbe();
|
||||
|
||||
$page->click('@sort')
|
||||
->click('[role="menuitemcheckbox"]:has-text("Largest")')
|
||||
->assertAttribute('[role="menuitemcheckbox"]:has-text("Largest")', 'aria-checked', 'true')
|
||||
// Opens the menu, then a checkbox item toggles: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('@sort')
|
||||
->click('[role="menuitemcheckbox"]:has-text("Largest")');
|
||||
|
||||
$page->assertAttribute('[role="menuitemcheckbox"]:has-text("Largest")', 'aria-checked', 'true')
|
||||
->assertScript(SORT_MENU.".matches(':popover-open')")
|
||||
->assertAttribute('@sort', 'aria-expanded', 'true');
|
||||
|
||||
$page->click('[role="menuitemcheckbox"]:has-text("Newest")')
|
||||
->assertAttribute('[role="menuitemcheckbox"]:has-text("Newest")', 'aria-checked', 'true')
|
||||
pressOnce($page)->click('[role="menuitemcheckbox"]:has-text("Newest")');
|
||||
|
||||
$page->assertAttribute('[role="menuitemcheckbox"]:has-text("Newest")', 'aria-checked', 'true')
|
||||
->assertScript(SORT_MENU.".matches(':popover-open')");
|
||||
});
|
||||
|
||||
it('keeps a FAB menu open while the component around it renders, and closes it cleanly after', function () {
|
||||
$page = menuMorphProbe();
|
||||
|
||||
$page->click(NEW_FAB)
|
||||
->assertAttribute(NEW_FAB, 'aria-expanded', 'true');
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click(NEW_FAB);
|
||||
|
||||
$page->assertAttribute(NEW_FAB, 'aria-expanded', 'true');
|
||||
|
||||
$page->script('window.eval("Livewire.first().touch()")');
|
||||
|
||||
@@ -458,8 +497,10 @@ it('keeps a FAB menu open while the component around it renders, and closes it c
|
||||
->assertAttribute(NEW_FAB, 'aria-expanded', 'false')
|
||||
->assertScript(focused("getAttribute('aria-label') === 'New'"));
|
||||
|
||||
$page->keys(NEW_FAB, 'ArrowDown')
|
||||
->assertAttribute(NEW_FAB, 'aria-expanded', 'true');
|
||||
// ArrowDown on the trigger opens the menu, same as clicking it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys(NEW_FAB, 'ArrowDown');
|
||||
|
||||
$page->assertAttribute(NEW_FAB, 'aria-expanded', 'true');
|
||||
|
||||
$page->script('window.eval("Livewire.first().touch()")');
|
||||
|
||||
@@ -467,23 +508,28 @@ it('keeps a FAB menu open while the component around it renders, and closes it c
|
||||
$page->assertSeeIn('#renders', '2')
|
||||
->wait(0.3);
|
||||
|
||||
$page->click(NEW_FAB)
|
||||
->assertAttribute(NEW_FAB, 'aria-expanded', 'false')
|
||||
pressOnce($page)->click(NEW_FAB);
|
||||
|
||||
$page->assertAttribute(NEW_FAB, 'aria-expanded', 'false')
|
||||
->assertScript('! '.FAB_MENU.".matches(':popover-open')");
|
||||
});
|
||||
|
||||
it('closes a FAB menu when an item\'s action runs, and opens and closes it cleanly after', function () {
|
||||
$page = menuMorphProbe();
|
||||
|
||||
$page->click(NEW_FAB)
|
||||
->click('[role="menuitem"]:has-text("Upload files")')
|
||||
->assertSeeIn('#created', 'files')
|
||||
// Opens the FAB menu, then an item closes it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click(NEW_FAB)
|
||||
->click('[role="menuitem"]:has-text("Upload files")');
|
||||
|
||||
$page->assertSeeIn('#created', 'files')
|
||||
->assertAttribute(NEW_FAB, 'aria-expanded', 'false');
|
||||
|
||||
$page->script("document.querySelector('".NEW_FAB."').focus()");
|
||||
|
||||
$page->keys(NEW_FAB, 'ArrowDown')
|
||||
->assertAttribute(NEW_FAB, 'aria-expanded', 'true')
|
||||
// ArrowDown on the trigger opens the menu, same as clicking it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys(NEW_FAB, 'ArrowDown');
|
||||
|
||||
$page->assertAttribute(NEW_FAB, 'aria-expanded', 'true')
|
||||
->assertScript(focused("textContent.trim() === 'Upload files'"));
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
@@ -571,9 +617,11 @@ it('hides a disabled fab button below 600px, as M3 removes a FAB whose action is
|
||||
->and($page->script($state('disabled-link-fab')))->toBe([false, true]);
|
||||
|
||||
// A spinner disables its button while the action runs; that FAB is busy, not unavailable, and
|
||||
// stays on screen with its loading indicator.
|
||||
$page->click('#enabled-fab')
|
||||
->assertScript("(() => { const button = document.getElementById('enabled-fab'); return button.hasAttribute('data-loading') && button.disabled && button.checkVisibility() && button.querySelector('[data-md-button-spinner]').checkVisibility(); })()")
|
||||
// stays on screen with its loading indicator. A counter a retry would double: pressOnce(),
|
||||
// tests/Pest.php.
|
||||
pressOnce($page)->click('#enabled-fab');
|
||||
|
||||
$page->assertScript("(() => { const button = document.getElementById('enabled-fab'); return button.hasAttribute('data-loading') && button.disabled && button.checkVisibility() && button.querySelector('[data-md-button-spinner]').checkVisibility(); })()")
|
||||
->assertSeeIn('#created', '1');
|
||||
|
||||
$page->resize(600, 800)->assertScript("getComputedStyle(document.getElementById('enabled-fab')).position !== 'fixed'");
|
||||
@@ -683,14 +731,19 @@ it('toggles each choice of a multi selection group, down to none', function () {
|
||||
$group = '#buttons [data-md-selection="multi"]';
|
||||
$marks = "document.querySelector('{$group}').parentElement.querySelectorAll('code')[1].textContent";
|
||||
|
||||
showcase()
|
||||
->assertAttribute("{$group} [aria-label=\"Bold\"]", 'aria-pressed', 'true')
|
||||
->click("{$group} [aria-label=\"Italic\"]")
|
||||
->assertAttribute("{$group} [aria-label=\"Italic\"]", 'aria-pressed', 'true')
|
||||
->assertScript("{$marks} === 'bold, italic'")
|
||||
->click("{$group} [aria-label=\"Bold\"]")
|
||||
->click("{$group} [aria-label=\"Italic\"]")
|
||||
->assertAttribute("{$group} [aria-label=\"Bold\"]", 'aria-pressed', 'false')
|
||||
$page = showcase()
|
||||
->assertAttribute("{$group} [aria-label=\"Bold\"]", 'aria-pressed', 'true');
|
||||
|
||||
// Each press toggles the choice: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click("{$group} [aria-label=\"Italic\"]");
|
||||
|
||||
$page->assertAttribute("{$group} [aria-label=\"Italic\"]", 'aria-pressed', 'true')
|
||||
->assertScript("{$marks} === 'bold, italic'");
|
||||
|
||||
pressOnce($page)->click("{$group} [aria-label=\"Bold\"]")
|
||||
->click("{$group} [aria-label=\"Italic\"]");
|
||||
|
||||
$page->assertAttribute("{$group} [aria-label=\"Bold\"]", 'aria-pressed', 'false')
|
||||
->assertAttribute("{$group} [aria-label=\"Italic\"]", 'aria-pressed', 'false')
|
||||
->assertScript("{$marks} === 'none'");
|
||||
});
|
||||
@@ -800,9 +853,12 @@ it('opens a submenu with Right, Enter or Space, and closes it with Left or Escap
|
||||
$trigger = '#menus button:has-text("Share")';
|
||||
$sendTo = '#menus [role="menuitem"]:has-text("Send to")';
|
||||
|
||||
$page = showcase('menus')
|
||||
->click($trigger)
|
||||
->assertAttribute($trigger, 'aria-expanded', 'true')
|
||||
$page = showcase('menus');
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
$page->assertAttribute($trigger, 'aria-expanded', 'true')
|
||||
->assertScript(focused("textContent.trim().startsWith('Copy link')"));
|
||||
|
||||
$page->keys(':focus', 'ArrowDown')
|
||||
@@ -835,7 +891,10 @@ it('opens a submenu on hover for a fine pointer, and closes it once the pointer
|
||||
// "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');
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
$page->hover($sendTo)
|
||||
->wait(0.3)
|
||||
@@ -858,9 +917,12 @@ it('filters a menu\'s items as its field is typed into, moves the highlight with
|
||||
$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)
|
||||
->assertScript(focused("getAttribute('aria-label') === 'Find a person'"));
|
||||
$page = showcase('menus');
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
$page->assertScript(focused("getAttribute('aria-label') === 'Find a person'"));
|
||||
|
||||
// Ada Lovelace and Grace Hopper are both "Engineering"; the rest are Research or Networks.
|
||||
$page->type($field, 'engineering')
|
||||
@@ -874,8 +936,9 @@ it('filters a menu\'s items as its field is typed into, moves the highlight with
|
||||
->assertAttribute($trigger, 'aria-expanded', 'false');
|
||||
|
||||
// Closing clears the query, so a reopen shows the whole list again.
|
||||
$page->click($trigger)
|
||||
->assertScript("document.querySelector('{$field}').value === ''")
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
$page->assertScript("document.querySelector('{$field}').value === ''")
|
||||
->assertScript("{$list}.every((item) => !item.hidden)");
|
||||
});
|
||||
|
||||
@@ -890,8 +953,10 @@ it('opens a sheet-at-compact menu below 600px, focused on its first item, and th
|
||||
|
||||
$page = showcase('menus')->resize(400, 800);
|
||||
|
||||
$page->click($trigger)
|
||||
->assertAttribute($trigger, 'aria-haspopup', 'dialog')
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
$page->assertAttribute($trigger, 'aria-haspopup', 'dialog')
|
||||
->assertScript(focused("textContent.trim().startsWith('Set as wallpaper')"))
|
||||
->assertVisible($dialog);
|
||||
|
||||
@@ -926,8 +991,10 @@ it('opens a sheet-at-compact menu below 600px, focused on its first item, and th
|
||||
it('filters in the sheet too, and a Livewire render keeps it open with the field\'s focus', function () {
|
||||
$page = sheetMenuProbe();
|
||||
|
||||
$page->click('button:has-text("Assign")')
|
||||
->assertScript(focused("getAttribute('aria-label') === 'Find a person'"));
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('button:has-text("Assign")');
|
||||
|
||||
$page->assertScript(focused("getAttribute('aria-label') === 'Find a person'"));
|
||||
|
||||
$page->type(':focus', 'grace')
|
||||
->assertScript("[...document.querySelectorAll('[role=\"dialog\"] [role=\"menuitem\"]')].filter((item) => !item.hidden).length === 1");
|
||||
@@ -945,9 +1012,12 @@ it('filters in the sheet too, and a Livewire render keeps it open with the field
|
||||
it('scrolls a long menu and keeps the item the keyboard reaches inside its visible box', function () {
|
||||
$popover = "document.querySelector('[role=\"menu\"][aria-label=\"Long list\"]')";
|
||||
|
||||
$page = longMenuProbe()
|
||||
->click('button:has-text("Open")')
|
||||
->assertScript("{$popover}.scrollHeight > {$popover}.clientHeight");
|
||||
$page = longMenuProbe();
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('button:has-text("Open")');
|
||||
|
||||
$page->assertScript("{$popover}.scrollHeight > {$popover}.clientHeight");
|
||||
|
||||
$page->keys(':focus', 'End')
|
||||
->assertScript(focused("textContent.trim() === 'Item 20'"))
|
||||
@@ -997,9 +1067,12 @@ it('scrolls the FAB menu\'s items on a short window, behind the close button, wh
|
||||
$trigger = "document.querySelector('button[aria-label=\"New\"]')";
|
||||
$list = "document.querySelector('[role=\"menu\"][aria-label=\"New\"]')";
|
||||
|
||||
$page = longFabMenuProbe()
|
||||
->click('button[aria-label="New"]')
|
||||
->assertAttribute('button[aria-label="New"]', 'aria-expanded', 'true')
|
||||
$page = longFabMenuProbe();
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('button[aria-label="New"]');
|
||||
|
||||
$page->assertAttribute('button[aria-label="New"]', 'aria-expanded', 'true')
|
||||
->assertScript("{$list}.scrollHeight > {$list}.clientHeight");
|
||||
|
||||
$page->script("window.__fabTop = {$trigger}.getBoundingClientRect().top; {$list}.scrollTop = 40");
|
||||
@@ -1017,9 +1090,12 @@ const EXIT_COPY_FADING = "(() => { const copy = document.querySelector('[data-md
|
||||
it('fades a menu out after the browser has closed it, on Escape or a press outside, in every engine', function () {
|
||||
$menu = 'document.getElementById(document.querySelector(\''.MORE.'\').getAttribute(\'aria-controls\'))';
|
||||
|
||||
$page = slowMotion(showcase('menus'))
|
||||
->click(MORE)
|
||||
->assertAttribute(MORE, 'aria-expanded', 'true');
|
||||
$page = slowMotion(showcase('menus'));
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click(MORE);
|
||||
|
||||
$page->assertAttribute(MORE, 'aria-expanded', 'true');
|
||||
|
||||
// Escape: the browser's own light dismiss, which no script can hold open.
|
||||
$page->keys(':focus', 'Escape')
|
||||
@@ -1036,9 +1112,11 @@ it('fades a menu out after the browser has closed it, on Escape or a press outsi
|
||||
->assertScript('document.querySelector("[data-md-popover-ghost]") === null');
|
||||
|
||||
// A press outside it.
|
||||
$page->click(MORE)
|
||||
->assertAttribute(MORE, 'aria-expanded', 'true')
|
||||
->click('#menus')
|
||||
pressOnce($page)->click(MORE);
|
||||
|
||||
$page->assertAttribute(MORE, 'aria-expanded', 'true');
|
||||
|
||||
$page->click('#menus')
|
||||
->assertAttribute(MORE, 'aria-expanded', 'false')
|
||||
->assertScript(EXIT_COPY)
|
||||
->assertScript(EXIT_COPY_FADING)
|
||||
@@ -1046,8 +1124,10 @@ it('fades a menu out after the browser has closed it, on Escape or a press outsi
|
||||
});
|
||||
|
||||
it('takes a menu\'s exit copy away when the menu opens again part-way through it', function () {
|
||||
$page = slowMotion(showcase('menus'))
|
||||
->click(MORE);
|
||||
$page = slowMotion(showcase('menus'));
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click(MORE);
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertScript(EXIT_COPY)
|
||||
@@ -1056,15 +1136,18 @@ it('takes a menu\'s exit copy away when the menu opens again part-way through it
|
||||
->wait(0.3)
|
||||
->assertScript(EXIT_COPY);
|
||||
|
||||
$page->click(MORE)
|
||||
->assertAttribute(MORE, 'aria-expanded', 'true')
|
||||
pressOnce($page)->click(MORE);
|
||||
|
||||
$page->assertAttribute(MORE, 'aria-expanded', 'true')
|
||||
->assertScript("document.querySelector('[data-md-popover-ghost]') === null")
|
||||
->assertScript('document.getElementById(document.querySelector(\''.MORE.'\').getAttribute(\'aria-controls\')).matches(\':popover-open\')');
|
||||
});
|
||||
|
||||
it('leaves no exit copy under reduced motion, where every duration token is zero', function () {
|
||||
$page = slowMotion(showcase('menus'), '0ms')
|
||||
->click(MORE);
|
||||
$page = slowMotion(showcase('menus'), '0ms');
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click(MORE);
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertAttribute(MORE, 'aria-expanded', 'false')
|
||||
@@ -1075,8 +1158,10 @@ it('fades a submenu out on its own, while its menu stays open', function () {
|
||||
$trigger = '#menus button:has-text("Share")';
|
||||
$sendTo = '#menus [role="menuitem"]:has-text("Send to")';
|
||||
|
||||
$page = slowMotion(showcase('menus'))
|
||||
->click($trigger);
|
||||
$page = slowMotion(showcase('menus'));
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click($trigger);
|
||||
|
||||
$page->keys(':focus', 'ArrowDown');
|
||||
$page->keys(':focus', 'ArrowRight')
|
||||
@@ -1105,9 +1190,12 @@ it('fades a tooltip out after Escape hides it', function () {
|
||||
});
|
||||
|
||||
it('sinks a FAB menu\'s items back after the menu has closed', function () {
|
||||
$page = slowMotion(showcase())
|
||||
->click('button[aria-label="New"]')
|
||||
->assertScript("document.querySelector('button[aria-label=\"New\"]').getAttribute('aria-expanded') === 'true'");
|
||||
$page = slowMotion(showcase());
|
||||
|
||||
// A menu's trigger toggles, so it is pressed once: pressOnce() in tests/Pest.php.
|
||||
pressOnce($page)->click('button[aria-label="New"]');
|
||||
|
||||
$page->assertScript("document.querySelector('button[aria-label=\"New\"]').getAttribute('aria-expanded') === 'true'");
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertScript("document.querySelector('button[aria-label=\"New\"]').getAttribute('aria-expanded') === 'false'")
|
||||
|
||||
Reference in New Issue
Block a user