Read the modal date picker's headline from its own header

Plan step 32. The full-screen range picker (plan step 24) added a second
`[data-datepicker-headline]` in its app bar, hidden unless the picker is
full screen, so Playwright's strict locator found two headlines in every
modal picker. The tests read the modal header's.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 13:39:17 +02:00
co-authored by Claude Opus 5
parent 2206c8e09b
commit d5ec5b8638
+6 -6
View File
@@ -245,7 +245,7 @@ it('opens the modal picker, jumps through the year grid and confirms with OK', f
$page = dateProbe()
->click('#birthday-field')
->assertScript("{$dialog}.matches(':modal')")
->assertSeeIn('#birthday-field-picker [data-datepicker-headline]', 'May 17, 2000')
->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 17, 2000')
->click('#birthday-field-picker [data-datepicker-nav]:not([data-docked]) [data-datepicker-menu-button]')
->assertScript("getComputedStyle(document.querySelector('#birthday-field-picker [data-datepicker-years]')).display !== 'none'")
->assertScript("document.activeElement.textContent.trim() === '2000'");
@@ -253,7 +253,7 @@ it('opens the modal picker, jumps through the year grid and confirms with OK', f
$page->click('#birthday-field-picker [data-datepicker-year]:has-text("1990")')
->assertSeeIn('#birthday-field-picker [data-datepicker-nav]', 'May 1990')
->click(day('birthday-field', '1990-05-03'))
->assertSeeIn('#birthday-field-picker [data-datepicker-headline]', 'May 3, 1990')
->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 3, 1990')
->assertSeeIn('#birthday', '2000-05-17');
$page->click('#birthday-field-picker [data-datepicker-confirm]')
@@ -274,7 +274,7 @@ it('closes on Escape without keeping the draft and hands focus back to the field
$page->keys(':focus', 'ArrowRight')
->keys(':focus', 'Space')
->assertSeeIn('#birthday-field-picker [data-datepicker-headline]', 'May 18, 2000');
->assertSeeIn('#birthday-field-picker [data-datepicker-header] [data-datepicker-headline]', 'May 18, 2000');
$page->keys(':focus', 'Escape')
->assertScript("! {$dialog}.open")
@@ -300,7 +300,7 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
->click('#delivery-field')
->assertScript("{$dialog}.matches(':modal')")
->assertScript("document.activeElement.id === 'delivery-field-entry'")
->assertSeeIn('#delivery-field-picker [data-datepicker-headline]', 'Entered date');
->assertSeeIn('#delivery-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Entered date');
$page->type('#delivery-field-entry', '2026-03-07')
->click('#delivery-field-picker [data-datepicker-confirm]')
@@ -314,7 +314,7 @@ it('reads the modal input in the locale\'s format and explains a date it cannot
->assertScript("{$dialog}.open");
$page->type('#delivery-field-entry', '3/7/2026')
->assertSeeIn('#delivery-field-picker [data-datepicker-headline]', 'Mar 7, 2026')
->assertSeeIn('#delivery-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Mar 7, 2026')
->keys('#delivery-field-entry', 'Enter')
->assertSeeIn('#delivery', '2026-03-07')
->assertScript("! {$dialog}.open")
@@ -463,7 +463,7 @@ it('reads the dialog\'s text field in the given format, not the locale\'s', func
->assertScript("{$dialog}.open");
$page->type('#dotted-field-entry', '1.10.2026')
->assertSeeIn('#dotted-field-picker [data-datepicker-headline]', 'Oct 1, 2026')
->assertSeeIn('#dotted-field-picker [data-datepicker-header] [data-datepicker-headline]', 'Oct 1, 2026')
->keys('#dotted-field-entry', 'Enter')
->assertSeeIn('#dotted', '2026-10-01')
->assertScript("! {$dialog}.open")