cameleer-server/ui/src/pages/AppsTab/AppDeploymentPage/ConfigTabs/readOnly-contract.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ThemeProvider } from '@cameleer/design-system';
import type { ReactNode } from 'react';
import { MonitoringTab } from './MonitoringTab';
import { ResourcesTab } from './ResourcesTab';
import { VariablesTab } from './VariablesTab';
import { SensitiveKeysTab } from './SensitiveKeysTab';
import type {
  MonitoringFormState,
  ResourcesFormState,
  VariablesFormState,
  SensitiveKeysFormState,
} from '../hooks/useDeploymentPageState';

function wrap(ui: ReactNode) {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: { retry: false },
    },
  });
  return render(
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>{ui}</ThemeProvider>
    </QueryClientProvider>,
  );
}

const defaultMonitoring: MonitoringFormState = {
  engineLevel: 'REGULAR',
  payloadCaptureMode: 'BOTH',
  payloadSize: '4',
  payloadUnit: 'KB',
  applicationLogLevel: 'INFO',
  agentLogLevel: 'INFO',
  metricsEnabled: true,
  metricsInterval: '60',
  samplingRate: '1.0',
  compressSuccess: false,
  replayEnabled: true,
  routeControlEnabled: true,
};

const defaultResources: ResourcesFormState = {
  memoryLimit: '512',
  memoryReserve: '',
  cpuRequest: '500',
  cpuLimit: '',
  appPort: '8080',
  replicas: '1',
  deployStrategy: 'blue-green',
  stripPrefix: true,
  sslOffloading: true,
  externalRouting: true,
  runtimeType: 'auto',
  customArgs: '',
  extraNetworks: [],
};

const defaultVariables: VariablesFormState = {
  envVars: [],
};

const defaultSensitiveKeys: SensitiveKeysFormState = {
  sensitiveKeys: [],
};

describe('ConfigTabs disabled contract', () => {
  describe('MonitoringTab', () => {
    it('disables all inputs and selects when disabled=true', () => {
      wrap(
        <MonitoringTab
          value={defaultMonitoring}
          onChange={vi.fn()}
          disabled={true}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      const comboboxes = screen.queryAllByRole('combobox');

      expect(textboxes.length).toBeGreaterThan(0);
      expect(comboboxes.length).toBeGreaterThan(0);

      textboxes.forEach((box) => {
        expect(box).toBeDisabled();
      });
      comboboxes.forEach((cb) => {
        expect(cb).toBeDisabled();
      });
    });

    it('enables inputs when disabled=false', () => {
      wrap(
        <MonitoringTab
          value={defaultMonitoring}
          onChange={vi.fn()}
          disabled={false}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      expect(textboxes.length).toBeGreaterThan(0);
      textboxes.forEach((box) => {
        expect(box).not.toBeDisabled();
      });
    });
  });

  describe('ResourcesTab', () => {
    it('disables all inputs and selects when disabled=true', () => {
      wrap(
        <ResourcesTab
          value={defaultResources}
          onChange={vi.fn()}
          disabled={true}
          isProd={true}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      const comboboxes = screen.queryAllByRole('combobox');

      expect(textboxes.length).toBeGreaterThan(0);
      expect(comboboxes.length).toBeGreaterThan(0);

      textboxes.forEach((box) => {
        expect(box).toBeDisabled();
      });
      comboboxes.forEach((cb) => {
        expect(cb).toBeDisabled();
      });
    });

    it('enables inputs when disabled=false', () => {
      wrap(
        <ResourcesTab
          value={defaultResources}
          onChange={vi.fn()}
          disabled={false}
          isProd={true}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      expect(textboxes.length).toBeGreaterThan(0);
      textboxes.forEach((box) => {
        expect(box).not.toBeDisabled();
      });
    });
  });

  describe('VariablesTab', () => {
    it('disables add and import buttons when disabled=true', () => {
      wrap(
        <VariablesTab
          value={defaultVariables}
          onChange={vi.fn()}
          disabled={true}
        />,
      );

      const buttons = screen.queryAllByRole('button');
      // When disabled, import and clear/add buttons should be disabled
      // Copy button is always enabled by design
      const importBtn = buttons.find((btn) => btn.title?.includes('Import'));
      const clearBtn = buttons.find((btn) => btn.title?.includes('Clear'));
      expect(importBtn).toBeDisabled();
      expect(clearBtn).toBeDisabled();
    });

    it('enables inputs when disabled=false', () => {
      wrap(
        <VariablesTab
          value={defaultVariables}
          onChange={vi.fn()}
          disabled={false}
        />,
      );

      const buttons = screen.queryAllByRole('button');
      const importBtn = buttons.find((btn) => btn.title?.includes('Import'));
      const clearBtn = buttons.find((btn) => btn.title?.includes('Clear'));
      expect(importBtn).not.toBeDisabled();
      expect(clearBtn).not.toBeDisabled();
    });

    it('with envVars populated, disables textboxes when disabled=true', () => {
      const varState: VariablesFormState = {
        envVars: [
          { key: 'TEST_VAR', value: 'test-value' },
          { key: 'ANOTHER', value: 'value' },
        ],
      };

      wrap(
        <VariablesTab
          value={varState}
          onChange={vi.fn()}
          disabled={true}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      expect(textboxes.length).toBeGreaterThan(0);
      textboxes.forEach((box) => {
        expect(box).toBeDisabled();
      });
    });
  });

  describe('SensitiveKeysTab', () => {
    it('disables input and add button when disabled=true', () => {
      wrap(
        <SensitiveKeysTab
          value={defaultSensitiveKeys}
          onChange={vi.fn()}
          disabled={true}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      expect(textboxes.length).toBeGreaterThan(0);
      textboxes.forEach((box) => {
        expect(box).toBeDisabled();
      });

      const buttons = screen.queryAllByRole('button');
      const addButton = buttons.find((btn) => btn.textContent?.includes('Add'));
      expect(addButton).toBeDisabled();
    });

    it('enables input when disabled=false', () => {
      wrap(
        <SensitiveKeysTab
          value={defaultSensitiveKeys}
          onChange={vi.fn()}
          disabled={false}
        />,
      );

      const textboxes = screen.queryAllByRole('textbox');
      expect(textboxes.length).toBeGreaterThan(0);
      textboxes.forEach((box) => {
        expect(box).not.toBeDisabled();
      });
    });

    it('with sensitive keys, disables remove tag buttons when disabled=true', () => {
      const skState: SensitiveKeysFormState = {
        sensitiveKeys: ['Authorization', 'X-API-Key', '*password*'],
      };

      wrap(
        <SensitiveKeysTab
          value={skState}
          onChange={vi.fn()}
          disabled={true}
        />,
      );

      // Tags have remove buttons that should be disabled
      const buttons = screen.queryAllByRole('button');
      // Check that at least some buttons exist (the tag removers)
      expect(buttons.length).toBeGreaterThan(0);
    });
  });
});