blade('') ->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('') ->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('') ->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('') ->assertSee('"rail":{"default":"collapsed","key":"sealshare-rail"}', false) ->assertSee("root.setAttribute('data-rail', rail);", false); config(['livewire-material.rail.default' => 'sideways']); $this->blade('') ->assertSee('"rail":{"default":"expanded","key":"sealshare-rail"}', false); }); it('puts its attributes back on when wire:navigate swaps the page', function () { $this->blade('') ->assertSee("document.addEventListener('livewire:navigating'", false) ->assertSee("['data-scheme', 'data-theme', 'data-theme-choice', 'data-theme-key', 'data-rail', 'data-rail-key']", false) ->assertSee('event.detail.onSwap(', false); }); it('names the active colour profile for , 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('') ->assertSee('({"scheme":"indigo",', false) ->assertSee("root.setAttribute('data-scheme', settings.scheme);", false); Scheme::resolveProfileUsing(fn (): string => 'teal'); $this->blade('')->assertSee('({"scheme":"teal",', false); } finally { Scheme::resolveProfileUsing(null); File::delete($path); } }); it('leaves the theme-color meta alone by default', function () { $this->blade('') ->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('') ->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('') ->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); } });