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

import { browser, expect } from '@wdio/globals';

/** Reset UI to home state (close any open panels/overlays). */
async function resetToHomeState(): Promise<void> {
  // Close sidebar panel if open
  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);
  }
  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 });
  }
  // Wait for settings panel content to mount (SettingsPanel has .settings-panel inside sidebar-panel)
  await browser.waitUntil(
    async () => {
      const has = await browser.execute(() =>
        document.querySelector('.settings-panel .settings-content') !== null,
      );
      return has as boolean;
    },
    { timeout: 5000, timeoutMsg: 'Settings content 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('Agent Orchestrator — Settings Panel', () => {
  before(async () => {
    await resetToHomeState();
    await openSettings();
  });

  after(async () => {
    await closeSettings();
  });

  it('should display the settings panel container', async () => {
    const settingsPanel = await browser.$('.settings-panel');
    await expect(settingsPanel).toBeDisplayed();
  });

  it('should show settings category sidebar', async () => {
    const items = await browser.$$('.settings-sidebar .sidebar-item');
    expect(items.length).toBeGreaterThanOrEqual(1);
  });

  it('should display theme dropdown', async () => {
    const dropdown = await browser.$('.appearance .custom-dropdown .dropdown-btn');
    await expect(dropdown).toBeDisplayed();
  });

  it('should open theme dropdown and show options', async () => {
    // Use JS click for reliability
    await browser.execute(() => {
      const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
      if (trigger) (trigger as HTMLElement).click();
    });
    await browser.pause(500);

    const menu = await browser.$('.dropdown-menu');
    await menu.waitForExist({ timeout: 3000 });

    const options = await browser.$$('.dropdown-item');
    expect(options.length).toBeGreaterThan(0);

    // Close dropdown by clicking trigger again
    await browser.execute(() => {
      const trigger = document.querySelector('.appearance .custom-dropdown .dropdown-btn');
      if (trigger) (trigger as HTMLElement).click();
    });
    await browser.pause(300);
  });

  it('should display group list in Projects category', async () => {
    // Switch to Projects category
    await browser.execute(() => {
      const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
      for (const item of items) {
        if (item.textContent?.includes('Projects')) {
          (item as HTMLElement).click();
          break;
        }
      }
    });
    await browser.pause(300);

    const groupList = await browser.$('.group-list');
    await expect(groupList).toBeDisplayed();

    // Switch back to Appearance
    await browser.execute(() => {
      const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
      if (items[0]) (items[0] as HTMLElement).click();
    });
    await browser.pause(300);
  });

  it('should close settings panel with close button', async () => {
    await openSettings();

    await browser.execute(() => {
      const btn = document.querySelector('.panel-close');
      if (btn) (btn as HTMLElement).click();
    });
    await browser.pause(500);

    const panel = await browser.$('.sidebar-panel');
    await expect(panel).not.toBeDisplayed();
  });
});

describe('Agent Orchestrator — Settings Interaction', () => {
  before(async () => {
    await resetToHomeState();
    await openSettings();
  });

  after(async () => {
    await closeSettings();
  });

  it('should show font size controls with increment/decrement (stepper)', async () => {
    const steppers = await browser.$$('.stepper');
    expect(steppers.length).toBeGreaterThanOrEqual(1);

    const stepperBtns = await browser.$$('.stepper button');
    expect(stepperBtns.length).toBeGreaterThanOrEqual(2); // at least - and + for one stepper
  });

  it('should increment font size', async () => {
    const sizeBefore = await browser.execute(() => {
      const span = document.querySelector('.stepper span');
      return span?.textContent?.trim() ?? '';
    });

    // Click the + button (second button in first stepper)
    await browser.execute(() => {
      const btns = document.querySelectorAll('.stepper button');
      // Second button is + (first is -)
      if (btns.length >= 2) (btns[1] as HTMLElement).click();
    });
    await browser.pause(300);

    const sizeAfter = await browser.execute(() => {
      const span = document.querySelector('.stepper span');
      return span?.textContent?.trim() ?? '';
    });
    const before = parseInt(sizeBefore as string);
    const after = parseInt(sizeAfter as string);
    expect(after).toBe(before + 1);
  });

  it('should decrement font size back', async () => {
    const sizeBefore = await browser.execute(() => {
      const span = document.querySelector('.stepper span');
      return span?.textContent?.trim() ?? '';
    });

    // Click the - button (first stepper button)
    await browser.execute(() => {
      const btns = document.querySelectorAll('.stepper button');
      if (btns.length >= 1) (btns[0] as HTMLElement).click();
    });
    await browser.pause(300);

    const sizeAfter = await browser.execute(() => {
      const span = document.querySelector('.stepper span');
      return span?.textContent?.trim() ?? '';
    });
    const before = parseInt(sizeBefore as string);
    const after = parseInt(sizeAfter as string);
    expect(after).toBe(before - 1);
  });

  it('should display group rows with active indicator', async () => {
    // Switch to Projects category
    await browser.execute(() => {
      const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
      for (const item of items) {
        if (item.textContent?.includes('Projects')) {
          (item as HTMLElement).click();
          break;
        }
      }
    });
    await browser.pause(300);

    const groupRows = await browser.$$('.group-row');
    expect(groupRows.length).toBeGreaterThanOrEqual(1);

    const activeGroup = await browser.$('.group-row.active');
    await expect(activeGroup).toBeExisting();
  });

  it('should show project cards', async () => {
    const cards = await browser.$$('.project-card');
    expect(cards.length).toBeGreaterThanOrEqual(1);
  });

  it('should display project card with name and path', async () => {
    const nameInput = await browser.$('.name-input');
    await expect(nameInput).toBeExisting();
    const name = await nameInput.getValue() as string;
    expect(name.length).toBeGreaterThan(0);

    const pathInput = await browser.$('.path-input');
    await expect(pathInput).toBeExisting();
    const path = await pathInput.getValue() as string;
    expect(path.length).toBeGreaterThan(0);
  });

  it('should show project toggle switch', async () => {
    const toggle = await browser.$('.toggle-wrap');
    await expect(toggle).toBeExisting();
  });

  it('should show add project form', async () => {
    // Scroll to add row (at bottom of Projects section)
    await browser.execute(() => {
      const el = document.querySelector('.add-row');
      if (el) el.scrollIntoView({ behavior: 'instant', block: 'center' });
    });
    await browser.pause(300);

    const addRow = await browser.$('.add-row');
    await expect(addRow).toBeDisplayed();

    const addBtn = await browser.$('.add-row .btn-sm.primary');
    await expect(addBtn).toBeExisting();

    // Switch back to Appearance
    await browser.execute(() => {
      const items = document.querySelectorAll('.settings-sidebar .sidebar-item');
      if (items[0]) (items[0] as HTMLElement).click();
    });
    await browser.pause(300);
  });
});