Andreas Reinhold / reiniandClaude Fable 5.1
9fb3126038
Plan steps 15-17's testing. `tests/Feature/BreakpointsTest.php` reads every file under resources/views, resources/css and resources/js — showcase example heredocs included — and fails on any Tailwind breakpoint prefix and on any media query or `matchMedia` string at 40, 48, 64 or 80rem (or 640/768/1024/ 1280px, or the 39.99rem that stood for "below 640"). Both scans were checked against a deliberately reintroduced `sm:w-auto` and an 80rem query. Every render test that asserted a `sm:`/`lg:`/`xl:` class now asserts the M3 class, the drawer's pane query is 52.5rem, and the theme script keeps `data-rail-auto` through `wire:navigate`. NavigationTest drives the shell at 599/600/839/840/1199/1200/1600 with the expectation each class carries: the bar on a compact window, the 96px rail from the medium class's first pixel, a standard rail collapsed through expanded whose menu button widens it in place with no scrim, and the rail expanded to begin with from large and at extra-large. (Not run here — the Browser suite is out of scope for this stream.) Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
130 lines
5.3 KiB
PHP
130 lines
5.3 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\File;
|
|
use NoNameWeb\LivewireMaterial\Support\Scheme;
|
|
|
|
it('follows the operating system until the visitor chooses, by default', function () {
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('({"scheme":null,"default":"system","key":"material-theme","legacy":[],"rail":{"default":"expanded","key":"material-rail"}})', false);
|
|
});
|
|
|
|
it('takes the application\'s default, key and legacy keys', function () {
|
|
config(['livewire-material.theme' => [
|
|
'default' => 'dark',
|
|
'storage_key' => 'sealshare-theme',
|
|
'legacy_keys' => ['mary-theme'],
|
|
]]);
|
|
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('"default":"dark","key":"sealshare-theme","legacy":["mary-theme"]', false);
|
|
});
|
|
|
|
it('falls back to the operating system for a default it does not know', function () {
|
|
config(['livewire-material.theme.default' => 'blue']);
|
|
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('"default":"system"', false);
|
|
});
|
|
|
|
it('starts a collapsible rail as the application says, expanded otherwise', function () {
|
|
config(['livewire-material.rail' => ['default' => 'collapsed', 'storage_key' => 'sealshare-rail']]);
|
|
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('"rail":{"default":"collapsed","key":"sealshare-rail"}', false)
|
|
->assertSee("root.setAttribute('data-rail', rail);", false);
|
|
|
|
config(['livewire-material.rail.default' => 'sideways']);
|
|
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('"rail":{"default":"expanded","key":"sealshare-rail"}', false);
|
|
});
|
|
|
|
it('puts its attributes back on <html> when wire:navigate swaps the page', function () {
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee("document.addEventListener('livewire:navigating'", false)
|
|
->assertSee("['data-scheme', 'data-theme', 'data-theme-choice', 'data-theme-key', 'data-rail', 'data-rail-auto', 'data-rail-key']", false)
|
|
->assertSee('event.detail.onSwap(', false);
|
|
});
|
|
|
|
it('names the active colour profile for <html data-scheme>, and none for a single scheme', function () {
|
|
$path = sys_get_temp_dir().'/theme-script-profiles-'.uniqid().'.json';
|
|
File::put($path, json_encode([
|
|
'default' => 'indigo',
|
|
'profiles' => ['indigo' => ['label' => 'Indigo', 'light' => [], 'dark' => []], 'teal' => ['label' => 'Teal', 'light' => [], 'dark' => []]],
|
|
]));
|
|
config(['livewire-material.scheme' => $path]);
|
|
|
|
try {
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('({"scheme":"indigo",', false)
|
|
->assertSee("root.setAttribute('data-scheme', settings.scheme);", false);
|
|
|
|
Scheme::resolveProfileUsing(fn (): string => 'teal');
|
|
|
|
$this->blade('<x-theme-script />')->assertSee('({"scheme":"teal",', false);
|
|
} finally {
|
|
Scheme::resolveProfileUsing(null);
|
|
File::delete($path);
|
|
}
|
|
});
|
|
|
|
it('leaves the theme-color meta alone by default', function () {
|
|
$this->blade('<x-theme-script />')
|
|
->assertDontSee('theme-color', false)
|
|
->assertDontSee('"meta"', false)
|
|
->assertDontSee('MutationObserver', false);
|
|
});
|
|
|
|
it('paints the theme-color meta in the resolved theme\'s surface when asked', function () {
|
|
config(['livewire-material.theme.meta' => true]);
|
|
|
|
$scheme = Scheme::load();
|
|
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('"meta":{"light":"'.$scheme['light']['surface'].'","dark":"'.$scheme['dark']['surface'].'","profiles":{}}', false)
|
|
->assertSee('document.head.querySelectorAll(\'meta[name="theme-color"]:not([media])\')', false)
|
|
->assertSee("new MutationObserver(paintThemeColor).observe(root, { attributes: true, attributeFilter: ['data-theme', 'data-scheme'] });", false)
|
|
->assertSee("document.addEventListener('livewire:navigated', paintThemeColor);", false);
|
|
});
|
|
|
|
it('gives the theme-color meta every profile\'s surfaces, the active one\'s first', function () {
|
|
$path = sys_get_temp_dir().'/theme-script-meta-'.uniqid().'.json';
|
|
File::put($path, json_encode([
|
|
'default' => 'indigo',
|
|
'profiles' => [
|
|
'indigo' => ['label' => 'Indigo', 'light' => ['surface' => '#fbf8ff'], 'dark' => ['surface' => '#12131a']],
|
|
'teal' => ['label' => 'Teal', 'light' => ['surface' => '#f4fbf8'], 'dark' => ['surface' => '#0e1513']],
|
|
],
|
|
]));
|
|
config(['livewire-material.scheme' => $path, 'livewire-material.theme.meta' => true]);
|
|
Scheme::resolveProfileUsing(fn (): string => 'teal');
|
|
|
|
try {
|
|
$this->blade('<x-theme-script />')
|
|
->assertSee('"meta":{"light":"#f4fbf8","dark":"#0e1513","profiles":{"indigo":{"light":"#fbf8ff","dark":"#12131a"},"teal":{"light":"#f4fbf8","dark":"#0e1513"}}}', false);
|
|
} finally {
|
|
Scheme::resolveProfileUsing(null);
|
|
File::delete($path);
|
|
}
|
|
});
|
|
|
|
it('paints the meta without profiles and without a deprecation on PHP 8.5', function () {
|
|
config(['livewire-material.theme.meta' => true, 'livewire-material.profiles' => []]);
|
|
|
|
$deprecations = [];
|
|
set_error_handler(function (int $level, string $message) use (&$deprecations): bool {
|
|
$deprecations[] = $message;
|
|
|
|
return true;
|
|
}, E_DEPRECATED | E_USER_DEPRECATED);
|
|
|
|
try {
|
|
$html = (string) $this->blade('<x-theme-script />');
|
|
} finally {
|
|
restore_error_handler();
|
|
}
|
|
|
|
expect($html)->toContain('"meta":{')
|
|
->and($deprecations)->toBe([]);
|
|
});
|