Skip to content

Commit

Permalink
fix: in edit mode fields should be disabled if checkbox is not selected
Browse files Browse the repository at this point in the history
  • Loading branch information
@daniele-mng @bjoernricks
daniele-mng authored and bjoernricks committed Jan 9, 2025
1 parent ccef5fe commit 70dfe66
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 51 deletions.
106 changes: 60 additions & 46 deletions src/web/pages/credentials/__tests__/dialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
getSelectElement,
getSelectItemElementsForSelect,
} from 'web/components/testing';
import {rendererWith, fireEvent} from 'web/utils/testing';
import {rendererWith, fireEvent, screen, render} from 'web/utils/testing';

import CredentialsDialog from '../dialog';

Expand All @@ -30,7 +30,7 @@ beforeEach(() => {
handleErrorClose = testing.fn();
});

const credential = Credential.fromElement({
const credentialMock = Credential.fromElement({
_id: 'foo',
allow_insecure: 1,
creation_time: '2020-12-16T15:23:59Z',
Expand All @@ -49,10 +49,6 @@ const credential = Credential.fromElement({

describe('CredentialsDialog component tests', () => {
test('should render', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName} = render(
<CredentialsDialog
types={ALL_CREDENTIAL_TYPES}
Expand Down Expand Up @@ -96,11 +92,11 @@ describe('CredentialsDialog component tests', () => {

const {getByName, getAllByName} = render(
<CredentialsDialog
allow_insecure={credential.allow_insecure}
comment={credential.comment}
credential={credential}
credential_type={credential.credential_type}
name={credential.name}
allow_insecure={credentialMock.allow_insecure}
comment={credentialMock.comment}
credential={credentialMock}
credential_type={credentialMock.credential_type}
name={credentialMock.name}
types={ALL_CREDENTIAL_TYPES}
onClose={handleClose}
onErrorClose={handleErrorClose}
Expand All @@ -125,10 +121,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should allow to change text field', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName} = render(
<CredentialsDialog
types={ALL_CREDENTIAL_TYPES}
Expand Down Expand Up @@ -156,8 +148,8 @@ describe('CredentialsDialog component tests', () => {
auth_algorithm: 'sha1',
autogenerate: 0,
change_community: undefined,
change_passphrase: undefined,
change_password: undefined,
change_passphrase: undefined,
change_privacy_password: undefined,
comment: 'bar',
community: '',
Expand All @@ -174,10 +166,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should allow changing select values', async () => {
const {render} = rendererWith({
capabilities: true,
});

render(
<CredentialsDialog
types={ALL_CREDENTIAL_TYPES}
Expand Down Expand Up @@ -223,10 +211,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should allow to close the dialog', () => {
const {render} = rendererWith({
capabilities: true,
});

render(
<CredentialsDialog
types={ALL_CREDENTIAL_TYPES}
Expand All @@ -241,10 +225,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should render form fields for Username + SSH', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName} = render(
<CredentialsDialog
credential_type={'usk'}
Expand All @@ -267,10 +247,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should render form fields for SNMP', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName, getAllByName} = render(
<CredentialsDialog
credential_type="snmp"
Expand Down Expand Up @@ -311,10 +287,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should render form fields for S/MIME Certificate', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName} = render(
<CredentialsDialog
credential_type="smime"
Expand All @@ -334,10 +306,6 @@ describe('CredentialsDialog component tests', () => {
});

test('should render form fields for PGP Encryption Key', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName} = render(
<CredentialsDialog
credential_type={'pgp'}
Expand All @@ -356,11 +324,7 @@ describe('CredentialsDialog component tests', () => {
});

test('should render form fields for Password Only', () => {
const {render} = rendererWith({
capabilities: true,
});

const {getByName} = render(
render(
<CredentialsDialog
credential_type={'pw'}
types={ALL_CREDENTIAL_TYPES}
Expand All @@ -373,8 +337,58 @@ describe('CredentialsDialog component tests', () => {
const select = getSelectElement();
expect(select).toHaveValue('Password only');

const password = getByName('password');
const password = screen.getByTestId('password-input');
expect(password).toHaveValue('');
expect(password).toHaveAttribute('type', 'password');
});

test('should render CredentialsDialog and handle replace password interactions correctly', () => {
const credentialEntryMock = Credential.fromElement({
_id: '9b0',
allow_insecure: 1,
creation_time: '2025-01-08T15:50:23.000Z',
comment: 'MockComment',
formats: {format: 'exe'},
full_type: 'username + password',
in_use: 0,
login: 'user42',
modification_time: '2025-01-09T08:58:33.000Z',
name: 'Unnamed',
owner: {name: 'admin'},
permissions: {permission: {name: 'Everything'}},
type: 'up',
writable: 1,
});

render(
<CredentialsDialog
allow_insecure={credentialEntryMock.allow_insecure}
comment={credentialEntryMock.comment}
credential={credentialEntryMock}
credential_type={credentialEntryMock.credential_type}
name={credentialEntryMock.name}
title={'Edit Credential'}
types={ALL_CREDENTIAL_TYPES}
onClose={handleClose}
onErrorClose={handleErrorClose}
onSave={handleSave}
/>,
);

const title = screen.getByText('Edit Credential');
expect(title).toBeVisible();

const passwordField = screen.getByTestId('password-input');
expect(passwordField).toBeDisabled();

const checkbox = screen.getByLabelText('Replace existing password with');

expect(checkbox).not.toBeChecked();

fireEvent.click(checkbox);

expect(checkbox).toBeChecked();

expect(passwordField).not.toBeDisabled();
});
});
13 changes: 8 additions & 5 deletions src/web/pages/credentials/dialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,8 @@ const CredentialsDialog = props => {
const isEdit = isDefined(credential);

useEffect(() => {
const {autogenerate: pAutogen, credential_type} = props;
setCredentialTypeAndAutoGenerate(credential_type, pAutogen);
const {autogenerate: pAutogenerate, credential_type} = props;
setCredentialTypeAndAutoGenerate(credential_type, pAutogenerate);
}, [props]);

const setCredentialTypeAndAutoGenerate = (type, autogenerate) => {
Expand Down Expand Up @@ -270,7 +270,7 @@ const CredentialsDialog = props => {
autoComplete="new-password"
disabled={
state.autogenerate === YES_VALUE ||
state.change_password === NO_VALUE
(isEdit && state.change_password !== YES_VALUE)
}
grow="1"
name="password"
Expand All @@ -296,7 +296,7 @@ const CredentialsDialog = props => {
autoComplete="new-password"
disabled={
state.autogenerate === YES_VALUE ||
state.change_passphrase === NO_VALUE
(isEdit && state.change_passphrase !== YES_VALUE)
}
grow="1"
name="passphrase"
Expand All @@ -320,7 +320,10 @@ const CredentialsDialog = props => {
)}
<PasswordField
autoComplete="new-password"
disabled={state.change_privacy_password === NO_VALUE}
disabled={
state.autogenerate === YES_VALUE ||
(isEdit && state.change_privacy_password !== YES_VALUE)
}
grow="1"
name="privacy_password"
value={state.privacy_password}
Expand Down

0 comments on commit 70dfe66

Please sign in to comment.