Andreas Reinhold / reiniandClaude Sonnet 5
cbd7d01c62
Plan step 36 (navigation group, second batch, cleanup). Every leftover data-navigation-*, data-tall, data-hide-on-scroll, data-hidden, data-width, data-align, data-divider, data-fill and component-level data-open reference outside the rewritten stylesheets and views moves to data-md-*, in the files the two component commits left alone: tests/Feature/Components/ScaffoldTest.php (the scaffold's own rewrite is a later batch, but it renders the bar and the rail today and asserts their hooks); tests/Browser/NavigationTest.php, ShowcaseTest.php and ColourProfilesTest.php (selectors only — document-level attributes, data-rail, data-rail-auto and data-app-shell*, keep their names). NavigationTest.php also gets the browser tests the plan owed this group (docs/plans/material-3-browser-tests.md § Navigation): a tall bar's vertical layout at a width where the short bar would go horizontal; hide-on-scroll never firing while a pinned snackbar is on screen; a narrow rail's 80px width and centred destinations; a rail that hides when collapsed leaving the layout and coming back only through an application's own menu button. resources/css/components/navigation.css and its import in tailwind.css are deleted now that nothing imports the file any more (the previous commit's message said this already happened there; it did not — this is where it actually lands). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
56 lines
2.8 KiB
PHP
56 lines
2.8 KiB
PHP
<?php
|
|
|
|
it('opens the showcase in a real browser', function () {
|
|
visit('/material')
|
|
->assertSee('Livewire Material')
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('moves between sections through the rail and the next-section link, keeping the rail', function () {
|
|
$page = visit('/material')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
|
|
$page->click('[data-md-navigation-rail-panel] a[href$="/material/buttons"]')
|
|
->assertSee('Variants')
|
|
->assertScript("document.querySelector('[data-md-navigation-rail-panel] [aria-current=\"page\"]').getAttribute('href').endsWith('/material/buttons')")
|
|
->assertScript("document.title === 'Buttons · Livewire Material'");
|
|
|
|
$page->click('[data-test="next-section"]')
|
|
->assertScript("location.pathname.endsWith('/material/menus')")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('finds a component from anywhere and opens its section', function () {
|
|
$page = visit('/material/buttons')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
|
|
$page->keys('#content', '/')
|
|
->assertScript("document.activeElement.id === 'showcase-search'");
|
|
|
|
$page->type('#showcase-search', 'datepicker')
|
|
->assertSeeIn('[data-md-search-view]', '<x-datepicker>');
|
|
|
|
$page->keys('#showcase-search', 'Enter')
|
|
->assertScript("location.pathname.endsWith('/material/pickers')")
|
|
->assertScript("document.title === 'Date pickers · Livewire Material'");
|
|
});
|
|
|
|
it('opens an example on another page at the example', function () {
|
|
$page = visit('/material')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
|
|
$page->click('#showcase-search')
|
|
->type('#showcase-search', 'split button')
|
|
->click('[data-showcase-result]:has-text("Example")')
|
|
->assertScript("location.pathname.endsWith('/material/buttons') && location.hash.startsWith('#example-')")
|
|
->assertScript('(() => { const box = document.getElementById(decodeURIComponent(location.hash.slice(1))).getBoundingClientRect(); return box.top >= 0 && box.top < innerHeight; })()');
|
|
});
|
|
|
|
it('says so when nothing matches', function () {
|
|
visit('/material')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
|
|
->click('#showcase-search')
|
|
->type('#showcase-search', 'zzzz')
|
|
->assertSeeIn('[data-md-search-view]', 'Nothing matches');
|
|
});
|