diff --git a/src/react/ui-elements/Veeam/VeeamCapacityModal.test.tsx b/src/react/ui-elements/Veeam/VeeamCapacityModal.test.tsx index f3f834086..e09672795 100644 --- a/src/react/ui-elements/Veeam/VeeamCapacityModal.test.tsx +++ b/src/react/ui-elements/Veeam/VeeamCapacityModal.test.tsx @@ -5,6 +5,7 @@ import { bucketName } from '../../../js/mock/S3Client'; import { NewWrapper, TEST_API_BASE_URL } from '../../utils/testUtil'; import { VeeamCapacityModal } from './VeeamCapacityModal'; import { VEEAM_XML_PREFIX } from './VeeamConstants'; +import userEvent from '@testing-library/user-event'; describe('VeeamCapacityModal', () => { const mockMutate = jest.fn(); @@ -52,6 +53,16 @@ describe('VeeamCapacityModal', () => { expect(selectors.modalTitle()).toBeInTheDocument(); }); + it('should enabled edit button when value is valid', async () => { + await userEvent.click(selectors.editBtn()); + + await userEvent.clear(selectors.capacityInput()); + expect(selectors.editModalBtn()).toBeDisabled(); + await userEvent.type(selectors.capacityInput(), '2.2'); + + expect(selectors.editModalBtn()).toBeEnabled(); + }); + it('should call mutate function when edit button is clicked', async () => { fireEvent.click(selectors.editBtn()); fireEvent.change(selectors.capacityInput(), { target: { value: '200' } }); diff --git a/src/react/ui-elements/Veeam/VeeamCapacityModal.tsx b/src/react/ui-elements/Veeam/VeeamCapacityModal.tsx index 1745e2053..dbfafb6ff 100644 --- a/src/react/ui-elements/Veeam/VeeamCapacityModal.tsx +++ b/src/react/ui-elements/Veeam/VeeamCapacityModal.tsx @@ -22,6 +22,7 @@ import { VEEAM_XML_PREFIX, } from './VeeamConstants'; import { getCapacityBytes, useCapacityUnit } from './useCapacityUnit'; +import { checkDecimals } from './VeeamConfiguration'; const schema = Joi.object({ capacity: Joi.number() @@ -29,12 +30,7 @@ const schema = Joi.object({ .min(1) .max(1024) .custom((value, helpers) => { - if (!Number.isInteger(value * 100)) { - return helpers.message({ - custom: '"capacity" must have at most 2 decimals', - }); - } - return value; + return checkDecimals(value, helpers); }), capacityUnit: Joi.string().required(), }); diff --git a/src/react/ui-elements/Veeam/VeeamConfiguration.test.tsx b/src/react/ui-elements/Veeam/VeeamConfiguration.test.tsx index eb08c30d8..f64b7e7ba 100644 --- a/src/react/ui-elements/Veeam/VeeamConfiguration.test.tsx +++ b/src/react/ui-elements/Veeam/VeeamConfiguration.test.tsx @@ -222,6 +222,19 @@ describe('Veeam Configuration UI', () => { expect(selectors.accountNameInput()).toHaveValue('Veeam'); }); }); + it('should enabled continnue button if capacity value is valid', async () => { + //S + mockUseAccountsImplementation(); + renderVeeamConfigurationForm(); + await userEvent.type(selectors.accountNameInput(), 'Veeam'); + await userEvent.type(selectors.repositoryInput(), 'veeam-bucket'); + //E + await userEvent.clear(selectors.maxCapacityInput()); + expect(selectors.continueButton()).toBeDisabled(); + await userEvent.type(selectors.maxCapacityInput(), '2.2'); + //V + expect(selectors.continueButton()).toBeEnabled(); + }); it('should show validation error if the max capacity is less than 1', async () => { //S mockUseAccountsImplementation(); diff --git a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx index 173ba2b63..bbeeddc81 100644 --- a/src/react/ui-elements/Veeam/VeeamConfiguration.tsx +++ b/src/react/ui-elements/Veeam/VeeamConfiguration.tsx @@ -40,6 +40,19 @@ import { useAccountsLocationsAndEndpoints } from '../../../react/next-architectu import { useAccountsLocationsEndpointsAdapter } from '../../..//react/next-architecture/ui/AccountsLocationsEndpointsAdapterProvider'; import { VeeamLogo } from './VeeamLogo'; +export const checkDecimals = (value: number, helpers: Joi.CustomHelpers) => { + const stringValue = value.toString(); + if (stringValue.includes('.')) { + const decimals = stringValue.split('.')[1]; + if (decimals.length > 2) { + return helpers.message({ + custom: '"capacity" must have at most 2 decimals', + }); + } + } + return value; +}; + const schema = Joi.object({ accountName: accountNameValidationSchema, bucketName: bucketNameValidationSchema, @@ -50,14 +63,7 @@ const schema = Joi.object({ .required() .min(1) .max(1024) - .custom((value, helpers) => { - if (!Number.isInteger(value * 100)) { - return helpers.message({ - custom: '"capacity" must have at most 2 decimals', - }); - } - return value; - }), + .custom((value, helpers) => checkDecimals(value, helpers)), otherwise: Joi.valid(), }), capacityUnit: Joi.when('application', {