noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
74cbcd2f44cebbb12f1f5d81098a6e01c6c6924c
livewire-material/tests/Browser/BarsTest.php
T
Andreas Reinhold / reiniandClaude Sonnet 5 f1cd6e4eb4 Draw the section navigation without Tailwind 
Plan step 36 (navigation group, third batch): <x-section-nav>'s class
lists move into resources/css/components/section-nav.css, keyed on
data-md-section-nav (data-md-section-nav-picker, its own trigger and
label) and <x-tabs>'s own hooks, reused whole rather than copied
(N-16's fix keeps the real scrollable tab bar it landed): the bar's
outline-variant divider, active indicator and aria-current colouring
are tabs.css's rules, not this file's. The picker's trigger takes the
shared md-focus-ring class and the fixed md-type-body-lg/md-ink/
md-text-start text classes for its own body-large type, since it is
prose on a plain button rather than a component's own type; icons
take a size prop instead of a size class.

Hooks renamed: data-section-nav to data-md-section-nav,
data-section-picker to data-md-section-nav-picker, updated in
TabsTest.php (which carries section-nav's render tests) and
tests/Browser/BarsTest.php.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-15 00:40:39 +02:00

348 lines
16 KiB
PHP
Raw Blame History

<?php
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\Facades\Route;
use Livewire\Component;
use Livewire\Livewire;
class BarsProbe extends Component
{
public string $tab = 'files';
public function render(): string
{
return <<<'BLADE'
<div>
<x-app-bar variant="medium" title="Recipients" id="bar">
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
<x-slot:actions><x-theme-toggle id="toggle" /></x-slot:actions>
</x-app-bar>
<div class="space-y-6 p-4">
<p>tab: <span id="tab">{{ $tab }}</span></p>
<x-tabs id="share" wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'locked', 'label' => 'Locked', 'disabled' => true], ['name' => 'activity', 'label' => 'Activity']]">
<x-tab name="files">Three files.</x-tab>
<x-tab name="people">Anna and Ben.</x-tab>
<x-tab name="activity">Two downloads.</x-tab>
</x-tabs>
<x-toolbar label="Formatting">
<button type="button" id="bold">B</button>
<button type="button" id="italic">I</button>
<button type="button" id="underline">U</button>
</x-toolbar>
<x-theme-toggle mode="cycle" id="cycle" />
<x-theme-toggle mode="picker" />
<x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security']]" no-wire-navigate />
<div style="height: 200vh"></div>
</div>
</div>
BLADE;
}
}
function barsProbe()
{
Livewire::component('bars-probe', BarsProbe::class);
Route::middleware('web')->get('/bars-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<livewire:bars-probe />
@livewireScripts
</body>
</html>
BLADE));
return visit('/bars-probe')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
}
it('moves between tabs with the arrow keys, skipping disabled ones, and tells Livewire', function () {
$page = barsProbe()
->click('#share-people')
->assertSeeIn('#tab', 'people')
->assertSee('Anna and Ben.')
->assertAttribute('#share-people', 'tabindex', '0')
->assertAttribute('#share-files', 'tabindex', '-1');
$page->keys('#share-people', 'ArrowRight')
->assertSeeIn('#tab', 'activity')
->assertScript("document.activeElement.id === 'share-activity'")
->assertScript("getComputedStyle(document.querySelector('#share-activity [data-md-tab-indicator]')).opacity === '1'");
$page->keys('#share-activity', 'Home')
->assertSeeIn('#tab', 'files')
->assertScript("document.activeElement.id === 'share-files'");
$page->keys('#share-files', 'ArrowLeft')
->assertSeeIn('#tab', 'activity');
});
it('collapses a medium app bar into its row as the page scrolls, and fades its small title in', function () {
$headline = "getComputedStyle(document.querySelector('#bar [data-md-app-bar-row] [data-md-app-bar-headline]')).opacity";
$page = barsProbe()
->assertScript("! document.querySelector('#bar').hasAttribute('data-md-collapsed')")
->assertScript("{$headline} === '0'");
$page->script('window.scrollTo(0, 600)');
$page->assertScript("document.querySelector('#bar').hasAttribute('data-md-collapsed') && document.querySelector('#bar').hasAttribute('data-md-scrolled')")
->assertScript("Math.round(document.querySelector('#bar [data-md-app-bar-row]').getBoundingClientRect().top) === 0")
->assertScript("document.querySelector('#bar').getBoundingClientRect().bottom <= 65")
->assertScript("{$headline} === '1'");
$page->script('window.scrollTo(0, 0)');
$page->assertScript("! document.querySelector('#bar').hasAttribute('data-md-collapsed')");
});
it('moves focus along a toolbar with the arrow keys', function () {
barsProbe()
->keys('#bold', 'ArrowRight')
->assertScript("document.activeElement.id === 'italic'")
->keys('#italic', 'End')
->assertScript("document.activeElement.id === 'underline'")
->keys('#underline', 'ArrowRight')
->assertScript("document.activeElement.id === 'bold'");
});
it('switches the theme from a toggle, a cycle and a picker', function () {
$page = barsProbe()
->click('label:has(input[name="material-theme"][value="light"])')
->assertScript("document.documentElement.dataset.theme === 'light'")
->assertAttribute('#toggle', 'aria-pressed', 'false');
$page->click('#toggle')
->assertScript("document.documentElement.dataset.theme === 'dark'")
->assertAttribute('#toggle', 'aria-pressed', 'true')
->assertScript('document.querySelector(\'input[name="material-theme"][value="dark"]\').checked');
$page->click('#cycle')
->assertScript("document.documentElement.dataset.themeChoice === 'system'")
->click('#cycle')
->assertScript("document.documentElement.dataset.themeChoice === 'light'");
});
it('turns section tabs into a picker on a phone', function () {
barsProbe()
->resize(400, 800)
->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display === 'none'")
->click('[data-md-section-nav-picker] button')
->assertScript("document.querySelector('[data-md-section-nav-picker] [popover]').matches(':popover-open')")
// A menu of places: the current section is the page, not a checked choice.
->assertAttribute('[data-md-section-nav-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
->assertScript("! document.querySelector('[data-md-section-nav-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
});
class AppBarOverflowProbe extends Component
{
public int $stars = 0;
public function star(): void
{
$this->stars++;
}
public function render(): string
{
return <<<'BLADE'
<div>
<p>stars: <span id="stars">{{ $stars }}</span></p>
<x-app-bar title="Shares" id="bar" :actions="[
['label' => 'Search', 'icon' => 'search'],
['label' => 'Share', 'icon' => 'share'],
['label' => 'Star', 'icon' => 'star', 'wire:click' => 'star'],
['label' => 'Archive', 'icon' => 'archive'],
['label' => 'Delete', 'icon' => 'delete'],
]" />
<div style="height: 200vh"></div>
</div>
BLADE;
}
}
function appBarOverflowProbe()
{
Livewire::component('app-bar-overflow-probe', AppBarOverflowProbe::class);
Route::middleware('web')->get('/app-bar-overflow-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<livewire:app-bar-overflow-probe />
@livewireScripts
</body>
</html>
BLADE));
return visit('/app-bar-overflow-probe')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
}
it('shows the app bar overflow at exactly 599 and 600px', function () {
$visible = "[...document.querySelectorAll('#bar [data-md-app-bar-action]')].filter((el) => getComputedStyle(el).display !== 'none').length";
appBarOverflowProbe()->resize(599, 800)
// Two icon buttons below 600px — the kept action and the overflow button.
->assertScript("{$visible} === 1")
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"]')).display !== 'none'")
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"medium\"]')).display === 'none'")
->resize(600, 800)
// Four from 600px — three kept actions and the overflow button.
->assertScript("{$visible} === 3")
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"]')).display === 'none'")
->assertScript("getComputedStyle(document.querySelector('#bar [data-md-app-bar-overflow=\"medium\"]')).display !== 'none'")
->assertNoJavaScriptErrors();
});
it('moves the keyboard through an app bar\'s overflow menu, and closes it once the width no longer shows it', function () {
$page = appBarOverflowProbe()->resize(599, 800);
$page->click('#bar [data-md-app-bar-overflow="compact"] button')
->assertScript("document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
->keys(':focus', 'ArrowDown')
->assertScript("document.activeElement.textContent.includes('Star')")
->keys(':focus', 'ArrowDown')
->assertScript("document.activeElement.textContent.includes('Archive')")
->keys(':focus', 'Escape')
->assertScript("! document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')");
// Reopen it, then resize across 600px: the compact menu's trigger is no longer shown, so the
// menu it opened closes rather than staying open anchored to nothing.
$page->click('#bar [data-md-app-bar-overflow="compact"] button')
->assertScript("document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
->resize(900, 800)
->assertScript("! document.querySelector('#bar [data-md-app-bar-overflow=\"compact\"] [data-md-menu-popover]').matches(':popover-open')")
->assertNoJavaScriptErrors();
});
it('runs a wire:click action from either the icon button or its overflow menu item', function () {
$page = appBarOverflowProbe()->resize(900, 800);
$page->click('#bar [data-md-app-bar-action] [aria-label="Star"]')
->assertSeeIn('#stars', '1');
$page->resize(599, 800)
->click('#bar [data-md-app-bar-overflow="compact"] button')
->click('[role="menuitem"]:has-text("Star")')
->assertSeeIn('#stars', '2');
});
function toolbarScaffoldProbe()
{
Route::middleware('web')->get('/toolbar-scaffold-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body class="bg-surface">
<x-scaffold :destinations="[
['title' => 'Inbox', 'icon' => 'inbox', 'url' => '/toolbar-scaffold-probe', 'active' => true],
['title' => 'Sent', 'icon' => 'send', 'url' => '/toolbar-scaffold-probe'],
]">
<x-toolbar variant="docked" rounded place="bottom" label="Formatting" id="toolbar">
<x-button icon="format_bold" tooltip="Bold" />
<x-divider vertical />
<x-button icon="format_italic" tooltip="Italic" />
</x-toolbar>
<div style="height: 200vh"></div>
</x-scaffold>
@livewireScripts
</body>
</html>
BLADE));
return visit('/toolbar-scaffold-probe')->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
}
it('keeps a docked toolbar clear of the navigation bar below medium', function () {
toolbarScaffoldProbe()->resize(599, 800)
->assertScript("getComputedStyle(document.querySelector('[data-md-scaffold-bar]')).display !== 'none'")
// A docked toolbar at place="bottom" sits above --material-bottom-bar, never on top of it.
->assertScript("document.querySelector('#toolbar').getBoundingClientRect().bottom <= document.querySelector('[data-md-scaffold-bar]').getBoundingClientRect().top")
->assertNoJavaScriptErrors();
});
it('rounds a docked toolbar and its divider from 840px, clear of the window\'s edges', function () {
$page = toolbarScaffoldProbe()->resize(800, 800);
$page->assertScript("getComputedStyle(document.querySelector('#toolbar')).borderRadius === '0px'")
->assertScript("Math.round(document.querySelector('#toolbar').getBoundingClientRect().left) === 0")
->assertScript("Math.round(document.querySelector('#toolbar').getBoundingClientRect().right) === Math.round(window.innerWidth)");
$page->resize(1024, 800)
->assertScript("getComputedStyle(document.querySelector('#toolbar')).borderRadius !== '0px'")
->assertScript("document.querySelector('#toolbar').getBoundingClientRect().left >= 16")
->assertScript("window.innerWidth - document.querySelector('#toolbar').getBoundingClientRect().right >= 16")
->assertScript("window.innerHeight - document.querySelector('#toolbar').getBoundingClientRect().bottom >= 16")
->assertScript("getComputedStyle(document.querySelector('#toolbar [role=\"separator\"]')).height === '40px'")
->assertNoJavaScriptErrors();
});
function tabsFirstPaintProbe(): void
{
Route::middleware('web')->get('/tabs-first-paint-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
</head>
<body>
<x-tabs selected="people" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'activity', 'label' => 'Activity']]">
<x-tab name="files">Files panel</x-tab>
<x-tab name="people">People panel</x-tab>
<x-tab name="activity">Activity panel</x-tab>
</x-tabs>
<script>
// Runs while the document is still being parsed, before Alpine (further down
// the page) exists — what the first paint shows.
window.firstPaint = [...document.querySelectorAll('[role="tabpanel"]')].map((panel) => getComputedStyle(panel).display)
</script>
@livewireScripts
</body>
</html>
BLADE));
}
it('never flashes a tab panel before Alpine boots', function () {
tabsFirstPaintProbe();
// Only the chosen ("people") panel is on screen at the moment the inline script right after
// the panels runs — the server's own `style="display: none"`, not Alpine's x-show, is what
// kept the other two off screen up to here (N-05).
$page = visit('/tabs-first-paint-probe')
->assertScript("window.eval('window.firstPaint.join(\",\")') === 'none,block,none'");
$page->waitForEvent('networkidle')
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined'")
->assertNoJavaScriptErrors();
});
Reference in New Issue View Git Blame Copy Permalink