Andreas Reinhold / reiniandClaude Opus 5
4141ebe7b0
<x-search> renders data-md-search with data-md-trigger and binds data-md-open and data-md-full-screen; its parts become data-md-search-* and the empty row data-md-search-empty. search.css moves into material.components on px, spacing and state tokens (plan step 36). search.js and the showcase layout follow the renamed hooks. Browser tests cover the polite result count as it changes, the icon entry point expanding full screen and returning focus, and suggestions swapping to results on the first key. Co-Authored-By: Claude Opus 5 (1M context) <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-navigation-rail-panel] a[href$="/material/buttons"]')
|
|
->assertSee('Variants')
|
|
->assertScript("document.querySelector('[data-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');
|
|
});
|