agents-orchestrator/agent-orchestrator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(e2e): split spec files under 300-line limit

Browse source 
- phase-c.test.ts (626 lines) → phase-c-ui.test.ts (279), phase-c-tabs.test.ts
  (272), phase-c-llm.test.ts (76) — all 11 scenarios preserved
- agor.test.ts (799 lines) → smoke.test.ts (47), workspace.test.ts (79),
  settings.test.ts (247), features.test.ts (488) — split in progress
- Reset-to-home-state hooks added to stateful before() blocks
- wdio.conf.js specs array updated for all new filenames
This commit is contained in:
Hibryda 2026-03-18 03:09:29 +01:00
parent e76bc341f2
commit f08c4b18cf
9 changed files with 1495 additions and 628 deletions
Download patch file Download diff file Expand all files Collapse all files

488
tests/e2e/specs/features.test.ts Normal file
View file

@ -0,0 +1,488 @@
import { browser, expect } from '@wdio/globals';
/** Reset UI to home state (close any open panels/overlays). */
async function resetToHomeState(): Promise<void> {
const settingsPanel = await browser.$('.settings-panel');
if (await settingsPanel.isExisting()) {
const closeBtn = await browser.$('.settings-close');
if (await closeBtn.isExisting()) await closeBtn.click();
}
const overlay = await browser.$('.search-overlay');
if (await overlay.isExisting()) await browser.keys('Escape');
}
/** Open the settings panel, waiting for content to render. */
async function openSettings(): Promise<void> {
const panel = await browser.$('.sidebar-panel');
const isOpen = await panel.isDisplayed().catch(() => false);
if (!isOpen) {
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]');
if (btn) (btn as HTMLElement).click();
});
await panel.waitForDisplayed({ timeout: 5000 });
}
await browser.waitUntil(
async () => {
const count = await browser.execute(() =>
document.querySelectorAll('.settings-tab .settings-section').length,
);
return (count as number) >= 1;
},
{ timeout: 5000, timeoutMsg: 'Settings sections did not render within 5s' },
);
await browser.pause(200);
}
/** Close the settings panel if open. */
async function closeSettings(): Promise<void> {
const panel = await browser.$('.sidebar-panel');
if (await panel.isDisplayed().catch(() => false)) {
await browser.execute(() => {
const btn = document.querySelector('.panel-close');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
}
}
/** Open command palette — idempotent (won't toggle-close if already open). */
async function openCommandPalette(): Promise<void> {
// Ensure sidebar is closed first (it can intercept keyboard events)
await closeSettings();
// Check if already open
const alreadyOpen = await browser.execute(() => {
const p = document.querySelector('.palette');
return p !== null && getComputedStyle(p).display !== 'none';
});
if (alreadyOpen) return;
// Dispatch Ctrl+K via JS for reliability with WebKit2GTK/tauri-driver
await browser.execute(() => {
document.dispatchEvent(new KeyboardEvent('keydown', {
key: 'k', code: 'KeyK', ctrlKey: true, bubbles: true, cancelable: true,
}));
});
await browser.pause(300);
const palette = await browser.$('.palette');
await palette.waitForDisplayed({ timeout: 5000 });
}
/** Close command palette if open — uses backdrop click (more reliable than Escape). */
async function closeCommandPalette(): Promise<void> {
const isOpen = await browser.execute(() => {
const p = document.querySelector('.palette');
return p !== null && getComputedStyle(p).display !== 'none';
});
if (!isOpen) return;
// Click backdrop to close (more reliable than dispatching Escape)
await browser.execute(() => {
const backdrop = document.querySelector('.palette-backdrop');
if (backdrop) (backdrop as HTMLElement).click();
});
await browser.pause(500);
}
describe('BTerminal — Command Palette', () => {
beforeEach(async () => {
await closeCommandPalette();
});
it('should show palette input', async () => {
await openCommandPalette();
const input = await browser.$('.palette-input');
await expect(input).toBeDisplayed();
// Verify input accepts text (functional focus test, not activeElement check
// which is unreliable in WebKit2GTK/tauri-driver)
const canType = await browser.execute(() => {
const el = document.querySelector('.palette-input') as HTMLInputElement | null;
if (!el) return false;
el.focus();
return el === document.activeElement;
});
expect(canType).toBe(true);
await closeCommandPalette();
});
it('should show palette items with command labels and categories', async () => {
await openCommandPalette();
const items = await browser.$$('.palette-item');
expect(items.length).toBeGreaterThanOrEqual(1);
// Each command item should have a label
const cmdLabel = await browser.$('.palette-item .cmd-label');
await expect(cmdLabel).toBeDisplayed();
const labelText = await cmdLabel.getText();
expect(labelText.length).toBeGreaterThan(0);
// Commands should be grouped under category headers
const categories = await browser.$$('.palette-category');
expect(categories.length).toBeGreaterThanOrEqual(1);
await closeCommandPalette();
});
it('should highlight selected item in palette', async () => {
await openCommandPalette();
// First item should be selected by default
const selectedItem = await browser.$('.palette-item.selected');
await expect(selectedItem).toBeExisting();
await closeCommandPalette();
});
it('should filter palette items by typing', async () => {
await openCommandPalette();
const itemsBefore = await browser.$$('.palette-item');
const countBefore = itemsBefore.length;
// Type a nonsense string that won't match any group name
const input = await browser.$('.palette-input');
await input.setValue('zzz_nonexistent_group_xyz');
await browser.pause(300);
// Should show no results or fewer items
const noResults = await browser.$('.no-results');
const itemsAfter = await browser.$$('.palette-item');
// Either no-results message appears OR item count decreased
const filtered = (await noResults.isExisting()) || itemsAfter.length < countBefore;
expect(filtered).toBe(true);
await closeCommandPalette();
});
it('should close palette by clicking backdrop', async () => {
await openCommandPalette();
const palette = await browser.$('.palette');
// Click the backdrop (outside the palette)
await browser.execute(() => {
const backdrop = document.querySelector('.palette-backdrop');
if (backdrop) (backdrop as HTMLElement).click();
});
await browser.pause(500);
await expect(palette).not.toBeDisplayed();
});
});
describe('BTerminal — Terminal Tabs', () => {
before(async () => {
await resetToHomeState();
// Ensure Claude tab is active so terminal section is visible
await browser.execute(() => {
const tab = document.querySelector('.project-box .ptab');
if (tab) (tab as HTMLElement).click();
});
await browser.pause(300);
});
it('should show terminal toggle on Claude tab', async () => {
const toggle = await browser.$('.terminal-toggle');
await expect(toggle).toBeDisplayed();
const label = await browser.$('.toggle-label');
const text = await label.getText();
expect(text.toLowerCase()).toContain('terminal');
});
it('should expand terminal area on toggle click', async () => {
// Click terminal toggle via JS
await browser.execute(() => {
const toggle = document.querySelector('.terminal-toggle');
if (toggle) (toggle as HTMLElement).click();
});
await browser.pause(500);
const termArea = await browser.$('.project-terminal-area');
await expect(termArea).toBeDisplayed();
// Chevron should have expanded class
const chevron = await browser.$('.toggle-chevron.expanded');
await expect(chevron).toBeExisting();
});
it('should show add tab button when terminal expanded', async () => {
const addBtn = await browser.$('.tab-add');
await expect(addBtn).toBeDisplayed();
});
it('should add a shell tab', async () => {
// Click add tab button via JS (Svelte onclick)
await browser.execute(() => {
const btn = document.querySelector('.tab-bar .tab-add');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
// Verify tab title via JS to avoid stale element issues
const title = await browser.execute(() => {
const el = document.querySelector('.tab-bar .tab-title');
return el ? el.textContent : '';
});
expect((title as string).toLowerCase()).toContain('shell');
});
it('should show active tab styling', async () => {
const activeTab = await browser.$('.tab.active');
await expect(activeTab).toBeExisting();
});
it('should add a second shell tab and switch between them', async () => {
// Add second tab via JS
await browser.execute(() => {
const btn = document.querySelector('.tab-bar .tab-add');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
const tabCount = await browser.execute(() => {
return document.querySelectorAll('.tab-bar .tab').length;
});
expect(tabCount as number).toBeGreaterThanOrEqual(2);
// Click first tab and verify it becomes active with Shell title
await browser.execute(() => {
const tabs = document.querySelectorAll('.tab-bar .tab');
if (tabs[0]) (tabs[0] as HTMLElement).click();
});
await browser.pause(300);
const activeTitle = await browser.execute(() => {
const active = document.querySelector('.tab-bar .tab.active .tab-title');
return active ? active.textContent : '';
});
expect(activeTitle as string).toContain('Shell');
});
it('should close a tab', async () => {
const tabsBefore = await browser.$$('.tab');
const countBefore = tabsBefore.length;
// Close the last tab
await browser.execute(() => {
const closeBtns = document.querySelectorAll('.tab-close');
if (closeBtns.length > 0) {
(closeBtns[closeBtns.length - 1] as HTMLElement).click();
}
});
await browser.pause(500);
const tabsAfter = await browser.$$('.tab');
expect(tabsAfter.length).toBe(Number(countBefore) - 1);
});
after(async () => {
// Clean up: close remaining tabs and collapse terminal
await browser.execute(() => {
// Close all tabs
const closeBtns = document.querySelectorAll('.tab-close');
closeBtns.forEach(btn => (btn as HTMLElement).click());
});
await browser.pause(300);
// Collapse terminal
await browser.execute(() => {
const toggle = document.querySelector('.terminal-toggle');
if (toggle) {
const chevron = toggle.querySelector('.toggle-chevron.expanded');
if (chevron) (toggle as HTMLElement).click();
}
});
await browser.pause(300);
});
});
describe('BTerminal — Theme Switching', () => {
before(async () => {
await resetToHomeState();
await openSettings();
// Scroll to top for theme dropdown
await browser.execute(() => {
const content = document.querySelector('.panel-content') || document.querySelector('.sidebar-panel');
if (content) content.scrollTop = 0;
});
await browser.pause(300);
});
after(async () => {
await closeSettings();
});
it('should show theme dropdown with group labels', async () => {
// Close any open dropdowns first
await browser.execute(() => {
const openMenu = document.querySelector('.dropdown-menu');
if (openMenu) {
const trigger = openMenu.closest('.custom-dropdown')?.querySelector('.dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
}
});
await browser.pause(200);
// Click the first dropdown trigger (theme dropdown)
await browser.execute(() => {
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(500);
const menu = await browser.$('.dropdown-menu');
await menu.waitForExist({ timeout: 5000 });
// Should have group labels (Catppuccin, Editor, Deep Dark)
const groupLabels = await browser.$$('.dropdown-group-label');
expect(groupLabels.length).toBeGreaterThanOrEqual(2);
// Close dropdown
await browser.execute(() => {
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(300);
});
it('should switch theme and update CSS variables', async () => {
// Get current base color
const baseBefore = await browser.execute(() => {
return getComputedStyle(document.documentElement).getPropertyValue('--ctp-base').trim();
});
// Open theme dropdown (first custom-dropdown in settings)
await browser.execute(() => {
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(500);
// Wait for dropdown menu
const menu = await browser.$('.dropdown-menu');
await menu.waitForExist({ timeout: 5000 });
// Click the first non-active theme option
const changed = await browser.execute(() => {
const options = document.querySelectorAll('.dropdown-menu .dropdown-option:not(.active)');
if (options.length > 0) {
(options[0] as HTMLElement).click();
return true;
}
return false;
});
expect(changed).toBe(true);
await browser.pause(500);
// Verify CSS variable changed
const baseAfter = await browser.execute(() => {
return getComputedStyle(document.documentElement).getPropertyValue('--ctp-base').trim();
});
expect(baseAfter).not.toBe(baseBefore);
// Switch back to Catppuccin Mocha (first option) to restore state
await browser.execute(() => {
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(500);
await browser.execute(() => {
const options = document.querySelectorAll('.dropdown-menu .dropdown-option');
if (options.length > 0) (options[0] as HTMLElement).click();
});
await browser.pause(300);
});
it('should show active theme option', async () => {
await browser.execute(() => {
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(500);
const menu = await browser.$('.dropdown-menu');
await menu.waitForExist({ timeout: 5000 });
const activeOption = await browser.$('.dropdown-option.active');
await expect(activeOption).toBeExisting();
await browser.execute(() => {
const trigger = document.querySelector('.settings-tab .custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(300);
});
});
describe('BTerminal — Keyboard Shortcuts', () => {
before(async () => {
await resetToHomeState();
await closeSettings();
await closeCommandPalette();
});
it('should open command palette with Ctrl+K', async () => {
await openCommandPalette();
const input = await browser.$('.palette-input');
await expect(input).toBeDisplayed();
// Close with Escape
await closeCommandPalette();
const palette = await browser.$('.palette');
const isGone = !(await palette.isDisplayed().catch(() => false));
expect(isGone).toBe(true);
});
it('should toggle settings with Ctrl+,', async () => {
await browser.keys(['Control', ',']);
const panel = await browser.$('.sidebar-panel');
await panel.waitForDisplayed({ timeout: 3000 });
// Close with Ctrl+,
await browser.keys(['Control', ',']);
await panel.waitForDisplayed({ timeout: 3000, reverse: true });
});
it('should toggle sidebar with Ctrl+B', async () => {
// Open sidebar first
await browser.keys(['Control', ',']);
const panel = await browser.$('.sidebar-panel');
await panel.waitForDisplayed({ timeout: 3000 });
// Toggle off with Ctrl+B
await browser.keys(['Control', 'b']);
await panel.waitForDisplayed({ timeout: 3000, reverse: true });
});
it('should close sidebar with Escape', async () => {
// Open sidebar
await browser.keys(['Control', ',']);
const panel = await browser.$('.sidebar-panel');
await panel.waitForDisplayed({ timeout: 3000 });
// Close with Escape
await browser.keys('Escape');
await panel.waitForDisplayed({ timeout: 3000, reverse: true });
});
it('should show command palette with categorized commands', async () => {
await openCommandPalette();
const items = await browser.$$('.palette-item');
expect(items.length).toBeGreaterThanOrEqual(1);
// Commands should have labels
const cmdLabel = await browser.$('.palette-item .cmd-label');
await expect(cmdLabel).toBeDisplayed();
await closeCommandPalette();
});
});

76
tests/e2e/specs/phase-c-llm.test.ts Normal file
View file

@ -0,0 +1,76 @@
import { browser, expect } from '@wdio/globals';
import { isJudgeAvailable, assertWithJudge } from '../infra/llm-judge';
// Phase C — LLM-Judged Tests (C10–C11)
// Settings completeness and status bar completeness via LLM judge.
// ─── Scenario C10: LLM-Judged Settings Completeness ──────────────────
describe('Scenario C10 — LLM-Judged Settings Completeness', () => {
it('should have comprehensive settings panel', async function () {
if (!isJudgeAvailable()) {
console.log('Skipping — LLM judge not available (no CLI or API key)');
this.skip();
return;
}
// Open settings
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
const settingsContent = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
return panel?.textContent ?? '';
});
const verdict = await assertWithJudge(
'The settings panel should contain configuration options for: (1) theme/appearance, (2) font settings (UI and terminal), (3) default shell, and optionally (4) provider settings. It should look like a real settings UI, not an error message.',
settingsContent,
{ context: 'BTerminal v3 settings panel with Appearance section (theme dropdown, UI font, terminal font) and Defaults section (shell, CWD). May also have Providers section.' },
);
expect(verdict.pass).toBe(true);
if (!verdict.pass) {
console.log(`LLM Judge: ${verdict.reasoning} (confidence: ${verdict.confidence})`);
}
await browser.keys('Escape');
await browser.pause(300);
});
});
// ─── Scenario C11: LLM-Judged Status Bar ──────────────────────────────
describe('Scenario C11 — LLM-Judged Status Bar Completeness', () => {
it('should render a comprehensive status bar', async function () {
if (!isJudgeAvailable()) {
console.log('Skipping — LLM judge not available (no CLI or API key)');
this.skip();
return;
}
const statusBarContent = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
return bar?.textContent ?? '';
});
const statusBarHtml = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
return bar?.innerHTML ?? '';
});
const verdict = await assertWithJudge(
'The status bar should display agent fleet information including: agent status counts (idle/running/stalled with numbers), and optionally burn rate ($/hr) and cost tracking. It should look like a real monitoring dashboard status bar.',
`Text: ${statusBarContent}\n\nHTML structure: ${statusBarHtml.substring(0, 2000)}`,
{ context: 'BTerminal Mission Control status bar shows running/idle/stalled agent counts, total $/hr burn rate, attention queue, and total cost.' },
);
expect(verdict.pass).toBe(true);
if (!verdict.pass) {
console.log(`LLM Judge: ${verdict.reasoning} (confidence: ${verdict.confidence})`);
}
});
});

272
tests/e2e/specs/phase-c-tabs.test.ts Normal file
View file

@ -0,0 +1,272 @@
import { browser, expect } from '@wdio/globals';
// Phase C — Tab-Based Feature Tests (C5–C9)
// Settings panel, project health, metrics tab, context tab, files tab.
// ─── Helpers ──────────────────────────────────────────────────────────
/** Get all project box IDs currently rendered. */
async function getProjectIds(): Promise<string[]> {
return browser.execute(() => {
const boxes = document.querySelectorAll('[data-testid="project-box"]');
return Array.from(boxes).map(
(b) => b.getAttribute('data-project-id') ?? '',
).filter(Boolean);
});
}
/** Switch to a tab in a specific project box. */
async function switchProjectTab(projectId: string, tabIndex: number): Promise<void> {
await browser.execute((id, idx) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
if (tabs && tabs[idx]) (tabs[idx] as HTMLElement).click();
}, projectId, tabIndex);
await browser.pause(300);
}
// ─── Scenario C5: Settings Panel Sections ─────────────────────────────
describe('Scenario C5 — Settings Panel Sections', () => {
before(async () => {
// Reset UI to home state
const settingsPanel = await browser.$('.settings-panel');
if (await settingsPanel.isExisting()) {
const closeBtn = await browser.$('.settings-close');
if (await closeBtn.isExisting()) await closeBtn.click();
}
// Open settings
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
});
it('should show Appearance section with theme dropdown', async () => {
const hasTheme = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
if (!panel) return false;
const text = panel.textContent ?? '';
return text.toLowerCase().includes('theme') || text.toLowerCase().includes('appearance');
});
expect(hasTheme).toBe(true);
});
it('should show font settings (UI font and Terminal font)', async () => {
const hasFonts = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
if (!panel) return false;
const text = panel.textContent ?? '';
return text.toLowerCase().includes('font');
});
expect(hasFonts).toBe(true);
});
it('should show default shell setting', async () => {
const hasShell = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
if (!panel) return false;
const text = panel.textContent ?? '';
return text.toLowerCase().includes('shell');
});
expect(hasShell).toBe(true);
});
it('should have theme dropdown with 17 themes', async () => {
// Click the theme dropdown to see options
const themeCount = await browser.execute(() => {
// Find the theme dropdown (custom dropdown, not native select)
const dropdowns = document.querySelectorAll('.settings-tab .custom-dropdown, .settings-tab .dropdown');
for (const dd of dropdowns) {
const label = dd.closest('.settings-row, .setting-row')?.textContent ?? '';
if (label.toLowerCase().includes('theme')) {
// Click to open it
const trigger = dd.querySelector('.dropdown-trigger, .dropdown-selected, button');
if (trigger) (trigger as HTMLElement).click();
return -1; // Flag: opened dropdown
}
}
return 0;
});
if (themeCount === -1) {
// Dropdown was opened, wait and count options
await browser.pause(300);
const optionCount = await browser.execute(() => {
const options = document.querySelectorAll('.dropdown-option, .dropdown-item, .theme-option');
return options.length;
});
// Should have 17 themes
expect(optionCount).toBeGreaterThanOrEqual(15);
// Close dropdown
await browser.keys('Escape');
await browser.pause(200);
}
});
after(async () => {
await browser.keys('Escape');
await browser.pause(300);
});
});
// ─── Scenario C6: Project Health Indicators ───────────────────────────
describe('Scenario C6 — Project Health Indicators', () => {
it('should show status dots on project headers', async () => {
const hasDots = await browser.execute(() => {
const dots = document.querySelectorAll('.project-header .status-dot, .project-header .health-dot');
return dots.length;
});
// At least one project should have a status dot
expect(hasDots).toBeGreaterThanOrEqual(1);
});
it('should show idle status when no agents running', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const dotColor = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const dot = box?.querySelector('.status-dot, .health-dot');
if (!dot) return 'not-found';
const style = window.getComputedStyle(dot);
return style.backgroundColor || style.color || 'unknown';
}, ids[0]);
// Should have some color value (not 'not-found')
expect(dotColor).not.toBe('not-found');
});
it('should show status bar agent counts', async () => {
const counts = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
if (!bar) return '';
// Status bar shows running/idle/stalled counts
return bar.textContent ?? '';
});
// Should contain at least idle count
expect(counts).toMatch(/idle|running|stalled|\d/i);
});
});
// ─── Scenario C7: Metrics Tab ─────────────────────────────────────────
describe('Scenario C7 — Metrics Tab', () => {
it('should show Metrics tab in project tab bar', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const hasMetrics = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
if (!tabs) return false;
return Array.from(tabs).some(t => t.textContent?.trim().toLowerCase().includes('metric'));
}, ids[0]);
expect(hasMetrics).toBe(true);
});
it('should render Metrics panel content when tab clicked', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const projectId = ids[0];
// Find and click Metrics tab
await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
if (!tabs) return;
for (const tab of tabs) {
if (tab.textContent?.trim().toLowerCase().includes('metric')) {
(tab as HTMLElement).click();
break;
}
}
}, projectId);
await browser.pause(500);
const hasContent = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
// MetricsPanel has live view with fleet stats
const panel = box?.querySelector('.metrics-panel, .metrics-tab');
return panel !== null;
}, projectId);
expect(hasContent).toBe(true);
// Switch back to Model tab
await switchProjectTab(projectId, 0);
});
});
// ─── Scenario C8: Context Tab ─────────────────────────────────────────
describe('Scenario C8 — Context Tab Visualization', () => {
it('should render Context tab with token meter', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const projectId = ids[0];
// Switch to Context tab (index 2)
await switchProjectTab(projectId, 2);
const hasContextUI = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
// ContextTab has stats, token meter, file references
const ctx = box?.querySelector('.context-tab, .context-stats, .token-meter, .stat-value');
return ctx !== null;
}, projectId);
expect(hasContextUI).toBe(true);
// Switch back to Model tab
await switchProjectTab(projectId, 0);
});
});
// ─── Scenario C9: Files Tab with Editor ───────────────────────────────
describe('Scenario C9 — Files Tab & Code Editor', () => {
it('should render Files tab with directory tree', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const projectId = ids[0];
// Switch to Files tab (index 3)
await switchProjectTab(projectId, 3);
await browser.pause(500);
const hasTree = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
// FilesTab has a directory tree
const tree = box?.querySelector('.file-tree, .directory-tree, .files-tab');
return tree !== null;
}, projectId);
expect(hasTree).toBe(true);
});
it('should list files from the project directory', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const fileNames = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const items = box?.querySelectorAll('.tree-name');
return Array.from(items ?? []).map(el => el.textContent?.trim() ?? '');
}, ids[0]);
// Test project has README.md and hello.py
const hasFiles = fileNames.some(f =>
f.includes('README') || f.includes('hello') || f.includes('.py') || f.includes('.md'),
);
expect(hasFiles).toBe(true);
// Switch back to Model tab
await switchProjectTab(ids[0], 0);
});
});

