noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Check navigation-item.css's shape like every navigation stylesheet

Browse Source 
Plan step 36, navigation review. The shared indicator and state-layer
stylesheet has no view of its own, so it was in no group dataset, and
since 9c134b2d the layout stylesheet tests skip the component files
scaffold.css reaches it through. Its layer, Tailwind, token, scoping
and components.css checks now run with the navigation components'.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 01:11:12 +02:00
co-authored by Claude Opus 5
parent 52beb676bc
commit cbd058f948
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/NavigationStylesheetsTest.php
+31 -18
View File
@@ -23,20 +23,33 @@ use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
* `section-nav` renders `<x-tabs>`'s hooks rather than `<x-tabs>` itself (it reuses its stylesheet
* whole, tabs.css, N-16), so `navigationViews()` need not special-case it the way it does 'tabs'.
*/
dataset('navigation components', [
'app-bar',
'toolbar',
'tabs',
'navigation-bar',
'navigation-bar-item',
'navigation-rail',
'navigation-rail-item',
'navigation-rail-section',
'section-nav',
'account-menu',
'theme-toggle',
'scheme-picker',
]);
function navigationComponents(): array
{
return [
'app-bar',
'toolbar',
'tabs',
'navigation-bar',
'navigation-bar-item',
'navigation-rail',
'navigation-rail-item',
'navigation-rail-section',
'section-nav',
'account-menu',
'theme-toggle',
'scheme-picker',
];
}
dataset('navigation components', navigationComponents());
/**
* The checks that read a stylesheet alone also run on the one no view renders by itself:
* navigation-item.css, the indicator fill and state layer the bar's and the rail's items share and
* both import. Nothing else reaches it — the layout stylesheet tests skip component files they
* import — so without this its layer, tokens and scoping would go unchecked.
*/
dataset('navigation stylesheets', [...navigationComponents(), 'navigation-item']);
/**
* The blade view(s) a dataset name's checks read. One file for every name but 'tabs', whose panel
@@ -105,7 +118,7 @@ it('draws the component from a stylesheet shaped like every package stylesheet',
foreach ($css->imports() as $import) {
expect(is_file(dirname(ComponentStylesheet::path($name)).'/'.$import))->toBeTrue("{$name}.css imports {$import}, which does not exist");
}
})->with('navigation components');
})->with('navigation stylesheets');
it('imports the stylesheet of every component its view renders', function (string $name) {
$rendered = collect(navigationViews($name))
@@ -133,14 +146,14 @@ it('writes no class list into the view but the interaction and text classes', fu
it('takes its values from the tokens and its breakpoints in px', function (string $name) {
assertNavigationTokensAndPxBreakpoints(ComponentStylesheet::read($name), "{$name}.css");
})->with('navigation components');
})->with('navigation stylesheets');
it('is imported from the navigation block of components.css', function (string $name) {
$components = File::get(__DIR__.'/../../../resources/css/components.css');
$block = substr($components, (int) strpos($components, '/* Navigation */'));
expect($block)->toContain("@import './components/{$name}.css';");
})->with('navigation components');
})->with('navigation stylesheets');
it('scopes every element-wide selector to a data-md hook', function (string $name) {
// `all.css` bundles every component stylesheet into every page, so a bare `html`, `body`,
@@ -148,4 +161,4 @@ it('scopes every element-wide selector to a data-md hook', function (string $nam
$source = (string) preg_replace('~/\*.*?\*/~s', '', ComponentStylesheet::read($name)->css);
expect($source)->not->toMatch('/(?:^|[,{};]\s*)(?:html|body|dialog|:root)(?![\w-])(?!\[data-md-|:has\(> \[data-md-)/m');
})->with('navigation components');
})->with('navigation stylesheets');