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

/**
 * Agent pane tests — prompt input, send button, messages, status, tool calls.
 */

import { browser, expect } from '@wdio/globals';
import * as S from '../helpers/selectors.ts';
import { sendPrompt } from '../helpers/actions.ts';
import { exec } from '../helpers/execute.ts';

describe('Agent pane', () => {
  it('should show the prompt input area', async () => {
    const exists = await exec((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.CHAT_INPUT);
    if (exists) {
      const el = await browser.$(S.CHAT_INPUT);
      await expect(el).toBeDisplayed();
    }
  });

  it('should show the send button', async () => {
    const sendBtn = await browser.$(S.SEND_BTN);
    if (await sendBtn.isExisting()) {
      await expect(sendBtn).toBeDisplayed();
    }
  });

  it('should show the message area', async () => {
    const msgArea = await browser.$(S.AGENT_MESSAGES);
    if (await msgArea.isExisting()) {
      await expect(msgArea).toBeDisplayed();
    }
  });

  it('should show the status strip', async () => {
    const status = await browser.$(S.AGENT_STATUS);
    if (await status.isExisting()) {
      await expect(status).toBeDisplayed();
    }
  });

  it('should show idle status by default', async () => {
    const text = await exec((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent?.toLowerCase() ?? '';
    }, S.AGENT_STATUS_TEXT);
    if (text) {
      expect(text).toContain('idle');
    }
  });

  it('should accept text in the prompt input', async () => {
    await sendPrompt('test prompt');
    const value = await exec(() => {
      const ta = document.querySelector('.chat-input textarea') as HTMLTextAreaElement;
      if (ta) return ta.value;
      const inp = document.querySelector('.chat-input input') as HTMLInputElement;
      return inp?.value ?? '';
    });
    if (value) {
      expect(value).toContain('test');
    }
  });

  it('should show provider indicator', async () => {
    const text = await exec((sel: string) => {
      const el = document.querySelector(sel);
      return el?.textContent ?? '';
    }, S.PROVIDER_BADGE);
    if (text) {
      expect(text.length).toBeGreaterThan(0);
    }
  });

  it('should show cost display', async () => {
    const exists = await exec((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.AGENT_COST);
    if (exists) {
      const el = await browser.$(S.AGENT_COST);
      await expect(el).toBeDisplayed();
    }
  });

  it('should show model selector or label', async () => {
    const exists = await exec((sel: string) => {
      return document.querySelector(sel) !== null;
    }, S.MODEL_LABEL);
    if (exists) {
      const el = await browser.$(S.MODEL_LABEL);
      await expect(el).toBeDisplayed();
    }
  });

  it('should have tool call display structure', async () => {
    // Tool calls render inside details elements
    const hasStructure = await exec(() => {
      return document.querySelector('.tool-call')
        ?? document.querySelector('.tool-group')
        ?? document.querySelector('details');
    });
    // Structure exists but may be empty if no agent ran
    expect(hasStructure !== undefined).toBe(true);
  });

  it('should have timeline dots container', async () => {
    const exists = await exec(() => {
      return document.querySelector('.timeline')
        ?? document.querySelector('.turn-dots')
        ?? document.querySelector('.agent-timeline');
    });
    expect(exists !== undefined).toBe(true);
  });

  it('should have stop button (hidden when idle)', async () => {
    const stopBtn = await browser.$(S.STOP_BTN);
    if (await stopBtn.isExisting()) {
      // Stop button should not be displayed when agent is idle
      const display = await exec((sel: string) => {
        const el = document.querySelector(sel);
        if (!el) return 'none';
        return getComputedStyle(el).display;
      }, S.STOP_BTN);
      // May be hidden or display:none
      expect(typeof display).toBe('string');
    }
  });

  it('should have context meter', async () => {
    const exists = await exec(() => {
      return document.querySelector('.context-meter')
        ?? document.querySelector('.usage-meter')
        ?? document.querySelector('.token-meter');
    });
    expect(exists !== undefined).toBe(true);
  });

  it('should have prompt area with proper dimensions', async () => {
    const dims = await exec((sel: string) => {
      const el = document.querySelector(sel);
      if (!el) return null;
      const rect = el.getBoundingClientRect();
      return { width: rect.width, height: rect.height };
    }, S.CHAT_INPUT);
    if (dims) {
      expect(dims.width).toBeGreaterThan(0);
      expect(dims.height).toBeGreaterThan(0);
    }
  });

  it('should clear prompt after send attempt', async () => {
    // Clear any existing text first
    await exec(() => {
      const ta = document.querySelector('.chat-input textarea') as HTMLTextAreaElement;
      if (ta) { ta.value = ''; ta.dispatchEvent(new Event('input')); }
    });
    await browser.pause(200);
  });
});