livewire-material/tests/Feature/Components/ActionStylesheetsTest.php

<?php

use Illuminate\Support\Facades\File;
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;

/**
 * The actions and communication components, rewritten without Tailwind (plan step 36): each view
 * renders `data-md-*` attributes and no class list of its own, and each has a stylesheet in
 * `material.components` that imports the stylesheets of the components its view renders, writes
 * its values from the tokens and its breakpoints as px range queries, and is imported from the
 * "Actions and communication" block of components.css.
 */
dataset('action components', [
    '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('imports the stylesheet of every component its view renders', function (string $name) {
    preg_match_all('/<x-livewire-material::([a-z-]+)/', File::get(__DIR__."/../../../resources/views/components/{$name}.blade.php"), $tags);

    $rendered = collect($tags[1])->unique()
        // A component still written for Tailwind has no stylesheet of its own to import yet; its
        // old stylesheet, if it has one, lives in tailwind.css without the layer statement.
        ->filter(fn (string $tag): bool => is_file(ComponentStylesheet::path($tag)) && str_contains(File::get(ComponentStylesheet::path($tag)), '@layer material.components'))
        ->map(fn (string $tag): string => "./{$tag}.css")
        ->values()
        ->all();

    expect(array_values(array_diff($rendered, ComponentStylesheet::read($name)->imports())))->toBe([]);
})->with('action components');

it('writes no class list into the view but the interaction classes', function (string $name) {
    $view = File::get(__DIR__."/../../../resources/views/components/{$name}.blade.php");
    $allowed = ['md-state-layer', 'md-focus-ring', 'md-touch-target'];

    // `@class()`, `Arr::toCssClasses` maps and Alpine's `:class` binding are never how a class
    // reaches the page here; the interaction classes and a caller's own class are the only source.
    expect($view)->not->toMatch('/@class\(|toCssClasses|(?:x-bind)?:class=/');

    // A literal `class="…"` may hold only the interaction classes — any subset, any order, with a
    // simple `@if (…) … @endif` around one token — or a caller's value forwarded whole (`hint-class`,
    // `icon-class`: `class="{{ $…}}"`).
    preg_match_all('/(?<![\w:-])class=(["\'])(.*?)\1/s', $view, $classAttributes, PREG_SET_ORDER);

    foreach ($classAttributes as [, , $content]) {
        if (preg_match('/^\{\{\s*\$/', trim($content)) === 1) {
            continue;
        }

        $stripped = (string) preg_replace('/\{\{.*?\}\}|@if\s*\([^()]*\)|@unless\s*\([^()]*\)|@else|@endif|@endunless/s', ' ', $content);
        $tokens = array_values(array_filter(preg_split('/\s+/', trim($stripped))));

        expect(array_diff($tokens, $allowed))->toBe([], "{$name}.blade.php writes class=\"{$content}\", not only the interaction classes");
    }

    // `$attributes->class([…])` merges the interaction classes with the caller's own, per the
    // brief: "merges through $attributes->class() only where the root takes the caller's class".
    // Only the array's own items are checked — a condition may nest its own brackets
    // (`in_array($size, ['xs', 'sm'], true)`), which are no class list of the view's writing.
    preg_match_all('/->class\(\[(.*?)\]\)/s', $view, $classCalls, PREG_SET_ORDER);

    foreach ($classCalls as [, $args]) {
        $depth = 0;

        for ($i = 0, $length = strlen($args); $i < $length; $i++) {
            $char = $args[$i];

            if ($char === '[' || $char === '(') {
                $depth++;
            } elseif ($char === ']' || $char === ')') {
                $depth--;
            } elseif ($depth === 0 && $char === "'") {
                $end = strpos($args, "'", $i + 1);
                $item = substr($args, $i + 1, $end - $i - 1);

                expect(in_array($item, $allowed, true))->toBeTrue("{$name}.blade.php: ->class() writes [{$item}], not an interaction class");

                $i = $end;
            }
        }
    }
})->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 components.css', function (string $name) {
    $components = File::get(__DIR__.'/../../../resources/css/components.css');
    $block = substr($components, (int) strpos($components, '/* Actions and communication */'));
    $block = substr($block, 0, (int) strpos($block, '/* Inputs, selection and data */'));

    expect($block)->toContain("@import './components/{$name}.css';");
})->with('action components');