Tests

frontend/src/components/Brokers/Broker/Configs/Configs.tsx

@@ -19,7 +19,7 @@ const Configs: FC = () => {
   const [searchQuery, setSearchQuery] = useState('');
   const { clusterName, brokerId } = useAppParams<ClusterBrokerParam>();
   const { data: configs = [] } = useBrokerConfig(clusterName, Number(brokerId));
-  const { mutateAsync } = useUpdateBrokerConfigByName(
+  const updateBrokerConfigByName = useUpdateBrokerConfigByName(
     clusterName,
     Number(brokerId)
   );
@@ -32,7 +32,8 @@ const Configs: FC = () => {
   const onUpdateInputCell = async (
     name: BrokerConfig['name'],
     value: BrokerConfig['value']
-  ) => mutateAsync({ name, brokerConfigItem: { value } });
+  ) =>
+    updateBrokerConfigByName.mutateAsync({ name, brokerConfigItem: { value } });
 
   const columns = useMemo(
     () => getBrokerConfigsTableColumns(onUpdateInputCell),

frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCell.spec.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import InputCell, {
+  type InputCellProps,
+} from 'components/Brokers/Broker/Configs/TableComponents/InputCell/index';
+import { render } from 'lib/testHelpers';
+import { ConfigSource } from 'generated-sources';
+import { useConfirm } from 'lib/hooks/useConfirm';
+import { BrokerConfigsTableRow } from 'components/Brokers/Broker/Configs/lib/types';
+import { Row } from '@tanstack/react-table';
+
+jest.mock('lib/hooks/useConfirm', () => ({
+  useConfirm: jest.fn(),
+}));
+
+describe('InputCell', () => {
+  const mockOnUpdate = jest.fn();
+  const initialValue = 'initialValue';
+  const name = 'testName';
+  const original = {
+    name,
+    source: ConfigSource.DYNAMIC_BROKER_CONFIG,
+    value: initialValue,
+    isSensitive: false,
+    isReadOnly: false,
+  };
+
+  beforeEach(() => {
+    const setupWrapper = (props?: Partial<InputCellProps>) => (
+      <InputCell
+        {...(props as InputCellProps)}
+        row={{ original } as Row<BrokerConfigsTableRow>}
+        onUpdate={mockOnUpdate}
+      />
+    );
+    (useConfirm as jest.Mock).mockImplementation(
+      () => (message: string, callback: () => void) => callback()
+    );
+    render(setupWrapper());
+  });
+
+  it('renders InputCellViewMode by default', () => {
+    expect(screen.getByText(initialValue)).toBeInTheDocument();
+  });
+
+  it('switches to InputCellEditMode upon triggering an edit action', async () => {
+    const user = userEvent.setup();
+    await user.click(screen.getByLabelText('editAction'));
+    expect(
+      screen.getByRole('textbox', { name: /inputValue/i })
+    ).toBeInTheDocument();
+  });
+
+  it('calls onUpdate callback with the new value when saved', async () => {
+    const user = userEvent.setup();
+    await user.click(screen.getByLabelText('editAction')); // Enter edit mode
+    await user.type(
+      screen.getByRole('textbox', { name: /inputValue/i }),
+      '123'
+    );
+    await user.click(screen.getByRole('button', { name: /confirmAction/i }));
+    expect(mockOnUpdate).toHaveBeenCalledWith(name, 'initialValue123');
+  });
+
+  it('returns to InputCellViewMode upon canceling an edit', async () => {
+    const user = userEvent.setup();
+    await user.click(screen.getByLabelText('editAction')); // Enter edit mode
+    await user.click(screen.getByRole('button', { name: /cancelAction/i }));
+    expect(screen.getByText(initialValue)).toBeInTheDocument(); // Back to view mode
+  });
+});

frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellEditMode.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import InputCellEditMode from 'components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellEditMode';
+import { render } from 'lib/testHelpers';
+import userEvent from '@testing-library/user-event';
+
+describe('InputCellEditMode', () => {
+  const mockOnSave = jest.fn();
+  const mockOnCancel = jest.fn();
+
+  beforeEach(() => {
+    render(
+      <InputCellEditMode
+        initialValue="test"
+        onSave={mockOnSave}
+        onCancel={mockOnCancel}
+      />
+    );
+  });
+
+  it('renders with initial value', () => {
+    expect(screen.getByRole('textbox', { name: /inputValue/i })).toHaveValue(
+      'test'
+    );
+  });
+
+  it('calls onSave with new value', async () => {
+    const user = userEvent.setup();
+    await user.type(
+      screen.getByRole('textbox', { name: /inputValue/i }),
+      '123'
+    );
+    await user.click(screen.getByRole('button', { name: /confirmAction/i }));
+    expect(mockOnSave).toHaveBeenCalledWith('test123');
+  });
+
+  it('calls onCancel', async () => {
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /cancelAction/i }));
+    expect(mockOnCancel).toHaveBeenCalled();
+  });
+});

frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from 'lib/testHelpers';
+import InputCellViewMode from 'components/Brokers/Broker/Configs/TableComponents/InputCell/InputCellViewMode';
+
+describe('InputCellViewMode', () => {
+  const mockOnEdit = jest.fn();
+  const value = 'testValue';
+
+  it('displays the correct value for non-sensitive data', () => {
+    render(
+      <InputCellViewMode
+        value={value}
+        unit={undefined}
+        onEdit={mockOnEdit}
+        isDynamic
+        isSensitive={false}
+        isReadOnly={false}
+      />
+    );
+    expect(screen.getByTitle(value)).toBeInTheDocument();
+  });
+
+  it('masks sensitive data with asterisks', () => {
+    render(
+      <InputCellViewMode
+        value={value}
+        unit={undefined}
+        onEdit={mockOnEdit}
+        isDynamic
+        isSensitive
+        isReadOnly={false}
+      />
+    );
+    expect(screen.getByTitle('Sensitive Value')).toBeInTheDocument();
+    expect(screen.getByText('**********')).toBeInTheDocument();
+  });
+
+  it('renders edit button and triggers onEdit callback when clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <InputCellViewMode
+        value={value}
+        unit={undefined}
+        onEdit={mockOnEdit}
+        isDynamic
+        isSensitive={false}
+        isReadOnly={false}
+      />
+    );
+    await user.click(screen.getByLabelText('editAction'));
+    expect(mockOnEdit).toHaveBeenCalled();
+  });
+
+  it('disables edit button for read-only properties', () => {
+    render(
+      <InputCellViewMode
+        value={value}
+        unit={undefined}
+        onEdit={mockOnEdit}
+        isDynamic
+        isSensitive={false}
+        isReadOnly
+      />
+    );
+    expect(screen.getByLabelText('editAction')).toBeDisabled();
+  });
+});

frontend/src/components/Brokers/Broker/Configs/TableComponents/InputCell/index.tsx

@@ -11,7 +11,7 @@ import { getConfigUnit } from 'components/Brokers/Broker/Configs/lib/utils';
 import InputCellViewMode from './InputCellViewMode';
 import InputCellEditMode from './InputCellEditMode';
 
-interface InputCellProps
+export interface InputCellProps
   extends CellContext<BrokerConfigsTableRow, BrokerConfig['value']> {
   onUpdate: UpdateBrokerConfigCallback;
 }

frontend/src/components/Brokers/Broker/Configs/lib/__test__/utils.spec.tsx

@@ -0,0 +1,47 @@
+import {
+  getConfigTableData,
+  getConfigUnit,
+} from 'components/Brokers/Broker/Configs/lib/utils';
+import { ConfigSource } from 'generated-sources';
+
+describe('getConfigTableData', () => {
+  it('filters configs by search query and sorts by source priority', () => {
+    const configs = [
+      {
+        name: 'log.retention.ms',
+        value: '7200000',
+        source: ConfigSource.DEFAULT_CONFIG,
+        isSensitive: true,
+        isReadOnly: false,
+      },
+      {
+        name: 'log.segment.bytes',
+        value: '1073741824',
+        source: ConfigSource.DYNAMIC_BROKER_CONFIG,
+        isSensitive: false,
+        isReadOnly: true,
+      },
+      {
+        name: 'compression.type',
+        value: 'producer',
+        source: ConfigSource.DEFAULT_CONFIG,
+        isSensitive: true,
+        isReadOnly: false,
+      },
+    ];
+    const searchQuery = 'log';
+    const result = getConfigTableData(configs, searchQuery);
+
+    expect(result).toHaveLength(2);
+    expect(result[0].name).toBe('log.segment.bytes');
+    expect(result[1].name).toBe('log.retention.ms');
+  });
+});
+
+describe('getConfigUnit', () => {
+  it('identifies the unit of a configuration name', () => {
+    expect(getConfigUnit('log.retention.ms')).toBe('ms');
+    expect(getConfigUnit('log.segment.bytes')).toBe('bytes');
+    expect(getConfigUnit('compression.type')).toBeUndefined();
+  });
+});