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

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);
  }
}

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);
  });
});