Automerge backed Markdown editor for the Atmosphere
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254// src/layout/__tests__/layout-state.test.tsimport { describe, it, expect } from 'vitest'import { createInitialLayoutState, toggleSidebar, setSidebarMode, toggleRightPanel, setRightPanelCollapsed, setSidebarWidth, setRightPanelWidth, setEditorMode, isReadOnly, computeToolbarLeftOffset, computeToolbarRightOffset, RIBBON_WIDTH, MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH, MIN_RIGHT_PANEL_WIDTH, MAX_RIGHT_PANEL_WIDTH,} from '../layout-state'
describe('layout-state', () => { describe('createInitialLayoutState', () => { it('starts mobile with just the ribbon and desktop with Quick Access expanded', () => { expect(createInitialLayoutState(390).sidebarMode).toBe('ribbon') expect(createInitialLayoutState(767).sidebarMode).toBe('ribbon') expect(createInitialLayoutState(768).sidebarMode).toBe('full') expect(createInitialLayoutState(1280).sidebarMode).toBe('full') }) it('returns default state with full sidebar mode', () => { const state = createInitialLayoutState() expect(state.sidebarWidth).toBe(240) expect(state.sidebarMode).toBe('full') expect(state.rightPanelWidth).toBe(280) expect(state.rightPanelCollapsed).toBe(true) })
it('returns default state with editorMode live-preview', () => { const state = createInitialLayoutState() expect(state.editorMode).toBe('live-preview') }) })
describe('toggleSidebar', () => { it('cycles hidden -> ribbon', () => { let state = createInitialLayoutState() state = { ...state, sidebarMode: 'hidden' } state = toggleSidebar(state) expect(state.sidebarMode).toBe('ribbon') })
it('cycles ribbon -> full', () => { let state = createInitialLayoutState() state = { ...state, sidebarMode: 'ribbon' } state = toggleSidebar(state) expect(state.sidebarMode).toBe('full') })
it('cycles full -> hidden', () => { let state = createInitialLayoutState() expect(state.sidebarMode).toBe('full') state = toggleSidebar(state) expect(state.sidebarMode).toBe('hidden') })
it('completes full cycle: hidden -> ribbon -> full -> hidden', () => { let state = createInitialLayoutState() state = { ...state, sidebarMode: 'hidden' } state = toggleSidebar(state) expect(state.sidebarMode).toBe('ribbon') state = toggleSidebar(state) expect(state.sidebarMode).toBe('full') state = toggleSidebar(state) expect(state.sidebarMode).toBe('hidden') }) })
describe('setSidebarMode', () => { it('sets mode to hidden', () => { let state = createInitialLayoutState() state = setSidebarMode(state, 'hidden') expect(state.sidebarMode).toBe('hidden') })
it('sets mode to ribbon', () => { let state = createInitialLayoutState() state = setSidebarMode(state, 'ribbon') expect(state.sidebarMode).toBe('ribbon') })
it('sets mode to full', () => { let state = createInitialLayoutState() state = { ...state, sidebarMode: 'hidden' } state = setSidebarMode(state, 'full') expect(state.sidebarMode).toBe('full') })
it('returns state unchanged when mode is the same', () => { const state = createInitialLayoutState() const result = setSidebarMode(state, 'full') expect(result).toBe(state) })
it('returns state unchanged for invalid mode', () => { const state = createInitialLayoutState() const result = setSidebarMode(state, 'invalid' as never) expect(result).toBe(state) }) })
describe('toggleRightPanel', () => { it('toggles right panel collapsed state', () => { let state = createInitialLayoutState() expect(state.rightPanelCollapsed).toBe(true) // Starts collapsed state = toggleRightPanel(state) expect(state.rightPanelCollapsed).toBe(false) state = toggleRightPanel(state) expect(state.rightPanelCollapsed).toBe(true) }) })
describe('setRightPanelCollapsed', () => { it('sets panel to collapsed', () => { let state = createInitialLayoutState() state = toggleRightPanel(state) // Now expanded (false) state = setRightPanelCollapsed(state, true) expect(state.rightPanelCollapsed).toBe(true) })
it('sets panel to expanded', () => { let state = createInitialLayoutState() expect(state.rightPanelCollapsed).toBe(true) // Starts collapsed state = setRightPanelCollapsed(state, false) expect(state.rightPanelCollapsed).toBe(false) })
it('is idempotent when already in desired state', () => { let state = createInitialLayoutState() expect(state.rightPanelCollapsed).toBe(true) state = setRightPanelCollapsed(state, true) expect(state.rightPanelCollapsed).toBe(true) }) })
describe('setSidebarWidth', () => { it('sets sidebar width', () => { let state = createInitialLayoutState() state = setSidebarWidth(state, 300) expect(state.sidebarWidth).toBe(300) })
it('clamps to minimum', () => { let state = createInitialLayoutState() state = setSidebarWidth(state, 50) expect(state.sidebarWidth).toBe(MIN_SIDEBAR_WIDTH) })
it('clamps to maximum', () => { let state = createInitialLayoutState() state = setSidebarWidth(state, 1000) expect(state.sidebarWidth).toBe(MAX_SIDEBAR_WIDTH) }) })
describe('setRightPanelWidth', () => { it('sets right panel width', () => { let state = createInitialLayoutState() state = setRightPanelWidth(state, 350) expect(state.rightPanelWidth).toBe(350) })
it('clamps to minimum', () => { let state = createInitialLayoutState() state = setRightPanelWidth(state, 50) expect(state.rightPanelWidth).toBe(MIN_RIGHT_PANEL_WIDTH) })
it('clamps to maximum', () => { let state = createInitialLayoutState() state = setRightPanelWidth(state, 1000) expect(state.rightPanelWidth).toBe(MAX_RIGHT_PANEL_WIDTH) }) })
describe('isReadOnly', () => { it('returns false for source mode', () => { expect(isReadOnly('source')).toBe(false) })
it('returns false for live-preview mode', () => { expect(isReadOnly('live-preview')).toBe(false) }) })
describe('setEditorMode', () => { it('sets editor mode to live-preview', () => { let state = createInitialLayoutState() state = setEditorMode(state, 'live-preview') expect(state.editorMode).toBe('live-preview') })
it('sets editor mode to source', () => { let state = createInitialLayoutState() state = setEditorMode(state, 'source') expect(state.editorMode).toBe('source') })
it('preserves other state fields when changing mode', () => { let state = createInitialLayoutState() state = setSidebarMode(state, 'hidden') state = setEditorMode(state, 'source') expect(state.editorMode).toBe('source') expect(state.sidebarMode).toBe('hidden') }) })
describe('computeToolbarLeftOffset', () => { it('returns 0 when sidebar is hidden', () => { expect(computeToolbarLeftOffset('hidden', 240)).toBe(0) })
it('returns RIBBON_WIDTH when sidebar is ribbon-only', () => { expect(computeToolbarLeftOffset('ribbon', 240)).toBe(RIBBON_WIDTH) })
it('returns RIBBON_WIDTH + sidebarWidth when sidebar is full', () => { expect(computeToolbarLeftOffset('full', 240)).toBe(RIBBON_WIDTH + 240) }) })
describe('computeToolbarRightOffset', () => { it('returns 0 when right panel is collapsed', () => { expect(computeToolbarRightOffset(true, 280)).toBe(0) })
it('returns rightPanelWidth when right panel is expanded', () => { expect(computeToolbarRightOffset(false, 280)).toBe(280) }) })})