@libredb/studio 0.9.7

package/tests/components/admin/SecurityTab.test.tsx

@@ -0,0 +1,467 @@
+import '../../setup-dom';
+import { mockToastSuccess } from '../../helpers/mock-sonner';
+import '../../helpers/mock-navigation';
+
+import { mock } from 'bun:test';
+import { setupRechartssMock, setupFramerMotionMock } from '../../helpers/mock-monaco';
+
+setupRechartssMock();
+setupFramerMotionMock();
+
+mock.module('@/components/MaskingSettings', () => ({
+  MaskingSettings: () => {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const React = require('react');
+    return React.createElement('div', { 'data-testid': 'masking-settings' }, 'MaskingSettings');
+  },
+}));
+
+mock.module('@/lib/monitoring-thresholds', () => ({
+  DEFAULT_THRESHOLDS: [
+    { metric: 'cacheHitRatio', warning: 90, critical: 80, direction: 'below' as const, label: 'Cache Hit Ratio' },
+    { metric: 'connectionPercent', warning: 70, critical: 90, direction: 'above' as const, label: 'Connection Usage' },
+  ],
+}));
+
+import { describe, test, expect, beforeEach, afterEach } from 'bun:test';
+import { render, fireEvent, act, waitFor, cleanup } from '@testing-library/react';
+import React from 'react';
+
+import { SecurityTab } from '@/components/admin/tabs/SecurityTab';
+
+// =============================================================================
+// SecurityTab Tests
+// =============================================================================
+
+// Helper: Radix Tabs uses onMouseDown (not onClick) to switch tabs.
+// In happy-dom, fireEvent.click does not trigger onMouseDown in the correct
+// event sequence, so we dispatch mouseDown explicitly.
+function clickRadixTab(element: HTMLElement) {
+  fireEvent.mouseDown(element, { button: 0 });
+}
+
+describe('SecurityTab', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  beforeEach(() => {
+    // Clear localStorage between tests
+    if (typeof localStorage !== 'undefined') {
+      localStorage.removeItem('libredb_threshold_config');
+    }
+  });
+
+  test('renders 3 tabs (Data Masking, Access, Thresholds)', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { queryByText } = renderResult!;
+
+    expect(queryByText('Data Masking')).not.toBeNull();
+    expect(queryByText('Access')).not.toBeNull();
+    expect(queryByText('Thresholds')).not.toBeNull();
+  });
+
+  test('masking tab shows MaskingSettings component', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { queryByTestId, queryByText } = renderResult!;
+
+    // Data Masking is the default tab, so MaskingSettings should be visible
+    expect(queryByTestId('masking-settings')).not.toBeNull();
+    expect(queryByText('MaskingSettings')).not.toBeNull();
+  });
+
+  test('access tab shows security summary cards', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    // Click the Access tab using mouseDown (Radix listens to onMouseDown)
+    await act(async () => {
+      clickRadixTab(getByText('Access'));
+    });
+
+    // Access summary shows these labels
+    await waitFor(() => {
+      expect(queryByText('Security & Access')).not.toBeNull();
+      expect(queryByText('Authentication')).not.toBeNull();
+      expect(queryByText('API Security')).not.toBeNull();
+      expect(queryByText('Connection Security')).not.toBeNull();
+    });
+  });
+
+  test('thresholds tab shows metric sliders', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    // Click the Thresholds tab using mouseDown (Radix listens to onMouseDown)
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    // Threshold settings should show metric labels
+    await waitFor(() => {
+      expect(queryByText('Monitoring Thresholds')).not.toBeNull();
+      expect(queryByText('Cache Hit Ratio')).not.toBeNull();
+      expect(queryByText('Connection Usage')).not.toBeNull();
+    });
+  });
+
+  test('save button present in thresholds', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    // Click the Thresholds tab using mouseDown (Radix listens to onMouseDown)
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    await waitFor(() => {
+      expect(queryByText('Save Config')).not.toBeNull();
+    });
+  });
+
+  test('reset button present in thresholds', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    // Click the Thresholds tab using mouseDown (Radix listens to onMouseDown)
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    await waitFor(() => {
+      expect(queryByText('Reset Defaults')).not.toBeNull();
+    });
+  });
+
+  // ===========================================================================
+  // NEW TESTS
+  // ===========================================================================
+
+  test('access tab shows security badges (ENABLED, Supported, Configurable)', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryAllByText, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Access'));
+    });
+
+    await waitFor(() => {
+      // Admin Access and User Access both have ENABLED badges
+      const enabledBadges = queryAllByText('ENABLED');
+      expect(enabledBadges.length).toBe(2);
+
+      // SSL/TLS and SSH Tunnel have Supported badges
+      const supportedBadges = queryAllByText('Supported');
+      expect(supportedBadges.length).toBe(2);
+
+      // Data Masking has Configurable badge
+      expect(queryByText('Configurable')).not.toBeNull();
+    });
+  });
+
+  test('access tab shows JWT and RBAC info', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Access'));
+    });
+
+    await waitFor(() => {
+      // Authentication method shows RBAC
+      expect(queryByText('Environment Variable (RBAC)')).not.toBeNull();
+      // API security shows JWT
+      expect(queryByText('JWT / HTTP-only Cookie')).not.toBeNull();
+    });
+  });
+
+  test('thresholds tab shows direction text (Alert when above/below)', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    await waitFor(() => {
+      // cacheHitRatio has direction 'below'
+      expect(queryByText('Alert when below')).not.toBeNull();
+      // connectionPercent has direction 'above'
+      expect(queryByText('Alert when above')).not.toBeNull();
+    });
+  });
+
+  test('save button is disabled when no changes have been made', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    await waitFor(() => {
+      const saveButton = getByText('Save Config').closest('button');
+      expect(saveButton).not.toBeNull();
+      expect(saveButton!.disabled).toBe(true);
+    });
+  });
+
+  test('save button becomes enabled after slider change', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, container } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    // Find a slider thumb and press ArrowRight to change the value
+    await waitFor(() => {
+      const sliders = container.querySelectorAll('[role="slider"]');
+      expect(sliders.length).toBeGreaterThan(0);
+    });
+
+    const sliders = container.querySelectorAll('[role="slider"]');
+    await act(async () => {
+      (sliders[0] as HTMLElement).focus();
+      fireEvent.keyDown(sliders[0], { key: 'ArrowRight' });
+    });
+
+    await waitFor(() => {
+      const saveButton = getByText('Save Config').closest('button');
+      expect(saveButton).not.toBeNull();
+      expect(saveButton!.disabled).toBe(false);
+    });
+  });
+
+  test('save config writes to localStorage and shows success toast', async () => {
+    mockToastSuccess.mockClear();
+
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, container } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    // Change a slider value so Save becomes enabled
+    await waitFor(() => {
+      const sliders = container.querySelectorAll('[role="slider"]');
+      expect(sliders.length).toBeGreaterThan(0);
+    });
+
+    const sliders = container.querySelectorAll('[role="slider"]');
+    await act(async () => {
+      (sliders[0] as HTMLElement).focus();
+      fireEvent.keyDown(sliders[0], { key: 'ArrowRight' });
+    });
+
+    // Click Save Config
+    await act(async () => {
+      fireEvent.click(getByText('Save Config'));
+    });
+
+    // Verify localStorage was written
+    const stored = localStorage.getItem('libredb_threshold_config');
+    expect(stored).not.toBeNull();
+    const parsed = JSON.parse(stored!);
+    expect(Array.isArray(parsed)).toBe(true);
+    expect(parsed.length).toBe(2);
+
+    // Verify success toast
+    expect(mockToastSuccess).toHaveBeenCalledWith('Threshold configuration saved');
+  });
+
+  test('reset defaults restores values and shows success toast', async () => {
+    mockToastSuccess.mockClear();
+
+    // Pre-seed localStorage with custom thresholds
+    const custom = [
+      { metric: 'cacheHitRatio', warning: 50, critical: 30, direction: 'below', label: 'Cache Hit Ratio' },
+      { metric: 'connectionPercent', warning: 60, critical: 85, direction: 'above', label: 'Connection Usage' },
+    ];
+    localStorage.setItem('libredb_threshold_config', JSON.stringify(custom));
+
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    // Click Reset Defaults
+    await act(async () => {
+      fireEvent.click(getByText('Reset Defaults'));
+    });
+
+    // Verify default values are shown (from the mock DEFAULT_THRESHOLDS)
+    await waitFor(() => {
+      // Cache Hit Ratio warning=90, critical=80 (defaults)
+      expect(queryByText('Cache Hit Ratio')).not.toBeNull();
+      expect(queryByText('Connection Usage')).not.toBeNull();
+    });
+
+    // Verify localStorage was overwritten with defaults
+    const stored = localStorage.getItem('libredb_threshold_config');
+    expect(stored).not.toBeNull();
+    const parsed = JSON.parse(stored!);
+    expect(parsed[0].warning).toBe(90);
+    expect(parsed[0].critical).toBe(80);
+
+    // Verify success toast
+    expect(mockToastSuccess).toHaveBeenCalledWith('Thresholds reset to defaults');
+  });
+
+  test('loads thresholds from localStorage on mount', async () => {
+    // Pre-seed localStorage with custom values
+    const custom = [
+      { metric: 'cacheHitRatio', warning: 55, critical: 40, direction: 'below', label: 'Cache Hit Ratio' },
+      { metric: 'connectionPercent', warning: 65, critical: 88, direction: 'above', label: 'Connection Usage' },
+    ];
+    localStorage.setItem('libredb_threshold_config', JSON.stringify(custom));
+
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    // The custom warning/critical values should appear in the rendered output
+    await waitFor(() => {
+      // cacheHitRatio warning=55 should be displayed
+      expect(queryByText('55%')).not.toBeNull();
+      // cacheHitRatio critical=40 should be displayed
+      expect(queryByText('40%')).not.toBeNull();
+      // connectionPercent warning=65 should be displayed
+      expect(queryByText('65%')).not.toBeNull();
+      // connectionPercent critical=88 should be displayed
+      expect(queryByText('88%')).not.toBeNull();
+    });
+  });
+
+  test('percentage suffix is shown for percent metrics', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryAllByText, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    // Both mock thresholds are percent metrics (not 'deadlocks')
+    // cacheHitRatio: warning=90, critical=80
+    // connectionPercent: warning=70, critical=90
+    await waitFor(() => {
+      // 90% appears twice (cacheHitRatio warning + connectionPercent critical)
+      const ninetyPercent = queryAllByText('90%');
+      expect(ninetyPercent.length).toBe(2);
+
+      // 80% appears once (cacheHitRatio critical)
+      expect(queryByText('80%')).not.toBeNull();
+
+      // 70% appears once (connectionPercent warning)
+      expect(queryByText('70%')).not.toBeNull();
+    });
+  });
+
+  test('warning and critical slider labels render', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, queryAllByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    await waitFor(() => {
+      // Each metric has a Warning and Critical label (2 metrics = 2 of each)
+      const warningLabels = queryAllByText('Warning');
+      expect(warningLabels.length).toBe(2);
+
+      const criticalLabels = queryAllByText('Critical');
+      expect(criticalLabels.length).toBe(2);
+    });
+  });
+
+  test('thresholds tab renders all metric rows with full structure', async () => {
+    let renderResult: ReturnType<typeof render>;
+    await act(async () => {
+      renderResult = render(<SecurityTab />);
+    });
+    const { getByText, container, queryByText } = renderResult!;
+
+    await act(async () => {
+      clickRadixTab(getByText('Thresholds'));
+    });
+
+    await waitFor(() => {
+      // Title and description are present
+      expect(queryByText('Monitoring Thresholds')).not.toBeNull();
+      expect(
+        queryByText(/Configure warning and critical thresholds/)
+      ).not.toBeNull();
+
+      // Both metric labels
+      expect(queryByText('Cache Hit Ratio')).not.toBeNull();
+      expect(queryByText('Connection Usage')).not.toBeNull();
+
+      // Both direction texts
+      expect(queryByText('Alert when below')).not.toBeNull();
+      expect(queryByText('Alert when above')).not.toBeNull();
+
+      // Slider elements: 2 metrics x 2 sliders (warning + critical) = 4 slider thumbs
+      const sliderThumbs = container.querySelectorAll('[role="slider"]');
+      expect(sliderThumbs.length).toBe(4);
+
+      // Both action buttons
+      expect(queryByText('Save Config')).not.toBeNull();
+      expect(queryByText('Reset Defaults')).not.toBeNull();
+    });
+  });
+});

