31 lines
2.9 KiB
JavaScript
31 lines
2.9 KiB
JavaScript
import test from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { w15Fixture } from './w15-fixture.mjs';
|
|
|
|
test('navbar theme switch follows and persists appearance', {timeout:90000}, async t => {
|
|
const {f,b,wait}=await w15Fixture(t);
|
|
await b.call('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:'light'}]});
|
|
await b.navigate(f.base+'/#/'); await wait('!!document.querySelector("#mode")');
|
|
assert.equal(await b.evaluate('document.querySelector("#theme-switch")?.getAttribute("role")'),'switch');
|
|
await b.evaluate('document.querySelector("#mode").value="system";document.querySelector("#mode").dispatchEvent(new Event("change",{bubbles:true}))');
|
|
assert.equal(await b.evaluate('document.querySelector("#theme-switch").getAttribute("aria-checked")'),'false');
|
|
await b.evaluate('document.querySelector("#theme-switch").click()');
|
|
assert.deepEqual(await b.evaluate('[document.documentElement.dataset.mode,document.querySelector("#mode").value,document.querySelector("#theme-switch").getAttribute("aria-checked")]'),['dark','dark','true']);
|
|
await b.call('Page.reload'); await wait('document.querySelector("#theme-switch")?.getAttribute("aria-checked") === "true"');
|
|
assert.equal(await b.evaluate('document.documentElement.dataset.mode'),'dark');
|
|
await b.evaluate('document.querySelector("#mode").value="dim";document.querySelector("#mode").dispatchEvent(new Event("change"))');
|
|
assert.equal(await b.evaluate('document.querySelector("#theme-switch").getAttribute("aria-checked")'),'true');
|
|
await b.evaluate('document.querySelector("#theme-switch").click()');
|
|
assert.deepEqual(await b.evaluate('[document.documentElement.dataset.mode,document.querySelector("#mode").value]'),['light','light']);
|
|
await b.evaluate('document.querySelector("#mode").value="system";document.querySelector("#mode").dispatchEvent(new Event("change"))');
|
|
assert.equal(await b.evaluate('document.querySelector("#theme-switch").getAttribute("aria-checked")'),'false');
|
|
await b.call('Emulation.setEmulatedMedia',{features:[{name:'prefers-color-scheme',value:'dark'}]});
|
|
await wait('document.querySelector("#theme-switch").getAttribute("aria-checked") === "true"');
|
|
assert.equal(await b.evaluate('document.documentElement.hasAttribute("data-mode")'),false);
|
|
for (const width of [1440,390]) {
|
|
await b.viewport(width,900);
|
|
const v=await b.evaluate(`(()=>{const s=document.querySelector('#theme-switch'),a=document.querySelector('#avatar-button'),r=s.getBoundingClientRect(),ar=a.getBoundingClientRect();return {role:s.getAttribute('role'),name:s.getAttribute('aria-label'),width:r.width,height:r.height,left:r.right<=ar.left,top:Math.abs(r.top-ar.top),overflow:document.documentElement.scrollWidth>innerWidth}})()`);
|
|
assert.deepEqual([v.role,v.name,v.width>=44,v.height>=44,v.left,v.top<15,v.overflow],['switch','Dark mode',true,true,true,true,false],JSON.stringify(v));
|
|
}
|
|
});
|