Andreas Reinhold / reiniandClaude Sonnet 5
34b77cfd31
Action/Input/Containment/NavigationStylesheetsTest.php each carried the same "imports the stylesheet of every component its view renders" check on their own group's dataset. StylesheetsTest.php now runs it once, over every resources/views/components/*.blade.php backed by a stylesheet of its own (icon and shape included, no longer needing a group to run in at all; tabs/tab's shared stylesheet, N-16, still handled) — a new component gets the check by existing, not by being added to the right group's array too. Each group file keeps its own dataset for the checks that stay group-shaped (shape, tokens, breakpoints, the block it imports from). Plan step 42 (Phase F), Part A. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
90 lines
4.2 KiB
PHP
90 lines
4.2 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\File;
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
|
|
use NoNameWeb\LivewireMaterial\Tests\Support\ViewClasses;
|
|
|
|
/**
|
|
* The actions and communication components, rewritten without Tailwind (plan step 36): each view
|
|
* renders `data-md-*` attributes and no class list of its own beyond the interaction and text
|
|
* classes (tests/Support/ViewClasses.php), writes its values from the tokens and its breakpoints
|
|
* as px range queries, and is imported from the "Actions and communication" block of all.css.
|
|
* Every component stylesheet importing the stylesheets its view renders is
|
|
* tests/Feature/StylesheetsTest.php's now, folded into one dataset over every component view (step
|
|
* 42) rather than kept once per group.
|
|
*
|
|
* `icon` and `shape` are the two foundation components (`<x-icon>`, `<x-shape>`) — no group's view
|
|
* renders them exclusively, so they were in no group's dataset at all. They follow the same shape,
|
|
* token and view-class rules as every other component, so they run with this group's checks too;
|
|
* only "is imported from the actions and communication block" needs to read the two of them from
|
|
* all.css's first block ("Foundation components") instead, since that is where they sit.
|
|
*/
|
|
dataset('action components', [
|
|
'icon',
|
|
'shape',
|
|
'loading',
|
|
'tooltip',
|
|
'badge',
|
|
'button',
|
|
'group',
|
|
'button-group',
|
|
'split-button',
|
|
'fab',
|
|
'menu-separator',
|
|
'menu-group',
|
|
'menu-item',
|
|
'menu',
|
|
'fab-menu-item',
|
|
'fab-menu',
|
|
'rich-tooltip',
|
|
'toast',
|
|
'progress',
|
|
'alert',
|
|
'stat',
|
|
'empty-state',
|
|
]);
|
|
|
|
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
|
|
$css = ComponentStylesheet::read($name);
|
|
|
|
expect($css->css)->toStartWith('/*')
|
|
->and($css->statements()[0] ?? null)->toBe('@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;')
|
|
->and(array_slice($css->statements(), 1))->each->toMatch('/^@import \'\.\/[a-z-]+\.css\';$/')
|
|
->and($css->blocks())->each->toBe('@layer material.components')
|
|
->and($css->css)->not->toMatch('/@(?:tailwind|theme|utility|variant|custom-variant|apply|source|config|plugin|reference)\b|--(?:theme|spacing|alpha)\(|\btheme\(/');
|
|
|
|
foreach ($css->imports() as $import) {
|
|
expect(is_file(dirname(ComponentStylesheet::path($name)).'/'.$import))->toBeTrue("{$name}.css imports {$import}, which does not exist");
|
|
}
|
|
})->with('action components');
|
|
|
|
it('writes no class list into the view but the interaction and text classes', function (string $name) {
|
|
expect(ViewClasses::violations(File::get(__DIR__."/../../../resources/views/components/{$name}.blade.php")))->toBe([]);
|
|
})->with('action components');
|
|
|
|
it('takes its values from the tokens and its breakpoints in px', function (string $name) {
|
|
$css = ComponentStylesheet::read($name);
|
|
$source = (string) preg_replace('~/\*.*?\*/~s', '', $css->css);
|
|
|
|
// Colours are roles, shadows are elevation levels, type is a type style, motion is a spring.
|
|
expect($source)->not->toMatch('/#[0-9a-f]{3,8}\b|\b(?:rgba?|hsla?|oklch|oklab|lab|lch)\(/i')
|
|
->not->toMatch('/\bbox-shadow:(?!\s*(?:none|var\(--md-))/')
|
|
->not->toMatch('/\bfont:(?!\s*var\(--md-sys-typescale-)/')
|
|
->not->toMatch('/\btransition[a-z-]*:[^;]*(?:\d+m?s\b|\bease\b|ease-in|ease-out|cubic-bezier)/');
|
|
|
|
foreach ($css->mediaQueries() as $query) {
|
|
preg_match_all('/(\d*\.?\d+)(px|rem|em)\b/', $query, $lengths, PREG_SET_ORDER);
|
|
|
|
foreach ($lengths as [, $number, $unit]) {
|
|
expect($unit)->toBe('px', "{$name}.css: {$query}")
|
|
->and(in_array($number, ['600', '840', '1200', '1600'], true))->toBeTrue("{$name}.css: {$query} is not at an M3 breakpoint");
|
|
}
|
|
}
|
|
})->with('action components');
|
|
|
|
it('is imported from the actions and communication block of all.css, or icon and shape from the foundation block before it', function (string $name) {
|
|
$block = allCssBlock(in_array($name, ['icon', 'shape'], true) ? 'Foundation components' : 'Actions and communication');
|
|
|
|
expect($block)->toContain("@import './components/{$name}.css';");
|
|
})->with('action components');
|