noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/DatepickerTest.php
+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() $page = dateProbe()
->click('#birthday-field') ->click('#birthday-field')
->assertScript("{$dialog}.matches(':modal')") ->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]') ->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("getComputedStyle(document.querySelector('#birthday-field-picker [data-datepicker-years]')).display !== 'none'")
->assertScript("document.activeElement.textContent.trim() === '2000'"); ->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")') $page->click('#birthday-field-picker [data-datepicker-year]:has-text("1990")')
->assertSeeIn('#birthday-field-picker [data-datepicker-nav]', 'May 1990') ->assertSeeIn('#birthday-field-picker [data-datepicker-nav]', 'May 1990')
->click(day('birthday-field', '1990-05-03')) ->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'); ->assertSeeIn('#birthday', '2000-05-17');
$page->click('#birthday-field-picker [data-datepicker-confirm]') $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') $page->keys(':focus', 'ArrowRight')
->keys(':focus', 'Space') ->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') $page->keys(':focus', 'Escape')
->assertScript("! {$dialog}.open") ->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') ->click('#delivery-field')
->assertScript("{$dialog}.matches(':modal')") ->assertScript("{$dialog}.matches(':modal')")
->assertScript("document.activeElement.id === 'delivery-field-entry'") ->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') $page->type('#delivery-field-entry', '2026-03-07')
->click('#delivery-field-picker [data-datepicker-confirm]') ->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"); ->assertScript("{$dialog}.open");
$page->type('#delivery-field-entry', '3/7/2026') $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') ->keys('#delivery-field-entry', 'Enter')
->assertSeeIn('#delivery', '2026-03-07') ->assertSeeIn('#delivery', '2026-03-07')
->assertScript("! {$dialog}.open") ->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"); ->assertScript("{$dialog}.open");
$page->type('#dotted-field-entry', '1.10.2026') $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') ->keys('#dotted-field-entry', 'Enter')
->assertSeeIn('#dotted', '2026-10-01') ->assertSeeIn('#dotted', '2026-10-01')
->assertScript("! {$dialog}.open") ->assertScript("! {$dialog}.open")