-
-
Notifications
You must be signed in to change notification settings - Fork 78
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
234 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
72 changes: 72 additions & 0 deletions
72
...c/components/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCell.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}); | ||
}); |
42 changes: 42 additions & 0 deletions
42
...ents/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellEditMode.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
69 changes: 69 additions & 0 deletions
69
...ents/Brokers/Broker/Configs/TableComponents/InputCell/__test__/InputCellViewMode.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
frontend/src/components/Brokers/Broker/Configs/lib/__test__/utils.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); | ||
}); | ||
}); |