fix: enhance security dashboard tests; implement preconditions and toggle state persistence

2026-02-13 18:54:38 +00:00
parent 369c877996
commit eaefe0c5fa
1 changed files with 366 additions and 130 deletions
--- a/tests/security/security-dashboard.spec.ts
+++ b/tests/security/security-dashboard.spec.ts
@@ -1,3 +1,212 @@
+import { test, expect, loginUser } from '../fixtures/auth-fixtures';
+import { clickSwitch } from '../utils/ui-helpers';
+import { waitForLoadingComplete } from '../utils/wait-helpers';
+
+const TEST_RUNNER_WHITELIST = '127.0.0.1/32,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16';
+
+type SecurityStatusResponse = {
+  cerberus?: { enabled?: boolean };
+  crowdsec?: { enabled?: boolean };
+  acl?: { enabled?: boolean };
+  waf?: { enabled?: boolean };
+  rate_limit?: { enabled?: boolean };
+};
+
+async function emergencyReset(page: import('@playwright/test').Page): Promise<void> {
+  const emergencyToken = process.env.CHARON_EMERGENCY_TOKEN;
+  if (!emergencyToken) {
+    return;
+  }
+
+  const username = process.env.CHARON_EMERGENCY_USERNAME || 'admin';
+  const password = process.env.CHARON_EMERGENCY_PASSWORD || 'changeme';
+  const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+
+  const response = await page.request.post('http://localhost:2020/emergency/security-reset', {
+    headers: {
+      Authorization: basicAuth,
+      'X-Emergency-Token': emergencyToken,
+      'Content-Type': 'application/json',
+    },
+    data: { reason: 'security-dashboard deterministic precondition reset' },
+  });
+
+  expect(response.ok()).toBe(true);
+}
+
+async function patchWithRetry(
+  page: import('@playwright/test').Page,
+  url: string,
+  data: Record<string, unknown>
+): Promise<void> {
+  const maxRetries = 5;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt += 1) {
+    const response = await page.request.patch(url, { data });
+    if (response.ok()) {
+      return;
+    }
+
+    if (response.status() !== 429 || attempt === maxRetries) {
+      throw new Error(`PATCH ${url} failed: ${response.status()} ${await response.text()}`);
+    }
+  }
+}
+
+async function ensureSecurityDashboardPreconditions(
+  page: import('@playwright/test').Page
+): Promise<void> {
+  await emergencyReset(page);
+
+  await patchWithRetry(page, '/api/v1/settings', {
+    key: 'feature.cerberus.enabled',
+    value: 'true',
+  });
+
+  await patchWithRetry(page, '/api/v1/config', {
+    security: { admin_whitelist: TEST_RUNNER_WHITELIST },
+  });
+
+  await expect.poll(async () => {
+    const statusResponse = await page.request.get('/api/v1/security/status');
+    if (!statusResponse.ok()) {
+      return false;
+    }
+
+    const status = (await statusResponse.json()) as SecurityStatusResponse;
+    return Boolean(status?.cerberus?.enabled);
+  }, {
+    timeout: 15000,
+    message: 'Expected Cerberus to be enabled before security dashboard assertions',
+  }).toBe(true);
+}
+
+async function readSecurityStatus(page: import('@playwright/test').Page): Promise<SecurityStatusResponse> {
+  const response = await page.request.get('/api/v1/security/status');
+  expect(response.ok()).toBe(true);
+  return response.json();
+}
+
+test.describe('Security Dashboard @security', () => {
+  test.beforeEach(async ({ page, adminUser }) => {
+    await loginUser(page, adminUser);
+    await waitForLoadingComplete(page);
+    await ensureSecurityDashboardPreconditions(page);
+    await page.goto('/security');
+    await waitForLoadingComplete(page);
+  });
+
+  test('loads dashboard with all module toggles', async ({ page }) => {
+    await expect(page.getByRole('heading', { name: /security/i }).first()).toBeVisible();
+    await expect(page.getByText(/cerberus.*dashboard/i)).toBeVisible();
+    await expect(page.getByTestId('toggle-crowdsec')).toBeVisible();
+    await expect(page.getByTestId('toggle-acl')).toBeVisible();
+    await expect(page.getByTestId('toggle-waf')).toBeVisible();
+    await expect(page.getByTestId('toggle-rate-limit')).toBeVisible();
+  });
+
+  test('toggles ACL and persists state', async ({ page }) => {
+    const toggle = page.getByTestId('toggle-acl');
+    await expect(toggle).toBeEnabled({ timeout: 10000 });
+    const initialChecked = await toggle.isChecked();
+
+    await clickSwitch(toggle);
+
+    await expect.poll(async () => {
+      const status = await readSecurityStatus(page);
+      return Boolean(status?.acl?.enabled);
+    }, {
+      timeout: 15000,
+      message: 'Expected ACL state to change after toggle',
+    }).toBe(!initialChecked);
+  });
+
+  test('toggles WAF and persists state', async ({ page }) => {
+    const toggle = page.getByTestId('toggle-waf');
+    await expect(toggle).toBeEnabled({ timeout: 10000 });
+    const initialChecked = await toggle.isChecked();
+
+    await clickSwitch(toggle);
+
+    await expect.poll(async () => {
+      const status = await readSecurityStatus(page);
+      return Boolean(status?.waf?.enabled);
+    }, {
+      timeout: 15000,
+      message: 'Expected WAF state to change after toggle',
+    }).toBe(!initialChecked);
+  });
+
+  test('toggles Rate Limiting and persists state', async ({ page }) => {
+    const toggle = page.getByTestId('toggle-rate-limit');
+    await expect(toggle).toBeEnabled({ timeout: 10000 });
+    const initialChecked = await toggle.isChecked();
+
+    await clickSwitch(toggle);
+
+    await expect.poll(async () => {
+      const status = await readSecurityStatus(page);
+      return Boolean(status?.rate_limit?.enabled);
+    }, {
+      timeout: 15000,
+      message: 'Expected rate limit state to change after toggle',
+    }).toBe(!initialChecked);
+  });
+
+  test('navigates to security sub-pages from dashboard actions', async ({ page }) => {
+    const configureButtons = page.getByRole('button', { name: /configure|manage.*lists/i });
+    await expect(configureButtons).toHaveCount(4);
+
+    await configureButtons.first().click({ force: true });
+    await expect(page).toHaveURL(/\/security\/crowdsec/);
+
+    await page.goto('/security');
+    await waitForLoadingComplete(page);
+    await page.getByRole('button', { name: /manage.*lists|configure/i }).nth(1).click({ force: true });
+    await expect(page).toHaveURL(/\/security\/access-lists|\/access-lists/);
+
+    await page.goto('/security');
+    await waitForLoadingComplete(page);
+    await page.getByRole('button', { name: /configure/i }).nth(1).click({ force: true });
+    await expect(page).toHaveURL(/\/security\/waf/);
+
+    await page.goto('/security');
+    await waitForLoadingComplete(page);
+    await page.getByRole('button', { name: /configure/i }).nth(2).click({ force: true });
+    await expect(page).toHaveURL(/\/security\/rate-limiting/);
+  });
+
+  test('opens audit logs from dashboard header', async ({ page }) => {
+    const auditLogsButton = page.getByRole('button', { name: /audit.*logs/i });
+    await expect(auditLogsButton).toBeVisible();
+    await auditLogsButton.click();
+    await expect(page).toHaveURL(/\/security\/audit-logs/);
+  });
+
+  test('shows admin whitelist controls and emergency token button', async ({ page }) => {
+    await expect(page.getByPlaceholder(/192\.168|cidr/i)).toBeVisible({ timeout: 10000 });
+    const generateButton = page.getByRole('button', { name: /generate.*token/i });
+    await expect(generateButton).toBeVisible();
+    await expect(generateButton).toBeEnabled();
+  });
+
+  test('exposes keyboard-navigable checkbox toggles', async ({ page }) => {
+    const toggles = [
+      page.getByTestId('toggle-crowdsec'),
+      page.getByTestId('toggle-acl'),
+      page.getByTestId('toggle-waf'),
+      page.getByTestId('toggle-rate-limit'),
+    ];
+
+    for (const toggle of toggles) {
+      await expect(toggle).toBeVisible();
+      await expect(toggle).toHaveAttribute('type', 'checkbox');
+    }
+
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Tab');
+  });
+});
 /**
 * Security Dashboard E2E Tests
 *
@@ -12,9 +221,8 @@

 import { test, expect, loginUser } from '../fixtures/auth-fixtures';
 import { request } from '@playwright/test';
-import type { APIRequestContext } from '@playwright/test';
 import { STORAGE_STATE } from '../constants';
-import { waitForLoadingComplete, waitForToast } from '../utils/wait-helpers';
+import { waitForLoadingComplete } from '../utils/wait-helpers';
 import { clickSwitch } from '../utils/ui-helpers';
 import {
  captureSecurityState,
@@ -22,10 +230,75 @@ import {
  CapturedSecurityState,
 } from '../utils/security-helpers';

+const TEST_RUNNER_WHITELIST = '127.0.0.1/32,10.0.0.0/8,172.16.0.0/12,192.168.0.0/16';
+
+async function patchWithRetry(
+  page: import('@playwright/test').Page,
+  url: string,
+  data: Record<string, unknown>
+): Promise<void> {
+  const maxRetries = 5;
+  const retryDelayMs = 1000;
+
+  for (let attempt = 0; attempt <= maxRetries; attempt += 1) {
+    const response = await page.request.patch(url, { data });
+    if (response.ok()) {
+      return;
+    }
+
+    if (response.status() !== 429 || attempt === maxRetries) {
+      throw new Error(`PATCH ${url} failed: ${response.status()} ${await response.text()}`);
+    }
+
+    await page.waitForTimeout(retryDelayMs);
+  }
+}
+
+async function ensureSecurityDashboardPreconditions(
+  page: import('@playwright/test').Page
+): Promise<void> {
+  const emergencyToken = process.env.CHARON_EMERGENCY_TOKEN;
+  if (emergencyToken) {
+    const username = process.env.CHARON_EMERGENCY_USERNAME || 'admin';
+    const password = process.env.CHARON_EMERGENCY_PASSWORD || 'changeme';
+    const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+    await page.request.post('http://localhost:2020/emergency/security-reset', {
+      headers: {
+        Authorization: basicAuth,
+        'X-Emergency-Token': emergencyToken,
+        'Content-Type': 'application/json',
+      },
+      data: { reason: 'security-dashboard deterministic precondition reset' },
+    });
+  }
+
+  await patchWithRetry(page, '/api/v1/config', {
+    security: { admin_whitelist: TEST_RUNNER_WHITELIST },
+  });
+
+  await patchWithRetry(page, '/api/v1/settings', {
+    key: 'feature.cerberus.enabled',
+    value: 'true',
+  });
+
+  await expect.poll(async () => {
+    const statusResponse = await page.request.get('/api/v1/security/status');
+    if (!statusResponse.ok()) {
+      return false;
+    }
+    const status = await statusResponse.json();
+    return Boolean(status?.cerberus?.enabled);
+  }, {
+    timeout: 15000,
+    message: 'Expected Cerberus to be enabled before running security dashboard assertions',
+  }).toBe(true);
+}
+
 test.describe('Security Dashboard @security', () => {
  test.beforeEach(async ({ page, adminUser }) => {
    await loginUser(page, adminUser);
    await waitForLoadingComplete(page);
+    await ensureSecurityDashboardPreconditions(page);
    await page.goto('/security');
    await waitForLoadingComplete(page);
  });
@@ -77,19 +350,17 @@ test.describe('Security Dashboard @security', () => {

  test.describe('Module Status Indicators', () => {
    test('should show enabled/disabled badge for each module', async ({ page }) => {
-      // Each card should have an enabled or disabled badge
-      // Look for text that matches enabled/disabled patterns
-      // The Badge component may use various styling approaches
-      await page.waitForTimeout(500); // Wait for UI to settle
+      const toggles = [
+        page.getByTestId('toggle-crowdsec'),
+        page.getByTestId('toggle-acl'),
+        page.getByTestId('toggle-waf'),
+        page.getByTestId('toggle-rate-limit'),
+      ];

-      const enabledTexts = page.getByText(/^enabled$/i);
-      const disabledTexts = page.getByText(/^disabled$/i);
-
-      const enabledCount = await enabledTexts.count();
-      const disabledCount = await disabledTexts.count();
-
-      // Should have at least 4 status badges (one per security layer card)
-      expect(enabledCount + disabledCount).toBeGreaterThanOrEqual(4);
+      for (const toggle of toggles) {
+        await expect(toggle).toBeVisible();
+        expect(typeof (await toggle.isChecked())).toBe('boolean');
+      }
    });

    test('should display CrowdSec toggle switch', async ({ page }) => {
@@ -133,7 +404,7 @@ test.describe('Security Dashboard @security', () => {

      // Create authenticated request context for cleanup (cannot reuse fixture from beforeAll)
      const cleanupRequest = await request.newContext({
-        baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://127.0.0.1:8080',
+        baseURL: process.env.PLAYWRIGHT_BASE_URL || 'http://localhost:8080',
        storageState: STORAGE_STATE,
      });

@@ -142,6 +413,20 @@ test.describe('Security Dashboard @security', () => {
        console.log('✓ Security state restored after toggle tests');
      } catch (error) {
        console.error('Failed to restore security state:', error);
+        const emergencyToken = process.env.CHARON_EMERGENCY_TOKEN;
+        if (emergencyToken) {
+          const username = process.env.CHARON_EMERGENCY_USERNAME || 'admin';
+          const password = process.env.CHARON_EMERGENCY_PASSWORD || 'changeme';
+          const basicAuth = `Basic ${Buffer.from(`${username}:${password}`).toString('base64')}`;
+          await cleanupRequest.post('http://localhost:2020/emergency/security-reset', {
+            headers: {
+              Authorization: basicAuth,
+              'X-Emergency-Token': emergencyToken,
+              'Content-Type': 'application/json',
+            },
+            data: { reason: 'security-dashboard cleanup fallback' },
+          });
+        }
      } finally {
        await cleanupRequest.dispose();
      }
@@ -149,20 +434,23 @@ test.describe('Security Dashboard @security', () => {

    test('should toggle ACL enabled/disabled', async ({ page }) => {
      const toggle = page.getByTestId('toggle-acl');
-
-      const isDisabled = await toggle.isDisabled();
-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Toggle is disabled because Cerberus security is not enabled',
-        });
-        return;
-      }
+      await expect(toggle).toBeEnabled({ timeout: 10000 });
+      const initialChecked = await toggle.isChecked();

      await test.step('Toggle ACL state', async () => {
        await page.waitForLoadState('networkidle');
        await clickSwitch(toggle);
-        await waitForToast(page, /updated|success|enabled|disabled/i, 10000);
+        await expect.poll(async () => {
+          const statusResponse = await page.request.get('/api/v1/security/status');
+          if (!statusResponse.ok()) {
+            return initialChecked;
+          }
+          const status = await statusResponse.json();
+          return Boolean(status?.acl?.enabled);
+        }, {
+          timeout: 15000,
+          message: 'Expected ACL state to change after toggle',
+        }).toBe(!initialChecked);
      });

      // NOTE: Do NOT toggle back here - afterAll handles cleanup
@@ -170,20 +458,23 @@ test.describe('Security Dashboard @security', () => {

    test('should toggle WAF enabled/disabled', async ({ page }) => {
      const toggle = page.getByTestId('toggle-waf');
-
-      const isDisabled = await toggle.isDisabled();
-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Toggle is disabled because Cerberus security is not enabled',
-        });
-        return;
-      }
+      await expect(toggle).toBeEnabled({ timeout: 10000 });
+      const initialChecked = await toggle.isChecked();

      await test.step('Toggle WAF state', async () => {
        await page.waitForLoadState('networkidle');
        await clickSwitch(toggle);
-        await waitForToast(page, /updated|success|enabled|disabled/i, 10000);
+        await expect.poll(async () => {
+          const statusResponse = await page.request.get('/api/v1/security/status');
+          if (!statusResponse.ok()) {
+            return initialChecked;
+          }
+          const status = await statusResponse.json();
+          return Boolean(status?.waf?.enabled);
+        }, {
+          timeout: 15000,
+          message: 'Expected WAF state to change after toggle',
+        }).toBe(!initialChecked);
      });

      // NOTE: Do NOT toggle back here - afterAll handles cleanup
@@ -191,20 +482,23 @@ test.describe('Security Dashboard @security', () => {

    test('should toggle Rate Limiting enabled/disabled', async ({ page }) => {
      const toggle = page.getByTestId('toggle-rate-limit');
-
-      const isDisabled = await toggle.isDisabled();
-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Toggle is disabled because Cerberus security is not enabled',
-        });
-        return;
-      }
+      await expect(toggle).toBeEnabled({ timeout: 10000 });
+      const initialChecked = await toggle.isChecked();

      await test.step('Toggle Rate Limit state', async () => {
        await page.waitForLoadState('networkidle');
        await clickSwitch(toggle);
-        await waitForToast(page, /updated|success|enabled|disabled/i, 10000);
+        await expect.poll(async () => {
+          const statusResponse = await page.request.get('/api/v1/security/status');
+          if (!statusResponse.ok()) {
+            return initialChecked;
+          }
+          const status = await statusResponse.json();
+          return Boolean(status?.rate_limit?.enabled);
+        }, {
+          timeout: 15000,
+          message: 'Expected rate limit state to change after toggle',
+        }).toBe(!initialChecked);
      });

      // NOTE: Do NOT toggle back here - afterAll handles cleanup
@@ -212,54 +506,37 @@ test.describe('Security Dashboard @security', () => {

    test('should persist toggle state after page reload', async ({ page }) => {
      const toggle = page.getByTestId('toggle-acl');
+      await expect(toggle).toBeEnabled({ timeout: 10000 });
+      const initialChecked = await toggle.isChecked();

-      const isDisabled = await toggle.isDisabled();
-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Toggle is disabled because Cerberus security is not enabled',
-        });
-        return;
-      }
+      await clickSwitch(toggle);
+      await waitForToast(page, /updated|success|enabled|disabled/i, 10000);
+      await page.reload({ waitUntil: 'networkidle' });

-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Toggle is disabled because Cerberus security is not enabled',
-        });
-        return;
-      }
-
-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Toggle is disabled because Cerberus security is not enabled',
-        });
-        return;
-      }
+      await expect.poll(async () => {
+        const statusResponse = await page.request.get('/api/v1/security/status');
+        if (!statusResponse.ok()) {
+          return initialChecked;
+        }
+        const status = await statusResponse.json();
+        return Boolean(status?.acl?.enabled);
+      }, {
+        timeout: 15000,
+        message: 'Expected ACL enabled state to persist after page reload',
+      }).toBe(!initialChecked);
    });
  });

  test.describe('Navigation', () => {
    test('should navigate to CrowdSec page when configure clicked', async ({ page }) => {
      // Find the CrowdSec card by locating the configure button within a container that has CrowdSec text
-      // Cards use rounded-lg border classes, not [class*="card"]
-      const crowdsecSection = page.locator('div').filter({ hasText: /crowdsec/i }).filter({ has: page.getByRole('button', { name: /configure/i }) }).first();
-      const configureButton = crowdsecSection.getByRole('button', { name: /configure/i });
-
-      // Button may be disabled when Cerberus is off
-      const isDisabled = await configureButton.isDisabled().catch(() => true);
-      if (isDisabled) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Configure button is disabled because Cerberus security is not enabled'
-        });
-        return;
-      }
+      const configureButtons = page.getByRole('button', { name: /configure|manage.*lists/i });
+      await expect(configureButtons).toHaveCount(4);
+      const configureButton = configureButtons.first();
+      await expect(configureButton).toBeEnabled({ timeout: 10000 });

      // Wait for any loading overlays to disappear
      await page.waitForLoadState('networkidle');
-      await page.waitForTimeout(300);

      // Scroll element into view and use force click to bypass pointer interception
      await configureButton.scrollIntoViewIfNeeded();
@@ -294,57 +571,30 @@ test.describe('Security Dashboard @security', () => {
      // Wait for any loading overlays and scroll into view
      await page.waitForLoadState('networkidle');
      await aclButton.scrollIntoViewIfNeeded();
-      await page.waitForTimeout(200);
      await aclButton.click({ force: true });
      await expect(page).toHaveURL(/\/security\/access-lists|\/access-lists/);
    });

    test('should navigate to WAF page when configure clicked', async ({ page }) => {
-      // WAF is Layer 3 - the third configure button in the security cards grid
-      const allConfigButtons = page.getByRole('button', { name: /configure/i });
-      const count = await allConfigButtons.count();
-
-      // Should have at least 3 configure buttons (CrowdSec, ACL/Manage Lists, WAF)
-      if (count < 3) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Not enough configure buttons found on page'
-        });
-        return;
-      }
-
-      // WAF is the 3rd configure button (index 2)
-      const wafButton = allConfigButtons.nth(2);
+      const wafCard = page.getByTestId('toggle-waf').locator('xpath=ancestor::div[contains(@class, "flex")][1]');
+      const wafButton = wafCard.getByRole('button', { name: /configure/i });
+      await expect(wafButton).toBeVisible({ timeout: 10000 });

      // Wait and scroll into view
      await page.waitForLoadState('networkidle');
      await wafButton.scrollIntoViewIfNeeded();
-      await page.waitForTimeout(200);
      await wafButton.click({ force: true });
      await expect(page).toHaveURL(/\/security\/waf/);
    });

    test('should navigate to Rate Limiting page when configure clicked', async ({ page }) => {
-      // Rate Limiting is Layer 4 - the fourth configure button in the security cards grid
-      const allConfigButtons = page.getByRole('button', { name: /configure/i });
-      const count = await allConfigButtons.count();
-
-      // Should have at least 4 configure buttons
-      if (count < 4) {
-        test.info().annotations.push({
-          type: 'skip-reason',
-          description: 'Not enough configure buttons found on page'
-        });
-        return;
-      }
-
-      // Rate Limit is the 4th configure button (index 3)
-      const rateLimitButton = allConfigButtons.nth(3);
+      const rateLimitCard = page.getByTestId('toggle-rate-limit').locator('xpath=ancestor::div[contains(@class, "flex")][1]');
+      const rateLimitButton = rateLimitCard.getByRole('button', { name: /configure/i });
+      await expect(rateLimitButton).toBeVisible({ timeout: 10000 });

      // Wait and scroll into view
      await page.waitForLoadState('networkidle');
      await rateLimitButton.scrollIntoViewIfNeeded();
-      await page.waitForTimeout(200);
      await rateLimitButton.click({ force: true });
      await expect(page).toHaveURL(/\/security\/rate-limiting/);
    });
@@ -361,21 +611,7 @@ test.describe('Security Dashboard @security', () => {
    test('should display admin whitelist section when Cerberus enabled', async ({ page }) => {
      // Check if the admin whitelist input is visible (only shown when Cerberus is enabled)
      const whitelistInput = page.getByPlaceholder(/192\.168|cidr/i);
-      const isVisible = await whitelistInput.isVisible().catch(() => false);
-
-      if (isVisible) {
-        await expect(whitelistInput).toBeVisible();
-      } else {
-        // Cerberus might be disabled - just verify the page loaded correctly
-        // by checking for the Cerberus Dashboard header which is always visible
-        const cerberusHeader = page.getByText(/cerberus.*dashboard/i);
-        await expect(cerberusHeader).toBeVisible();
-
-        test.info().annotations.push({
-          type: 'info',
-          description: 'Admin whitelist section not visible - Cerberus may be disabled'
-        });
-      }
+      await expect(whitelistInput).toBeVisible({ timeout: 10000 });
    });

    test('Emergency token can be generated', async ({ page, request }, testInfo) => {