/** * Status bar tests — agent counts, burn rate, attention queue, tokens, cost. * * Supports both Tauri and Electrobun status bar implementations. */ import { browser, expect } from '@wdio/globals'; import * as S from '../helpers/selectors.ts'; import { assertStatusBarComplete } from '../helpers/assertions.ts'; import { exec } from '../helpers/execute.ts'; describe('Status bar', () => { it('should be visible at the bottom', async () => { await assertStatusBarComplete(); }); it('should show version text', async () => { const text = await exec(() => { const el = document.querySelector('.status-bar .version'); return el?.textContent?.trim() ?? ''; }); if (text) { expect(text.length).toBeGreaterThan(0); } }); it('should show agent state counts', async () => { const exists = await exec(() => { // Tauri uses inline spans (.state-running, .state-idle, .state-stalled) // Electrobun uses .agent-counts return (document.querySelector('.agent-counts') ?? document.querySelector('.state-running') ?? document.querySelector('.state-idle')) !== null; }); expect(typeof exists).toBe('boolean'); }); it('should show burn rate', async () => { const exists = await exec(() => { return document.querySelector('.burn-rate') !== null; }); expect(typeof exists).toBe('boolean'); }); it('should show attention queue dropdown', async () => { const exists = await exec(() => { // Tauri: .attention-btn | Electrobun: .attention-queue return (document.querySelector('.attention-queue') ?? document.querySelector('.attention-btn')) !== null; }); expect(typeof exists).toBe('boolean'); }); it('should show total tokens', async () => { const exists = await exec(() => { return (document.querySelector('.fleet-tokens') ?? document.querySelector('.tokens')) !== null; }); expect(typeof exists).toBe('boolean'); }); it('should show total cost', async () => { const exists = await exec(() => { return (document.querySelector('.fleet-cost') ?? document.querySelector('.cost')) !== null; }); expect(typeof exists).toBe('boolean'); }); it('should show project count', async () => { const exists = await exec(() => { // Tauri embeds count in text, Electrobun uses .project-count const hasClass = document.querySelector('.project-count') !== null; const hasText = (document.querySelector('.status-bar')?.textContent ?? '').includes('project'); return hasClass || hasText; }); expect(exists).toBe(true); }); it('should have proper height and layout', async () => { const dims = await exec(() => { const el = document.querySelector('[data-testid="status-bar"]') ?? document.querySelector('.status-bar'); if (!el) return null; const rect = el.getBoundingClientRect(); return { width: rect.width, height: rect.height }; }); if (dims) { expect(dims.width).toBeGreaterThan(0); expect(dims.height).toBeGreaterThan(0); expect(dims.height).toBeLessThan(100); // Should be a compact bar } }); it('should use theme colors', async () => { const bg = await exec(() => { const el = document.querySelector('[data-testid="status-bar"]') ?? document.querySelector('.status-bar'); if (!el) return ''; return getComputedStyle(el).backgroundColor; }); if (bg) { expect(bg.length).toBeGreaterThan(0); } }); it('should show agent running/idle/stalled counts', async () => { const text = await exec(() => { const el = document.querySelector('[data-testid="status-bar"]') ?? document.querySelector('.status-bar'); return el?.textContent ?? ''; }); expect(typeof text).toBe('string'); }); it('should show attention queue cards on click', async () => { const dropdown = await exec(() => { const btn = document.querySelector('.attention-queue') ?? document.querySelector('.attention-btn'); if (btn) (btn as HTMLElement).click(); return document.querySelector('.attention-dropdown') ?? document.querySelector('.attention-cards'); }); expect(dropdown !== undefined).toBe(true); // Close by clicking elsewhere await exec(() => document.body.click()); await browser.pause(200); }); });