279
tests/e2e/specs/phase-c-ui.test.ts Normal file
View file

@ -0,0 +1,279 @@
import { browser, expect } from '@wdio/globals';
// Phase C — UI Interaction Tests (C1–C4)
// Command palette, search overlay, notification center, keyboard navigation.
// ─── Helpers ──────────────────────────────────────────────────────────
/** Open command palette via Ctrl+K. */
async function openPalette(): Promise<void> {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Control', 'k']);
const palette = await browser.$('[data-testid="command-palette"]');
await palette.waitForDisplayed({ timeout: 3000 });
}
/** Close command palette via Escape. */
async function closePalette(): Promise<void> {
await browser.keys('Escape');
await browser.pause(300);
}
/** Type into palette input and get filtered results. */
async function paletteSearch(query: string): Promise<string[]> {
const input = await browser.$('[data-testid="palette-input"]');
await input.setValue(query);
await browser.pause(300);
return browser.execute(() => {
const items = document.querySelectorAll('.palette-item .cmd-label');
return Array.from(items).map(el => el.textContent?.trim() ?? '');
});
}
// ─── Scenario C1: Command Palette — Hardening Commands ────────────────
describe('Scenario C1 — Command Palette Hardening Commands', () => {
afterEach(async () => {
// Ensure palette is closed after each test
try {
const isVisible = await browser.execute(() => {
const el = document.querySelector('[data-testid="command-palette"]');
return el !== null && window.getComputedStyle(el).display !== 'none';
});
if (isVisible) {
await closePalette();
}
} catch {
// Ignore if palette doesn't exist
}
});
it('should find settings command in palette', async () => {
await openPalette();
const results = await paletteSearch('settings');
expect(results.length).toBeGreaterThanOrEqual(1);
const hasSettings = results.some(r => r.toLowerCase().includes('settings'));
expect(hasSettings).toBe(true);
});
it('should find terminal command in palette', async () => {
await openPalette();
const results = await paletteSearch('terminal');
expect(results.length).toBeGreaterThanOrEqual(1);
const hasTerminal = results.some(r => r.toLowerCase().includes('terminal'));
expect(hasTerminal).toBe(true);
});
it('should find keyboard shortcuts command in palette', async () => {
await openPalette();
const results = await paletteSearch('keyboard');
expect(results.length).toBeGreaterThanOrEqual(1);
const hasShortcuts = results.some(r => r.toLowerCase().includes('keyboard'));
expect(hasShortcuts).toBe(true);
});
it('should list all commands grouped by category when input is empty', async () => {
await openPalette();
const input = await browser.$('[data-testid="palette-input"]');
await input.clearValue();
await browser.pause(200);
const itemCount = await browser.execute(() =>
document.querySelectorAll('.palette-item').length,
);
// v3 has 18+ commands
expect(itemCount).toBeGreaterThanOrEqual(10);
// Commands should be organized in groups (categories)
const groups = await browser.execute(() => {
const headers = document.querySelectorAll('.palette-category');
return Array.from(headers).map(h => h.textContent?.trim() ?? '');
});
// Should have at least 2 command groups
expect(groups.length).toBeGreaterThanOrEqual(2);
});
});
// ─── Scenario C2: Search Overlay (Ctrl+Shift+F) ──────────────────────
describe('Scenario C2 — Search Overlay (FTS5)', () => {
it('should open search overlay with Ctrl+Shift+F', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Control', 'Shift', 'f']);
await browser.pause(500);
const overlay = await browser.execute(() => {
// SearchOverlay uses .search-overlay class
const el = document.querySelector('.search-overlay, [data-testid="search-overlay"]');
return el !== null;
});
expect(overlay).toBe(true);
});
it('should have search input focused', async () => {
const isFocused = await browser.execute(() => {
const input = document.querySelector('.search-overlay input, [data-testid="search-input"]') as HTMLInputElement | null;
if (!input) return false;
input.focus();
return input === document.activeElement;
});
expect(isFocused).toBe(true);
});
it('should show no results for nonsense query', async () => {
await browser.execute(() => {
const input = document.querySelector('.search-overlay input, [data-testid="search-input"]') as HTMLInputElement | null;
if (input) {
input.value = 'zzz_nonexistent_xyz_999';
input.dispatchEvent(new Event('input', { bubbles: true }));
}
});
await browser.pause(500); // 300ms debounce + render time
const resultCount = await browser.execute(() => {
const results = document.querySelectorAll('.search-result, .search-result-item');
return results.length;
});
expect(resultCount).toBe(0);
});
it('should close search overlay with Escape', async () => {
await browser.keys('Escape');
await browser.pause(300);
const overlay = await browser.execute(() => {
const el = document.querySelector('.search-overlay, [data-testid="search-overlay"]');
if (!el) return false;
const style = window.getComputedStyle(el);
return style.display !== 'none' && style.visibility !== 'hidden';
});
expect(overlay).toBe(false);
});
});
// ─── Scenario C3: Notification Center ─────────────────────────────────
describe('Scenario C3 — Notification Center', () => {
it('should render notification bell in status bar', async () => {
const hasBell = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
// NotificationCenter is in status bar with bell icon
const bell = bar?.querySelector('.notification-bell, .bell-icon, [data-testid="notification-bell"]');
return bell !== null;
});
expect(hasBell).toBe(true);
});
it('should open notification panel on bell click', async () => {
await browser.execute(() => {
const bell = document.querySelector('.notification-bell, .bell-icon, [data-testid="notification-bell"]');
if (bell) (bell as HTMLElement).click();
});
await browser.pause(300);
const panelOpen = await browser.execute(() => {
const panel = document.querySelector('.notification-panel, .notification-dropdown, [data-testid="notification-panel"]');
if (!panel) return false;
const style = window.getComputedStyle(panel);
return style.display !== 'none';
});
expect(panelOpen).toBe(true);
});
it('should show empty state or notification history', async () => {
const content = await browser.execute(() => {
const panel = document.querySelector('.notification-panel, .notification-dropdown, [data-testid="notification-panel"]');
return panel?.textContent ?? '';
});
// Panel should have some text content (either "No notifications" or actual notifications)
expect(content.length).toBeGreaterThan(0);
});
it('should close notification panel on outside click', async () => {
// Click the backdrop overlay to close the panel
await browser.execute(() => {
const backdrop = document.querySelector('.notification-center .backdrop');
if (backdrop) (backdrop as HTMLElement).click();
});
await browser.pause(300);
const panelOpen = await browser.execute(() => {
const panel = document.querySelector('.notification-panel, .notification-dropdown, [data-testid="notification-panel"]');
if (!panel) return false;
const style = window.getComputedStyle(panel);
return style.display !== 'none';
});
expect(panelOpen).toBe(false);
});
});
// ─── Scenario C4: Keyboard Navigation ────────────────────────────────
describe('Scenario C4 — Keyboard-First Navigation', () => {
it('should toggle settings with Ctrl+Comma', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Control', ',']);
await browser.pause(500);
const settingsVisible = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel');
if (!panel) return false;
const style = window.getComputedStyle(panel);
return style.display !== 'none';
});
expect(settingsVisible).toBe(true);
// Close it
await browser.keys('Escape');
await browser.pause(300);
});
it('should toggle sidebar with Ctrl+B', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
// First open settings to have sidebar content
await browser.keys(['Control', ',']);
await browser.pause(300);
const initialState = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel');
return panel !== null && window.getComputedStyle(panel).display !== 'none';
});
// Toggle sidebar
await browser.keys(['Control', 'b']);
await browser.pause(300);
const afterToggle = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel');
if (!panel) return false;
return window.getComputedStyle(panel).display !== 'none';
});
// State should have changed
if (initialState) {
expect(afterToggle).toBe(false);
}
// Clean up — close sidebar if still open
await browser.keys('Escape');
await browser.pause(200);
});
it('should focus project with Alt+1', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Alt', '1']);
await browser.pause(300);
const hasActive = await browser.execute(() => {
const active = document.querySelector('.project-box.active');
return active !== null;
});
expect(hasActive).toBe(true);
});
});