package/tests/components/monitoring/MetricChart.test.tsx

@@ -0,0 +1,111 @@
+import '../../setup-dom';
+import { mock } from 'bun:test';
+import React from 'react';
+
+// Mock recharts — DOM-only environment can't render SVG charts
+mock.module('recharts', () => ({
+  AreaChart: ({ children, data }: { children: React.ReactNode; data: unknown[] }) =>
+    React.createElement('div', { 'data-testid': 'area-chart', 'data-count': data.length }, children),
+  Area: (props: Record<string, unknown>) =>
+    React.createElement('div', { 'data-testid': 'area', 'data-color': props.stroke }),
+  XAxis: () => React.createElement('div', { 'data-testid': 'x-axis' }),
+  YAxis: () => React.createElement('div', { 'data-testid': 'y-axis' }),
+  ResponsiveContainer: ({ children }: { children: React.ReactNode }) =>
+    React.createElement('div', { 'data-testid': 'responsive-container' }, children),
+  Tooltip: () => React.createElement('div', { 'data-testid': 'tooltip' }),
+}));
+
+const { MetricChart } = await import('@/components/monitoring/tabs/MetricChart');
+
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, render } from '@testing-library/react';
+
+describe('MetricChart', () => {
+  afterEach(() => { cleanup(); });
+
+  test('shows collecting message when data has 0 points', () => {
+    const { getByText } = render(
+      <MetricChart data={[]} color="#3b82f6" title="CPU Usage" />
+    );
+    expect(getByText('Collecting data for CPU Usage...')).not.toBeNull();
+  });
+
+  test('shows collecting message when data has 1 point', () => {
+    const { getByText } = render(
+      <MetricChart data={[{ timestamp: Date.now(), value: 42 }]} color="#3b82f6" title="Memory" />
+    );
+    expect(getByText('Collecting data for Memory...')).not.toBeNull();
+  });
+
+  test('does not render chart when data has fewer than 2 points', () => {
+    const { queryByTestId } = render(
+      <MetricChart data={[{ timestamp: Date.now(), value: 10 }]} color="#f00" title="Test" />
+    );
+    expect(queryByTestId('area-chart')).toBeNull();
+  });
+
+  test('renders chart when data has 2+ points', () => {
+    const data = [
+      { timestamp: 1000, value: 10 },
+      { timestamp: 2000, value: 20 },
+    ];
+    const { getByTestId, queryByText } = render(
+      <MetricChart data={data} color="#22c55e" title="Connections" />
+    );
+    expect(getByTestId('area-chart')).not.toBeNull();
+    expect(getByTestId('responsive-container')).not.toBeNull();
+    expect(queryByText(/Collecting data/)).toBeNull();
+  });
+
+  test('passes data length to AreaChart', () => {
+    const data = [
+      { timestamp: 1000, value: 10 },
+      { timestamp: 2000, value: 20 },
+      { timestamp: 3000, value: 30 },
+    ];
+    const { getByTestId } = render(
+      <MetricChart data={data} color="#3b82f6" title="QPS" />
+    );
+    expect(getByTestId('area-chart').getAttribute('data-count')).toBe('3');
+  });
+
+  test('passes color to Area stroke', () => {
+    const data = [
+      { timestamp: 1000, value: 10 },
+      { timestamp: 2000, value: 20 },
+    ];
+    const { getByTestId } = render(
+      <MetricChart data={data} color="#ef4444" title="Errors" />
+    );
+    expect(getByTestId('area').getAttribute('data-color')).toBe('#ef4444');
+  });
+
+  test('renders all chart sub-components', () => {
+    const data = [
+      { timestamp: 1000, value: 10 },
+      { timestamp: 2000, value: 20 },
+    ];
+    const { getByTestId } = render(
+      <MetricChart data={data} color="#3b82f6" title="Latency" unit="ms" />
+    );
+    expect(getByTestId('x-axis')).not.toBeNull();
+    expect(getByTestId('y-axis')).not.toBeNull();
+    expect(getByTestId('tooltip')).not.toBeNull();
+    expect(getByTestId('area')).not.toBeNull();
+  });
+
+  test('uses title in collecting message', () => {
+    const { getByText } = render(
+      <MetricChart data={[]} color="#3b82f6" title="Custom Metric" />
+    );
+    expect(getByText('Collecting data for Custom Metric...')).not.toBeNull();
+  });
+
+  test('defaults unit to empty string', () => {
+    const { container } = render(
+      <MetricChart data={[]} color="#3b82f6" title="Test" />
+    );
+    // Should render without error (unit defaults to '')
+    expect(container).not.toBeNull();
+  });
+});