Andreas Reinhold / reiniandClaude Opus 5
eca6b8fb05
tests / lint (push) Has been cancelled
tests / feature (8.4) (push) Has been cancelled
tests / feature (8.5) (push) Has been cancelled
tests / browser (chrome, chromium) (push) Has been cancelled
tests / browser (firefox, firefox) (push) Has been cancelled
tests / browser (safari, webkit) (push) Has been cancelled
CI's WebKit job failed twice on a slow runner: a carousel scroll that had not settled within five seconds, and a press on the theme switch before Alpine had revealed it. BROWSER_TIMEOUT raises the assertion timeout, and the workflow sets it to fifteen seconds. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
59 lines
2.3 KiB
PHP
59 lines
2.3 KiB
PHP
<?php
|
|
|
|
/**
|
|
* The theme <html> shows. A bare `html` selector would be read as text to search for.
|
|
*/
|
|
function theme(string $attribute, string $value): string
|
|
{
|
|
return "document.documentElement.getAttribute('{$attribute}') === '{$value}'";
|
|
}
|
|
|
|
it('follows the operating system while the visitor has not chosen', function () {
|
|
visit('/material')->inDarkMode()
|
|
->assertScript(theme('data-theme', 'dark'))
|
|
->assertScript(theme('data-theme-choice', 'system'))
|
|
->assertNoJavaScriptErrors();
|
|
|
|
visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'));
|
|
});
|
|
|
|
it('keeps the visitor\'s choice over the operating system', function () {
|
|
// The theme switch waits for Alpine (x-cloak); a press before then would find nothing to press.
|
|
$page = visit('/material')->inDarkMode()
|
|
->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
|
|
->assertScript(theme('data-theme', 'dark'));
|
|
|
|
$page->click('@theme-light')
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertAttribute('@theme-light', 'aria-pressed', 'true')
|
|
->assertScript("localStorage.getItem('material-theme') === 'light'");
|
|
|
|
$page->refresh()
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertScript(theme('data-theme-choice', 'light'));
|
|
});
|
|
|
|
it('adopts an earlier toggle\'s choice once', function () {
|
|
config(['livewire-material.theme.legacy_keys' => ['mary-theme']]);
|
|
|
|
$page = visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'));
|
|
|
|
$page->script("localStorage.setItem('mary-theme', JSON.stringify('dark'))");
|
|
|
|
$page->refresh()
|
|
->assertScript(theme('data-theme', 'dark'))
|
|
->assertScript("localStorage.getItem('mary-theme') === null")
|
|
->assertScript("localStorage.getItem('material-theme') === 'dark'");
|
|
});
|
|
|
|
it('repaints a section that sets its own theme', function () {
|
|
$swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor";
|
|
|
|
visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertScript("{$swatch(0)} !== {$swatch(1)}");
|
|
});
|