inDarkMode() : $page->inLightMode(); return $page->waitForEvent('networkidle') ->assertScript("document.readyState === 'complete' && document.querySelector('[data-md-error-page]') !== null"); } /** * Whether the element's computed background is the colour a role resolves to on this page. */ function paintedIn(string $selector, string $role): string { return << { const probe = document.createElement('div'); probe.style.backgroundColor = 'var(--md-sys-color-{$role})'; document.body.append(probe); const expected = getComputedStyle(probe).backgroundColor; probe.remove(); return expected !== 'rgba(0, 0, 0, 0)' && getComputedStyle(document.querySelector('{$selector}')).backgroundColor === expected; })() JS; } it('draws the 404 page in the scheme, in light and dark', function () { missingPage('light') ->assertSee('Page not found') ->assertVisible('[data-md-error-headline]') ->assertScript("document.documentElement.getAttribute('data-theme') === 'light'") ->assertScript(paintedIn('body', 'surface')) ->assertScript("getComputedStyle(document.querySelector('[data-md-error-shape] svg')).color !== getComputedStyle(document.body).color") ->assertNoJavaScriptErrors(); missingPage('dark') ->assertScript("document.documentElement.getAttribute('data-theme') === 'dark'") ->assertScript(paintedIn('body', 'surface')) ->assertScript("getComputedStyle(document.body).backgroundColor !== 'rgb(253, 247, 254)'"); }); it('fits a 400px screen without scrolling sideways', function () { missingPage() ->resize(400, 800) ->assertVisible('[data-md-error-headline]') ->assertScript('document.documentElement.scrollWidth <= window.innerWidth') ->assertScript("document.querySelector('[data-md-error-actions] a').getBoundingClientRect().right <= 400"); }); /** * Plan step 40: the fallback path, the same server serving the request `LaravelHttpServer` runs * in-process, so a config change here reaches it exactly as it reaches a Feature test's client — * an empty temporary directory has no `build/manifest.json` and no `hot` file, so `ErrorPage::assets()` * throws and returns null (tests/Feature/ErrorPagesTest.php does the same for the HTTP client). */ it('draws the button and the shape from the inlined fallback stylesheet, and repaints in dark mode', function () { $public = sys_get_temp_dir().'/livewire-material-fallback-'.Str::random(8); File::ensureDirectoryExists($public); $originalPublicPath = app()->publicPath(); app()->usePublicPath($public); Vite::useHotFile($public.'/hot'); try { missingPage('light') ->assertScript("document.querySelector('style[data-md-error-fallback]') !== null") ->assertScript("document.querySelector('link[href*=\"/build/\"]') === null") // The button: button.css's round, filled shape, not a bare unstyled . ->assertScript("getComputedStyle(document.querySelector('[data-md-button]')).borderRadius !== '0px'") ->assertScript(paintedIn('[data-md-button][data-md-variant=filled]', 'primary')) // The shape: shape.css's sizing and the primary-container tint error-page.css paints its svg with. ->assertScript("getComputedStyle(document.querySelector('[data-md-error-shape] svg')).color !== getComputedStyle(document.body).color") ->assertScript(paintedIn('body', 'surface')) ->assertNoJavaScriptErrors(); // The [data-theme='dark'] block the fallback also inlines repaints the page, exactly as the // built stylesheet does for the test above. missingPage('dark') ->assertScript("document.documentElement.getAttribute('data-theme') === 'dark'") ->assertScript(paintedIn('body', 'surface')) ->assertScript("getComputedStyle(document.body).backgroundColor !== 'rgb(253, 247, 254)'"); } finally { app()->usePublicPath($originalPublicPath); Vite::useHotFile($originalPublicPath.'/hot'); File::deleteDirectory($public); } });