livewire-material/tests/Feature/Components/SupportingPaneTest.php

<?php

it('draws the focus pane first and the supporting pane after it, fixed and below by default', function () {
    $html = (string) $this->blade(<<<'BLADE'
        <x-supporting-pane>
            <x-slot:main><article>MAIN</article></x-slot:main>
            <x-slot:supporting><ul>SUPPORTING</ul></x-slot:supporting>
        </x-supporting-pane>
        BLADE);

    expect(layoutRoot($html))->toMatchArray([
        '<' => 'div',
        'data-md-supporting-pane' => 'data-md-supporting-pane',
        'data-md-width' => 'fixed',
        'data-md-compact' => 'below',
    ])
        ->and($html)->toMatch('/<div data-md-supporting-pane-main><article>MAIN<\/article><\/div>\s*<aside\s+data-md-supporting-pane-supporting\s*>\s*<div data-md-supporting-pane-body id="[^"]+"><ul>SUPPORTING<\/ul><\/div>\s*<\/aside>/s')
        ->not->toContain('data-md-supporting-pane-handle')
        ->not->toContain('x-data');
});

it('takes the default slot as the focus pane', function () {
    expect((string) $this->blade('<x-supporting-pane>MAIN<x-slot:supporting>SIDE</x-slot:supporting></x-supporting-pane>'))
        ->toMatch('/<div data-md-supporting-pane-main>\s*MAIN\s*<\/div>/');
});

it('splits the window two-thirds to one-third, or keeps the fixed pane for anything else', function () {
    expect(layoutRoot((string) $this->blade('<x-supporting-pane width="split" />'))['data-md-width'])->toBe('split')
        ->and(layoutRoot((string) $this->blade('<x-supporting-pane width="half" />'))['data-md-width'])->toBe('fixed');
});

it('names the supporting pane with its label', function () {
    expect((string) $this->blade('<x-supporting-pane label="Comments" />'))->toMatch('/<aside\s+data-md-supporting-pane-supporting\s+aria-label="Comments"/');
});

it('docks the supporting pane as a bottom sheet below expanded, opened by its handle', function () {
    $html = (string) $this->blade('<x-supporting-pane compact="sheet" label="Comments">MAIN<x-slot:supporting>SIDE</x-slot:supporting></x-supporting-pane>');

    preg_match('/aria-controls="([^"]+)"/', $html, $controls);

    expect(layoutRoot($html)['data-md-compact'])->toBe('sheet')
        ->and($html)->toContain('x-data="{ sheetOpen: false }"')
        ->toContain("x-bind:data-md-open=\"sheetOpen ? '' : null\"")
        ->toContain('x-on:keydown.escape="if (sheetOpen && $refs.handle.checkVisibility()) { sheetOpen = false; $refs.handle.focus() }"')
        ->toMatch('/<button\s+type="button"\s+class="md-state-layer md-focus-ring"\s+data-md-supporting-pane-handle\s+aria-expanded="false"/')
        ->toContain('x-bind:aria-expanded="sheetOpen.toString()"')
        ->toMatch('/<span data-md-supporting-pane-grip aria-hidden="true"><\/span>\s*<span class="md-type-title-sm" data-md-supporting-pane-label>Comments<\/span>/')
        ->toContain('<div data-md-supporting-pane-body id="'.$controls[1].'">SIDE</div>')
        ->and((string) $this->blade('<x-supporting-pane compact="sheet" />'))->toMatch('/data-md-supporting-pane-handle[^>]*aria-label="Show more"/s')
        ->and(layoutRoot((string) $this->blade('<x-supporting-pane compact="drawer" />'))['data-md-compact'])->toBe('below');
});

it('takes the element, the visibility props and the caller\'s class and style', function () {
    expect(layoutRoot((string) $this->blade('<x-supporting-pane as="main" hide-from="extra-large" class="editor" style="min-height: 20rem" />')))
        ->toMatchArray([
            '<' => 'main',
            'data-md-hide-from' => 'extra-large',
            'class' => 'editor',
            'style' => 'min-height: 20rem;',
        ]);
});

it('places the supporting pane at M3\'s widths from expanded, in the layout layer', function () {
    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/supporting-pane.css');

    expect($css)->toContain('@layer material.layout')
        ->toContain("@media (width >= 840px) {\n            grid-template-columns: minmax(0, 1fr) 360px;")
        ->toContain("@media (width >= 1200px) {\n            grid-template-columns: minmax(0, 1fr) 412px;")
        ->toContain("[data-md-supporting-pane][data-md-width='split'] {\n            grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);")
        ->toContain('inset-block-end: max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom)));')
        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/supporting-pane.css';");
});