diff --git a/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.test.tsx b/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.test.tsx index b5e97640dfa2..62b825659f1b 100644 --- a/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.test.tsx +++ b/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.test.tsx @@ -167,6 +167,10 @@ describe('FloatingPanes (live DOM)', () => { const before = card()!.style.left const toggle = card()!.querySelector('button')! + const chevron = () => toggle.querySelector('i')! + + // Expanded: down chevron (fold). Collapsed: up chevron (restore). + expect(chevron().className).toContain('codicon-chevron-down') // The button is inside the drag handle — [data-floating-no-drag] must // stop it starting a drag. @@ -182,6 +186,7 @@ describe('FloatingPanes (live DOM)', () => { expect(document.querySelector('[data-testid="hud-body"]')).toBeNull() expect(card()!.style.height).toBe('') + expect(chevron().className).toContain('codicon-chevron-up') }) it('renders one card per floating contribution', () => { diff --git a/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.tsx b/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.tsx index 338a2f17b9c0..404620e25116 100644 --- a/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.tsx +++ b/apps/desktop/src/components/pane-shell/tree/renderer/floating-panes.tsx @@ -172,7 +172,7 @@ function FloatingPane({ pane }: { pane: Contribution }) { onClick={toggleCollapsed} type="button" > - + diff --git a/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.test.tsx b/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.test.tsx new file mode 100644 index 000000000000..8241ae1b50f8 --- /dev/null +++ b/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.test.tsx @@ -0,0 +1,76 @@ +import { act, type ReactNode } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, describe, expect, it, vi } from 'vitest' + +import { registry } from '@/contrib/registry' + +import type { GroupNode } from '../model' + +import { TreeGroup } from './tree-group' + +let root: null | Root = null +let container: HTMLDivElement | null = null +let disposePane: (() => void) | null = null + +function render(ui: ReactNode) { + if (!container) { + container = globalThis.document.createElement('div') + globalThis.document.body.append(container) + root = createRoot(container) + } + + act(() => { + root!.render(ui) + }) +} + +function terminalGroup(minimized: boolean): GroupNode { + return { + active: 'terminal', + headerHidden: false, + id: 'terminal-zone', + minimized, + panes: ['terminal'], + type: 'group' + } +} + +const toggle = (label: string) => + globalThis.document.querySelector( + `[data-tree-group="terminal-zone"] button[aria-label="${label}"]` + )! + +afterEach(() => { + if (root) { + act(() => root!.unmount()) + } + + container?.remove() + disposePane?.() + root = null + container = null + disposePane = null + vi.unstubAllGlobals() +}) + +describe('TreeGroup', () => { + it('points the docked-zone chevron in the collapse or restore action direction', () => { + disposePane = registry.register({ + area: 'panes', + data: { height: '12rem' }, + id: 'terminal', + render: () =>
Terminal
, + title: 'Terminal' + }) + // jsdom does not implement CSS.escape, which the real tab-strip effect uses. + vi.stubGlobal('CSS', { escape: (value: string) => value }) + + render() + + expect(toggle('Minimize').querySelector('i')!.className).toContain('codicon-chevron-down') + + render() + + expect(toggle('Restore').querySelector('i')!.className).toContain('codicon-chevron-up') + }) +}) diff --git a/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.tsx b/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.tsx index 8c480dbefcd0..c34c1788e7e8 100644 --- a/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.tsx +++ b/apps/desktop/src/components/pane-shell/tree/renderer/tree-group.tsx @@ -544,7 +544,7 @@ export function TreeGroup({ onPointerDown={e => e.stopPropagation()} type="button" > - + )}