46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { expect, test, useEditorSetup } from '#tests/e2e/fixtures'
|
|
|
|
const editor = useEditorSetup()
|
|
|
|
test('rulers follow the active theme', async () => {
|
|
const { page } = editor
|
|
|
|
const readState = () =>
|
|
page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
const style = getComputedStyle(document.documentElement)
|
|
return {
|
|
cssTheme: document.documentElement.dataset.theme ?? 'dark',
|
|
cssRulerBg: style.getPropertyValue('--color-ruler-bg').trim(),
|
|
storeRulerBg: store?.state.rulerTheme?.background ?? null
|
|
}
|
|
})
|
|
|
|
// Baseline: dark theme
|
|
const dark = await readState()
|
|
expect(dark.cssTheme).toBe('dark')
|
|
|
|
// Switch to light via the app's theme API (module state, not raw localStorage,
|
|
// so the watcher applies it and pushes the ruler theme to the active editor).
|
|
await page.evaluate(async () => {
|
|
const themeModulePath = '/src/app/shell/theme.ts'
|
|
const themeModule = await import(themeModulePath)
|
|
themeModule.useAppTheme().setTheme('light')
|
|
})
|
|
await page.waitForFunction(() => document.documentElement.dataset.theme === 'light')
|
|
|
|
const light = await readState()
|
|
expect(light.cssTheme).toBe('light')
|
|
// Canvas ruler theme must track the light tokens, not stay on the dark fallback.
|
|
expect(light.cssRulerBg).not.toBe(dark.cssRulerBg)
|
|
expect(light.storeRulerBg).not.toBeNull()
|
|
|
|
// Restore dark so later specs are unaffected.
|
|
await page.evaluate(async () => {
|
|
const themeModulePath = '/src/app/shell/theme.ts'
|
|
const themeModule = await import(themeModulePath)
|
|
themeModule.useAppTheme().setTheme('dark')
|
|
})
|
|
await page.waitForFunction(() => document.documentElement.dataset.theme === 'dark')
|
|
})
|