fix: Project action terminal lifecycle (#3287)
* fix(terminal): make command sessions own action lifecycle * fix(ui): reconcile project action terminal state * feat(ui): show running project actions in terminal tabs * feat(ui): run project actions from linked worktrees * fix(ui): guard project action reconciliation * fix(ui): scope project action preview fallback * fix(ui): default project actions to worktrees * fix(ui): reveal project action terminals * fix(ui): retain terminal output after snapshot replay * fix(ui): restore running action terminals on revisit
This commit is contained in:
Matt Visnovsky
@@ -0,0 +1,405 @@
|
||||
import { afterEach, beforeEach, describe, expect, mock, test } from 'bun:test';
|
||||
import React, { act } from 'react';
|
||||
import { createRoot, type Root } from 'react-dom/client';
|
||||
import { Window } from 'happy-dom';
|
||||
|
||||
import type { TerminalHandlers } from '@/lib/api/types';
|
||||
import { useTerminalStore } from '@/stores/useTerminalStore';
|
||||
|
||||
let effectiveDirectory = '/repo';
|
||||
const openContextPreviewCalls: Array<[string, string]> = [];
|
||||
const createSessionCalls: Array<{ cwd: string }> = [];
|
||||
const connectCalls: string[] = [];
|
||||
const ensureDirectoryCalls: string[] = [];
|
||||
const openContextPreview = (directory: string, url: string) => {
|
||||
openContextPreviewCalls.push([directory, url]);
|
||||
};
|
||||
const createSession = async ({ cwd }: { cwd: string }) => {
|
||||
createSessionCalls.push({ cwd });
|
||||
return { sessionId: 'unused', cols: 80, rows: 24, status: 'running' as const };
|
||||
};
|
||||
let connectBehavior: (sessionId: string, handlers: TerminalHandlers) => { close: () => void } = () => ({ close: () => undefined });
|
||||
const terminalRuntime = {
|
||||
createSession,
|
||||
sendInput: async () => undefined,
|
||||
resize: async () => undefined,
|
||||
close: async () => undefined,
|
||||
updateAppearance: async () => undefined,
|
||||
connect: (sessionId: string, handlers: TerminalHandlers) => {
|
||||
connectCalls.push(sessionId);
|
||||
return connectBehavior(sessionId, handlers);
|
||||
},
|
||||
};
|
||||
const runtimeApis = {
|
||||
runtime: { platform: 'web' as const },
|
||||
terminal: terminalRuntime,
|
||||
};
|
||||
const i18n = { t: (key: string) => key };
|
||||
|
||||
const sessionUiState = {
|
||||
currentSessionId: 'session-1',
|
||||
newSessionDraft: null,
|
||||
};
|
||||
|
||||
const useSessionUIStoreMock = <T,>(selector: (state: typeof sessionUiState) => T): T => selector(sessionUiState);
|
||||
|
||||
const uiState = {
|
||||
terminalFontSize: 14,
|
||||
terminalShell: 'zsh',
|
||||
terminalLoginShells: ['zsh'],
|
||||
showTerminalQuickKeysOnDesktop: false,
|
||||
openContextPreview,
|
||||
};
|
||||
|
||||
const useUiStoreMock = Object.assign(
|
||||
<T,>(selector: (state: typeof uiState) => T): T => selector(uiState),
|
||||
{ getState: () => uiState },
|
||||
);
|
||||
|
||||
mock.module('@/sync/session-ui-store', () => ({ useSessionUIStore: useSessionUIStoreMock }));
|
||||
mock.module('@/hooks/useEffectiveDirectory', () => ({ useEffectiveDirectory: () => effectiveDirectory }));
|
||||
mock.module('@/hooks/useRuntimeAPIs', () => ({
|
||||
useRuntimeAPIs: () => runtimeApis,
|
||||
}));
|
||||
mock.module('@/contexts/useThemeSystem', () => ({
|
||||
useThemeSystem: () => ({
|
||||
currentTheme: {
|
||||
metadata: { variant: 'dark' },
|
||||
colors: {
|
||||
surface: {
|
||||
background: '#000',
|
||||
muted: '#111',
|
||||
elevatedForeground: '#fff',
|
||||
},
|
||||
syntax: {
|
||||
base: { foreground: '#fff' },
|
||||
function: '#7dd3fc',
|
||||
keyword: '#c084fc',
|
||||
type: '#67e8f9',
|
||||
comment: '#6b7280',
|
||||
},
|
||||
interactive: {
|
||||
cursor: '#fff',
|
||||
selection: '#334155',
|
||||
selectionForeground: '#fff',
|
||||
},
|
||||
status: {
|
||||
error: '#f87171',
|
||||
success: '#4ade80',
|
||||
warning: '#fbbf24',
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
}));
|
||||
mock.module('@/hooks/useFontPreferences', () => ({ useFontPreferences: () => ({ monoFont: 'geist-mono' }) }));
|
||||
mock.module('@/lib/device', () => ({ useDeviceInfo: () => ({ isMobile: false, isTablet: false, hasTouchOnlyPointer: false }) }));
|
||||
mock.module('@/stores/useUIStore', () => ({ useUIStore: useUiStoreMock }));
|
||||
mock.module('@/stores/useInlineCommentDraftStore', () => ({ useInlineCommentDraftStore: () => ({ addDraft: () => undefined }) }));
|
||||
mock.module('@/components/terminal/TerminalViewport', () => ({
|
||||
TerminalViewport: React.forwardRef(function TerminalViewportMock(
|
||||
{ sessionKey, chunks, isVisible }: { sessionKey: string; chunks: unknown[]; isVisible: boolean },
|
||||
ref: React.ForwardedRef<{ focus: () => void; fit: () => void; getSelection: () => null }>,
|
||||
) {
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
focus: () => undefined,
|
||||
fit: () => undefined,
|
||||
getSelection: () => null,
|
||||
}), []);
|
||||
|
||||
return React.createElement('div', {
|
||||
'data-terminal-viewport': 'true',
|
||||
'data-session-key': sessionKey,
|
||||
'data-visible': String(isVisible),
|
||||
'data-chunk-count': String(chunks.length),
|
||||
});
|
||||
}),
|
||||
}));
|
||||
mock.module('@/components/icon/Icon', () => ({
|
||||
Icon: ({ name, className }: { name: string; className?: string }) => React.createElement('span', { 'data-icon': name, className }),
|
||||
}));
|
||||
mock.module('@/components/ui/sortable-tabs-strip', () => ({
|
||||
SortableTabsStrip: ({ items }: { items: Array<{ id: string; label: string; icon?: React.ReactNode }> }) => React.createElement(
|
||||
'div',
|
||||
{ 'data-tabs-strip': 'terminal' },
|
||||
items.map((item) => React.createElement(
|
||||
'div',
|
||||
{ key: item.id, 'data-tab-id': item.id },
|
||||
item.icon,
|
||||
React.createElement('span', { 'data-tab-label': item.id }, item.label),
|
||||
)),
|
||||
),
|
||||
}));
|
||||
mock.module('@/lib/i18n', () => ({ useI18n: () => i18n }));
|
||||
|
||||
const { TerminalView } = await import('./TerminalView');
|
||||
|
||||
const ensureDirectorySpy = (directory: string) => {
|
||||
ensureDirectoryCalls.push(directory);
|
||||
useTerminalStore.setState((state) => {
|
||||
if (state.sessions.get(directory)) return state;
|
||||
|
||||
const tab = {
|
||||
id: `spy-tab-${directory}`,
|
||||
terminalSessionId: null,
|
||||
lifecycle: 'idle' as const,
|
||||
purpose: { type: 'terminal' as const },
|
||||
label: 'Terminal',
|
||||
iconKey: null,
|
||||
isConnecting: false,
|
||||
createdAt: Date.now(),
|
||||
previewUrl: null,
|
||||
previewAutoOpened: false,
|
||||
previewUrlLocked: false,
|
||||
};
|
||||
|
||||
const sessions = new Map(state.sessions);
|
||||
sessions.set(directory, { tabs: [tab], activeTabId: tab.id });
|
||||
return { sessions };
|
||||
});
|
||||
};
|
||||
|
||||
const flushEffects = async () => {
|
||||
await act(async () => {
|
||||
await Promise.resolve();
|
||||
await Promise.resolve();
|
||||
});
|
||||
};
|
||||
|
||||
const bufferEntryKey = (directory: string, tabId: string) => `${directory}\u0000${tabId}`;
|
||||
const readBufferContent = (directory: string, tabId: string) => useTerminalStore.getState().getBuffer(directory, tabId).chunks.map((chunk) => chunk.data).join('');
|
||||
|
||||
describe('TerminalView project action tab indicator', () => {
|
||||
let windowInstance: Window;
|
||||
let host: HTMLDivElement;
|
||||
let root: Root;
|
||||
|
||||
beforeEach(() => {
|
||||
effectiveDirectory = '/repo';
|
||||
openContextPreviewCalls.length = 0;
|
||||
createSessionCalls.length = 0;
|
||||
connectCalls.length = 0;
|
||||
ensureDirectoryCalls.length = 0;
|
||||
connectBehavior = () => ({ close: () => undefined });
|
||||
windowInstance = new Window({ url: 'http://localhost/' });
|
||||
Object.assign(globalThis, {
|
||||
window: windowInstance,
|
||||
document: windowInstance.document,
|
||||
navigator: windowInstance.navigator,
|
||||
HTMLElement: windowInstance.HTMLElement,
|
||||
Element: windowInstance.Element,
|
||||
Node: windowInstance.Node,
|
||||
Event: windowInstance.Event,
|
||||
KeyboardEvent: windowInstance.KeyboardEvent,
|
||||
MouseEvent: windowInstance.MouseEvent,
|
||||
ResizeObserver: class {
|
||||
observe() {}
|
||||
disconnect() {}
|
||||
},
|
||||
IS_REACT_ACT_ENVIRONMENT: true,
|
||||
});
|
||||
|
||||
host = document.createElement('div');
|
||||
document.body.appendChild(host);
|
||||
root = createRoot(host);
|
||||
|
||||
useTerminalStore.getState().clearAll();
|
||||
useTerminalStore.setState({ ensureDirectory: ensureDirectorySpy });
|
||||
useTerminalStore.getState().ensureDirectory('/repo');
|
||||
|
||||
const interactiveTabId = useTerminalStore.getState().getDirectoryState('/repo')!.tabs[0]!.id;
|
||||
useTerminalStore.getState().setTabLabel('/repo', interactiveTabId, 'Interactive');
|
||||
|
||||
const runningActionTabId = useTerminalStore.getState().createTab('/repo');
|
||||
useTerminalStore.getState().setTabLabel('/repo', runningActionTabId, 'Build');
|
||||
useTerminalStore.getState().setTabIconKey('/repo', runningActionTabId, 'build');
|
||||
useTerminalStore.getState().setTabPurpose('/repo', runningActionTabId, { type: 'project-action', actionId: 'build', executionId: 'exec-running' });
|
||||
useTerminalStore.getState().setTabLifecycle('/repo', runningActionTabId, 'running');
|
||||
|
||||
const exitedActionTabId = useTerminalStore.getState().createTab('/repo');
|
||||
useTerminalStore.getState().setTabLabel('/repo', exitedActionTabId, 'Deploy');
|
||||
useTerminalStore.getState().setTabIconKey('/repo', exitedActionTabId, 'play');
|
||||
useTerminalStore.getState().setTabPurpose('/repo', exitedActionTabId, { type: 'project-action', actionId: 'deploy', executionId: 'exec-exited' });
|
||||
useTerminalStore.getState().setTabLifecycle('/repo', exitedActionTabId, 'exited');
|
||||
ensureDirectoryCalls.length = 0;
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
await act(async () => root.unmount());
|
||||
useTerminalStore.getState().clearAll();
|
||||
});
|
||||
|
||||
test('shows a spinner only for active project-action tabs and keeps terminal or action icons elsewhere', async () => {
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: false }));
|
||||
});
|
||||
|
||||
const tabs = Array.from(host.querySelectorAll('[data-tab-id]'));
|
||||
expect(tabs).toHaveLength(3);
|
||||
|
||||
const interactiveTab = tabs.find((tab) => tab.querySelector('[data-tab-label]')?.textContent === 'Interactive');
|
||||
const runningActionTab = tabs.find((tab) => tab.querySelector('[data-tab-label]')?.textContent === 'Build');
|
||||
const exitedActionTab = tabs.find((tab) => tab.querySelector('[data-tab-label]')?.textContent === 'Deploy');
|
||||
|
||||
expect(interactiveTab?.querySelector('[data-icon]')?.getAttribute('data-icon')).toBe('terminal');
|
||||
expect(runningActionTab?.querySelector('[data-icon]')?.getAttribute('data-icon')).toBe('loader-4');
|
||||
expect(runningActionTab?.querySelector('[data-icon]')?.className).toContain('animate-spin');
|
||||
expect(runningActionTab?.querySelector('[data-icon]')?.className).toContain('motion-reduce:animate-none');
|
||||
expect(runningActionTab?.querySelector('[data-icon]')?.className).toContain('text-muted-foreground');
|
||||
expect(exitedActionTab?.querySelector('[data-icon]')?.getAttribute('data-icon')).toBe('play');
|
||||
expect(host.querySelectorAll('[data-icon="loader-4"]').length).toBe(1);
|
||||
});
|
||||
|
||||
test('uses the explicit terminal directory for terminal tabs and session creation while preview ownership stays on the host directory', async () => {
|
||||
effectiveDirectory = '/repo-worktree';
|
||||
useTerminalStore.getState().ensureDirectory('/repo-worktree');
|
||||
const worktreeTabId = useTerminalStore.getState().getDirectoryState('/repo-worktree')!.tabs[0]!.id;
|
||||
useTerminalStore.getState().setTabLabel('/repo-worktree', worktreeTabId, 'Worktree Terminal');
|
||||
|
||||
const repoTabId = useTerminalStore.getState().getDirectoryState('/repo')!.tabs[0]!.id;
|
||||
useTerminalStore.getState().setTabLabel('/repo', repoTabId, 'Repo Terminal');
|
||||
useTerminalStore.getState().setTabPreviewUrl('/repo', repoTabId, 'https://preview.example.test');
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true, directory: '/repo' }));
|
||||
});
|
||||
|
||||
const tabLabels = Array.from(host.querySelectorAll('[data-tab-label]')).map((node) => node.textContent);
|
||||
expect(tabLabels).toContain('Repo Terminal');
|
||||
expect(tabLabels).not.toContain('Worktree Terminal');
|
||||
expect(createSessionCalls.length).toBe(1);
|
||||
expect(createSessionCalls[0]?.cwd).toBe('/repo');
|
||||
|
||||
const previewButton = host.querySelector<HTMLElement>('[title="terminalView.preview.openTitle"]');
|
||||
expect(previewButton).not.toBeNull();
|
||||
previewButton?.click();
|
||||
expect(openContextPreviewCalls).toEqual([['/repo-worktree', 'https://preview.example.test']]);
|
||||
});
|
||||
|
||||
test('keeps the existing context-directory behavior when no explicit terminal directory is provided', async () => {
|
||||
effectiveDirectory = '/repo-worktree';
|
||||
useTerminalStore.getState().ensureDirectory('/repo-worktree');
|
||||
const worktreeTabId = useTerminalStore.getState().getDirectoryState('/repo-worktree')!.tabs[0]!.id;
|
||||
useTerminalStore.getState().setTabLabel('/repo-worktree', worktreeTabId, 'Worktree Terminal');
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true }));
|
||||
});
|
||||
|
||||
const tabLabels = Array.from(host.querySelectorAll('[data-tab-label]')).map((node) => node.textContent);
|
||||
expect(tabLabels).toContain('Worktree Terminal');
|
||||
expect(createSessionCalls.length).toBe(1);
|
||||
expect(createSessionCalls[0]?.cwd).toBe('/repo-worktree');
|
||||
});
|
||||
|
||||
test('treats an explicit terminal target with no terminal state as an inert reveal', async () => {
|
||||
effectiveDirectory = '/repo-worktree';
|
||||
useTerminalStore.getState().ensureDirectory('/repo-worktree');
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true, directory: '/missing-repo' }));
|
||||
});
|
||||
|
||||
expect(ensureDirectoryCalls).not.toContain('/missing-repo');
|
||||
expect(createSessionCalls.length).toBe(0);
|
||||
expect(host.querySelector('[data-tabs-strip="terminal"]')).toBeNull();
|
||||
expect(host.querySelector('[data-terminal-viewport="true"]')?.getAttribute('data-chunk-count')).toBe('0');
|
||||
});
|
||||
|
||||
test('includes the terminal directory in the viewport identity key', async () => {
|
||||
effectiveDirectory = '/repo-worktree';
|
||||
useTerminalStore.getState().ensureDirectory('/repo-worktree');
|
||||
|
||||
useTerminalStore.setState((state) => {
|
||||
const repoTab = state.sessions.get('/repo')!.tabs[0]!;
|
||||
const sessions = new Map(state.sessions);
|
||||
sessions.set('/repo-worktree', {
|
||||
tabs: [{ ...repoTab, label: 'Mirrored Terminal' }],
|
||||
activeTabId: repoTab.id,
|
||||
});
|
||||
return { sessions };
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true }));
|
||||
});
|
||||
const contextKey = host.querySelector('[data-terminal-viewport="true"]')!.getAttribute('data-session-key');
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true, directory: '/repo' }));
|
||||
});
|
||||
const targetKey = host.querySelector('[data-terminal-viewport="true"]')!.getAttribute('data-session-key');
|
||||
|
||||
expect(contextKey).not.toBe(targetKey);
|
||||
expect(contextKey).toContain('/repo-worktree');
|
||||
expect(targetKey).toContain('/repo');
|
||||
});
|
||||
|
||||
test('would fail if revisit attach skipped the active running project-action snapshot restore', async () => {
|
||||
const state = useTerminalStore.getState().getDirectoryState('/repo');
|
||||
const actionTab = state?.tabs.find((tab) => tab.label === 'Build');
|
||||
expect(actionTab).toBeDefined();
|
||||
if (!actionTab) throw new Error('action tab missing');
|
||||
|
||||
useTerminalStore.getState().setTabSessionId('/repo', actionTab.id, 'srv-build', { expectedExecutionId: 'exec-running' });
|
||||
useTerminalStore.getState().setActiveTab('/repo', actionTab.id);
|
||||
|
||||
const snapshotData = 'snapshot history\nfinal line\n';
|
||||
let replaceCount = 0;
|
||||
const unsubscribe = useTerminalStore.subscribe((nextState, previousState) => {
|
||||
const next = nextState.buffers.get(bufferEntryKey('/repo', actionTab.id));
|
||||
const previous = previousState.buffers.get(bufferEntryKey('/repo', actionTab.id));
|
||||
const nextContent = next?.chunks.map((chunk) => chunk.data).join('') ?? '';
|
||||
const previousContent = previous?.chunks.map((chunk) => chunk.data).join('') ?? '';
|
||||
if (nextContent === snapshotData && previousContent !== snapshotData && next?.lastSequence === 7) {
|
||||
replaceCount += 1;
|
||||
}
|
||||
});
|
||||
connectBehavior = (_sessionId, handlers) => {
|
||||
void Promise.resolve().then(() => {
|
||||
handlers.onEvent({ type: 'snapshot', data: snapshotData, sequence: 7, status: 'running' });
|
||||
});
|
||||
return { close: () => undefined };
|
||||
};
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true }));
|
||||
});
|
||||
await flushEffects();
|
||||
unsubscribe();
|
||||
|
||||
expect(connectCalls).toEqual(['srv-build']);
|
||||
expect(createSessionCalls.length).toBe(0);
|
||||
expect(readBufferContent('/repo', actionTab.id)).toBe(snapshotData);
|
||||
expect(useTerminalStore.getState().getBuffer('/repo', actionTab.id).lastSequence).toBe(7);
|
||||
expect(replaceCount).toBe(1);
|
||||
});
|
||||
|
||||
test('would fail if retained parent action targets rendered worktree tabs or attached the wrong session', async () => {
|
||||
effectiveDirectory = '/repo-worktree';
|
||||
useTerminalStore.getState().ensureDirectory('/repo-worktree');
|
||||
const worktreeTabId = useTerminalStore.getState().getDirectoryState('/repo-worktree')!.tabs[0]!.id;
|
||||
useTerminalStore.getState().setTabLabel('/repo-worktree', worktreeTabId, 'Worktree Terminal');
|
||||
|
||||
const repoState = useTerminalStore.getState().getDirectoryState('/repo');
|
||||
const repoActionTab = repoState?.tabs.find((tab) => tab.label === 'Build');
|
||||
expect(repoActionTab).toBeDefined();
|
||||
if (!repoActionTab) throw new Error('repo action tab missing');
|
||||
|
||||
useTerminalStore.getState().setTabLabel('/repo', repoActionTab.id, 'Repo Build');
|
||||
useTerminalStore.getState().setTabSessionId('/repo', repoActionTab.id, 'srv-parent-build', { expectedExecutionId: 'exec-running' });
|
||||
useTerminalStore.getState().setActiveTab('/repo', repoActionTab.id);
|
||||
|
||||
await act(async () => {
|
||||
root.render(React.createElement(TerminalView, { visible: true, directory: '/repo' }));
|
||||
});
|
||||
await flushEffects();
|
||||
|
||||
const tabLabels = Array.from(host.querySelectorAll('[data-tab-label]')).map((node) => node.textContent);
|
||||
expect(tabLabels).toContain('Repo Build');
|
||||
expect(tabLabels).toContain('Interactive');
|
||||
expect(tabLabels).not.toContain('Worktree Terminal');
|
||||
expect(connectCalls).toEqual(['srv-parent-build']);
|
||||
expect(createSessionCalls.length).toBe(0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user