tab: {{ $tab }}
Three files.
Anna and Ben.
Two downloads.
BLADE;
}
}
function barsProbe()
{
Livewire::component('bars-probe', BarsProbe::class);
Route::middleware('web')->get('/bars-probe', fn () => Blade::render(<<<'BLADE'
@vite(config('livewire-material.showcase.vite'))
@livewireStyles
@livewireScripts
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-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-app-bar-row] [data-app-bar-headline]')).opacity";
$page = barsProbe()
->assertScript("! document.querySelector('#bar').hasAttribute('data-collapsed')")
->assertScript("{$headline} === '0'");
$page->script('window.scrollTo(0, 600)');
$page->assertScript("document.querySelector('#bar').hasAttribute('data-collapsed') && document.querySelector('#bar').hasAttribute('data-scrolled')")
->assertScript("Math.round(document.querySelector('#bar [data-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-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-section-nav] nav')).display === 'none'")
->click('[data-section-picker] button')
->assertScript("document.querySelector('[data-section-picker] [popover]').matches(':popover-open')")
// A menu of places: the current section is the page, not a checked choice.
->assertAttribute('[data-section-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
->assertScript("! document.querySelector('[data-section-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
});