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

/**
 * Theme tests — dropdown, groups, switching, CSS variables, font changes.
 */

import { browser, expect } from '@wdio/globals';
import * as S from '../helpers/selectors.ts';
import { openSettings, closeSettings, switchSettingsCategory } from '../helpers/actions.ts';
import { assertThemeApplied } from '../helpers/assertions.ts';
import { exec } from '../helpers/execute.ts';

describe('Theme system', () => {
  before(async () => {
    await openSettings();
    await switchSettingsCategory(0); // Appearance tab
  });

  after(async () => {
    await browser.keys('Escape');
    await browser.pause(300);
  });

  it('should show theme dropdown button', async () => {
    const exists = await exec(() => {
      return (document.querySelector('.dd-btn')
        ?? document.querySelector('.dropdown-btn')
        ?? document.querySelector('.custom-dropdown')) !== null;
    });
    expect(exists).toBe(true);
  });

  it('should open theme dropdown on click', async () => {
    await exec(() => {
      const btn = document.querySelector('.dd-btn')
        ?? document.querySelector('.dropdown-btn');
      if (btn) (btn as HTMLElement).click();
    });
    await browser.pause(300);

    const listOpen = await exec(() => {
      const list = document.querySelector('.dd-list')
        ?? document.querySelector('.dropdown-menu');
      if (!list) return false;
      return getComputedStyle(list).display !== 'none';
    });
    if (listOpen) {
      expect(listOpen).toBe(true);
    }
  });

  it('should show theme groups (Catppuccin, Editor, Deep Dark)', async () => {
    const texts = await exec(() => {
      const labels = document.querySelectorAll('.dd-group-label, .dropdown-group-label');
      return Array.from(labels).map(l => l.textContent ?? '');
    });

    if (texts.length > 0) {
      expect(texts.some((t: string) => t.includes('Catppuccin'))).toBe(true);
      expect(texts.some((t: string) => t.includes('Editor'))).toBe(true);
      expect(texts.some((t: string) => t.includes('Deep Dark'))).toBe(true);
    }
  });

  it('should list at least 17 theme options', async () => {
    const count = await exec(() => {
      return (document.querySelectorAll('.dd-item').length
        || document.querySelectorAll('.dropdown-item').length);
    });
    if (count > 0) {
      expect(count).toBeGreaterThanOrEqual(17);
    }
  });

  it('should highlight the currently selected theme', async () => {
    const hasSelected = await exec(() => {
      return (document.querySelector('.dd-item.selected')
        ?? document.querySelector('.dropdown-item.active')) !== null;
    });
    if (hasSelected) {
      expect(hasSelected).toBe(true);
    }
  });

  it('should apply CSS variables when theme changes', async () => {
    await assertThemeApplied('--ctp-base');
  });

  it('should have 4 Catppuccin themes', async () => {
    const count = await exec(() => {
      const items = document.querySelectorAll('.dd-item, .dropdown-item');
      let catCount = 0;
      const catNames = ['mocha', 'macchiato', 'frapp', 'latte'];
      for (const item of items) {
        const text = (item.textContent ?? '').toLowerCase();
        if (catNames.some(n => text.includes(n))) catCount++;
      }
      return catCount;
    });
    if (count > 0) {
      expect(count).toBe(4);
    }
  });

  it('should have 7 Editor themes', async () => {
    const count = await exec(() => {
      const items = document.querySelectorAll('.dd-item, .dropdown-item');
      const editorNames = ['vscode', 'atom', 'monokai', 'dracula', 'nord', 'solarized', 'github'];
      let edCount = 0;
      for (const item of items) {
        const text = (item.textContent ?? '').toLowerCase();
        if (editorNames.some(n => text.includes(n))) edCount++;
      }
      return edCount;
    });
    if (count > 0) {
      expect(count).toBe(7);
    }
  });

  it('should have 6 Deep Dark themes', async () => {
    const count = await exec(() => {
      const items = document.querySelectorAll('.dd-item, .dropdown-item');
      const deepNames = ['tokyo', 'gruvbox', 'ayu', 'poimandres', 'vesper', 'midnight'];
      let deepCount = 0;
      for (const item of items) {
        const text = (item.textContent ?? '').toLowerCase();
        if (deepNames.some(n => text.includes(n))) deepCount++;
      }
      return deepCount;
    });
    if (count > 0) {
      expect(count).toBe(6);
    }
  });

  it('should show font size stepper controls', async () => {
    // Close theme dropdown first
    await browser.keys('Escape');
    await browser.pause(200);

    const count = await exec(() => {
      return (document.querySelectorAll('.size-stepper').length
        || document.querySelectorAll('.font-stepper').length
        || document.querySelectorAll('.stepper').length);
    });
    if (count > 0) {
      expect(count).toBeGreaterThanOrEqual(1);
    }
  });

  it('should show theme action buttons', async () => {
    const count = await exec(() => {
      return document.querySelectorAll('.theme-action-btn').length;
    });
    if (count > 0) {
      expect(count).toBeGreaterThanOrEqual(1);
    }
  });

  it('should apply font changes to terminal', async () => {
    const fontFamily = await exec(() => {
      return getComputedStyle(document.documentElement).getPropertyValue('--term-font-family').trim();
    });
    expect(typeof fontFamily).toBe('string');
  });
});