Pouzor
babbcb1dc5
- New 'custom' ThemeId with dedicated ThemeCard + pencil edit button - CustomStyleModal: two-column editor for all node types (excl. groupRect/group) and edge types - Per node: border, background, icon color + opacity, default size (w/h) - Per edge: color + opacity, path style, animation - 'Apply to existing [Type]' per type, 'Apply All to Canvas' footer action - canvasStore: applyTypeNodeStyle, applyTypeEdgeStyle, applyAllCustomStyles actions - themeStore: customStyle state + setCustomStyle action - Backend: custom_style JSON column on canvas_state (ALTER TABLE migration), saved/loaded with canvas - App.tsx: custom_style included in save payload, restored on load (API + standalone) - Tests: +8 frontend (themeStore + canvasStore), +3 backend (canvas API)
55 lines
2.3 KiB
TypeScript
55 lines
2.3 KiB
TypeScript
import { describe, it, expect, beforeEach } from 'vitest'
|
|
import { useThemeStore } from '@/stores/themeStore'
|
|
import type { CustomStyleDef } from '@/types'
|
|
|
|
describe('themeStore', () => {
|
|
beforeEach(() => {
|
|
useThemeStore.setState({ activeTheme: 'default', customStyle: { nodes: {}, edges: {} } })
|
|
})
|
|
|
|
it('starts with default theme', () => {
|
|
expect(useThemeStore.getState().activeTheme).toBe('default')
|
|
})
|
|
|
|
it('setTheme updates activeTheme', () => {
|
|
useThemeStore.getState().setTheme('matrix')
|
|
expect(useThemeStore.getState().activeTheme).toBe('matrix')
|
|
})
|
|
|
|
it('setTheme can switch between all presets including custom', () => {
|
|
const themes = ['default', 'dark', 'light', 'neon', 'matrix', 'custom'] as const
|
|
for (const id of themes) {
|
|
useThemeStore.getState().setTheme(id)
|
|
expect(useThemeStore.getState().activeTheme).toBe(id)
|
|
}
|
|
})
|
|
|
|
it('setTheme back to default after neon', () => {
|
|
useThemeStore.getState().setTheme('neon')
|
|
useThemeStore.getState().setTheme('default')
|
|
expect(useThemeStore.getState().activeTheme).toBe('default')
|
|
})
|
|
|
|
it('starts with empty customStyle', () => {
|
|
const { customStyle } = useThemeStore.getState()
|
|
expect(customStyle.nodes).toEqual({})
|
|
expect(customStyle.edges).toEqual({})
|
|
})
|
|
|
|
it('setCustomStyle replaces the entire definition', () => {
|
|
const def: CustomStyleDef = {
|
|
nodes: { server: { borderColor: '#ff0000', borderOpacity: 1, bgColor: '#000000', bgOpacity: 1, iconColor: '#ff0000', iconOpacity: 1, width: 200, height: 80 } },
|
|
edges: { ethernet: { color: '#00ff00', opacity: 0.8, pathStyle: 'bezier', animated: 'none' } },
|
|
}
|
|
useThemeStore.getState().setCustomStyle(def)
|
|
expect(useThemeStore.getState().customStyle.nodes.server?.borderColor).toBe('#ff0000')
|
|
expect(useThemeStore.getState().customStyle.edges.ethernet?.color).toBe('#00ff00')
|
|
})
|
|
|
|
it('setCustomStyle with empty def clears styles', () => {
|
|
useThemeStore.getState().setCustomStyle({ nodes: { server: { borderColor: '#aaa', borderOpacity: 1, bgColor: '#000', bgOpacity: 1, iconColor: '#aaa', iconOpacity: 1, width: 0, height: 0 } }, edges: {} })
|
|
useThemeStore.getState().setCustomStyle({ nodes: {}, edges: {} })
|
|
expect(useThemeStore.getState().customStyle.nodes).toEqual({})
|
|
})
|
|
})
|