's style differs (a long per-breakpoint * column list before the caller's own, checked with `$styleEndsWith` instead of the exact string * the others match) and 's gap check has an extra invalid case (`space1000`, a token name * past the scale); both are still one dataset row, not a reason to keep the test itself apart. */ dataset('layout component root attributes', [ 'feed' => [ '', ['<' => 'ul', 'data-md-hide-below' => 'medium', 'class' => 'photos', 'style' => '--md-min-item: 240px; padding-block: 1rem;'], ], 'grid' => [ '', ['<' => 'ul', 'data-md-hide-below' => 'expanded', 'class' => 'gallery'], '--md-columns-extra-large: 1; align-items: start;', ], 'row' => [ '', ['<' => 'nav', 'data-md-hide-from' => 'expanded', 'class' => 'toolbar-row', 'style' => 'min-height: 3rem;', 'aria-label' => 'Filters'], ], 'stack' => [ '', ['<' => 'ul', 'data-md-hide-below' => 'medium', 'data-md-hide-from' => 'large', 'class' => 'steps', 'style' => 'max-width: 40rem;'], ], 'pane' => [ '', ['<' => 'section', 'data-md-hide-below' => 'expanded', 'class' => 'checkout', 'style' => 'max-width: 50rem;', 'aria-labelledby' => 'checkout-title'], ], 'list-detail' => [ '', ['<' => 'section', 'data-md-hide-below' => 'medium', 'class' => 'inbox', 'style' => 'min-height: 30rem;', 'x-model' => 'chosen', 'x-modelable' => 'selected'], ], 'supporting-pane' => [ '', ['<' => 'main', 'data-md-hide-from' => 'extra-large', 'class' => 'editor', 'style' => 'min-height: 20rem;'], ], ]); it('takes the element, the visibility props, and the caller\'s class and style after its own', function (string $blade, array $expected, ?string $styleEndsWith = null) { $root = layoutRoot((string) $this->blade($blade)); expect($root)->toMatchArray($expected); if ($styleEndsWith !== null) { expect($root['style'])->toEndWith($styleEndsWith); } })->with('layout component root attributes'); dataset('layout component gaps', [ 'feed' => ['feed', 'space400', ['wide']], 'grid' => ['grid', 'space300', ['1.5rem']], 'row' => ['row', 'space100', ['tight']], 'stack' => ['stack', 'space200', ['16px', 'space1000']], ]); it('replaces the gap prop with a spacing token, and with none for anything else', function (string $tag, string $token, array $invalid) { expect(layoutRoot((string) $this->blade(""))['data-md-gap'])->toBe($token); foreach ($invalid as $bad) { expect(layoutRoot((string) $this->blade(""))['data-md-gap'])->toBe('none'); } })->with('layout component gaps');