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
@@ -179,9 +179,12 @@ function focusedDay(string $date): string
|
||||
it('opens the docked picker under its field and walks the grid from the keyboard', function () {
|
||||
$picker = "document.querySelector('#expires-field-picker')";
|
||||
|
||||
$page = dateProbe()
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript("{$picker}.matches(':popover-open') && {$picker}.dataset.mdPresentation === 'docked'")
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript("{$picker}.matches(':popover-open') && {$picker}.dataset.mdPresentation === 'docked'")
|
||||
->assertAttribute('#expires-field', 'aria-expanded', 'true')
|
||||
->assertScript("(() => { const field = document.querySelector('#expires-field').closest('[data-md-field-box]').getBoundingClientRect(); const box = {$picker}.getBoundingClientRect(); return Math.abs(box.top - field.bottom - 4) < 2 && Math.abs(box.left - field.left) < 2; })()")
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
@@ -204,9 +207,12 @@ it('opens the docked picker under its field and walks the grid from the keyboard
|
||||
});
|
||||
|
||||
it('keeps focus and choice inside min and max', function () {
|
||||
$page = dateProbe()
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
// Playwright will not press an aria-disabled cell, so the press is dispatched.
|
||||
$page->assertAttribute(day('expires-field', '2026-09-09'), 'aria-disabled', 'true')
|
||||
@@ -242,9 +248,12 @@ it('takes a date typed into the docked field once it is whole, and says when it
|
||||
it('opens the modal picker, jumps through the year grid and confirms with OK', function () {
|
||||
$dialog = "document.querySelector('#birthday-field-picker')";
|
||||
|
||||
$page = dateProbe()
|
||||
->click('#birthday-field')
|
||||
->assertScript("{$dialog}.matches(':modal')")
|
||||
$page = dateProbe();
|
||||
|
||||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#birthday-field');
|
||||
|
||||
$page->assertScript("{$dialog}.matches(':modal')")
|
||||
->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 17, 2000')
|
||||
->click('#birthday-field-picker [data-md-datepicker-nav]:not([data-md-docked]) [data-md-datepicker-menu-button]')
|
||||
->assertScript("getComputedStyle(document.querySelector('#birthday-field-picker [data-md-datepicker-years]')).display !== 'none'")
|
||||
@@ -256,8 +265,10 @@ it('opens the modal picker, jumps through the year grid and confirms with OK', f
|
||||
->assertSeeIn('#birthday-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'May 3, 1990')
|
||||
->assertSeeIn('#birthday', '2000-05-17');
|
||||
|
||||
$page->click('#birthday-field-picker [data-md-datepicker-confirm]')
|
||||
->assertSeeIn('#birthday', '1990-05-03')
|
||||
// The confirm button closes the dialog: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#birthday-field-picker [data-md-datepicker-confirm]');
|
||||
|
||||
$page->assertSeeIn('#birthday', '1990-05-03')
|
||||
->assertScript("! {$dialog}.open");
|
||||
});
|
||||
|
||||
@@ -268,8 +279,10 @@ it('closes on Escape without keeping the draft and hands focus back to the field
|
||||
|
||||
$page->script("document.querySelector('#birthday-field').focus()");
|
||||
|
||||
$page->keys('#birthday-field', 'Enter')
|
||||
->assertScript("{$dialog}.open")
|
||||
// Enter on the field opens the dialog, same as clicking it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys('#birthday-field', 'Enter');
|
||||
|
||||
$page->assertScript("{$dialog}.open")
|
||||
->assertScript(focusedDay('2000-05-17'));
|
||||
|
||||
$page->keys(':focus', 'ArrowRight')
|
||||
@@ -284,8 +297,11 @@ it('closes on Escape without keeping the draft and hands focus back to the field
|
||||
// The docked picker too.
|
||||
$page->script("document.querySelector('[aria-controls=\"expires-field-picker\"][data-md-datepicker-toggle]').focus()");
|
||||
|
||||
$page->keys(':focus', 'Enter')
|
||||
->assertScript("document.querySelector('#expires-field-picker').matches(':popover-open')")
|
||||
// Enter on the focused toggle button is a native click on it, and it toggles: pressOnce(),
|
||||
// tests/Pest.php. A retried Enter would land on the day it opened onto instead, closing it.
|
||||
pressOnce($page)->keys(':focus', 'Enter');
|
||||
|
||||
$page->assertScript("document.querySelector('#expires-field-picker').matches(':popover-open')")
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
$page->keys(':focus', 'Escape')
|
||||
@@ -296,15 +312,22 @@ it('closes on Escape without keeping the draft and hands focus back to the field
|
||||
it('reads the modal input in the locale\'s format and explains a date it cannot take', function () {
|
||||
$dialog = "document.querySelector('#delivery-field-picker')";
|
||||
|
||||
$page = dateProbe()
|
||||
->click('#delivery-field')
|
||||
->assertScript("{$dialog}.matches(':modal')")
|
||||
$page = dateProbe();
|
||||
|
||||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#delivery-field');
|
||||
|
||||
$page->assertScript("{$dialog}.matches(':modal')")
|
||||
->assertScript("document.activeElement.id === 'delivery-field-entry'")
|
||||
->assertSeeIn('#delivery-field-picker [data-md-datepicker-header] [data-md-datepicker-headline]', 'Entered date');
|
||||
|
||||
$page->type('#delivery-field-entry', '2026-03-07')
|
||||
->click('#delivery-field-picker [data-md-datepicker-confirm]')
|
||||
->assertSeeIn('#delivery-field-entry-support', 'Date does not match expected pattern: MM/DD/YYYY')
|
||||
$page->type('#delivery-field-entry', '2026-03-07');
|
||||
|
||||
// The confirm button closes the dialog when the date is valid; here it stays open (invalid),
|
||||
// but pressed once anyway: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#delivery-field-picker [data-md-datepicker-confirm]');
|
||||
|
||||
$page->assertSeeIn('#delivery-field-entry-support', 'Date does not match expected pattern: MM/DD/YYYY')
|
||||
->assertAttribute('#delivery-field-entry', 'aria-invalid', 'true')
|
||||
->assertScript("{$dialog}.open");
|
||||
|
||||
@@ -322,21 +345,29 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
|
||||
});
|
||||
|
||||
it('picks a range: a start, an end, and the days between', function () {
|
||||
$page = dateProbe()
|
||||
->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertAttribute(day('trip-field', '2026-09-14'), 'aria-selected', 'true');
|
||||
$page = dateProbe();
|
||||
|
||||
$page->click(day('trip-field', '2026-09-20'))
|
||||
->assertScript("document.querySelector('".day('trip-field', '2026-09-20')."').hasAttribute('data-md-selected')")
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="trip-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertAttribute(day('trip-field', '2026-09-14'), 'aria-selected', 'true');
|
||||
|
||||
// A day pressed twice ends the range it began: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click(day('trip-field', '2026-09-20'));
|
||||
|
||||
$page->assertScript("document.querySelector('".day('trip-field', '2026-09-20')."').hasAttribute('data-md-selected')")
|
||||
->assertScript("! document.querySelector('".day('trip-field', '2026-09-14')."').hasAttribute('data-md-between')");
|
||||
|
||||
$page->click(day('trip-field', '2026-09-24'))
|
||||
->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-between]')].map((cell) => cell.dataset.mdValue).join() === '2026-09-21,2026-09-22,2026-09-23'")
|
||||
pressOnce($page)->click(day('trip-field', '2026-09-24'));
|
||||
|
||||
$page->assertScript("[...document.querySelectorAll('#trip-field-picker [data-md-between]')].map((cell) => cell.dataset.mdValue).join() === '2026-09-21,2026-09-22,2026-09-23'")
|
||||
->assertScript("document.querySelector('".day('trip-field', '2026-09-20')."').hasAttribute('data-md-start') && document.querySelector('".day('trip-field', '2026-09-24')."').hasAttribute('data-md-end')")
|
||||
->assertSeeIn('#trip', '2026-09-15');
|
||||
|
||||
$page->click('#trip-field-picker [data-md-datepicker-confirm]')
|
||||
->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
|
||||
// The confirm button closes the dialog: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#trip-field-picker [data-md-datepicker-confirm]');
|
||||
|
||||
$page->assertSeeIn('#trip', '{"start":"2026-09-20","end":"2026-09-24"}')
|
||||
->assertValue('#trip-field', '09/20/2026 – 09/24/2026');
|
||||
});
|
||||
|
||||
@@ -344,9 +375,12 @@ it('follows the locale: German weeks start on Monday, American ones on Sunday',
|
||||
$firstWeekday = "document.querySelector('#expires-field-picker thead th').getAttribute('abbr')";
|
||||
|
||||
$page = dateProbe('de')
|
||||
->assertValue('#expires-field', '13.09.2026')
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript("{$firstWeekday} === 'Montag'")
|
||||
->assertValue('#expires-field', '13.09.2026');
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript("{$firstWeekday} === 'Montag'")
|
||||
->assertScript("document.querySelector('#expires-field-month').textContent === 'September 2026'")
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
@@ -357,15 +391,20 @@ it('follows the locale: German weeks start on Monday, American ones on Sunday',
|
||||
->assertSeeIn('#expires', '2026-09-20')
|
||||
->assertAttribute('#expires-field', 'placeholder', 'DD.MM.YYYY');
|
||||
|
||||
dateProbe('en_US')
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript("{$firstWeekday} === 'Sunday'");
|
||||
$page = dateProbe('en_US');
|
||||
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript("{$firstWeekday} === 'Sunday'");
|
||||
});
|
||||
|
||||
it('stays open, where it was, through a Livewire render', function () {
|
||||
$page = dateProbe()
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
$page->keys(':focus', 'ArrowRight')->assertScript(focusedDay('2026-09-14'));
|
||||
|
||||
@@ -378,18 +417,23 @@ it('stays open, where it was, through a Livewire render', function () {
|
||||
|
||||
$page->keys(day('expires-field', '2026-09-14'), 'Enter')->assertSeeIn('#expires', '2026-09-14');
|
||||
|
||||
$page->click('#birthday-field')
|
||||
->script('window.eval("Livewire.first().touch()")');
|
||||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#birthday-field');
|
||||
|
||||
$page->script('window.eval("Livewire.first().touch()")');
|
||||
|
||||
$page->assertSeeIn('#renders', '2')
|
||||
->assertScript("document.querySelector('#birthday-field-picker').matches(':modal')");
|
||||
});
|
||||
|
||||
it('opens a docked picker as a modal one on a compact window', function () {
|
||||
dateProbe()
|
||||
->resize(400, 800)
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript("document.querySelector('#expires-field-picker').matches(':modal')")
|
||||
$page = dateProbe()
|
||||
->resize(400, 800);
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript("document.querySelector('#expires-field-picker').matches(':modal')")
|
||||
->assertScript("getComputedStyle(document.querySelector('#expires-field-picker [data-md-datepicker-header]')).display !== 'none'");
|
||||
});
|
||||
|
||||
@@ -397,22 +441,28 @@ it('empties a date, or both ends of a range, with its clear button', function ()
|
||||
$page = dateProbe()
|
||||
->assertScript("getComputedStyle(document.querySelector('#expires-field').closest('[data-md-field]').querySelector('[data-md-field-clear]')).display !== 'none'");
|
||||
|
||||
$page->click('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]')
|
||||
->assertScript("document.querySelector('#expires').textContent === ''")
|
||||
// The clear button vanishes once its field is empty: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]');
|
||||
|
||||
$page->assertScript("document.querySelector('#expires').textContent === ''")
|
||||
->assertValue('#expires-field', '')
|
||||
->assertScript("document.activeElement.id === 'expires-field'")
|
||||
->assertScript("getComputedStyle(document.querySelector('[data-md-datepicker]:has(#expires-field) [data-md-field-clear]')).display === 'none'");
|
||||
|
||||
$page->click('[data-md-datepicker]:has(#trip-field) [data-md-field-clear]')
|
||||
->assertSeeIn('#trip', '{"start":null,"end":null}')
|
||||
pressOnce($page)->click('[data-md-datepicker]:has(#trip-field) [data-md-field-clear]');
|
||||
|
||||
$page->assertSeeIn('#trip', '{"start":null,"end":null}')
|
||||
->assertValue('#trip-field', '');
|
||||
});
|
||||
|
||||
it('starts the week on the day week-start names, whatever the locale says', function () {
|
||||
$page = dateFormatProbe('de')
|
||||
->assertValue('#sunday-field', '13.09.2026')
|
||||
->click('[aria-controls="sunday-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript("document.querySelector('#sunday-field-picker thead th').getAttribute('abbr') === 'Sonntag'")
|
||||
->assertValue('#sunday-field', '13.09.2026');
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="sunday-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript("document.querySelector('#sunday-field-picker thead th').getAttribute('abbr') === 'Sonntag'")
|
||||
->assertScript("document.querySelector('#sunday-field-picker tbody td').dataset.mdValue === '2026-08-30'")
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
@@ -436,8 +486,10 @@ it('shows and reads a year-first format and still binds Y-m-d', function () {
|
||||
->assertSee('Date does not match expected pattern: YYYY-MM-DD')
|
||||
->assertSeeIn('#iso', '2026-10-01');
|
||||
|
||||
$page->click('[aria-controls="iso-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript(focusedDay('2026-10-01'));
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="iso-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript(focusedDay('2026-10-01'));
|
||||
|
||||
$page->keys(':focus', 'ArrowRight')->assertScript(focusedDay('2026-10-02'));
|
||||
|
||||
@@ -450,9 +502,12 @@ it('reads the dialog\'s text field in the given format, not the locale\'s', func
|
||||
$dialog = "document.querySelector('#dotted-field-picker')";
|
||||
|
||||
$page = dateFormatProbe()
|
||||
->assertValue('#dotted-field', '13.09.2026')
|
||||
->click('#dotted-field')
|
||||
->assertScript("{$dialog}.matches(':modal')")
|
||||
->assertValue('#dotted-field', '13.09.2026');
|
||||
|
||||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#dotted-field');
|
||||
|
||||
$page->assertScript("{$dialog}.matches(':modal')")
|
||||
->assertScript("document.activeElement.id === 'dotted-field-entry'")
|
||||
->assertValue('#dotted-field-entry', '13.09.2026')
|
||||
->assertAttribute('#dotted-field-entry', 'placeholder', 'DD.MM.YYYY');
|
||||
@@ -477,27 +532,36 @@ it('lays out and shows a range in the given first day and format', function () {
|
||||
|
||||
$page->script("document.querySelector('#span-field').focus()");
|
||||
|
||||
$page->keys('#span-field', 'Enter')
|
||||
->assertScript("{$dialog}.matches(':modal')")
|
||||
// Enter on the readonly field opens the dialog, same as clicking it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->keys('#span-field', 'Enter');
|
||||
|
||||
$page->assertScript("{$dialog}.matches(':modal')")
|
||||
->assertScript("document.querySelector('#span-field-picker thead th').getAttribute('abbr') === 'Saturday'")
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
$page->keys(':focus', 'Home')->assertScript(focusedDay('2026-09-12'));
|
||||
$page->keys(':focus', 'End')->assertScript(focusedDay('2026-09-18'));
|
||||
|
||||
$page->click(day('span-field', '2026-09-20'))
|
||||
->click(day('span-field', '2026-09-24'))
|
||||
->click('#span-field-picker [data-md-datepicker-confirm]')
|
||||
->assertSeeIn('#span', '{"start":"2026-09-20","end":"2026-09-24"}')
|
||||
// A day pressed twice ends the range it began: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click(day('span-field', '2026-09-20'))
|
||||
->click(day('span-field', '2026-09-24'));
|
||||
|
||||
// The confirm button closes the dialog: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#span-field-picker [data-md-datepicker-confirm]');
|
||||
|
||||
$page->assertSeeIn('#span', '{"start":"2026-09-20","end":"2026-09-24"}')
|
||||
->assertValue('#span-field', '20/09/2026 – 24/09/2026');
|
||||
});
|
||||
|
||||
it('keeps each picker\'s own settings inside a page\'s outer x-data scope', function () {
|
||||
// Settings assigned in init() without being declared would land on the outermost scope,
|
||||
// where the last picker's null min and Monday start would overwrite the first's.
|
||||
$page = scopedDateProbe()
|
||||
->click('[aria-controls="early-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
$page = scopedDateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="early-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
$page->assertAttribute(day('early-field', '2026-09-09'), 'aria-disabled', 'true')
|
||||
->assertScript('! (\'min\' in Alpine.$data(document.querySelector(\'[x-data="{ step: 1 }"]\')))');
|
||||
@@ -666,9 +730,12 @@ it('closes the full-screen range picker from its app bar close button without ke
|
||||
it('reaches the month and year dropdowns with Shift+M and Shift+Y', function () {
|
||||
$toggle = '[aria-controls="expires-field-picker"][data-md-datepicker-toggle]';
|
||||
|
||||
$page = dateProbe()
|
||||
->click($toggle)
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click($toggle);
|
||||
|
||||
$page->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
$page->keys(':focus', 'Shift+M')
|
||||
->assertScript("document.activeElement.dataset.mdDatepickerMenuButton === 'months'");
|
||||
@@ -676,8 +743,9 @@ it('reaches the month and year dropdowns with Shift+M and Shift+Y', function ()
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertScript("! document.querySelector('#expires-field-picker').matches(':popover-open')");
|
||||
|
||||
$page->click($toggle)
|
||||
->assertScript(focusedDay('2026-09-13'));
|
||||
pressOnce($page)->click($toggle);
|
||||
|
||||
$page->assertScript(focusedDay('2026-09-13'));
|
||||
|
||||
$page->keys(':focus', 'Shift+Y')
|
||||
->assertScript("document.activeElement.dataset.mdDatepickerMenuButton === 'years'");
|
||||
@@ -692,9 +760,12 @@ it('draws the shared state layer and focus ring on the menu buttons, the year an
|
||||
|
||||
$hasBoth = fn (string $expr): string => "({$expr}).classList.contains('md-state-layer') && ({$expr}).classList.contains('md-focus-ring')";
|
||||
|
||||
$page = dateProbe()
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript($hasBoth("document.querySelector('{$monthButton}')"))
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript($hasBoth("document.querySelector('{$monthButton}')"))
|
||||
->assertScript($hasBoth("document.querySelector('{$yearButton}')"))
|
||||
->click($monthButton)
|
||||
// toggleView() scrolls the selected option into view and focuses it once settled.
|
||||
@@ -711,8 +782,10 @@ it('draws the shared state layer and focus ring on the menu buttons, the year an
|
||||
$page->keys(':focus', 'Escape')
|
||||
->assertScript("! document.querySelector('#expires-field-picker').matches(':popover-open')");
|
||||
|
||||
$page->click('#birthday-field')
|
||||
->assertScript("document.querySelector('#birthday-field-picker').matches(':modal')")
|
||||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#birthday-field');
|
||||
|
||||
$page->assertScript("document.querySelector('#birthday-field-picker').matches(':modal')")
|
||||
->click($modalYearButton)
|
||||
->assertScript($hasBoth("document.querySelector('{$modalYearButton}')"))
|
||||
->assertScript("document.activeElement === {$selectedYear}")
|
||||
@@ -725,9 +798,12 @@ it('shows a state layer over a selected day\'s primary fill on hover, and none o
|
||||
$disabledDay = day('expires-field', '2026-09-09');
|
||||
$disabledSpan = "document.querySelector('{$disabledDay} > span')";
|
||||
|
||||
$page = dateProbe()
|
||||
->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]')
|
||||
->assertScript("document.querySelector('{$selectedDay}').hasAttribute('data-md-selected')")
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$page->assertScript("document.querySelector('{$selectedDay}').hasAttribute('data-md-selected')")
|
||||
->assertAttribute($disabledDay, 'aria-disabled', 'true')
|
||||
// The day's own fill transitions in when the popover opens: let it settle before reading
|
||||
// a resting value, or the "unchanged by hover" comparison below race against that instead.
|
||||
@@ -754,8 +830,10 @@ it('shows a state layer over a selected day\'s primary fill on hover, and none o
|
||||
|
||||
// A blank cell (no date, outside the shown month in modal presentation) can't be focused at
|
||||
// all — the same rule hides its layer regardless.
|
||||
$page->click('#birthday-field')
|
||||
->assertScript("document.querySelector('#birthday-field-picker').matches(':modal')")
|
||||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('#birthday-field');
|
||||
|
||||
$page->assertScript("document.querySelector('#birthday-field-picker').matches(':modal')")
|
||||
->hover('#birthday-field-picker [data-md-blank] > span >> nth=0')
|
||||
->assertScript("getComputedStyle([...document.querySelectorAll('#birthday-field-picker [data-md-blank] > span')][0], '::before').display === 'none'");
|
||||
});
|
||||
@@ -766,7 +844,10 @@ it('keeps the day indicator its fixed 40px size at a 20px root font size, growin
|
||||
$font = "getComputedStyle({$daySpan}).fontSize";
|
||||
$picker = "document.querySelector('#expires-field-picker')";
|
||||
|
||||
$page = dateProbe()->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
$page = dateProbe();
|
||||
|
||||
// The toggle button opens or closes the picker on every press: pressOnce(), tests/Pest.php.
|
||||
pressOnce($page)->click('[aria-controls="expires-field-picker"][data-md-datepicker-toggle]');
|
||||
|
||||
$restingWidth = (int) $page->script($width);
|
||||
$restingFont = $page->script($font);
|
||||
|
||||
Reference in New Issue
Block a user