blade(<<<'BLADE' BLADE); expect($html) ->toContain('role="tablist"') ->toContain('data-variant="primary"') ->toContain('id="share-people"') ->toContain('aria-controls="share-people-panel"') ->toMatch('/data-tab="people"\s+aria-controls="share-people-panel"\s+aria-selected="true"\s+tabindex="0"/') ->toMatch('/data-tab="files"\s+aria-controls="share-files-panel"\s+aria-selected="false"\s+tabindex="-1"/') ->toContain('disabled') ->toContain('data-tab-indicator') ->toContain('--tabs-indicator: share-indicator') ->toContain('x-modelable="selected"') ->toContain('role="tabpanel"') ->toContain('>3'); }); it('takes a variant, stacks icons and scrolls on request', function () { expect((string) $this->blade('')) ->toContain('data-variant="secondary"') ->not->toContain('data-stacked') ->toContain('data-scrollable') ->and((string) $this->blade('')) ->toContain('data-stacked') ->toMatch('/data-tab="b"\s+aria-controls="[^"]+"\s+aria-selected="true"/'); }); it('entangles the chosen tab with Livewire and renders the one the property names', function () { Livewire::component('tabs-probe', new class extends Component { public string $tab = 'people'; public function render(): string { return '

'; } }); expect(Livewire::test('tabs-probe')->html()) ->toContain(".entangle('tab').live") ->not->toContain('x-modelable') ->toMatch('/data-tab="people"\s+aria-controls="[^"]+"\s+aria-selected="true"/'); }); it('draws section navigation as secondary tabs and a picker', function () { $html = (string) $this->blade(<<<'BLADE' BLADE); expect($html) ->toContain('aria-label="Settings"') ->toContain('data-section-picker') ->toContain('data-variant="secondary"') ->toContain('sm:flex') ->toMatch('/href="\/settings\/security"\s+data-tab\s+aria-current="page"\s+wire:navigate/') ->not->toMatch('/href="\/settings\/profile"\s+data-tab\s+aria-current/') // The picker is a menu of places: the current one is the page, not a checked choice, // and a section's badge shows there as well as on its tab. ->not->toContain('role="menuitemcheckbox"') ->toMatch('/role="menuitem"[^>]*aria-current="page"[^>]*href="\/settings\/security"/') ->toMatch('/data-section-picker.*Security.*>\s*1\s*<.*

get('/'); $items = collect(range(1, 7))->map(fn (int $n): array => ['title' => "S{$n}", 'url' => $n === 3 ? url('/') : "/s/{$n}"])->all(); expect((string) $this->blade('', ['items' => $items])) ->toContain('sm:grid sm:grid-cols-4 xl:flex') ->toMatch('/data-tab\s+aria-current="page"\s*>\s*\s*S3/') ->not->toContain('wire:navigate'); }); it('keeps the page\'s section current while a Livewire component on it updates', function () { Livewire::component('section-nav-probe', new class extends Component { public string $page = ''; public function mount(): void { $this->page = url()->current(); } public function render(): string { return '

'; } }); $current = '/href="[^"]*\/livewire-unit-test-endpoint\/[^"]*"\s+data-tab\s+aria-current="page"/'; $probe = Livewire::test('section-nav-probe'); expect($probe->html())->toMatch($current) ->and($probe->call('$refresh')->html())->toMatch($current) // Once as the tab, once as the picker's item: one section, drawn for both widths. ->and(substr_count($probe->html(), 'aria-current="page"'))->toBe(2); });