626
tests/e2e/specs/phase-c.test.ts
View file

@ -1,626 +0,0 @@
import { browser, expect } from '@wdio/globals';
import { isJudgeAvailable, assertWithJudge } from '../infra/llm-judge';
// Phase C: Hardening feature tests.
// Tests the v3 production-readiness features added in the hardening sprint:
// - Command palette new commands
// - Search overlay (Ctrl+Shift+F)
// - Notification center
// - Keyboard shortcuts (vi-nav, project jump)
// - Settings panel new sections
// - Error states and recovery UI
// ─── Helpers ──────────────────────────────────────────────────────────
/** Get all project box IDs currently rendered. */
async function getProjectIds(): Promise<string[]> {
return browser.execute(() => {
const boxes = document.querySelectorAll('[data-testid="project-box"]');
return Array.from(boxes).map(
(b) => b.getAttribute('data-project-id') ?? '',
).filter(Boolean);
});
}
/** Focus a specific project box by its project ID. */
async function focusProject(projectId: string): Promise<void> {
await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const header = box?.querySelector('.project-header');
if (header) (header as HTMLElement).click();
}, projectId);
await browser.pause(300);
}
/** Switch to a tab in a specific project box. */
async function switchProjectTab(projectId: string, tabIndex: number): Promise<void> {
await browser.execute((id, idx) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
if (tabs && tabs[idx]) (tabs[idx] as HTMLElement).click();
}, projectId, tabIndex);
await browser.pause(300);
}
/** Open command palette via Ctrl+K. */
async function openPalette(): Promise<void> {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Control', 'k']);
const palette = await browser.$('[data-testid="command-palette"]');
await palette.waitForDisplayed({ timeout: 3000 });
}
/** Close command palette via Escape. */
async function closePalette(): Promise<void> {
await browser.keys('Escape');
await browser.pause(300);
}
/** Type into palette input and get filtered results. */
async function paletteSearch(query: string): Promise<string[]> {
const input = await browser.$('[data-testid="palette-input"]');
await input.setValue(query);
await browser.pause(300);
return browser.execute(() => {
const items = document.querySelectorAll('.palette-item .cmd-label');
return Array.from(items).map(el => el.textContent?.trim() ?? '');
});
}
// ─── Scenario C1: Command Palette — Hardening Commands ────────────────
describe('Scenario C1 — Command Palette Hardening Commands', () => {
afterEach(async () => {
// Ensure palette is closed after each test
try {
const isVisible = await browser.execute(() => {
const el = document.querySelector('[data-testid="command-palette"]');
return el !== null && window.getComputedStyle(el).display !== 'none';
});
if (isVisible) {
await closePalette();
}
} catch {
// Ignore if palette doesn't exist
}
});
it('should find settings command in palette', async () => {
await openPalette();
const results = await paletteSearch('settings');
expect(results.length).toBeGreaterThanOrEqual(1);
const hasSettings = results.some(r => r.toLowerCase().includes('settings'));
expect(hasSettings).toBe(true);
});
it('should find terminal command in palette', async () => {
await openPalette();
const results = await paletteSearch('terminal');
expect(results.length).toBeGreaterThanOrEqual(1);
const hasTerminal = results.some(r => r.toLowerCase().includes('terminal'));
expect(hasTerminal).toBe(true);
});
it('should find keyboard shortcuts command in palette', async () => {
await openPalette();
const results = await paletteSearch('keyboard');
expect(results.length).toBeGreaterThanOrEqual(1);
const hasShortcuts = results.some(r => r.toLowerCase().includes('keyboard'));
expect(hasShortcuts).toBe(true);
});
it('should list all commands grouped by category when input is empty', async () => {
await openPalette();
const input = await browser.$('[data-testid="palette-input"]');
await input.clearValue();
await browser.pause(200);
const itemCount = await browser.execute(() =>
document.querySelectorAll('.palette-item').length,
);
// v3 has 18+ commands
expect(itemCount).toBeGreaterThanOrEqual(10);
// Commands should be organized in groups (categories)
const groups = await browser.execute(() => {
const headers = document.querySelectorAll('.palette-category');
return Array.from(headers).map(h => h.textContent?.trim() ?? '');
});
// Should have at least 2 command groups
expect(groups.length).toBeGreaterThanOrEqual(2);
});
});
// ─── Scenario C2: Search Overlay (Ctrl+Shift+F) ──────────────────────
describe('Scenario C2 — Search Overlay (FTS5)', () => {
it('should open search overlay with Ctrl+Shift+F', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Control', 'Shift', 'f']);
await browser.pause(500);
const overlay = await browser.execute(() => {
// SearchOverlay uses .search-overlay class
const el = document.querySelector('.search-overlay, [data-testid="search-overlay"]');
return el !== null;
});
expect(overlay).toBe(true);
});
it('should have search input focused', async () => {
const isFocused = await browser.execute(() => {
const input = document.querySelector('.search-overlay input, [data-testid="search-input"]') as HTMLInputElement | null;
if (!input) return false;
input.focus();
return input === document.activeElement;
});
expect(isFocused).toBe(true);
});
it('should show no results for nonsense query', async () => {
await browser.execute(() => {
const input = document.querySelector('.search-overlay input, [data-testid="search-input"]') as HTMLInputElement | null;
if (input) {
input.value = 'zzz_nonexistent_xyz_999';
input.dispatchEvent(new Event('input', { bubbles: true }));
}
});
await browser.pause(500); // 300ms debounce + render time
const resultCount = await browser.execute(() => {
const results = document.querySelectorAll('.search-result, .search-result-item');
return results.length;
});
expect(resultCount).toBe(0);
});
it('should close search overlay with Escape', async () => {
await browser.keys('Escape');
await browser.pause(300);
const overlay = await browser.execute(() => {
const el = document.querySelector('.search-overlay, [data-testid="search-overlay"]');
if (!el) return false;
const style = window.getComputedStyle(el);
return style.display !== 'none' && style.visibility !== 'hidden';
});
expect(overlay).toBe(false);
});
});
// ─── Scenario C3: Notification Center ─────────────────────────────────
describe('Scenario C3 — Notification Center', () => {
it('should render notification bell in status bar', async () => {
const hasBell = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
// NotificationCenter is in status bar with bell icon
const bell = bar?.querySelector('.notification-bell, .bell-icon, [data-testid="notification-bell"]');
return bell !== null;
});
expect(hasBell).toBe(true);
});
it('should open notification panel on bell click', async () => {
await browser.execute(() => {
const bell = document.querySelector('.notification-bell, .bell-icon, [data-testid="notification-bell"]');
if (bell) (bell as HTMLElement).click();
});
await browser.pause(300);
const panelOpen = await browser.execute(() => {
const panel = document.querySelector('.notification-panel, .notification-dropdown, [data-testid="notification-panel"]');
if (!panel) return false;
const style = window.getComputedStyle(panel);
return style.display !== 'none';
});
expect(panelOpen).toBe(true);
});
it('should show empty state or notification history', async () => {
const content = await browser.execute(() => {
const panel = document.querySelector('.notification-panel, .notification-dropdown, [data-testid="notification-panel"]');
return panel?.textContent ?? '';
});
// Panel should have some text content (either "No notifications" or actual notifications)
expect(content.length).toBeGreaterThan(0);
});
it('should close notification panel on outside click', async () => {
// Click the backdrop overlay to close the panel
await browser.execute(() => {
const backdrop = document.querySelector('.notification-center .backdrop');
if (backdrop) (backdrop as HTMLElement).click();
});
await browser.pause(300);
const panelOpen = await browser.execute(() => {
const panel = document.querySelector('.notification-panel, .notification-dropdown, [data-testid="notification-panel"]');
if (!panel) return false;
const style = window.getComputedStyle(panel);
return style.display !== 'none';
});
expect(panelOpen).toBe(false);
});
});
// ─── Scenario C4: Keyboard Navigation ────────────────────────────────
describe('Scenario C4 — Keyboard-First Navigation', () => {
it('should toggle settings with Ctrl+Comma', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Control', ',']);
await browser.pause(500);
const settingsVisible = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel');
if (!panel) return false;
const style = window.getComputedStyle(panel);
return style.display !== 'none';
});
expect(settingsVisible).toBe(true);
// Close it
await browser.keys('Escape');
await browser.pause(300);
});
it('should toggle sidebar with Ctrl+B', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
// First open settings to have sidebar content
await browser.keys(['Control', ',']);
await browser.pause(300);
const initialState = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel');
return panel !== null && window.getComputedStyle(panel).display !== 'none';
});
// Toggle sidebar
await browser.keys(['Control', 'b']);
await browser.pause(300);
const afterToggle = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel');
if (!panel) return false;
return window.getComputedStyle(panel).display !== 'none';
});
// State should have changed
if (initialState) {
expect(afterToggle).toBe(false);
}
// Clean up — close sidebar if still open
await browser.keys('Escape');
await browser.pause(200);
});
it('should focus project with Alt+1', async () => {
await browser.execute(() => document.body.focus());
await browser.pause(100);
await browser.keys(['Alt', '1']);
await browser.pause(300);
const hasActive = await browser.execute(() => {
const active = document.querySelector('.project-box.active');
return active !== null;
});
expect(hasActive).toBe(true);
});
});
// ─── Scenario C5: Settings Panel Sections ─────────────────────────────
describe('Scenario C5 — Settings Panel Sections', () => {
before(async () => {
// Open settings
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
});
it('should show Appearance section with theme dropdown', async () => {
const hasTheme = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
if (!panel) return false;
const text = panel.textContent ?? '';
return text.toLowerCase().includes('theme') || text.toLowerCase().includes('appearance');
});
expect(hasTheme).toBe(true);
});
it('should show font settings (UI font and Terminal font)', async () => {
const hasFonts = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
if (!panel) return false;
const text = panel.textContent ?? '';
return text.toLowerCase().includes('font');
});
expect(hasFonts).toBe(true);
});
it('should show default shell setting', async () => {
const hasShell = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
if (!panel) return false;
const text = panel.textContent ?? '';
return text.toLowerCase().includes('shell');
});
expect(hasShell).toBe(true);
});
it('should have theme dropdown with 17 themes', async () => {
// Click the theme dropdown to see options
const themeCount = await browser.execute(() => {
// Find the theme dropdown (custom dropdown, not native select)
const dropdowns = document.querySelectorAll('.settings-tab .custom-dropdown, .settings-tab .dropdown');
for (const dd of dropdowns) {
const label = dd.closest('.settings-row, .setting-row')?.textContent ?? '';
if (label.toLowerCase().includes('theme')) {
// Click to open it
const trigger = dd.querySelector('.dropdown-trigger, .dropdown-selected, button');
if (trigger) (trigger as HTMLElement).click();
return -1; // Flag: opened dropdown
}
}
return 0;
});
if (themeCount === -1) {
// Dropdown was opened, wait and count options
await browser.pause(300);
const optionCount = await browser.execute(() => {
const options = document.querySelectorAll('.dropdown-option, .dropdown-item, .theme-option');
return options.length;
});
// Should have 17 themes
expect(optionCount).toBeGreaterThanOrEqual(15);
// Close dropdown
await browser.keys('Escape');
await browser.pause(200);
}
});
after(async () => {
await browser.keys('Escape');
await browser.pause(300);
});
});
// ─── Scenario C6: Project Health Indicators ───────────────────────────
describe('Scenario C6 — Project Health Indicators', () => {
it('should show status dots on project headers', async () => {
const hasDots = await browser.execute(() => {
const dots = document.querySelectorAll('.project-header .status-dot, .project-header .health-dot');
return dots.length;
});
// At least one project should have a status dot
expect(hasDots).toBeGreaterThanOrEqual(1);
});
it('should show idle status when no agents running', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const dotColor = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const dot = box?.querySelector('.status-dot, .health-dot');
if (!dot) return 'not-found';
const style = window.getComputedStyle(dot);
return style.backgroundColor || style.color || 'unknown';
}, ids[0]);
// Should have some color value (not 'not-found')
expect(dotColor).not.toBe('not-found');
});
it('should show status bar agent counts', async () => {
const counts = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
if (!bar) return '';
// Status bar shows running/idle/stalled counts
return bar.textContent ?? '';
});
// Should contain at least idle count
expect(counts).toMatch(/idle|running|stalled|\d/i);
});
});
// ─── Scenario C7: Metrics Tab ─────────────────────────────────────────
describe('Scenario C7 — Metrics Tab', () => {
it('should show Metrics tab in project tab bar', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const hasMetrics = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
if (!tabs) return false;
return Array.from(tabs).some(t => t.textContent?.trim().toLowerCase().includes('metric'));
}, ids[0]);
expect(hasMetrics).toBe(true);
});
it('should render Metrics panel content when tab clicked', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const projectId = ids[0];
// Find and click Metrics tab
await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const tabs = box?.querySelectorAll('[data-testid="project-tabs"] .ptab');
if (!tabs) return;
for (const tab of tabs) {
if (tab.textContent?.trim().toLowerCase().includes('metric')) {
(tab as HTMLElement).click();
break;
}
}
}, projectId);
await browser.pause(500);
const hasContent = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
// MetricsPanel has live view with fleet stats
const panel = box?.querySelector('.metrics-panel, .metrics-tab');
return panel !== null;
}, projectId);
expect(hasContent).toBe(true);
// Switch back to Model tab
await switchProjectTab(projectId, 0);
});
});
// ─── Scenario C8: Context Tab ─────────────────────────────────────────
describe('Scenario C8 — Context Tab Visualization', () => {
it('should render Context tab with token meter', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const projectId = ids[0];
// Switch to Context tab (index 2)
await switchProjectTab(projectId, 2);
const hasContextUI = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
// ContextTab has stats, token meter, file references
const ctx = box?.querySelector('.context-tab, .context-stats, .token-meter, .stat-value');
return ctx !== null;
}, projectId);
expect(hasContextUI).toBe(true);
// Switch back to Model tab
await switchProjectTab(projectId, 0);
});
});
// ─── Scenario C9: Files Tab with Editor ───────────────────────────────
describe('Scenario C9 — Files Tab & Code Editor', () => {
it('should render Files tab with directory tree', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const projectId = ids[0];
// Switch to Files tab (index 3)
await switchProjectTab(projectId, 3);
await browser.pause(500);
const hasTree = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
// FilesTab has a directory tree
const tree = box?.querySelector('.file-tree, .directory-tree, .files-tab');
return tree !== null;
}, projectId);
expect(hasTree).toBe(true);
});
it('should list files from the project directory', async () => {
const ids = await getProjectIds();
if (ids.length < 1) return;
const fileNames = await browser.execute((id) => {
const box = document.querySelector(`[data-project-id="${id}"]`);
const items = box?.querySelectorAll('.tree-name');
return Array.from(items ?? []).map(el => el.textContent?.trim() ?? '');
}, ids[0]);
// Test project has README.md and hello.py
const hasFiles = fileNames.some(f =>
f.includes('README') || f.includes('hello') || f.includes('.py') || f.includes('.md'),
);
expect(hasFiles).toBe(true);
// Switch back to Model tab
await switchProjectTab(ids[0], 0);
});
});
// ─── Scenario C10: LLM-Judged Settings Completeness ──────────────────
describe('Scenario C10 — LLM-Judged Settings Completeness', () => {
it('should have comprehensive settings panel', async function () {
if (!isJudgeAvailable()) {
console.log('Skipping — LLM judge not available (no CLI or API key)');
this.skip();
return;
}
// Open settings
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
const settingsContent = await browser.execute(() => {
const panel = document.querySelector('.sidebar-panel, .settings-tab');
return panel?.textContent ?? '';
});
const verdict = await assertWithJudge(
'The settings panel should contain configuration options for: (1) theme/appearance, (2) font settings (UI and terminal), (3) default shell, and optionally (4) provider settings. It should look like a real settings UI, not an error message.',
settingsContent,
{ context: 'BTerminal v3 settings panel with Appearance section (theme dropdown, UI font, terminal font) and Defaults section (shell, CWD). May also have Providers section.' },
);
expect(verdict.pass).toBe(true);
if (!verdict.pass) {
console.log(`LLM Judge: ${verdict.reasoning} (confidence: ${verdict.confidence})`);
}
await browser.keys('Escape');
await browser.pause(300);
});
});
// ─── Scenario C11: LLM-Judged Status Bar ──────────────────────────────
describe('Scenario C11 — LLM-Judged Status Bar Completeness', () => {
it('should render a comprehensive status bar', async function () {
if (!isJudgeAvailable()) {
console.log('Skipping — LLM judge not available (no CLI or API key)');
this.skip();
return;
}
const statusBarContent = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
return bar?.textContent ?? '';
});
const statusBarHtml = await browser.execute(() => {
const bar = document.querySelector('[data-testid="status-bar"]');
return bar?.innerHTML ?? '';
});
const verdict = await assertWithJudge(
'The status bar should display agent fleet information including: agent status counts (idle/running/stalled with numbers), and optionally burn rate ($/hr) and cost tracking. It should look like a real monitoring dashboard status bar.',
`Text: ${statusBarContent}\n\nHTML structure: ${statusBarHtml.substring(0, 2000)}`,
{ context: 'BTerminal Mission Control status bar shows running/idle/stalled agent counts, total $/hr burn rate, attention queue, and total cost.' },
);
expect(verdict.pass).toBe(true);
if (!verdict.pass) {
console.log(`LLM Judge: ${verdict.reasoning} (confidence: ${verdict.confidence})`);
}
});
});

