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

/**
 * Settings panel tests — drawer opens, categories visible, controls work.
 */

describe("Settings panel", () => {
  it("should open on gear icon click", async () => {
    const gear = await $(".sidebar-icon");
    await gear.click();

    const drawer = await $(".settings-drawer");
    await drawer.waitForDisplayed({ timeout: 5_000 });
    expect(await drawer.isDisplayed()).toBe(true);
  });

  it("should show settings category tabs", async () => {
    const tabs = await $$(".settings-tab");
    // Expect at least 4 categories (Appearance, Projects, Agent, Advanced, etc.)
    expect(tabs.length).toBeGreaterThanOrEqual(4);
  });

  it("should show 8 settings categories", async () => {
    const tabs = await $$(".settings-tab");
    expect(tabs.length).toBe(8);
  });

  it("should highlight the active category", async () => {
    const activeTabs = await $$(".settings-tab.active");
    expect(activeTabs.length).toBe(1);
  });

  it("should switch categories on tab click", async () => {
    const tabs = await $$(".settings-tab");
    if (tabs.length >= 2) {
      const secondTab = tabs[1];
      await secondTab.click();
      await browser.pause(300);
      expect(await secondTab.getAttribute("class")).toContain("active");
    }
  });

  it("should show theme dropdown in Appearance category", async () => {
    // Click Appearance tab (usually first)
    const tabs = await $$(".settings-tab");
    if (tabs.length > 0) {
      await tabs[0].click();
      await browser.pause(300);
    }

    const themeSection = await $(".theme-section");
    if (await themeSection.isExisting()) {
      expect(await themeSection.isDisplayed()).toBe(true);
    }
  });

  it("should show font size stepper", async () => {
    const stepper = await $(".font-stepper");
    if (await stepper.isExisting()) {
      expect(await stepper.isDisplayed()).toBe(true);
    }
  });

  it("should show font family dropdown", async () => {
    const fontDropdown = await $(".font-dropdown");
    if (await fontDropdown.isExisting()) {
      expect(await fontDropdown.isDisplayed()).toBe(true);
    }
  });

  it("should increment font size on stepper click", async () => {
    const plusBtn = await $(".font-stepper .step-up");
    if (await plusBtn.isExisting()) {
      const sizeDisplay = await $(".font-stepper .size-value");
      const before = await sizeDisplay.getText();
      await plusBtn.click();
      await browser.pause(200);
      const after = await sizeDisplay.getText();
      // Size should change (we don't assert direction, just that it reacted)
      expect(after).toBeDefined();
    }
  });

  it("should show updates section in Advanced tab", async () => {
    // Navigate to Advanced settings tab
    const tabs = await $$(".settings-tab");
    const advancedTab = tabs.find(async (t) => {
      const text = await t.getText();
      return text.toLowerCase().includes("advanced");
    });

    if (advancedTab) {
      await advancedTab.click();
      await browser.pause(300);
    }

    const updateRow = await $(".update-row");
    if (await updateRow.isExisting()) {
      expect(await updateRow.isDisplayed()).toBe(true);
    }
  });

  it("should show version label", async () => {
    const versionLabel = await $(".version-label");
    if (await versionLabel.isExisting()) {
      const text = await versionLabel.getText();
      expect(text).toMatch(/^v/);
    }
  });

  it("should close on close button click", async () => {
    const closeBtn = await $(".settings-close");
    if (await closeBtn.isExisting()) {
      await closeBtn.click();
      await browser.pause(300);
      const drawer = await $(".settings-drawer");
      const isVisible = await drawer.isDisplayed();
      expect(isVisible).toBe(false);
    }
  });

  it("should close on Escape key", async () => {
    // Reopen settings first
    const gear = await $(".sidebar-icon");
    await gear.click();
    await browser.pause(300);

    await browser.keys("Escape");
    await browser.pause(300);

    const drawer = await $(".settings-drawer");
    if (await drawer.isExisting()) {
      expect(await drawer.isDisplayed()).toBe(false);
    }
  });
});