59 lines
3.0 KiB
JavaScript
59 lines
3.0 KiB
JavaScript
import {test,expect} from '@playwright/test';
|
|
|
|
async function readColors(page){
|
|
return page.evaluate(()=>{
|
|
const header=getComputedStyle(document.querySelector('body > header'));
|
|
const body=getComputedStyle(document.body);
|
|
const active=document.querySelector('header nav .sun-nav-button.on');
|
|
return {header:header.backgroundImage,body:body.backgroundColor,active:active?getComputedStyle(active).backgroundColor:null};
|
|
});
|
|
}
|
|
|
|
for(const theme of [null,{ui:{background:'#EAF6EE'},sidebar:{background:'#123C30',background2:'#071F19',activeBackground:'#1C4C3D'}}]){
|
|
test(`saved theme is stable before and after a slow runtime: ${theme?'custom':'default'}`,async({page})=>{
|
|
await page.addInitScript(value=>{
|
|
if(value)localStorage.setItem('sunBrandThemeV1',JSON.stringify(value));
|
|
// Skip the logged-out skeleton to inspect the application shell itself.
|
|
localStorage.setItem('sb-theme-test-auth-token','theme-test-placeholder-without-user-credentials');
|
|
},theme);
|
|
let release;
|
|
const held=new Promise(resolve=>{release=resolve});
|
|
await page.route('**/app-runtime.js*',async route=>{await held;await route.continue()});
|
|
await page.goto('/index.html',{waitUntil:'commit'});
|
|
await page.waitForFunction(()=>document.body?.classList.contains('sun-enterprise-sidebar'));
|
|
await expect(page.locator('body')).toHaveCSS('visibility','hidden');
|
|
const early=await readColors(page);
|
|
release();
|
|
await page.waitForLoadState('domcontentloaded');
|
|
await page.waitForFunction(()=>Boolean(window.SunBrandTheme));
|
|
await expect(page.locator('html')).not.toHaveClass(/sun-app-starting/);
|
|
const final=await readColors(page);
|
|
expect(early).toEqual(final);
|
|
expect(final.body).toBe(theme?'rgb(234, 246, 238)':'rgb(255, 247, 230)');
|
|
expect(final.header).toContain(theme?'rgb(18, 60, 48)':'rgb(26, 26, 26)');
|
|
});
|
|
}
|
|
|
|
test('theme preview, save, reload and cloud updates keep working',async({page})=>{
|
|
await page.goto('/index.html',{waitUntil:'domcontentloaded'});
|
|
await expect(page.locator('html')).not.toHaveClass(/sun-app-starting/);
|
|
const before=await readColors(page);
|
|
await page.evaluate(()=>window.SunBrandTheme.applyPreset('emerald'));
|
|
expect(await readColors(page)).toEqual(before);
|
|
await page.evaluate(()=>window.SunBrandTheme.save());
|
|
await expect.poll(async()=>(await readColors(page)).active).toBe('rgb(28, 76, 61)');
|
|
const saved=await readColors(page);
|
|
expect(saved.header).toContain('rgb(18, 60, 48)');
|
|
await page.reload({waitUntil:'domcontentloaded'});
|
|
await expect(page.locator('html')).not.toHaveClass(/sun-app-starting/);
|
|
expect(await readColors(page)).toEqual(saved);
|
|
await page.evaluate(()=>{
|
|
const theme=window.SunBrandTheme.get();theme.sidebar.background='#49301B';theme.ui.background='#F0EADD';
|
|
localStorage.setItem('sunBrandThemeV1',JSON.stringify(theme));
|
|
window.dispatchEvent(new Event('sun:cloud-state-applied'));
|
|
});
|
|
const synced=await readColors(page);
|
|
expect(synced.header).toContain('rgb(73, 48, 27)');
|
|
expect(synced.body).toBe('rgb(240, 234, 221)');
|
|
});
|