247
tests/e2e/specs/settings.test.ts Normal file
View file

@ -0,0 +1,247 @@
import { browser, expect } from '@wdio/globals';
/** Reset UI to home state (close any open panels/overlays). */
async function resetToHomeState(): Promise<void> {
const settingsPanel = await browser.$('.settings-panel');
if (await settingsPanel.isExisting()) {
const closeBtn = await browser.$('.settings-close');
if (await closeBtn.isExisting()) await closeBtn.click();
}
const overlay = await browser.$('.search-overlay');
if (await overlay.isExisting()) await browser.keys('Escape');
}
/** Open the settings panel, waiting for content to render. */
async function openSettings(): Promise<void> {
const panel = await browser.$('.sidebar-panel');
const isOpen = await panel.isDisplayed().catch(() => false);
if (!isOpen) {
// Use data-testid for unambiguous selection
await browser.execute(() => {
const btn = document.querySelector('[data-testid="settings-btn"]');
if (btn) (btn as HTMLElement).click();
});
await panel.waitForDisplayed({ timeout: 5000 });
}
// Wait for settings content to mount
await browser.waitUntil(
async () => {
const count = await browser.execute(() =>
document.querySelectorAll('.settings-tab .settings-section').length,
);
return (count as number) >= 1;
},
{ timeout: 5000, timeoutMsg: 'Settings sections did not render within 5s' },
);
await browser.pause(200);
}
/** Close the settings panel if open. */
async function closeSettings(): Promise<void> {
const panel = await browser.$('.sidebar-panel');
if (await panel.isDisplayed().catch(() => false)) {
await browser.execute(() => {
const btn = document.querySelector('.panel-close');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
}
}
describe('BTerminal — Settings Panel', () => {
before(async () => {
await resetToHomeState();
await openSettings();
});
after(async () => {
await closeSettings();
});
it('should display the settings tab container', async () => {
const settingsTab = await browser.$('.settings-tab');
await expect(settingsTab).toBeDisplayed();
});
it('should show settings sections', async () => {
const sections = await browser.$$('.settings-section');
expect(sections.length).toBeGreaterThanOrEqual(1);
});
it('should display theme dropdown', async () => {
const dropdown = await browser.$('.custom-dropdown .dropdown-trigger');
await expect(dropdown).toBeDisplayed();
});
it('should open theme dropdown and show options', async () => {
// Use JS click — WebDriver clicks don't reliably trigger Svelte onclick
// on buttons inside scrollable panels via WebKit2GTK/tauri-driver
await browser.execute(() => {
const trigger = document.querySelector('.custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(500);
const menu = await browser.$('.dropdown-menu');
await menu.waitForExist({ timeout: 3000 });
const options = await browser.$$('.dropdown-option');
expect(options.length).toBeGreaterThan(0);
// Close dropdown by clicking trigger again
await browser.execute(() => {
const trigger = document.querySelector('.custom-dropdown .dropdown-trigger');
if (trigger) (trigger as HTMLElement).click();
});
await browser.pause(300);
});
it('should display group list', async () => {
// Groups section is below Appearance/Defaults/Providers — scroll into view
await browser.execute(() => {
const el = document.querySelector('.group-list');
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
});
await browser.pause(300);
const groupList = await browser.$('.group-list');
await expect(groupList).toBeDisplayed();
});
it('should close settings panel with close button', async () => {
// Ensure settings is open
await openSettings();
// Use JS click for reliability
await browser.execute(() => {
const btn = document.querySelector('.panel-close');
if (btn) (btn as HTMLElement).click();
});
await browser.pause(500);
const panel = await browser.$('.sidebar-panel');
await expect(panel).not.toBeDisplayed();
});
});
describe('BTerminal — Settings Interaction', () => {
before(async () => {
await resetToHomeState();
await openSettings();
// Scroll to top for font controls
await browser.execute(() => {
const content = document.querySelector('.panel-content') || document.querySelector('.sidebar-panel');
if (content) content.scrollTop = 0;
});
await browser.pause(300);
});
after(async () => {
await closeSettings();
});
it('should show font size controls with increment/decrement', async () => {
const sizeControls = await browser.$$('.size-control');
expect(sizeControls.length).toBeGreaterThanOrEqual(1);
const sizeBtns = await browser.$$('.size-btn');
expect(sizeBtns.length).toBeGreaterThanOrEqual(2); // at least - and + for one control
const sizeInput = await browser.$('.size-input');
await expect(sizeInput).toBeExisting();
});
it('should increment font size', async () => {
const sizeInput = await browser.$('.size-input');
const valueBefore = await sizeInput.getValue();
// Click the + button (second .size-btn in first .size-control)
await browser.execute(() => {
const btns = document.querySelectorAll('.size-control .size-btn');
// Second button is + (first is -)
if (btns.length >= 2) (btns[1] as HTMLElement).click();
});
await browser.pause(300);
const afterEl = await browser.$('.size-input');
const valueAfter = await afterEl.getValue();
expect(parseInt(valueAfter as string)).toBe(parseInt(valueBefore as string) + 1);
});
it('should decrement font size back', async () => {
const sizeInput = await browser.$('.size-input');
const valueBefore = await sizeInput.getValue();
// Click the - button (first .size-btn)
await browser.execute(() => {
const btns = document.querySelectorAll('.size-control .size-btn');
if (btns.length >= 1) (btns[0] as HTMLElement).click();
});
await browser.pause(300);
const afterEl = await browser.$('.size-input');
const valueAfter = await afterEl.getValue();
expect(parseInt(valueAfter as string)).toBe(parseInt(valueBefore as string) - 1);
});
it('should display group rows with active indicator', async () => {
// Scroll to Groups section (below Appearance, Defaults, Providers)
await browser.execute(() => {
const el = document.querySelector('.group-list');
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
});
await browser.pause(300);
const groupRows = await browser.$$('.group-row');
expect(groupRows.length).toBeGreaterThanOrEqual(1);
const activeGroup = await browser.$('.group-row.active');
await expect(activeGroup).toBeExisting();
});
it('should show project cards', async () => {
// Scroll to Projects section
await browser.execute(() => {
const el = document.querySelector('.project-cards');
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
});
await browser.pause(300);
const cards = await browser.$$('.project-card');
expect(cards.length).toBeGreaterThanOrEqual(1);
});
it('should display project card with name and path', async () => {
const nameInput = await browser.$('.card-name-input');
await expect(nameInput).toBeExisting();
const name = await nameInput.getValue() as string;
expect(name.length).toBeGreaterThan(0);
const cwdInput = await browser.$('.cwd-input');
await expect(cwdInput).toBeExisting();
const cwd = await cwdInput.getValue() as string;
expect(cwd.length).toBeGreaterThan(0);
});
it('should show project toggle switch', async () => {
const toggle = await browser.$('.card-toggle');
await expect(toggle).toBeExisting();
const track = await browser.$('.toggle-track');
await expect(track).toBeDisplayed();
});
it('should show add project form', async () => {
// Scroll to add project form (at bottom of Projects section)
await browser.execute(() => {
const el = document.querySelector('.add-project-form');
if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
});
await browser.pause(300);
const addForm = await browser.$('.add-project-form');
await expect(addForm).toBeDisplayed();
const addBtn = await browser.$('.add-project-form .btn-primary');
await expect(addBtn).toBeExisting();
});
});

47
tests/e2e/specs/smoke.test.ts Normal file
View file

@ -0,0 +1,47 @@
import { browser, expect } from '@wdio/globals';
describe('BTerminal — Smoke Tests', () => {
it('should render the application window', async () => {
// Wait for the app to fully load before any tests
await browser.waitUntil(
async () => (await browser.getTitle()) === 'BTerminal',
{ timeout: 10_000, timeoutMsg: 'App did not load within 10s' },
);
const title = await browser.getTitle();
expect(title).toBe('BTerminal');
});
it('should display the status bar', async () => {
const statusBar = await browser.$('.status-bar');
await expect(statusBar).toBeDisplayed();
});
it('should show version text in status bar', async () => {
const version = await browser.$('.status-bar .version');
await expect(version).toBeDisplayed();
const text = await version.getText();
expect(text).toContain('BTerminal');
});
it('should display the sidebar rail', async () => {
const sidebarRail = await browser.$('.sidebar-rail');
await expect(sidebarRail).toBeDisplayed();
});
it('should display the workspace area', async () => {
const workspace = await browser.$('.workspace');
await expect(workspace).toBeDisplayed();
});
it('should toggle sidebar with settings button', async () => {
const settingsBtn = await browser.$('.rail-btn');
await settingsBtn.click();
const sidebarPanel = await browser.$('.sidebar-panel');
await expect(sidebarPanel).toBeDisplayed();
// Click again to close
await settingsBtn.click();
await expect(sidebarPanel).not.toBeDisplayed();
});
});

79
tests/e2e/specs/workspace.test.ts Normal file
View file

@ -0,0 +1,79 @@
import { browser, expect } from '@wdio/globals';
describe('BTerminal — Workspace & Projects', () => {
it('should display the project grid', async () => {
const grid = await browser.$('.project-grid');
await expect(grid).toBeDisplayed();
});
it('should render at least one project box', async () => {
const boxes = await browser.$$('.project-box');
expect(boxes.length).toBeGreaterThanOrEqual(1);
});
it('should show project header with name', async () => {
const header = await browser.$('.project-header');
await expect(header).toBeDisplayed();
const name = await browser.$('.project-name');
const text = await name.getText();
expect(text.length).toBeGreaterThan(0);
});
it('should show project-level tabs (Model, Docs, Context, Files, SSH, Memory, ...)', async () => {
const box = await browser.$('.project-box');
const tabs = await box.$$('.ptab');
// v3 has 6+ tabs: Model, Docs, Context, Files, SSH, Memory (+ role-specific)
expect(tabs.length).toBeGreaterThanOrEqual(6);
});
it('should highlight active project on click', async () => {
const header = await browser.$('.project-header');
await header.click();
const activeBox = await browser.$('.project-box.active');
await expect(activeBox).toBeDisplayed();
});
it('should switch project tabs', async () => {
// Use JS click — WebDriver clicks don't always trigger Svelte onclick
// on buttons inside complex components via WebKit2GTK/tauri-driver
const switched = await browser.execute(() => {
const box = document.querySelector('.project-box');
if (!box) return false;
const tabs = box.querySelectorAll('.ptab');
if (tabs.length < 2) return false;
(tabs[1] as HTMLElement).click();
return true;
});
expect(switched).toBe(true);
await browser.pause(500);
const box = await browser.$('.project-box');
const activeTab = await box.$('.ptab.active');
const text = await activeTab.getText();
// Tab[1] is "Docs" in v3 tab bar (Model, Docs, Context, Files, ...)
expect(text.toLowerCase()).toContain('docs');
// Switch back to Model tab
await browser.execute(() => {
const tab = document.querySelector('.project-box .ptab');
if (tab) (tab as HTMLElement).click();
});
await browser.pause(300);
});
it('should display the status bar with project count', async () => {
const statusBar = await browser.$('.status-bar .left');
const text = await statusBar.getText();
expect(text).toContain('projects');
});
it('should display project and agent info in status bar', async () => {
const statusBar = await browser.$('.status-bar .left');
const text = await statusBar.getText();
// Status bar always shows project count; agent counts only when > 0
// (shows "X running", "X idle", "X stalled" — not the word "agents")
expect(text).toContain('projects');
});
});

9
tests/e2e/wdio.conf.js
View file

@ -40,10 +40,15 @@ export const config = {
// Single spec file — Tauri launches one app instance per session, // Single spec file — Tauri launches one app instance per session,
// and tauri-driver can't re-create sessions between spec files. // and tauri-driver can't re-create sessions between spec files.
specs: [ specs: [
resolve(projectRoot, 'tests/e2e/specs/agor.test.ts'), resolve(projectRoot, 'tests/e2e/specs/smoke.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/workspace.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/settings.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/features.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/agent-scenarios.test.ts'), resolve(projectRoot, 'tests/e2e/specs/agent-scenarios.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/phase-b.test.ts'), resolve(projectRoot, 'tests/e2e/specs/phase-b.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/phase-c.test.ts'), resolve(projectRoot, 'tests/e2e/specs/phase-c-ui.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/phase-c-tabs.test.ts'),
resolve(projectRoot, 'tests/e2e/specs/phase-c-llm.test.ts'),
], ],
// ── Capabilities ── // ── Capabilities ──