feat(pci-savings-plan): avoid exceeding max quantity (#13565)

ref: TAPC-1697

Signed-off-by: Lionel Bueno <[email protected]>

packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx

@@ -39,7 +39,9 @@ import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { MutationStatus, useMutationState } from '@tanstack/react-query';
 
-import QuantitySelector from '@/components/QuantitySelector/QuantitySelector';
+import QuantitySelector, {
+  MAX_QUANTITY,
+} from '@/components/QuantitySelector/QuantitySelector';
 import useTechnicalInfo, { usePricingInfo } from '@/hooks/useCatalogCommercial';
 import {
   getMutationKeyCreateSavingsPlan,
@@ -334,8 +336,12 @@ const CreatePlanForm: FC<CreatePlanFormProps> = ({
           <span slot="end">
             <QuantitySelector
               quantity={quantity}
-              onMinusClick={() => setQuantity(quantity - 1)}
-              onPlusClick={() => setQuantity(quantity + 1)}
+              onMinusClick={() => setQuantity((prevQ) => prevQ - 1)}
+              onPlusClick={() => {
+                if (quantity <= MAX_QUANTITY) {
+                  setQuantity((prevQ) => prevQ + 1);
+                }
+              }}
               onChangeQuantity={onChangeQuantity}
             />
           </span>

packages/manager/apps/pci-savings-plan/src/components/QuantitySelector/QuantitySelector.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { vi, describe, it, expect } from 'vitest';
+import { screen, fireEvent } from '@testing-library/react';
+import QuantitySelector, { MAX_QUANTITY } from './QuantitySelector';
+import '@testing-library/jest-dom';
+
+import { render } from '@/utils/testProvider';
+
+const defaultProps = {
+  quantity: 1,
+  onMinusClick: vi.fn(),
+  onPlusClick: vi.fn(),
+  onChangeQuantity: vi.fn(),
+};
+
+const setupSpecTest = async (props = defaultProps) =>
+  render(<QuantitySelector {...props} />);
+
+describe('QuantitySelector', () => {
+  it('should render the quantity input with the correct value', async () => {
+    await setupSpecTest();
+    const input = screen.getByTestId('input-quantity');
+    expect(input).toHaveValue(defaultProps.quantity);
+  });
+
+  it('should call onMinusClick when minus button is clicked', async () => {
+    await setupSpecTest();
+    const minusButton = screen.getByTestId('minus-button');
+    fireEvent.click(minusButton);
+    expect(defaultProps.onMinusClick).toHaveBeenCalled();
+  });
+
+  it('should call onPlusClick when plus button is clicked', async () => {
+    await setupSpecTest();
+    const plusButton = screen.getByTestId('plus-button');
+    fireEvent.click(plusButton);
+    expect(defaultProps.onPlusClick).toHaveBeenCalled();
+  });
+
+  it('should call onChangeQuantity with the correct value when input changes', async () => {
+    await setupSpecTest();
+    const input = screen.getByTestId('input-quantity');
+    fireEvent.change(input, { target: { value: '5' } });
+    expect(defaultProps.onChangeQuantity).toHaveBeenCalledWith(5);
+  });
+  it('should not call onChangeQuantity with a value greater than MAX_QUANTITY', async () => {
+    await setupSpecTest();
+    const input = screen.getByTestId('input-quantity');
+    fireEvent.change(input, { target: { value: MAX_QUANTITY + 1 } });
+    expect(defaultProps.onChangeQuantity).not.toHaveBeenCalledWith(
+      MAX_QUANTITY + 1,
+    );
+  });
+});

packages/manager/apps/pci-savings-plan/src/components/QuantitySelector/QuantitySelector.tsx

@@ -23,6 +23,8 @@ type QuantitySelectorProps = {
   onChangeQuantity: (v?: number) => void;
 };
 
+export const MAX_QUANTITY = 1000;
+
 const QuantitySelector: React.FC<QuantitySelectorProps> = ({
   quantity,
   onMinusClick,
@@ -31,6 +33,7 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
 }) => (
   <OsdsQuantity>
     <OsdsButton
+      data-testid="minus-button"
       onClick={onMinusClick}
       slot="minus"
       size={ODS_BUTTON_SIZE.sm}
@@ -42,14 +45,15 @@ const QuantitySelector: React.FC<QuantitySelectorProps> = ({
       <OsdsIcon size={ODS_ICON_SIZE.sm} name={ODS_ICON_NAME.MINUS} contrasted />
     </OsdsButton>
     <OsdsInput
+      data-testid="input-quantity"
       type={ODS_INPUT_TYPE.number}
       color={ODS_THEME_COLOR_INTENT.primary}
       min={1}
       step={1}
       value={quantity}
       onOdsValueChange={(e) => {
         const value = Number(e.detail.value);
-        if (value > 0) {
+        if (value > 0 && value <= MAX_QUANTITY) {
           onChangeQuantity(value);
         }
       }}