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

Cover the rail header FAB's collapsed-to-extended morph

Browse Source 
The reviewer asked this run to look closely at it; no test exercised
it. Checks the label span's clipped opacity/max-width and the FAB's
square shape while the rail is collapsed, then its read label and
wider-than-tall shape once the rail's menu button expands it, waiting
past the shared spatial-default spring both morph on (plan step 36,
navigation group).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 01:52:09 +02:00
co-authored by Claude Sonnet 5
parent bc6a4d68c6
commit f86f3270cd
1 changed files with 22 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/NavigationTest.php
+22
View File
@@ -117,6 +117,28 @@ it('starts the rail collapsed across the expanded class and expands it in the la
navigationReady($page->refresh())->assertScript(railWidth(256));
});
it('morphs the rail header FAB between collapsed (icon only) and extended (with its label)', function () {
$fab = "document.querySelector('[data-md-navigation-rail-fab-row] [data-md-fab]')";
$label = "document.querySelector('[data-md-navigation-rail-fab-row] [data-md-fab] > span')";
$page = shellPage(840)
// Collapsed: the label is clipped to nothing, and the FAB is a plain square icon button —
// navigation-rail.css's [data-md-fab] > span and [data-md-fab][data-md-extended] rules.
->assertScript("getComputedStyle({$label}).opacity === '0'")
->assertScript("getComputedStyle({$label}).maxWidth === '0px'")
->assertScript("Math.round({$fab}.getBoundingClientRect().width) === Math.round({$fab}.getBoundingClientRect().height)");
$page->click('[data-md-navigation-rail-menu]')
// The label's width and the FAB's own shape both spring on the rail's spatial-default
// transition; wait past it for the settled, extended end state.
->wait(0.6)
->assertScript("getComputedStyle({$label}).opacity === '1'")
->assertScript("parseFloat(getComputedStyle({$label}).maxWidth) > 0")
->assertScript("{$fab}.getBoundingClientRect().width > {$fab}.getBoundingClientRect().height")
->assertSee('Compose')
->assertNoJavaScriptErrors();
});
it('expands the rail from large, and keeps it collapsed across a reload from the first paint', function () {
firstPaintProbe();