test(e2e): add Phase D/E/F specs covering new architecture (54 tests)
Phase D — Settings & Error Handling: - D1: Settings panel 6-category tabs, search, active highlighting - D2: Appearance settings (themes, fonts, cursor, scrollback) - D3: Theme Editor (color pickers, groups, save/cancel) - D4: Toast notifications, notification center bell/dropdown - D5: Error states (no loadError warnings, status bar) Phase E — Agents & Health: - E1: ProjectBox tab bar (7+ tabs, PERSISTED-LAZY switching) - E2: Agent session UI (prompt input, context meter, cost) - E3: Provider configuration (panels, capabilities, toggles) - E4: Status bar fleet state (counts, cost, attention queue) - E5: Project health indicators (status dot, CWD, pressure, burn rate) - E6: Metrics tab (fleet aggregates, health cards, Live/History) - E7: Conflict detection (no false badges on fresh launch) - E8: Audit log (manager-only tab, toolbar, entries) Phase F — Search & LLM Quality: - F1: Search overlay (Ctrl+Shift+F, input, empty state, close) - F2: Context tab & anchors (visualization, budget scale) - F3: SSH tab (connection list, add button) - F4-F7: LLM-judged quality (settings completeness, theme editor, error messages, overall UI consistency)
This commit is contained in:
Hibryda
parent
6f247da514
commit
56971c3f27
7 changed files with 1541 additions and 0 deletions
296
tests/e2e/specs/phase-e-health.test.ts
Normal file
296
tests/e2e/specs/phase-e-health.test.ts
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
import { browser, expect } from '@wdio/globals';
|
||||
|
||||
//
|
||||
|
||||
|
||||
/** Switch to a tab by text content in the first project box. */
|
||||
async function clickTabByText(tabText: string): Promise<void> {
|
||||
await browser.execute((text) => {
|
||||
const tabs = document.querySelectorAll('[data-testid="project-tabs"] .ptab');
|
||||
for (const tab of tabs) {
|
||||
if (tab.textContent?.trim() === text) {
|
||||
(tab as HTMLElement).click();
|
||||
return;
|
||||
}
|
||||
}
|
||||
}, tabText);
|
||||
await browser.pause(400);
|
||||
}
|
||||
|
||||
/** Get the active tab text in the first project box. */
|
||||
async function getActiveTabText(): Promise<string> {
|
||||
return browser.execute(() => {
|
||||
const box = document.querySelector('[data-testid="project-box"]');
|
||||
const active = box?.querySelector('[data-testid="project-tabs"] .ptab.active');
|
||||
return active?.textContent?.trim() ?? '';
|
||||
});
|
||||
}
|
||||
|
||||
/** Check if a tab with given text exists in any project box. */
|
||||
async function tabExistsWithText(tabText: string): Promise<boolean> {
|
||||
return browser.execute((text) => {
|
||||
const tabs = document.querySelectorAll('[data-testid="project-tabs"] .ptab');
|
||||
return Array.from(tabs).some((t) => t.textContent?.trim() === text);
|
||||
}, tabText);
|
||||
}
|
||||
|
||||
|
||||
describe('Scenario E5 — Project Health Indicators', () => {
|
||||
before(async () => {
|
||||
await browser.waitUntil(
|
||||
async () => {
|
||||
const count = await browser.execute(() =>
|
||||
document.querySelectorAll('[data-testid="project-box"]').length,
|
||||
);
|
||||
return (count as number) >= 1;
|
||||
},
|
||||
{ timeout: 10_000, timeoutMsg: 'No project boxes rendered within 10s' },
|
||||
);
|
||||
await clickTabByText('Model');
|
||||
});
|
||||
|
||||
it('should show status dot in ProjectHeader', async () => {
|
||||
const statusDot = await browser.execute(() => {
|
||||
const header = document.querySelector('.project-header');
|
||||
const dot = header?.querySelector('.status-dot');
|
||||
return {
|
||||
exists: dot !== null,
|
||||
classes: dot?.className ?? '',
|
||||
};
|
||||
});
|
||||
expect(statusDot.exists).toBe(true);
|
||||
expect(statusDot.classes).toContain('status-dot');
|
||||
});
|
||||
|
||||
it('should show status dot with appropriate state class', async () => {
|
||||
const dotClass = await browser.execute(() => {
|
||||
const header = document.querySelector('.project-header');
|
||||
const dot = header?.querySelector('.status-dot');
|
||||
return dot?.className ?? '';
|
||||
});
|
||||
expect(dotClass).toContain('status-dot');
|
||||
});
|
||||
|
||||
it('should show CWD path in ProjectHeader info area', async () => {
|
||||
const cwdText = await browser.execute(() => {
|
||||
const header = document.querySelector('.project-header');
|
||||
const cwd = header?.querySelector('.info-cwd');
|
||||
return cwd?.textContent?.trim() ?? '';
|
||||
});
|
||||
expect(cwdText.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('should have context pressure info element when pressure exists', async () => {
|
||||
const ctxInfo = await browser.execute(() => {
|
||||
const header = document.querySelector('.project-header');
|
||||
const ctx = header?.querySelector('.info-ctx');
|
||||
return {
|
||||
exists: ctx !== null,
|
||||
text: ctx?.textContent?.trim() ?? '',
|
||||
};
|
||||
});
|
||||
if (ctxInfo.exists) {
|
||||
expect(ctxInfo.text).toMatch(/ctx \d+%/);
|
||||
}
|
||||
});
|
||||
|
||||
it('should have burn rate info element when agents are active', async () => {
|
||||
const rateInfo = await browser.execute(() => {
|
||||
const header = document.querySelector('.project-header');
|
||||
const rate = header?.querySelector('.info-rate');
|
||||
return {
|
||||
exists: rate !== null,
|
||||
text: rate?.textContent?.trim() ?? '',
|
||||
};
|
||||
});
|
||||
if (rateInfo.exists) {
|
||||
expect(rateInfo.text).toMatch(/\$[\d.]+\/hr/);
|
||||
}
|
||||
});
|
||||
|
||||
it('should render ProjectHeader with all structural elements', async () => {
|
||||
const structure = await browser.execute(() => {
|
||||
const header = document.querySelector('.project-header');
|
||||
return {
|
||||
hasMain: header?.querySelector('.header-main') !== null,
|
||||
hasInfo: header?.querySelector('.header-info') !== null,
|
||||
hasStatusDot: header?.querySelector('.status-dot') !== null,
|
||||
hasIcon: header?.querySelector('.project-icon') !== null,
|
||||
hasName: header?.querySelector('.project-name') !== null,
|
||||
hasCwd: header?.querySelector('.info-cwd') !== null,
|
||||
};
|
||||
});
|
||||
expect(structure.hasMain).toBe(true);
|
||||
expect(structure.hasInfo).toBe(true);
|
||||
expect(structure.hasStatusDot).toBe(true);
|
||||
expect(structure.hasIcon).toBe(true);
|
||||
expect(structure.hasName).toBe(true);
|
||||
expect(structure.hasCwd).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Scenario E6 — Metrics Tab', () => {
|
||||
before(async () => {
|
||||
await clickTabByText('Model');
|
||||
await browser.pause(200);
|
||||
});
|
||||
|
||||
it('should show Metrics tab button in project tab bar', async () => {
|
||||
const hasMetrics = await tabExistsWithText('Metrics');
|
||||
expect(hasMetrics).toBe(true);
|
||||
});
|
||||
|
||||
it('should switch to Metrics tab and show metrics panel', async () => {
|
||||
await clickTabByText('Metrics');
|
||||
const activeTab = await getActiveTabText();
|
||||
expect(activeTab).toBe('Metrics');
|
||||
|
||||
await browser.waitUntil(
|
||||
async () => {
|
||||
const exists = await browser.execute(() =>
|
||||
document.querySelector('.metrics-panel') !== null,
|
||||
);
|
||||
return exists as boolean;
|
||||
},
|
||||
{ timeout: 5000, timeoutMsg: 'Metrics panel did not render within 5s' },
|
||||
);
|
||||
});
|
||||
|
||||
it('should show Live view with fleet aggregates', async () => {
|
||||
const liveView = await browser.execute(() => {
|
||||
const panel = document.querySelector('.metrics-panel');
|
||||
const live = panel?.querySelector('.live-view');
|
||||
const aggBar = panel?.querySelector('.agg-bar');
|
||||
return {
|
||||
hasLive: live !== null,
|
||||
hasAgg: aggBar !== null,
|
||||
};
|
||||
});
|
||||
expect(liveView.hasLive).toBe(true);
|
||||
expect(liveView.hasAgg).toBe(true);
|
||||
});
|
||||
|
||||
it('should show fleet badges in aggregates bar', async () => {
|
||||
const badges = await browser.execute(() => {
|
||||
const panel = document.querySelector('.metrics-panel');
|
||||
const aggBadges = panel?.querySelectorAll('.agg-badge');
|
||||
return Array.from(aggBadges ?? []).map((b) => b.textContent?.trim() ?? '');
|
||||
});
|
||||
expect(badges.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('should show health cards for current project', async () => {
|
||||
const cardLabels = await browser.execute(() => {
|
||||
const panel = document.querySelector('.metrics-panel');
|
||||
const labels = panel?.querySelectorAll('.hc-label');
|
||||
return Array.from(labels ?? []).map((l) => l.textContent?.trim() ?? '');
|
||||
});
|
||||
expect(cardLabels).toContain('Status');
|
||||
});
|
||||
|
||||
it('should show view tabs for Live and History toggle', async () => {
|
||||
const viewTabs = await browser.execute(() => {
|
||||
const panel = document.querySelector('.metrics-panel');
|
||||
const tabs = panel?.querySelectorAll('.vtab');
|
||||
return Array.from(tabs ?? []).map((t) => t.textContent?.trim() ?? '');
|
||||
});
|
||||
expect(viewTabs.length).toBeGreaterThanOrEqual(2);
|
||||
});
|
||||
|
||||
after(async () => {
|
||||
await clickTabByText('Model');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Scenario E7 — Conflict Detection UI', () => {
|
||||
it('should NOT show external write badge on fresh launch', async () => {
|
||||
const hasExternalBadge = await browser.execute(() => {
|
||||
const headers = document.querySelectorAll('.project-header');
|
||||
for (const header of headers) {
|
||||
const ext = header.querySelector('.info-conflict-external');
|
||||
if (ext) return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
expect(hasExternalBadge).toBe(false);
|
||||
});
|
||||
|
||||
it('should NOT show agent conflict badge on fresh launch', async () => {
|
||||
const hasConflictBadge = await browser.execute(() => {
|
||||
const headers = document.querySelectorAll('.project-header');
|
||||
for (const header of headers) {
|
||||
const conflict = header.querySelector('.info-conflict:not(.info-conflict-external)');
|
||||
if (conflict) return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
expect(hasConflictBadge).toBe(false);
|
||||
});
|
||||
|
||||
it('should NOT show file conflict count in status bar on fresh launch', async () => {
|
||||
const hasConflict = await browser.execute(() => {
|
||||
const bar = document.querySelector('[data-testid="status-bar"]');
|
||||
const conflictEl = bar?.querySelector('.state-conflict');
|
||||
return conflictEl !== null;
|
||||
});
|
||||
expect(hasConflict).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('Scenario E8 — Audit Log Tab', () => {
|
||||
it('should show Audit tab only for manager role projects', async () => {
|
||||
const auditTabInfo = await browser.execute(() => {
|
||||
const boxes = document.querySelectorAll('[data-testid="project-box"]');
|
||||
const results: { projectId: string; hasAudit: boolean }[] = [];
|
||||
for (const box of boxes) {
|
||||
const id = box.getAttribute('data-project-id') ?? '';
|
||||
const tabs = box.querySelectorAll('[data-testid="project-tabs"] .ptab');
|
||||
const hasAudit = Array.from(tabs).some((t) => t.textContent?.trim() === 'Audit');
|
||||
results.push({ projectId: id, hasAudit });
|
||||
}
|
||||
return results;
|
||||
});
|
||||
|
||||
expect(auditTabInfo.length).toBeGreaterThanOrEqual(1);
|
||||
for (const info of auditTabInfo) {
|
||||
expect(typeof info.hasAudit).toBe('boolean');
|
||||
}
|
||||
});
|
||||
|
||||
it('should render audit log content when Audit tab is activated', async () => {
|
||||
const auditProjectId = await browser.execute(() => {
|
||||
const boxes = document.querySelectorAll('[data-testid="project-box"]');
|
||||
for (const box of boxes) {
|
||||
const tabs = box.querySelectorAll('[data-testid="project-tabs"] .ptab');
|
||||
const auditTab = Array.from(tabs).find((t) => t.textContent?.trim() === 'Audit');
|
||||
if (auditTab) {
|
||||
(auditTab as HTMLElement).click();
|
||||
return box.getAttribute('data-project-id') ?? '';
|
||||
}
|
||||
}
|
||||
return '';
|
||||
});
|
||||
|
||||
if (!auditProjectId) return; // No manager agent — skip
|
||||
|
||||
await browser.pause(500);
|
||||
const auditContent = await browser.execute(() => {
|
||||
const tab = document.querySelector('.audit-log-tab');
|
||||
if (!tab) return { exists: false, hasToolbar: false, hasEntries: false };
|
||||
return {
|
||||
exists: true,
|
||||
hasToolbar: tab.querySelector('.audit-toolbar') !== null,
|
||||
hasEntries: tab.querySelector('.audit-entries') !== null,
|
||||
};
|
||||
});
|
||||
|
||||
expect(auditContent.exists).toBe(true);
|
||||
expect(auditContent.hasToolbar).toBe(true);
|
||||
expect(auditContent.hasEntries).toBe(true);
|
||||
|
||||
await clickTabByText('Model');
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue