agent-orchestrator/tests/e2e/specs/status-bar.test.ts

/**
 * Status bar tests — agent counts, burn rate, attention queue, tokens, cost.
 */

import { browser, expect } from '@wdio/globals';
import * as S from '../helpers/selectors.ts';
import { assertStatusBarComplete } from '../helpers/assertions.ts';

describe('Status bar', () => {
  it('should be visible at the bottom', async () => {
    await assertStatusBarComplete();
  });

  it('should show version text', async () => {
    const text = await browser.execute(() => {
      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 browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.AGENT_COUNTS);
    expect(typeof exists).toBe('boolean');
  });

  it('should show burn rate', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.BURN_RATE);
    expect(typeof exists).toBe('boolean');
  });

  it('should show attention queue dropdown', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.ATTENTION_QUEUE);
    expect(typeof exists).toBe('boolean');
  });

  it('should show total tokens', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.FLEET_TOKENS);
    expect(typeof exists).toBe('boolean');
  });

  it('should show total cost', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.FLEET_COST);
    expect(typeof exists).toBe('boolean');
  });

  it('should show project count', async () => {
    const exists = await browser.execute((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.PROJECT_COUNT);
    expect(typeof exists).toBe('boolean');
  });

  it('should have proper height and layout', async () => {
    const dims = await browser.execute(() => {
      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 browser.execute(() => {
      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 browser.execute(() => {
      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 browser.execute(() => {
      const btn = document.querySelector('.attention-queue');
      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 browser.execute(() => document.body.click());
    await browser.pause(200);
  });
});