DETAIL<\/article>\s*<\/div>\s*<\/div>\s*$/s');
});
it('renders the pane that is selected from the first paint, given once or bound to Livewire', function () {
expect(layoutRoot((string) $this->blade('')))->toMatchArray(['data-md-selected' => 'data-md-selected', 'x-data' => 'materialListDetail( 7 )'])
->and(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-selected')
->and(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-selected')
->and(layoutRoot((string) $this->blade('')))->toHaveKey('data-md-selected');
Livewire::component('list-detail-render-probe', new class extends Component
{
public ?int $messageId = 3;
public function render(): string
{
return 'LISTDETAIL
';
}
});
$probe = Livewire::test('list-detail-render-probe');
$html = $probe->html();
// The server renders the pane from the property, and Alpine takes the property over; the
// binding stays off the element, where Livewire would look for an input.
expect($html)->toContain('data-md-selected')
->toMatch("/x-data=\"materialListDetail\\(\\s*window\\.Livewire\\.find\\('[^']+'\\)\\.entangle\\('messageId'\\)\\.live\\s*\\)\"/")
->not->toContain('x-modelable')
->not->toContain('wire:model');
$probe->set('messageId', null);
expect($probe->html())->not->toMatch('/data-md-list-detail[^>]*data-md-selected/');
});
it('draws its own back row above the detail, unless the detail brings one', function () {
$own = (string) $this->blade('LISTDETAIL');
$pane = (string) $this->blade(<<<'BLADE'
LIST
DETAIL
BLADE);
expect($own)->toMatch('/x-ref="detail">\s*\s*\s*]*aria-label="Back"[^>]*x-on:click="back\(\)"/s')
->and(substr_count($pane, 'data-md-list-detail-back'))->toBe(1)
->and($pane)->not->toContain('data-md-list-detail-back-row');
});
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' => 'medium',
'class' => 'inbox',
'style' => 'min-height: 30rem;',
'x-model' => 'chosen',
'x-modelable' => 'selected',
]);
});
it('shows one pane below expanded and both from it, at M3\'s fixed pane widths', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/list-detail.css');
expect($css)->toContain('@layer material.layout')
->toContain("@media (width >= 840px) {\n grid-template-columns: 360px minmax(0, 1fr);\n column-gap: var(--md-sys-measurement-space300);")
->toContain("@media (width >= 1200px) {\n grid-template-columns: 412px minmax(0, 1fr);")
->toContain("@media (width < 840px) {\n [data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],\n [data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {\n display: none;")
->toContain('[data-md-list-detail-back] [data-md-icon]:dir(rtl)')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/list-detail.css';")
->and((string) file_get_contents(__DIR__.'/../../../resources/js/material.js'))->toContain("import './layout.js'");
});