workbench_path('resources/css/material-scheme.json')]); $this->profiles = json_decode(file_get_contents(workbench_path('resources/css/material-scheme.json')), true)['profiles']; }); afterEach(function () { Scheme::resolveProfileUsing(null); }); /** * A #rrggbb hex as the rgb() a computed style reports. */ function rgb(string $hex): string { [$red, $green, $blue] = sscanf($hex, '#%02x%02x%02x'); return "rgb({$red}, {$green}, {$blue})"; } /** * The page's primary colour role, as resolves it. */ function pagePrimary(): string { return "getComputedStyle(document.documentElement).getPropertyValue('--md-sys-color-primary').trim()"; } function profilesReady(mixed $page): mixed { return $page->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'"); } it('draws each profile in light and dark, and the default without the attribute', function () { $page = profilesReady(visit('/material/colour')->inLightMode()) ->assertScript("document.documentElement.getAttribute('data-scheme') === 'baseline'") ->assertScript(pagePrimary()." === '{$this->profiles['baseline']['light']['primary']}'"); $page->script("document.documentElement.setAttribute('data-scheme', 'teal')"); $page->assertScript(pagePrimary()." === '{$this->profiles['teal']['light']['primary']}'"); $page->script("document.documentElement.setAttribute('data-theme', 'dark')"); $page->assertScript(pagePrimary()." === '{$this->profiles['teal']['dark']['primary']}'") // A panel that sets its own theme keeps the page's profile. ->assertScript("getComputedStyle(document.querySelector('#colour [data-theme=\"light\"] [data-md-showcase-swatch=\"primary\"]')).backgroundColor === '".rgb($this->profiles['teal']['light']['primary'])."'"); $page->script("document.documentElement.removeAttribute('data-scheme')"); $page->assertScript(pagePrimary()." === '{$this->profiles['baseline']['dark']['primary']}'") ->assertNoJavaScriptErrors(); }); it('previews a profile from the picker and the showcase menu, and keeps it through wire:navigate', function () { $page = profilesReady(visit('/material/colour')->inLightMode()); $page->click('#colour [data-md-scheme-picker-option="rose"]') ->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'") ->assertScript(pagePrimary()." === '{$this->profiles['rose']['light']['primary']}'") ->assertScript("window.eval(\"Alpine.store('theme').scheme\") === 'rose'"); $page->click('[data-test="showcase-profiles"] [aria-haspopup="menu"]') ->click('[data-scheme-preview="teal"]') ->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'"); $page->click('[data-md-navigation-rail-panel] a[href$="/material/buttons"]') ->assertScript("location.pathname.endsWith('/material/buttons')") ->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'") ->assertNoJavaScriptErrors(); }); it('paints the profile the application resolves from the first frame', function () { Scheme::resolveProfileUsing(fn (): string => 'rose'); profilesReady(visit('/material')->inDarkMode()) ->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'") ->assertScript(pagePrimary()." === '{$this->profiles['rose']['dark']['primary']}'"); });