The page<\/div>/') ->not->toContain('data-app-bar') ->not->toContain('data-md-pane-navigation'); }); it('gives the pane its own app bar, a direct child spanning it, with the title, subtitle and actions', function () { $html = (string) $this->blade(<<<'BLADE' ACTIONS BODY BLADE); expect($html) ->toMatch('/^\s*

]*>\s*]*data-app-bar[^>]*data-md-pane-bar/s') ->toContain('

Settings

') ->toContain('

Your account

') ->toMatch('/

ACTIONS<\/span><\/div>/') ->toContain('data-sticky') ->toMatch('/<\/header>\s*

\s*BODY\s*<\/div>/s') ->and((string) $this->blade(''))->not->toContain('data-sticky'); }); it('draws a bar for actions alone, and names the heading h1 by default', function () { expect((string) $this->blade('

ACTIONS

'))->toContain('data-md-pane-bar') ->and((string) $this->blade(''))->toContain('

Inbox

'); }); it('puts the section navigation under the bar and above the body', function () { $html = (string) $this->blade(<<<'BLADE' BODY BLADE); expect($html)->toMatch('/<\/header>\s*

SECTIONS<\/nav><\/div>\s*

\s*BODY/s') // It is the pane's section navigation, not the bar's leading button. ->not->toContain('data-app-bar-leading'); }); it('leads the bar with a back link, a back action for a list-detail, or the leading slot', function () { $link = (string) $this->blade(''); $action = (string) $this->blade(''); $leading = (string) $this->blade('

'); expect($link)->toMatch('/data-app-bar-leading>/') ->toMatch('/]*href="\/shares"[^>]*aria-label="Back"/s') ->not->toContain('data-md-list-detail-back') ->and($action)->toMatch('//') ->toMatch('/]*aria-label="Back"[^>]*x-on:click="back"/s') ->and($leading)->toContain('

') ->not->toContain('data-md-pane-back'); }); it('caps its width with M3\'s narrow measure or the wider steps', function () { foreach (['full', 'narrow', 'medium', 'wide'] as $width) { expect(layoutRoot((string) $this->blade('', ['width' => $width]))['data-md-width'])->toBe($width); } expect(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-width'); }); it('takes the element, the visibility props and the caller\'s class and style', function () { expect(layoutRoot((string) $this->blade(''))) ->toMatchArray([ '<' => 'section', 'data-md-hide-below' => 'expanded', 'class' => 'checkout', 'style' => 'max-width: 50rem;', 'aria-labelledby' => 'checkout-title', ]); }); it('keeps M3\'s margin on the body, once, in the layout layer', function () { $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/pane.css'); expect($css)->toContain('@layer material.layout') ->toContain('padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space200));') ->toContain("@media (width >= 600px) {\n padding-inline: var(--md-layout-margin, var(--md-sys-measurement-space300));") ->toContain("[data-md-pane-body] > * {\n --md-layout-margin: 0px;") ->toContain("[data-md-pane][data-md-width='narrow'] {\n max-inline-size: 40rem;") ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/pane.css';"); });