blade('OneTwo')); expect($root)->toMatchArray(['<' => 'div', 'data-md-row' => 'data-md-row']) ->not->toHaveKeys(['data-md-gap', 'data-md-align', 'data-md-justify', 'data-md-wrap', 'data-md-stack-below']); }); it('spaces its children with a spacing token only, and with none for anything else', function () { expect(layoutRoot((string) $this->blade(''))['data-md-gap'])->toBe('space100') ->and(layoutRoot((string) $this->blade(''))['data-md-gap'])->toBe('none'); }); it('aligns its children across it and places them along it', function () { foreach (['center', 'start', 'end', 'stretch', 'baseline'] as $align) { expect(layoutRoot((string) $this->blade('', ['align' => $align]))['data-md-align'])->toBe($align); } foreach (['start', 'center', 'end', 'between'] as $justify) { expect(layoutRoot((string) $this->blade('', ['justify' => $justify]))['data-md-justify'])->toBe($justify); } expect(layoutRoot((string) $this->blade('')))->not->toHaveKeys(['data-md-align', 'data-md-justify']); }); it('wraps only when asked', function () { expect(layoutRoot((string) $this->blade('')))->toHaveKey('data-md-wrap') ->and(layoutRoot((string) $this->blade('')))->not->toHaveKey('data-md-wrap'); }); it('stacks below one of M3\'s breakpoints, and never below compact', function () { foreach (['medium', 'expanded', 'large', 'extra-large'] as $breakpoint) { expect(layoutRoot((string) $this->blade('', ['b' => $breakpoint]))['data-md-stack-below'])->toBe($breakpoint); } foreach (['compact', 'tablet', '600'] as $breakpoint) { expect(layoutRoot((string) $this->blade('', ['b' => $breakpoint])))->not->toHaveKey('data-md-stack-below'); } }); it('takes the element, the visibility props and the caller\'s class and style', function () { expect(layoutRoot((string) $this->blade(''))) ->toMatchArray([ '<' => 'nav', 'data-md-hide-from' => 'expanded', 'class' => 'toolbar-row', 'style' => 'min-height: 3rem;', 'aria-label' => 'Filters', ]); }); it('draws the row from a stylesheet in the layout layer, stacking at the breakpoint in px', function () { $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/row.css'); expect($css)->toContain('@layer material.layout') ->toContain("@media (width < 840px) {\n [data-md-row][data-md-stack-below='expanded'] {\n flex-direction: column;") ->toContain("[data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {\n align-items: stretch;") ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/row.css';"); });