Fix a chained assertScript() and add adaptive hide-when-collapsed coverage
navigationExtrasProbe's pinned-snackbar test chained ->assertScript() off $page->script(), which returns the script's value (null here), not the page. Also adds the reviewer's requested browser coverage for an adaptive rail with hide-when-collapsed across 839/840/1199/1200px: collapsed (not away) at medium, away at expanded with data-rail-auto, standing again by default from large (plan step 36). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
co-authored by
Claude Sonnet 5
parent
26c338be25
commit
c214745132
@@ -306,6 +306,13 @@ function navigationExtrasProbe(): mixed
|
||||
<button type="button" id="open-hiding-rail" x-data x-on:click="$store.rail.show()">Open navigation</button>
|
||||
</div>
|
||||
|
||||
<div id="adaptive-hiding-rail" style="display: flex">
|
||||
<x-navigation-rail mode="adaptive" hide-when-collapsed>
|
||||
<x-navigation-rail-item label="Canvas" icon="brush" link="#a" no-wire-navigate active />
|
||||
<x-navigation-rail-item label="Layers" icon="layers" link="#b" no-wire-navigate />
|
||||
</x-navigation-rail>
|
||||
</div>
|
||||
|
||||
<div style="height: 250vh"></div>
|
||||
|
||||
<x-toast />
|
||||
@@ -337,8 +344,8 @@ it('hides the bar on a scroll down and never while a pinned snackbar is on scree
|
||||
$page->script('window.scrollTo(0, 0)');
|
||||
$page->assertScript("{$hidden} === false");
|
||||
|
||||
$page->script("materialToast('Pinned', { sticky: true })")
|
||||
->assertScript("document.querySelector('[data-md-toast-snackbar]')?.textContent.includes('Pinned')");
|
||||
$page->script("materialToast('Pinned', { sticky: true })");
|
||||
$page->assertScript("document.querySelector('[data-md-toast-snackbar]')?.textContent.includes('Pinned')");
|
||||
|
||||
$page->script('window.scrollTo(0, 400)');
|
||||
$page->assertScript("{$hidden} === false")
|
||||
@@ -369,3 +376,36 @@ it('takes a rail out of the layout entirely when it hides collapsed, and back ov
|
||||
->assertScript("getComputedStyle(document.querySelector('#hiding-rail [data-md-navigation-rail-panel]')).display === 'flex'")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
it('takes an adaptive rail out of the layout across the expanded class when it hides collapsed, standing again from large', function () {
|
||||
$page = navigationExtrasProbe();
|
||||
$rail = "document.querySelector('#adaptive-hiding-rail [data-md-navigation-rail]')";
|
||||
$railWidth = "Math.round({$rail}.getBoundingClientRect().width)";
|
||||
|
||||
// `medium` (600-839): the window collapses the rail, not the visitor, so M3's "collapsed rail
|
||||
// may never hide" holds even with hide-when-collapsed set — it stays at its collapsed width.
|
||||
$page->resize(839, 900)
|
||||
->assertScript("{$railWidth} === 96")
|
||||
->assertScript("! {$rail}.hasAttribute('data-md-open')")
|
||||
->assertScript("document.documentElement.hasAttribute('data-rail-auto')")
|
||||
->assertNoJavaScriptErrors();
|
||||
|
||||
// `expanded` (840-1199): nothing chosen yet, so the rail is away rather than shown collapsed.
|
||||
$page->resize(840, 900)
|
||||
->assertScript("{$railWidth} === 0")
|
||||
->assertScript("! {$rail}.hasAttribute('data-md-open')")
|
||||
->assertScript("document.documentElement.hasAttribute('data-rail-auto')")
|
||||
->assertNoJavaScriptErrors();
|
||||
|
||||
$page->resize(1199, 900)
|
||||
->assertScript("{$railWidth} === 0")
|
||||
->assertScript("document.documentElement.hasAttribute('data-rail-auto')");
|
||||
|
||||
// `large` (1200+): M3 starts an adaptive rail expanded by default, so it stands in the layout
|
||||
// again rather than staying away.
|
||||
$page->resize(1200, 900)
|
||||
->assertScript("{$railWidth} === 256")
|
||||
->assertScript("! {$rail}.hasAttribute('data-md-open')")
|
||||
->assertScript("document.documentElement.hasAttribute('data-rail-auto')")
|
||||
->assertNoJavaScriptErrors();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user