stack/apps/web/e2e/settings.spec.ts

import { test, expect } from '@playwright/test';
import { loginAs, TEST_USER } from './helpers/auth.js';

test.describe('Settings page', () => {
  test.beforeEach(async ({ page }) => {
    await loginAs(page, TEST_USER.email, TEST_USER.password);
    const url = page.url();
    test.skip(!url.includes('/chat'), 'No seeded test user — skipping authenticated tests');
  });

  test('settings page loads with heading', async ({ page }) => {
    await page.goto('/settings');
    await expect(page.getByRole('heading', { name: /^settings$/i })).toBeVisible({
      timeout: 10_000,
    });
  });

  test('shows the four settings tabs', async ({ page }) => {
    await page.goto('/settings');
    await expect(page.getByRole('button', { name: /profile/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /appearance/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /notifications/i })).toBeVisible();
    await expect(page.getByRole('button', { name: /providers/i })).toBeVisible();
  });

  test('profile tab is active by default', async ({ page }) => {
    await page.goto('/settings');
    await expect(page.getByRole('heading', { name: /^profile$/i })).toBeVisible({
      timeout: 10_000,
    });
  });

  test('clicking Appearance tab switches content', async ({ page }) => {
    await page.goto('/settings');
    await page.getByRole('button', { name: /appearance/i }).click();
    await expect(page.getByRole('heading', { name: /appearance/i })).toBeVisible({
      timeout: 5_000,
    });
  });

  test('clicking Notifications tab switches content', async ({ page }) => {
    await page.goto('/settings');
    await page.getByRole('button', { name: /notifications/i }).click();
    await expect(page.getByRole('heading', { name: /notifications/i })).toBeVisible({
      timeout: 5_000,
    });
  });

  test('clicking Providers tab switches content', async ({ page }) => {
    await page.goto('/settings');
    await page.getByRole('button', { name: /providers/i }).click();
    await expect(page.getByRole('heading', { name: /llm providers/i })).toBeVisible({
      timeout: 5_000,
    });
  });
});