editor: resizable rail, Esc closes panel, dev tab remembered
Rail gets a drag handle on its edge (240-640px, width persisted like the rest of the panel state). Escape now closes the panel as the last step of its chain (dialog > inline > selection > panel). The dev panel remembers its tab across reloads. Panel toggle button title notes the Esc shortcut. Harness covers resize/persist, Esc-close and dev tab. 🤖 Generated with Codebuff Co-Authored-By: Codebuff <noreply@codebuff.com>
This commit is contained in:
1 parent
bb875a0956
commit
fc0eb2c6be
8 files changed
+111
-13
No files matched your search
@@ -59,6 +59,61 @@ describe('rail sections', () => {
|
||||
expect(qa('.cms-outline').length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('dragging the rail edge resizes it and remembers the width', async () => {
|
||||
h = await setup()
|
||||
await h.settle()
|
||||
await h.press('Panel')
|
||||
await h.settle()
|
||||
const grip = q('.cms-rail__resize')
|
||||
const down = new Event('pointerdown', { bubbles: true, cancelable: true }) as Event & { clientX: number; button: number }
|
||||
down.clientX = 332
|
||||
down.button = 0
|
||||
await act(async () => void grip.dispatchEvent(down))
|
||||
const move = new Event('pointermove', { bubbles: true, cancelable: true }) as Event & { clientX: number }
|
||||
move.clientX = 420
|
||||
await act(async () => void document.dispatchEvent(move))
|
||||
const up = new Event('pointerup', { bubbles: true, cancelable: true })
|
||||
await act(async () => void document.dispatchEvent(up))
|
||||
await h.settle()
|
||||
// jsdom reports rect.left as 0, so width == clientX, clamped to [240, 640]
|
||||
expect((q('.cms-rail') as HTMLElement).style.width).toBe('420px')
|
||||
expect(localStorage.getItem('cms-onpage.railwidth')).toBe('420')
|
||||
h.cleanup()
|
||||
h = await setup({ keepStorage: true })
|
||||
await h.settle()
|
||||
await h.settle()
|
||||
expect((q('.cms-rail') as HTMLElement).style.width).toBe('420px')
|
||||
})
|
||||
|
||||
it('Escape closes the rail when nothing else is open', async () => {
|
||||
h = await setup()
|
||||
await h.settle()
|
||||
await h.press('Panel')
|
||||
await h.settle()
|
||||
expect(q('.cms-rail')).not.toBeNull()
|
||||
await act(async () => void document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true, composed: true })))
|
||||
await h.settle()
|
||||
expect(h.shadow.querySelector('.cms-rail')).toBeNull()
|
||||
expect(localStorage.getItem('cms-onpage.rail')).toBe('false')
|
||||
})
|
||||
|
||||
it('dev panel remembers its tab', async () => {
|
||||
h = await setup()
|
||||
await h.settle()
|
||||
await act(async () => void h.editor.ctrl.store.set({ dev: true }))
|
||||
await h.settle()
|
||||
const registry = qa('.cms-dev header button').find((b) => b.textContent === 'registry')!
|
||||
await act(async () => void registry.click())
|
||||
await h.settle()
|
||||
expect(localStorage.getItem('cms-onpage.devtab')).toBe('registry')
|
||||
h.cleanup()
|
||||
h = await setup({ keepStorage: true })
|
||||
await h.settle()
|
||||
await act(async () => void h.editor.ctrl.store.set({ dev: true }))
|
||||
await h.settle()
|
||||
expect(q('.cms-dev__body').textContent).toContain('blockEditors')
|
||||
})
|
||||
|
||||
it('assistant sits beside the dev panel instead of stacking under it', async () => {
|
||||
;(navigator as any).gpu = {} // aiSupported() checks for a WebGPU API
|
||||
h = await setup()
|
||||
|
||||
Reference in new issue
Block a user