surtic86andClaude Opus 5
ebdc2ef2e1
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>
500 lines
23 KiB
PHP
500 lines
23 KiB
PHP
<?php
|
||
|
||
use Illuminate\Support\Facades\Blade;
|
||
use Illuminate\Support\Facades\Route;
|
||
use Livewire\Component;
|
||
use Livewire\Livewire;
|
||
|
||
class TimeProbe extends Component
|
||
{
|
||
public ?string $meeting = '09:30';
|
||
|
||
public ?string $alarm = null;
|
||
|
||
public ?string $appointment = '10:00';
|
||
|
||
public int $renders = 0;
|
||
|
||
public function touch(): void
|
||
{
|
||
$this->renders++;
|
||
}
|
||
|
||
public function render(): string
|
||
{
|
||
return <<<'BLADE'
|
||
<div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space300); padding: var(--md-sys-measurement-space200);">
|
||
<p>meeting: <span id="meeting-value">{{ $meeting ?? 'null' }}</span></p>
|
||
<p>alarm: <span id="alarm-value">{{ $alarm ?? 'null' }}</span></p>
|
||
<p>appointment: <span id="slot-value">{{ $appointment ?? 'null' }}</span></p>
|
||
<p>renders: <span id="renders">{{ $renders }}</span></p>
|
||
|
||
<x-timepicker id="meeting" label="Meeting" wire:model.live="meeting" format="12" />
|
||
<x-timepicker id="alarm" label="Alarm" wire:model.live="alarm" locale="de" />
|
||
<x-timepicker id="slot" label="Slot" wire:model.live="appointment" format="24" step="15" min="09:00" max="17:00" />
|
||
</div>
|
||
BLADE;
|
||
}
|
||
}
|
||
|
||
function timeProbe()
|
||
{
|
||
Livewire::component('time-probe', TimeProbe::class);
|
||
|
||
Route::middleware('web')->get('/time-probe', fn () => Blade::render(<<<'BLADE'
|
||
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<link rel="icon" href="data:,">
|
||
<x-theme-script />
|
||
@vite(config('livewire-material.showcase.vite'))
|
||
@livewireStyles
|
||
</head>
|
||
<body style="background-color: var(--md-sys-color-surface);">
|
||
<livewire:time-probe />
|
||
@livewireScripts
|
||
</body>
|
||
</html>
|
||
BLADE));
|
||
|
||
return ready(visit('/time-probe'));
|
||
}
|
||
|
||
/** A JavaScript expression for an element inside the named picker's dialog. */
|
||
function inPicker(string $id, string $selector): string
|
||
{
|
||
return "document.querySelector('#{$id}-dialog {$selector}')";
|
||
}
|
||
|
||
/** A JavaScript expression for the text under a time field, without its word joiners. */
|
||
function supportText(string $id): string
|
||
{
|
||
return "document.querySelector('#{$id}-support').textContent.replaceAll('\\u2060', '')";
|
||
}
|
||
|
||
it('opens the dial on the hour, as the bound time says', function () {
|
||
$page = timeProbe()
|
||
->assertValue('#meeting', '9:30 AM');
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->assertAttribute('#meeting', 'aria-expanded', 'true')
|
||
->assertSeeIn('#meeting-title', 'Select time')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-box="hour"]', 'aria-pressed', 'true')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '09')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="minute"]', '30')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="am"]', 'aria-checked', 'true')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuenow', '9')
|
||
->assertScript('document.activeElement === '.inPicker('meeting', '[data-md-timepicker-dial]'));
|
||
});
|
||
|
||
it('writes the hour and the minute pressed on the dial to Livewire on OK', function () {
|
||
$dial = inPicker('meeting', '[data-md-timepicker-dial]');
|
||
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="3"]')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '03')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-box="minute"]', 'aria-pressed', 'true')
|
||
// The selector turns to the value it chose: the handle ends over the number.
|
||
->assertScript(<<<JS
|
||
(() => {
|
||
const handle = {$dial}.querySelector('[data-md-timepicker-handle]').getBoundingClientRect();
|
||
const label = {$dial}.querySelector('[data-md-timepicker-label="minute"][data-md-value="30"]').getBoundingClientRect();
|
||
|
||
return Math.abs(handle.x - label.x) < 1 && Math.abs(handle.y - label.y) < 1;
|
||
})()
|
||
JS);
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-label="minute"][data-md-value="45"]')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="minute"]', '45')
|
||
->assertSeeIn('#meeting-value', '09:30');
|
||
|
||
// The confirm button closes the dialog: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertSeeIn('#meeting-value', '03:45')
|
||
->assertValue('#meeting', '3:45 AM')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertAttribute('#meeting', 'aria-expanded', 'false');
|
||
});
|
||
|
||
it('leaves the time alone when the picker is cancelled', function () {
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="7"]')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '07');
|
||
|
||
// The cancel button closes the dialog: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting-dialog [data-md-timepicker-cancel]');
|
||
|
||
$page->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '09:30')
|
||
->assertValue('#meeting', '9:30 AM');
|
||
});
|
||
|
||
it('turns three o\'clock into 15 with PM', function () {
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="pm"]')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="pm"]', 'aria-checked', 'true')
|
||
->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="3"]')
|
||
->click('#meeting-dialog [data-md-timepicker-label="minute"][data-md-value="15"]');
|
||
|
||
// The confirm button closes the dialog: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertSeeIn('#meeting-value', '15:15')
|
||
->assertValue('#meeting', '3:15 PM');
|
||
});
|
||
|
||
it('draws a German dial with 24 hours, 12 to 23 on the inner ring', function () {
|
||
$dial = inPicker('alarm', '[data-md-timepicker-dial]');
|
||
$radius = fn (string $value): string => <<<JS
|
||
(() => {
|
||
const dial = {$dial}.getBoundingClientRect();
|
||
const label = {$dial}.querySelector('[data-md-timepicker-label="hour24"][data-md-value="{$value}"]').getBoundingClientRect();
|
||
|
||
return Math.round(Math.hypot(label.x + label.width / 2 - dial.x - dial.width / 2, label.y + label.height / 2 - dial.y - dial.height / 2));
|
||
})()
|
||
JS;
|
||
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#alarm');
|
||
|
||
$page->assertAttribute('#alarm-dialog [data-md-timepicker-dial]', 'data-md-cycle', '24')
|
||
->assertScript("getComputedStyle(document.querySelector('#alarm-dialog [data-md-timepicker-period]')).display === 'none'")
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"0\"]').textContent.trim() === '00'")
|
||
->assertScript($radius('0').' === 101')
|
||
->assertScript($radius('11').' === 101')
|
||
->assertScript($radius('12').' === 69')
|
||
->assertScript($radius('13').' === 69')
|
||
->assertScript($radius('23').' === 69');
|
||
|
||
$page->click('#alarm-dialog [data-md-timepicker-label="hour24"][data-md-value="15"]')
|
||
->assertSeeIn('#alarm-dialog [data-md-timepicker-box="hour"]', '15')
|
||
->assertAttribute('#alarm-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->click('#alarm-dialog [data-md-timepicker-label="minute"][data-md-value="0"]');
|
||
|
||
// The confirm button closes the dialog: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#alarm-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertSeeIn('#alarm-value', '15:00')
|
||
->assertValue('#alarm', '15:00');
|
||
|
||
// The outer ring is the morning.
|
||
pressOnce($page)->click('#alarm');
|
||
|
||
$page->click('#alarm-dialog [data-md-timepicker-label="hour24"][data-md-value="3"]')
|
||
->assertSeeIn('#alarm-dialog [data-md-timepicker-box="hour"]', '03')
|
||
->click('#alarm-dialog [data-md-timepicker-label="minute"][data-md-value="0"]');
|
||
|
||
pressOnce($page)->click('#alarm-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertSeeIn('#alarm-value', '03:00');
|
||
});
|
||
|
||
it('follows a drag round the dial and settles on the nearest hour', function () {
|
||
$dial = inPicker('meeting', '[data-md-timepicker-dial]');
|
||
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
// Pointer events built in the page's own realm, from twelve o'clock round to just past four.
|
||
$send = fn (string $type, int $degrees): string => <<<JS
|
||
window.eval(`(() => {
|
||
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]');
|
||
const box = dial.getBoundingClientRect();
|
||
const radians = {$degrees} * Math.PI / 180;
|
||
|
||
dial.dispatchEvent(new PointerEvent('{$type}', {
|
||
bubbles: true, cancelable: true, pointerId: 1, isPrimary: true, button: 0, buttons: 1,
|
||
clientX: box.x + box.width / 2 + Math.sin(radians) * 90,
|
||
clientY: box.y + box.height / 2 - Math.cos(radians) * 90,
|
||
}));
|
||
})()`)
|
||
JS;
|
||
|
||
$page->script($send('pointerdown', 0).';'.$send('pointermove', 20).';'.$send('pointermove', 60).';'.$send('pointermove', 125));
|
||
|
||
// While dragging, the handle stays under the pointer rather than on a number.
|
||
$page->assertScript("{$dial}.hasAttribute('data-md-dragging') && parseFloat(getComputedStyle({$dial}).getPropertyValue('--timepicker-angle')) % 360 === 125")
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '04');
|
||
|
||
$page->script($send('pointerup', 125));
|
||
|
||
$page->assertScript("! {$dial}.hasAttribute('data-md-dragging')")
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '04');
|
||
});
|
||
|
||
it('changes the focused hour and minute with the arrow keys and confirms with Enter', function () {
|
||
$page = timeProbe();
|
||
|
||
$page->script("document.querySelector('#meeting').focus()");
|
||
|
||
// Enter on the field opens the dialog, same as clicking it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->keys('#meeting', 'Enter');
|
||
|
||
$page->assertScript('document.activeElement === '.inPicker('meeting', '[data-md-timepicker-dial]'))
|
||
->keys(':focus', 'ArrowUp')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuenow', '10')
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '10')
|
||
// The keyboard never moves on to the minutes by itself.
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'hour');
|
||
|
||
$page->script(inPicker('meeting', '[data-md-timepicker-box="minute"]').'.focus()');
|
||
|
||
$page->keys(':focus', 'Enter')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute');
|
||
|
||
$page->script(inPicker('meeting', '[data-md-timepicker-dial]').'.focus()');
|
||
|
||
$page->keys(':focus', ['ArrowDown', 'ArrowLeft'])
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuenow', '28')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'aria-valuetext', '28 minutes');
|
||
|
||
// Enter on the dial confirms and closes the dialog: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->keys(':focus', 'Enter');
|
||
|
||
$page->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '10:28');
|
||
});
|
||
|
||
it('takes a typed time in the input variant and says what is wrong with it', function () {
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-mode="input"]')
|
||
->assertSeeIn('#meeting-title', 'Enter time')
|
||
->assertScript("document.activeElement.id === 'meeting-hour'")
|
||
->assertValue('#meeting-hour', '09')
|
||
->assertValue('#meeting-minute', '30');
|
||
|
||
$page->type('#meeting-hour', '13')
|
||
->assertAttribute('#meeting-hour', 'aria-invalid', 'true')
|
||
// Word joiners keep the range on one line in the narrow column.
|
||
->assertScript(supportText('meeting-hour')." === 'Hour must be 1–12'");
|
||
|
||
// The confirm button closes the dialog when the time is valid; here it stays open (invalid),
|
||
// but pressed once anyway: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '09:30');
|
||
|
||
$page->clear('#meeting-hour')
|
||
->typeSlowly('#meeting-hour', '11', 20)
|
||
->assertScript("document.activeElement.id === 'meeting-minute'")
|
||
->assertScript(supportText('meeting-hour')." === 'Hour'")
|
||
->assertScript("! document.querySelector('#meeting-hour').hasAttribute('aria-invalid')");
|
||
|
||
$page->clear('#meeting-minute')
|
||
->typeSlowly('#meeting-minute', '75', 20)
|
||
->assertScript(supportText('meeting-minute')." === 'Minute must be 0–59'")
|
||
->clear('#meeting-minute')
|
||
->typeSlowly('#meeting-minute', '05', 20)
|
||
->keys('#meeting-minute', 'Enter')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-value', '11:05');
|
||
});
|
||
|
||
it('keeps to the step and the limits', function () {
|
||
$dial = inPicker('slot', '[data-md-timepicker-dial]');
|
||
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#slot');
|
||
|
||
$page->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"8\"]').hasAttribute('data-md-disabled')")
|
||
->assertScript("! {$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"9\"]').hasAttribute('data-md-disabled')")
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"hour24\"][data-md-value=\"18\"]').hasAttribute('data-md-disabled')")
|
||
// An hour outside the limits is not taken.
|
||
->click('#slot-dialog [data-md-timepicker-label="hour24"][data-md-value="20"]')
|
||
->assertSeeIn('#slot-dialog [data-md-timepicker-box="hour"]', '10')
|
||
->click('#slot-dialog [data-md-timepicker-label="hour24"][data-md-value="16"]')
|
||
->assertAttribute('#slot-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->assertScript("{$dial}.querySelector('[data-md-timepicker-label=\"minute\"][data-md-value=\"20\"]').hasAttribute('data-md-disabled')")
|
||
// A press between the steps lands on the nearest one.
|
||
->click('#slot-dialog [data-md-timepicker-label="minute"][data-md-value="20"]')
|
||
->assertSeeIn('#slot-dialog [data-md-timepicker-box="minute"]', '15');
|
||
|
||
$page->script("{$dial}.focus()");
|
||
|
||
$page->keys(':focus', 'ArrowUp')
|
||
->assertAttribute('#slot-dialog [data-md-timepicker-dial]', 'aria-valuenow', '30')
|
||
->click('#slot-dialog [data-md-timepicker-mode="input"]')
|
||
->type('#slot-hour', '18')
|
||
->assertSeeIn('#slot-dialog [data-md-timepicker-range-error]', 'Choose a time from 09:00 to 17:00')
|
||
->type('#slot-hour', '16')
|
||
->type('#slot-minute', '20')
|
||
->assertSeeIn('#slot-minute-support', 'Minute must be a multiple of 15');
|
||
|
||
// The confirm button closes the dialog when the time is valid; here it stays open (invalid),
|
||
// but pressed once anyway: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#slot-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertScript("document.activeElement.id === 'slot-minute'")
|
||
->type('#slot-minute', '45');
|
||
|
||
pressOnce($page)->click('#slot-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertSeeIn('#slot-value', '16:45');
|
||
});
|
||
|
||
it('gives focus back to the field on Escape', function () {
|
||
$page = timeProbe();
|
||
|
||
$page->script("document.querySelector('#meeting').focus()");
|
||
|
||
// Enter on the field opens the dialog, same as clicking it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->keys('#meeting', 'Enter');
|
||
|
||
$page->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->keys(':focus', 'ArrowUp')
|
||
->keys(':focus', 'Escape')
|
||
->assertScript("! document.querySelector('#meeting-dialog').open")
|
||
->assertScript("document.activeElement.id === 'meeting'")
|
||
->assertSeeIn('#meeting-value', '09:30');
|
||
});
|
||
|
||
it('stays open with its draft through a Livewire render', function () {
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->click('#meeting-dialog [data-md-timepicker-label="hour12"][data-md-value="5"]')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute');
|
||
|
||
$page->script('window.eval("Livewire.first().touch()")');
|
||
|
||
$page->assertSeeIn('#renders', '1')
|
||
->assertScript("document.querySelector('#meeting-dialog').open")
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '05')
|
||
->assertAttribute('#meeting-dialog [data-md-timepicker-dial]', 'data-md-view', 'minute')
|
||
->click('#meeting-dialog [data-md-timepicker-label="minute"][data-md-value="10"]');
|
||
|
||
pressOnce($page)->click('#meeting-dialog [data-md-timepicker-confirm]');
|
||
|
||
$page->assertSeeIn('#meeting-value', '05:10');
|
||
});
|
||
|
||
it('moves the period selector between AM and PM with arrow keys, as a radio group', function () {
|
||
$am = '#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="am"]';
|
||
$pm = '#meeting-dialog [data-md-timepicker-display] [data-md-timepicker-period-option="pm"]';
|
||
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->assertAttribute($am, 'role', 'radio')
|
||
->assertAttribute($am, 'aria-checked', 'true')
|
||
->assertAttribute($pm, 'aria-checked', 'false')
|
||
// show() moves focus to the dial from inside Alpine's $nextTick, which Livewire's bundled
|
||
// Alpine defers with a real setTimeout(0) rather than a microtask: wait for the dialog to
|
||
// actually open before stealing focus onto the period selector, or .focus() below is a no-op
|
||
// on a still-closed <dialog> and the element beneath it keeps focus instead.
|
||
->wait(0.15)
|
||
->assertScript("document.querySelector('#meeting-dialog').open");
|
||
|
||
$page->script("document.querySelector('{$am}').focus()");
|
||
|
||
// A two-option radio group: a second press of the same arrow cycles back: pressOnce(),
|
||
// tests/Pest.php.
|
||
pressOnce($page)->keys(':focus', 'ArrowRight');
|
||
|
||
$page->assertAttribute($pm, 'aria-checked', 'true')
|
||
->assertAttribute($am, 'aria-checked', 'false')
|
||
->assertScript("document.activeElement.dataset.mdTimepickerPeriodOption === 'pm'")
|
||
// M3's radio-in-a-list: an arrow key moves to the other option and selects it, so PM
|
||
// reaches the dial straight away — the hour turns 9 into 21 without a confirm.
|
||
->assertSeeIn('#meeting-dialog [data-md-timepicker-box="hour"]', '09');
|
||
|
||
pressOnce($page)->keys(':focus', 'ArrowLeft');
|
||
|
||
$page->assertAttribute($am, 'aria-checked', 'true')
|
||
->assertAttribute($pm, 'aria-checked', 'false')
|
||
->assertScript("document.activeElement.dataset.mdTimepickerPeriodOption === 'am'");
|
||
});
|
||
|
||
it('lies the dial on its side in a short landscape window', function () {
|
||
$page = timeProbe()
|
||
->resize(700, 400);
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
$page->assertScript("document.querySelector('#meeting-dialog').open");
|
||
|
||
// Side by side rather than stacked: the display (216px wide) sits centred in the dial's row,
|
||
// inside its height, with the dial 36px after it, and the picker's own layout (flex column)
|
||
// gives way to the grid areas.
|
||
$page->assertScript(<<<'JS'
|
||
(() => {
|
||
const display = document.querySelector('#meeting-dialog [data-md-timepicker-display]').getBoundingClientRect();
|
||
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]').getBoundingClientRect();
|
||
|
||
return display.top > dial.top && display.bottom < dial.bottom && Math.abs(dial.left - display.right - 36) < 1 && Math.round(display.width) === 216;
|
||
})()
|
||
JS)
|
||
->assertScript("getComputedStyle(document.querySelector('#meeting-dialog [data-md-timepicker-picker]')).display === 'contents'");
|
||
|
||
$page->resize(390, 800)
|
||
->assertScript(<<<'JS'
|
||
(() => {
|
||
const display = document.querySelector('#meeting-dialog [data-md-timepicker-display]').getBoundingClientRect();
|
||
const dial = document.querySelector('#meeting-dialog [data-md-timepicker-dial]').getBoundingClientRect();
|
||
|
||
return dial.top >= display.bottom;
|
||
})()
|
||
JS);
|
||
});
|
||
|
||
it('keeps the dial and the boxes their fixed pixel size at a 20px root font size, growing only their text', function () {
|
||
$dial = "document.querySelector('#meeting-dialog [data-md-timepicker-dial]')";
|
||
$hourBox = "document.querySelector('#meeting-dialog [data-md-timepicker-box=\"hour\"]')";
|
||
$surface = "document.querySelector('#meeting-dialog [data-md-timepicker-surface]')";
|
||
$dialWidth = "Math.round({$dial}.getBoundingClientRect().width)";
|
||
$font = "getComputedStyle({$hourBox}).fontSize";
|
||
|
||
$page = timeProbe();
|
||
|
||
// Opens the modal dialog over the field that triggers it: pressOnce(), tests/Pest.php.
|
||
pressOnce($page)->click('#meeting');
|
||
|
||
// After the dialog's entry, not during it: mid-scale the dial measures 0.95 of its own size,
|
||
// which would make the resting width this test compares against a number the CSS never sets.
|
||
$page->assertScript(settled("document.querySelector('#meeting-dialog')", subtree: true));
|
||
|
||
$restingWidth = (int) $page->script($dialWidth);
|
||
$restingFont = $page->script($font);
|
||
|
||
$page->script("document.documentElement.style.fontSize = '20px'");
|
||
|
||
$page->assertScript("({$dialWidth}) === {$restingWidth}")
|
||
->assertScript("({$font}) !== '{$restingFont}'")
|
||
// The px-sized surface sets the dialog's size, not the (rem-sized) text now growing inside it.
|
||
->assertScript("{$surface}.scrollWidth <= {$surface}.clientWidth + 1 && {$surface}.scrollHeight <= {$surface}.clientHeight + 1");
|
||
});
|