From a346b53a158221fe4c342bb11c9ee5ec7e5fd891 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Tue, 26 Mar 2024 14:08:55 +0000
Subject: [PATCH 1/8] create mulitple items #453

---
 src/api/items.test.tsx                  | 105 ++++++++++++
 src/api/items.tsx                       |  61 +++++++
 src/app.types.tsx                       |  10 ++
 src/items/itemDialog.component.test.tsx | 189 +++++++++++++++++++++-
 src/items/itemDialog.component.tsx      | 206 +++++++++++++++++++++---
 5 files changed, 545 insertions(+), 26 deletions(-)

diff --git a/src/api/items.test.tsx b/src/api/items.test.tsx
index 82215a2cd..a3fd3af35 100644
--- a/src/api/items.test.tsx
+++ b/src/api/items.test.tsx
@@ -6,6 +6,7 @@ import {
   useItem,
   useItems,
   useMoveItemsToSystem,
+  useAddItems,
 } from './items';
 import {
   getItemById,
@@ -15,6 +16,7 @@ import {
 } from '../testUtils';
 import {
   AddItem,
+  AddItems,
   EditItem,
   Item,
   MoveItemsToSystem,
@@ -298,4 +300,107 @@ describe('catalogue items api functions', () => {
       );
     });
   });
+
+  describe('useAddItems', () => {
+    let addItems: AddItems;
+
+    // Use patch spy for testing since response is not actual data in this case
+    // so can't test the underlying use of editSystem otherwise
+    let axiosPostSpy;
+    const { _id, ...item } = getItemById('KvT2Ox7n');
+    beforeEach(() => {
+      addItems = {
+        quantity: 2,
+        startingValue: 10,
+        item: {
+          ...item,
+          serial_number: item.serial_number + '_%s',
+        },
+      };
+
+      axiosPostSpy = vi.spyOn(imsApi, 'post');
+    });
+
+    afterEach(() => {
+      vi.clearAllMocks();
+    });
+
+    it('sends requests to add multiple items and returns a successful response for each', async () => {
+      const { result } = renderHook(() => useAddItems(), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      expect(result.current.isIdle).toBe(true);
+
+      result.current.mutate(addItems);
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      for (
+        let i = addItems.startingValue;
+        i < addItems.startingValue + addItems.quantity;
+        i++
+      ) {
+        expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
+          ...item,
+          serial_number: item.serial_number + `_${i}`,
+        });
+      }
+
+      expect(result.current.data).toEqual([
+        {
+          message: 'Successfully created 5YUQDDjKpz2z_10',
+          name: '5YUQDDjKpz2z_10',
+          state: 'success',
+        },
+        {
+          message: 'Successfully created 5YUQDDjKpz2z_11',
+          name: '5YUQDDjKpz2z_11',
+          state: 'success',
+        },
+      ]);
+    });
+
+    it('handles failed requests when adding multiple items correctly', async () => {
+      addItems.item.serial_number = 'Error 500';
+
+      const { result } = renderHook(() => useAddItems(), {
+        wrapper: hooksWrapperWithProviders(),
+      });
+
+      expect(result.current.isIdle).toBe(true);
+
+      result.current.mutate(addItems);
+
+      await waitFor(() => {
+        expect(result.current.isSuccess).toBeTruthy();
+      });
+
+      for (
+        let i = addItems.startingValue;
+        i < addItems.startingValue + addItems.quantity;
+        i++
+      ) {
+        expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
+          ...item,
+          serial_number: 'Error 500',
+        });
+      }
+
+      expect(result.current.data).toEqual([
+        {
+          message: 'Something went wrong',
+          name: 'Error 500',
+          state: 'error',
+        },
+        {
+          message: 'Something went wrong',
+          name: 'Error 500',
+          state: 'error',
+        },
+      ]);
+    });
+  });
 });
diff --git a/src/api/items.tsx b/src/api/items.tsx
index 4da46deb0..b415ff3c5 100644
--- a/src/api/items.tsx
+++ b/src/api/items.tsx
@@ -8,6 +8,7 @@ import {
 } from '@tanstack/react-query';
 import {
   AddItem,
+  AddItems,
   EditItem,
   ErrorParsing,
   Item,
@@ -30,6 +31,66 @@ export const useAddItem = (): UseMutationResult<Item, AxiosError, AddItem> => {
   });
 };
 
+export const useAddItems = (): UseMutationResult<
+  TransferState[],
+  AxiosError,
+  AddItems
+> => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (addItems: AddItems) => {
+      const transferStates: TransferState[] = [];
+      const successfulSerialNumbers: string[] = [];
+
+      const promises = [];
+
+      for (
+        let i = addItems.startingValue;
+        i < addItems.startingValue + addItems.quantity;
+        i++
+      ) {
+        const item: AddItem = {
+          ...addItems.item,
+          serial_number:
+            addItems.item.serial_number?.replace('%s', String(i)) ?? null,
+        };
+
+        const promise = addItem(item)
+          .then((result: Item) => {
+            transferStates.push({
+              name: result.serial_number ?? '',
+              message: `Successfully created ${result.serial_number ?? ''}`,
+              state: 'success',
+            });
+            successfulSerialNumbers.push(result.serial_number ?? '');
+          })
+          .catch((error) => {
+            const response = error.response?.data as ErrorParsing;
+            transferStates.push({
+              name: item.serial_number ?? '',
+              message: response.detail,
+              state: 'error',
+            });
+          });
+
+        promises.push(promise);
+      }
+
+      await Promise.all(promises);
+      if (successfulSerialNumbers.length > 0) {
+        queryClient.invalidateQueries({
+          queryKey: ['Items', undefined, addItems.item.catalogue_item_id],
+        });
+        queryClient.invalidateQueries({
+          queryKey: ['Items', addItems.item.system_id, undefined],
+        });
+      }
+
+      return transferStates;
+    },
+  });
+};
+
 const fetchItems = async (
   system_id?: string,
   catalogue_item_id?: string
diff --git a/src/app.types.tsx b/src/app.types.tsx
index 59adb395c..adb5e7887 100644
--- a/src/app.types.tsx
+++ b/src/app.types.tsx
@@ -257,6 +257,12 @@ export interface AddItem extends ItemDetails {
   properties: CatalogueItemProperty[];
 }
 
+export interface AddItems {
+  quantity: number;
+  startingValue: number;
+  item: AddItem;
+}
+
 export interface Item extends ItemDetails {
   properties: CatalogueItemPropertyResponse[];
   id: string;
@@ -281,6 +287,10 @@ export interface CatalogueItemPropertiesErrorsType {
   } | null;
 }
 
+export interface AdvancedSerialNumberOptionsType {
+  quantity: string | null;
+  startingValue: string | null;
+}
 export interface AllowedValuesListErrorsType {
   index: number | null;
   errors: { index: number; errorMessage: string }[] | null;
diff --git a/src/items/itemDialog.component.test.tsx b/src/items/itemDialog.component.test.tsx
index 37efdae4a..121075074 100644
--- a/src/items/itemDialog.component.test.tsx
+++ b/src/items/itemDialog.component.test.tsx
@@ -72,6 +72,7 @@ describe('ItemDialog', () => {
 
   const modifyDetailsValues = async (values: {
     serialNumber?: string;
+    serialNumberAdvancedOptions?: { quantity?: string; startingValue?: string };
     assetNumber?: string;
     purchaseOrderNumber?: string;
     warrantyEndDate?: string;
@@ -85,6 +86,20 @@ describe('ItemDialog', () => {
         target: { value: values.serialNumber },
       });
 
+    if (Object.values(values.serialNumberAdvancedOptions ?? {}).length !== 0) {
+      await user.click(screen.getByText('Show advanced options'));
+      expect(screen.getByText('Close advanced options')).toBeInTheDocument();
+
+      values.serialNumberAdvancedOptions?.quantity !== undefined &&
+        fireEvent.change(screen.getByLabelText('Quantity'), {
+          target: { value: values.serialNumberAdvancedOptions.quantity },
+        });
+      values.serialNumberAdvancedOptions?.startingValue !== undefined &&
+        fireEvent.change(screen.getByLabelText('Starting value'), {
+          target: { value: values.serialNumberAdvancedOptions.startingValue },
+        });
+    }
+
     values.assetNumber !== undefined &&
       fireEvent.change(screen.getByLabelText('Asset number'), {
         target: { value: values.assetNumber },
@@ -244,6 +259,103 @@ describe('ItemDialog', () => {
       });
     });
 
+    it('adds multiple items with just the default values', async () => {
+      createView();
+
+      await modifyDetailsValues({
+        serialNumber: 'test12 %s',
+        serialNumberAdvancedOptions: { quantity: '2', startingValue: '10' },
+      });
+
+      //navigate through stepper
+      await user.click(screen.getByRole('button', { name: 'Next' }));
+      await user.click(screen.getByRole('button', { name: 'Next' }));
+
+      await modifySystemValue({
+        system: 'Giant laser',
+      });
+
+      await user.click(screen.getByRole('button', { name: 'Finish' }));
+
+      expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
+        asset_number: null,
+        catalogue_item_id: '1',
+        delivered_date: null,
+        is_defective: false,
+        notes: null,
+        properties: [
+          {
+            name: 'Resolution',
+            value: 12,
+          },
+          {
+            name: 'Frame Rate',
+            value: 30,
+          },
+          {
+            name: 'Sensor Type',
+            value: 'CMOS',
+          },
+          {
+            name: 'Sensor brand',
+            value: null,
+          },
+          {
+            name: 'Broken',
+            value: true,
+          },
+          {
+            name: 'Older than five years',
+            value: false,
+          },
+        ],
+        purchase_order_number: null,
+        serial_number: 'test12 10',
+        system_id: '65328f34a40ff5301575a4e3',
+        usage_status: 0,
+        warranty_end_date: null,
+      });
+
+      expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
+        asset_number: null,
+        catalogue_item_id: '1',
+        delivered_date: null,
+        is_defective: false,
+        notes: null,
+        properties: [
+          {
+            name: 'Resolution',
+            value: 12,
+          },
+          {
+            name: 'Frame Rate',
+            value: 30,
+          },
+          {
+            name: 'Sensor Type',
+            value: 'CMOS',
+          },
+          {
+            name: 'Sensor brand',
+            value: null,
+          },
+          {
+            name: 'Broken',
+            value: true,
+          },
+          {
+            name: 'Older than five years',
+            value: false,
+          },
+        ],
+        purchase_order_number: null,
+        serial_number: 'test12 11',
+        system_id: '65328f34a40ff5301575a4e3',
+        usage_status: 0,
+        warranty_end_date: null,
+      });
+    });
+
     it('navigates through the stepper using the labels', async () => {
       createView();
 
@@ -410,7 +522,7 @@ describe('ItemDialog', () => {
       });
 
       expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
-      expect(screen.getByText('Invalid date')).toBeInTheDocument();
+      expect(screen.getByText('Invalid item details')).toBeInTheDocument();
 
       await user.click(screen.getByText('Add item properties'));
 
@@ -451,6 +563,81 @@ describe('ItemDialog', () => {
       expect(screen.getByRole('button', { name: 'Finish' })).not.toBeDisabled();
     }, 10000);
 
+    it('displays error messages for serial number advance options', async () => {
+      createView();
+      await modifyDetailsValues({
+        serialNumberAdvancedOptions: { startingValue: '10' },
+      });
+
+      expect(
+        screen.getByText('Please enter a quantity value')
+      ).toBeInTheDocument();
+
+      await user.click(screen.getByText('Close advanced options'));
+      await modifyDetailsValues({
+        serialNumberAdvancedOptions: { quantity: '10a', startingValue: '10a' },
+      });
+
+      expect(screen.getAllByText('Please enter a valid number').length).toEqual(
+        2
+      );
+
+      await user.click(screen.getByText('Close advanced options'));
+      await modifyDetailsValues({
+        serialNumberAdvancedOptions: {
+          quantity: '10.5',
+          startingValue: '10.5',
+        },
+      });
+
+      expect(screen.getAllByText('Quantity must be an integer').length).toEqual(
+        2
+      );
+
+      await user.click(screen.getByText('Close advanced options'));
+      await modifyDetailsValues({
+        serialNumberAdvancedOptions: {
+          quantity: '-1',
+          startingValue: '-1',
+        },
+      });
+
+      expect(
+        screen.getByText('Quantity must be greater than 1')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('Quantity must be greater than or equal to 0')
+      ).toBeInTheDocument();
+
+      await user.click(screen.getByText('Close advanced options'));
+      await modifyDetailsValues({
+        serialNumberAdvancedOptions: {
+          quantity: '100',
+          startingValue: '2',
+        },
+      });
+
+      expect(
+        screen.getByText('Quantity must be less than 100')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText(
+          'Please use %s to specify the location you want to append the number to serial number'
+        )
+      ).toBeInTheDocument();
+
+      await user.click(screen.getByText('Close advanced options'));
+      await modifyDetailsValues({
+        serialNumber: 'test %s',
+        serialNumberAdvancedOptions: {
+          quantity: '4',
+          startingValue: '2',
+        },
+      });
+
+      expect(screen.getByText('e.g. test 2')).toBeInTheDocument();
+    }, 10000);
+
     it('adds an item (case empty string with spaces returns null and change property boolean values)', async () => {
       createView();
 
diff --git a/src/items/itemDialog.component.tsx b/src/items/itemDialog.component.tsx
index 90fd72660..54ab2bfdd 100644
--- a/src/items/itemDialog.component.tsx
+++ b/src/items/itemDialog.component.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {
   Box,
   Button,
+  Collapse,
   Dialog,
   DialogActions,
   DialogContent,
@@ -23,6 +24,7 @@ import {
 } from '@mui/material';
 import {
   AddItem,
+  AdvancedSerialNumberOptionsType,
   CatalogueCategory,
   CatalogueCategoryFormData,
   CatalogueItem,
@@ -35,13 +37,14 @@ import {
 import { DatePicker } from '@mui/x-date-pickers';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { matchCatalogueItemProperties } from '../catalogue/catalogue.component';
-import { useAddItem, useEditItem } from '../api/items';
+import { useAddItem, useAddItems, useEditItem } from '../api/items';
 import { AxiosError } from 'axios';
 import handleIMS_APIError from '../handleIMS_APIError';
 import { SystemsTableView } from '../systems/systemsTableView.component';
 import { useSystems, useSystemsBreadcrumbs } from '../api/systems';
 import Breadcrumbs from '../view/breadcrumbs.component';
 import { trimStringValues } from '../utils';
+import handleTransferState from '../handleTransferState';
 const maxYear = 2100;
 export function isValidDateTime(input: Date | string | null) {
   // Attempt to create a Date object from the input
@@ -135,6 +138,14 @@ function ItemDialog(props: ItemDialogProps) {
     []
   );
 
+  const [advancedSerialNumberOptions, setAdvancedSerialNumberOptions] =
+    React.useState<AdvancedSerialNumberOptionsType>({
+      quantity: null,
+      startingValue: null,
+    });
+  const [showAdvancedSerialNumberOptions, setShowAdvancedSerialNumberOptions] =
+    React.useState(false);
+
   const [propertyErrors, setPropertyErrors] = React.useState(
     new Array(parentCatalogueItemPropertiesInfo.length).fill(false)
   );
@@ -143,8 +154,9 @@ function ItemDialog(props: ItemDialogProps) {
     string | undefined
   >(undefined);
 
-  const { mutateAsync: addItem, isPending: isAddPending } = useAddItem();
-  const { mutateAsync: editItem, isPending: isEditPending } = useEditItem();
+  const { mutateAsync: addItem, isPending: isAddItemPending } = useAddItem();
+  const { mutateAsync: addItems, isPending: isAddItemsPending } = useAddItems();
+  const { mutateAsync: editItem, isPending: isEditItemPending } = useEditItem();
 
   React.useEffect(() => {
     if (type === 'create' && open) {
@@ -351,12 +363,30 @@ function ItemDialog(props: ItemDialogProps) {
       properties: updatedProperties,
     };
 
-    addItem(trimStringValues(item))
-      .then(() => handleClose())
-      .catch((error: AxiosError) => {
-        handleIMS_APIError(error);
+    if (advancedSerialNumberOptions.quantity) {
+      addItems({
+        quantity: Number(advancedSerialNumberOptions.quantity),
+        startingValue: Number(advancedSerialNumberOptions.startingValue ?? 1),
+        item: trimStringValues(item),
+      }).then((response) => {
+        handleTransferState(response);
+        handleClose();
       });
-  }, [handleFormPropertiesErrorStates, details, addItem, handleClose]);
+    } else {
+      addItem(trimStringValues(item))
+        .then(() => handleClose())
+        .catch((error: AxiosError) => {
+          handleIMS_APIError(error);
+        });
+    }
+  }, [
+    handleFormPropertiesErrorStates,
+    details,
+    advancedSerialNumberOptions,
+    addItems,
+    addItem,
+    handleClose,
+  ]);
 
   const handleEditItem = React.useCallback(() => {
     if (selectedItem) {
@@ -482,12 +512,47 @@ function ItemDialog(props: ItemDialogProps) {
     setFormErrorMessage(undefined);
   }, [parentSystemId]);
 
+  const hasSerialNumberErrors =
+    advancedSerialNumberOptions.quantity &&
+    !itemDetails.serial_number?.trim().includes('%s') &&
+    'Please use %s to specify the location you want to append the number to serial number';
+
+  const hasQuantityErrors = !advancedSerialNumberOptions.quantity
+    ? ''
+    : isNaN(Number(advancedSerialNumberOptions.quantity))
+      ? 'Please enter a valid number'
+      : !Number.isInteger(Number(advancedSerialNumberOptions.quantity))
+        ? 'Quantity must be an integer'
+        : Number(advancedSerialNumberOptions.quantity) <= 1
+          ? 'Quantity must be greater than 1'
+          : Number(advancedSerialNumberOptions.quantity) >= 100
+            ? 'Quantity must be less than 100'
+            : '';
+
+  const hasStartingValueErrors =
+    !advancedSerialNumberOptions.quantity &&
+    !!advancedSerialNumberOptions.startingValue
+      ? 'Please enter a quantity value'
+      : isNaN(Number(advancedSerialNumberOptions.startingValue))
+        ? 'Please enter a valid number'
+        : !Number.isInteger(Number(advancedSerialNumberOptions.startingValue))
+          ? 'Quantity must be an integer'
+          : Number(advancedSerialNumberOptions.startingValue) < 0
+            ? 'Quantity must be greater than or equal to 0'
+            : '';
+
   const isStepFailed = React.useCallback(
     (step: number) => {
       switch (step) {
         case 0:
-          return Object.values(hasDateErrors).some(
-            (value: boolean) => value === true
+          return (
+            // Date error
+            Object.values(hasDateErrors).some(
+              (value: boolean) => value === true
+            ) ||
+            !!hasSerialNumberErrors ||
+            !!hasQuantityErrors ||
+            !!hasStartingValueErrors
           );
         case 1:
           return propertyErrors.some((value) => value === true);
@@ -495,7 +560,13 @@ function ItemDialog(props: ItemDialogProps) {
           return false;
       }
     },
-    [hasDateErrors, propertyErrors]
+    [
+      hasDateErrors,
+      hasQuantityErrors,
+      hasSerialNumberErrors,
+      hasStartingValueErrors,
+      propertyErrors,
+    ]
   );
 
   const renderStepContent = (step: number) => {
@@ -503,7 +574,7 @@ function ItemDialog(props: ItemDialogProps) {
       case 0:
         return (
           <Grid item container spacing={1.5} xs={12}>
-            <Grid item xs={12}>
+            <Grid item container xs={12}>
               <TextField
                 label="Serial number"
                 size="small"
@@ -512,7 +583,95 @@ function ItemDialog(props: ItemDialogProps) {
                   handleItemDetails('serial_number', event.target.value);
                 }}
                 fullWidth
+                error={!!hasSerialNumberErrors}
+                helperText={
+                  hasSerialNumberErrors ||
+                  (advancedSerialNumberOptions.quantity &&
+                    itemDetails.serial_number?.trim().includes('%s') &&
+                    `e.g. ${itemDetails.serial_number?.replace(
+                      '%s',
+                      advancedSerialNumberOptions.startingValue ?? '1'
+                    )}`)
+                }
               />
+
+              {type !== 'edit' && (
+                <>
+                  <Grid
+                    item
+                    onClick={() =>
+                      setShowAdvancedSerialNumberOptions(
+                        !showAdvancedSerialNumberOptions
+                      )
+                    }
+                  >
+                    <Typography
+                      ml={1}
+                      mb={0}
+                      variant="caption"
+                      sx={{
+                        cursor: 'pointer',
+                        '&:hover': { textDecoration: 'underline' },
+                      }}
+                    >
+                      {showAdvancedSerialNumberOptions
+                        ? 'Close advanced options'
+                        : 'Show advanced options'}
+                    </Typography>
+                  </Grid>
+                  <Grid container item xs={12}>
+                    <Collapse
+                      sx={{ width: '100%' }}
+                      in={showAdvancedSerialNumberOptions}
+                    >
+                      <Grid item container mt={0.25} spacing={1.5} xs={12}>
+                        <Grid item xs={6}>
+                          <TextField
+                            label="Quantity"
+                            size="small"
+                            fullWidth
+                            value={advancedSerialNumberOptions.quantity ?? ''}
+                            onChange={(event) => {
+                              setAdvancedSerialNumberOptions(
+                                (prev: AdvancedSerialNumberOptionsType) => ({
+                                  ...prev,
+                                  quantity: event.target.value
+                                    ? event.target.value
+                                    : null,
+                                })
+                              );
+                            }}
+                            error={!!hasQuantityErrors}
+                            helperText={hasQuantityErrors}
+                          />
+                        </Grid>
+                        <Grid item xs={6}>
+                          <TextField
+                            label="Starting value"
+                            size="small"
+                            fullWidth
+                            value={
+                              advancedSerialNumberOptions.startingValue ?? ''
+                            }
+                            onChange={(event) => {
+                              setAdvancedSerialNumberOptions(
+                                (prev: AdvancedSerialNumberOptionsType) => ({
+                                  ...prev,
+                                  startingValue: event.target.value
+                                    ? event.target.value
+                                    : null,
+                                })
+                              );
+                            }}
+                            error={!!hasStartingValueErrors}
+                            helperText={hasStartingValueErrors}
+                          />
+                        </Grid>
+                      </Grid>
+                    </Collapse>
+                  </Grid>
+                </>
+              )}
             </Grid>
             <Grid item xs={12}>
               <TextField
@@ -867,7 +1026,7 @@ function ItemDialog(props: ItemDialogProps) {
       open={open}
       onClose={handleClose}
       maxWidth="lg"
-      PaperProps={{ sx: { height: '705px' } }}
+      PaperProps={{ sx: { height: '770px' } }}
       fullWidth
     >
       <DialogTitle>
@@ -890,7 +1049,7 @@ function ItemDialog(props: ItemDialogProps) {
               labelProps.optional = (
                 <Typography variant="caption" color="error">
                   {index === 1 && 'Invalid item properties'}
-                  {index === 0 && 'Invalid date'}
+                  {index === 0 && 'Invalid item details'}
                 </Typography>
               );
               labelProps.error = true;
@@ -919,14 +1078,18 @@ function ItemDialog(props: ItemDialogProps) {
         {activeStep === STEPS.length - 1 ? (
           <Button
             disabled={
-              isAddPending ||
-              isEditPending ||
+              isAddItemsPending ||
+              isAddItemPending ||
+              isEditItemPending ||
               !itemDetails.system_id ||
               formErrorMessage !== undefined ||
               propertyErrors.some((value) => value === true) ||
               Object.values(hasDateErrors).some(
                 (value: boolean) => value === true
-              )
+              ) ||
+              !!hasSerialNumberErrors ||
+              !!hasQuantityErrors ||
+              !!hasStartingValueErrors
             }
             onClick={type === 'edit' ? handleEditItem : handleAddItem}
             sx={{ mr: 3 }}
@@ -935,14 +1098,7 @@ function ItemDialog(props: ItemDialogProps) {
           </Button>
         ) : (
           <Button
-            disabled={
-              (activeStep === 1 &&
-                propertyErrors.some((value) => value === true)) ||
-              (activeStep === 0 &&
-                Object.values(hasDateErrors).some(
-                  (value: boolean) => value === true
-                ))
-            }
+            disabled={isStepFailed(activeStep)}
             onClick={() => handleNext(activeStep)}
             sx={{ mr: 3 }}
           >

From e00b7ee0bca1e2aa106aad08a698f1e79b543294 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Tue, 26 Mar 2024 14:16:31 +0000
Subject: [PATCH 2/8] update snapshot

---
 .../itemsTable.component.test.tsx.snap        | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/items/__snapshots__/itemsTable.component.test.tsx.snap b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
index de9b91991..ccc4d34b3 100644
--- a/src/items/__snapshots__/itemsTable.component.test.tsx.snap
+++ b/src/items/__snapshots__/itemsTable.component.test.tsx.snap
@@ -2801,7 +2801,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                             aria-label="Filter by ID"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rjj:"
+                            id=":rjt:"
                             placeholder="Filter by ID"
                             title="Filter by ID"
                             type="text"
@@ -2942,7 +2942,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rjn:"
+                              id=":rk1:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -2987,7 +2987,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rjp:"
+                              id=":rk3:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3123,7 +3123,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                             aria-label="Filter by Serial Number"
                             autocomplete="new-password"
                             class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                            id=":rjt:"
+                            id=":rk7:"
                             placeholder="Filter by Serial Number"
                             title="Filter by Serial Number"
                             type="text"
@@ -3264,7 +3264,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk1:"
+                              id=":rkb:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3309,7 +3309,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk3:"
+                              id=":rkd:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3448,7 +3448,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Min"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk7:"
+                              id=":rkh:"
                               inputmode="text"
                               placeholder="Min"
                               title="Min"
@@ -3493,7 +3493,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                               aria-label="Max"
                               autocomplete="new-password"
                               class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-929hxt-MuiInputBase-input-MuiInput-input"
-                              id=":rk9:"
+                              id=":rkj:"
                               inputmode="text"
                               placeholder="Max"
                               title="Max"
@@ -3625,13 +3625,13 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                           class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd css-953pxc-MuiInputBase-root-MuiInput-root"
                         >
                           <div
-                            aria-controls=":rke:"
+                            aria-controls=":rko:"
                             aria-expanded="false"
                             aria-haspopup="listbox"
                             aria-label="Filter by Is Defective"
-                            aria-labelledby=":rkd:"
+                            aria-labelledby=":rkn:"
                             class="MuiSelect-select MuiSelect-standard MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-2jdjhv-MuiSelect-select-MuiInputBase-input-MuiInput-input"
-                            id=":rkd:"
+                            id=":rkn:"
                             role="combobox"
                             tabindex="0"
                           >
@@ -3732,9 +3732,6 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                         d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </span>
               </td>
@@ -3828,9 +3825,6 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                         d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </span>
               </td>
@@ -3924,9 +3918,6 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                         d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </span>
               </td>
@@ -4020,9 +4011,6 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                         d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
                       />
                     </svg>
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </span>
               </td>
@@ -4174,7 +4162,7 @@ exports[`Items Table > renders the dense table correctly 1`] = `
                   class="MuiInputBase-root MuiInput-root MuiInputBase-colorPrimary  css-1mmm5cp-MuiInputBase-root-MuiInput-root-MuiSelect-root"
                 >
                   <div
-                    aria-controls=":rkg:"
+                    aria-controls=":rkq:"
                     aria-expanded="false"
                     aria-haspopup="listbox"
                     aria-label="Rows per page"

From 921972bbb34ef457e76492b1365d5279e3e1daca Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Tue, 26 Mar 2024 14:54:55 +0000
Subject: [PATCH 3/8] add e2e tests

---
 cypress/e2e/with_mock_data/items.cy.ts  | 103 ++++++++++++++++++++++++
 src/items/itemDialog.component.test.tsx |  13 +--
 src/items/itemDialog.component.tsx      |   4 +-
 3 files changed, 113 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/with_mock_data/items.cy.ts b/cypress/e2e/with_mock_data/items.cy.ts
index 8815a176b..629adcb0d 100644
--- a/cypress/e2e/with_mock_data/items.cy.ts
+++ b/cypress/e2e/with_mock_data/items.cy.ts
@@ -104,6 +104,109 @@ describe('Items', () => {
     });
   });
 
+  it('adds an item with only mandatory fields (serial number advanced options)', () => {
+    cy.findByRole('button', { name: 'Add Item' }).click();
+    cy.findByText('Show advanced options').click();
+    cy.findByLabelText('Serial number').type('test %s');
+    cy.findByLabelText('Quantity').type('10');
+    cy.findByLabelText('Starting value').type('2');
+
+    cy.startSnoopingBrowserMockedRequest();
+
+    cy.findByRole('button', { name: 'Next' }).click();
+    cy.findByRole('button', { name: 'Next' }).click();
+    cy.findByText('Giant laser').click();
+
+    cy.findByRole('button', { name: 'Finish' }).click();
+    cy.findByRole('dialog').should('not.exist');
+
+    cy.findBrowserMockedRequests({
+      method: 'POST',
+      url: '/v1/items',
+    }).should(async (postRequests) => {
+      expect(postRequests.length).eq(10);
+      expect(JSON.stringify(await postRequests[0].json())).equal(
+        JSON.stringify({
+          catalogue_item_id: '1',
+          system_id: '65328f34a40ff5301575a4e3',
+          purchase_order_number: null,
+          is_defective: false,
+          usage_status: 0,
+          warranty_end_date: null,
+          asset_number: null,
+          serial_number: 'test 2',
+          delivered_date: null,
+          notes: null,
+          properties: [
+            { name: 'Resolution', value: 12 },
+            { name: 'Frame Rate', value: 30 },
+            { name: 'Sensor Type', value: 'CMOS' },
+            { name: 'Sensor brand', value: null },
+            { name: 'Broken', value: true },
+            { name: 'Older than five years', value: false },
+          ],
+        })
+      );
+    });
+  });
+
+  it.only('displays error messages for serial number advanced options', () => {
+    cy.findByRole('button', { name: 'Add Item' }).click();
+
+    cy.findByText('Show advanced options').click();
+
+    cy.findByLabelText('Starting value').type('10');
+
+    cy.findByText('Please enter a quantity value').should('exist');
+
+    cy.findByLabelText('Starting value').clear();
+
+    cy.findByLabelText('Quantity').type('10a');
+    cy.findByLabelText('Starting value').type('10a');
+
+    cy.findAllByText('Please enter a valid number').should('have.length', 2);
+
+    cy.findByLabelText('Quantity').clear();
+    cy.findByLabelText('Starting value').clear();
+
+    cy.findByLabelText('Quantity').type('10.5');
+    cy.findByLabelText('Starting value').type('10.5');
+
+    cy.findByText('Quantity must be an integer').should('exist');
+    cy.findByText('Starting value must be an integer').should('exist');
+
+    cy.findByLabelText('Quantity').clear();
+    cy.findByLabelText('Starting value').clear();
+
+    cy.findByLabelText('Quantity').type('-1');
+    cy.findByLabelText('Starting value').type('-1');
+
+    cy.findByText('Quantity must be greater than 1').should('exist');
+    cy.findByText('Starting value must be greater than or equal to 0').should(
+      'exist'
+    );
+
+    cy.findByLabelText('Quantity').clear();
+    cy.findByLabelText('Starting value').clear();
+
+    cy.findByLabelText('Quantity').type('100');
+    cy.findByLabelText('Starting value').type('2');
+
+    cy.findByText(
+      'Please use %s to specify the location you want to append the number to serial number'
+    ).should('exist');
+    cy.findByText('Quantity must be less than 100').should('exist');
+
+    cy.findByLabelText('Quantity').clear();
+    cy.findByLabelText('Starting value').clear();
+
+    cy.findByLabelText('Serial number').type('test %s');
+    cy.findByLabelText('Quantity').type('4');
+    cy.findByLabelText('Starting value').type('2');
+
+    cy.findByText('e.g. test 2').should('exist');
+  });
+
   it('adds an item with only mandatory fields (allowed list of values)', () => {
     cy.visit('/catalogue/item/17/items');
     cy.findByRole('button', { name: 'Add Item' }).click();
diff --git a/src/items/itemDialog.component.test.tsx b/src/items/itemDialog.component.test.tsx
index 3b7d26aec..976bd11c5 100644
--- a/src/items/itemDialog.component.test.tsx
+++ b/src/items/itemDialog.component.test.tsx
@@ -563,7 +563,7 @@ describe('ItemDialog', () => {
       expect(screen.getByRole('button', { name: 'Finish' })).not.toBeDisabled();
     }, 10000);
 
-    it('displays error messages for serial number advance options', async () => {
+    it('displays error messages for serial number advanced options', async () => {
       createView();
       await modifyDetailsValues({
         serialNumberAdvancedOptions: { startingValue: '10' },
@@ -590,9 +590,12 @@ describe('ItemDialog', () => {
         },
       });
 
-      expect(screen.getAllByText('Quantity must be an integer').length).toEqual(
-        2
-      );
+      expect(
+        screen.getByText('Quantity must be an integer')
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('Starting value must be an integer')
+      ).toBeInTheDocument();
 
       await user.click(screen.getByText('Close advanced options'));
       await modifyDetailsValues({
@@ -606,7 +609,7 @@ describe('ItemDialog', () => {
         screen.getByText('Quantity must be greater than 1')
       ).toBeInTheDocument();
       expect(
-        screen.getByText('Quantity must be greater than or equal to 0')
+        screen.getByText('Starting value must be greater than or equal to 0')
       ).toBeInTheDocument();
 
       await user.click(screen.getByText('Close advanced options'));
diff --git a/src/items/itemDialog.component.tsx b/src/items/itemDialog.component.tsx
index 54ab2bfdd..6be41adf5 100644
--- a/src/items/itemDialog.component.tsx
+++ b/src/items/itemDialog.component.tsx
@@ -536,9 +536,9 @@ function ItemDialog(props: ItemDialogProps) {
       : isNaN(Number(advancedSerialNumberOptions.startingValue))
         ? 'Please enter a valid number'
         : !Number.isInteger(Number(advancedSerialNumberOptions.startingValue))
-          ? 'Quantity must be an integer'
+          ? 'Starting value must be an integer'
           : Number(advancedSerialNumberOptions.startingValue) < 0
-            ? 'Quantity must be greater than or equal to 0'
+            ? 'Starting value must be greater than or equal to 0'
             : '';
 
   const isStepFailed = React.useCallback(

From 9ee2fe31d1159d0c3137f149d6f0c7a1e587665b Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Tue, 26 Mar 2024 14:59:19 +0000
Subject: [PATCH 4/8] add trim for starting value and quantity

---
 src/items/itemDialog.component.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/items/itemDialog.component.tsx b/src/items/itemDialog.component.tsx
index 6be41adf5..6489483dc 100644
--- a/src/items/itemDialog.component.tsx
+++ b/src/items/itemDialog.component.tsx
@@ -517,7 +517,7 @@ function ItemDialog(props: ItemDialogProps) {
     !itemDetails.serial_number?.trim().includes('%s') &&
     'Please use %s to specify the location you want to append the number to serial number';
 
-  const hasQuantityErrors = !advancedSerialNumberOptions.quantity
+  const hasQuantityErrors = !advancedSerialNumberOptions.quantity?.trim()
     ? ''
     : isNaN(Number(advancedSerialNumberOptions.quantity))
       ? 'Please enter a valid number'
@@ -531,7 +531,7 @@ function ItemDialog(props: ItemDialogProps) {
 
   const hasStartingValueErrors =
     !advancedSerialNumberOptions.quantity &&
-    !!advancedSerialNumberOptions.startingValue
+    !!advancedSerialNumberOptions.startingValue?.trim()
       ? 'Please enter a quantity value'
       : isNaN(Number(advancedSerialNumberOptions.startingValue))
         ? 'Please enter a valid number'

From a59f1df30e4c02c295d315f26461a742c56952f0 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Tue, 26 Mar 2024 15:07:13 +0000
Subject: [PATCH 5/8] improve codecov

---
 src/items/itemDialog.component.test.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/items/itemDialog.component.test.tsx b/src/items/itemDialog.component.test.tsx
index 976bd11c5..31c2be7a6 100644
--- a/src/items/itemDialog.component.test.tsx
+++ b/src/items/itemDialog.component.test.tsx
@@ -639,6 +639,9 @@ describe('ItemDialog', () => {
       });
 
       expect(screen.getByText('e.g. test 2')).toBeInTheDocument();
+
+      await user.clear(screen.getByLabelText('Quantity'));
+      await user.clear(screen.getByLabelText('Starting value'));
     }, 10000);
 
     it('adds an item (case empty string with spaces returns null and change property boolean values)', async () => {

From 418927589333be38e10a269d3eb68f77327e1ad5 Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <83226114+joshuadkitenge@users.noreply.github.com>
Date: Thu, 4 Apr 2024 13:28:29 +0100
Subject: [PATCH 6/8] Update src/api/items.test.tsx

Co-authored-by: Joel Davies <90245114+joelvdavies@users.noreply.github.com>
---
 src/api/items.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/items.test.tsx b/src/api/items.test.tsx
index a3fd3af35..a4c8d193d 100644
--- a/src/api/items.test.tsx
+++ b/src/api/items.test.tsx
@@ -304,7 +304,7 @@ describe('catalogue items api functions', () => {
   describe('useAddItems', () => {
     let addItems: AddItems;
 
-    // Use patch spy for testing since response is not actual data in this case
+    // Use post spy for testing since response is not actual data in this case
     // so can't test the underlying use of editSystem otherwise
     let axiosPostSpy;
     const { _id, ...item } = getItemById('KvT2Ox7n');

From 7713db896b5e78018266deaf9f3212ea39a05b8e Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <83226114+joshuadkitenge@users.noreply.github.com>
Date: Thu, 4 Apr 2024 13:30:34 +0100
Subject: [PATCH 7/8] Update cypress/e2e/with_mock_data/items.cy.ts

Co-authored-by: Joel Davies <90245114+joelvdavies@users.noreply.github.com>
---
 cypress/e2e/with_mock_data/items.cy.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/with_mock_data/items.cy.ts b/cypress/e2e/with_mock_data/items.cy.ts
index 629adcb0d..51ef4cde2 100644
--- a/cypress/e2e/with_mock_data/items.cy.ts
+++ b/cypress/e2e/with_mock_data/items.cy.ts
@@ -150,7 +150,7 @@ describe('Items', () => {
     });
   });
 
-  it.only('displays error messages for serial number advanced options', () => {
+  it('displays error messages for serial number advanced options', () => {
     cy.findByRole('button', { name: 'Add Item' }).click();
 
     cy.findByText('Show advanced options').click();

From 9b344133e51062df35438dff0e0958cf4a0da9ec Mon Sep 17 00:00:00 2001
From: Joshua Kitenge <joshua.kitenge@stfc.ac.uk>
Date: Thu, 4 Apr 2024 13:45:39 +0100
Subject: [PATCH 8/8] address review comments

---
 cypress/e2e/with_mock_data/items.cy.ts  |  51 +++++-----
 src/api/items.test.tsx                  |   2 +-
 src/items/itemDialog.component.test.tsx | 119 ++++++++----------------
 3 files changed, 69 insertions(+), 103 deletions(-)

diff --git a/cypress/e2e/with_mock_data/items.cy.ts b/cypress/e2e/with_mock_data/items.cy.ts
index 51ef4cde2..20773661e 100644
--- a/cypress/e2e/with_mock_data/items.cy.ts
+++ b/cypress/e2e/with_mock_data/items.cy.ts
@@ -108,7 +108,7 @@ describe('Items', () => {
     cy.findByRole('button', { name: 'Add Item' }).click();
     cy.findByText('Show advanced options').click();
     cy.findByLabelText('Serial number').type('test %s');
-    cy.findByLabelText('Quantity').type('10');
+    cy.findByLabelText('Quantity').type('3');
     cy.findByLabelText('Starting value').type('2');
 
     cy.startSnoopingBrowserMockedRequest();
@@ -124,29 +124,32 @@ describe('Items', () => {
       method: 'POST',
       url: '/v1/items',
     }).should(async (postRequests) => {
-      expect(postRequests.length).eq(10);
-      expect(JSON.stringify(await postRequests[0].json())).equal(
-        JSON.stringify({
-          catalogue_item_id: '1',
-          system_id: '65328f34a40ff5301575a4e3',
-          purchase_order_number: null,
-          is_defective: false,
-          usage_status: 0,
-          warranty_end_date: null,
-          asset_number: null,
-          serial_number: 'test 2',
-          delivered_date: null,
-          notes: null,
-          properties: [
-            { name: 'Resolution', value: 12 },
-            { name: 'Frame Rate', value: 30 },
-            { name: 'Sensor Type', value: 'CMOS' },
-            { name: 'Sensor brand', value: null },
-            { name: 'Broken', value: true },
-            { name: 'Older than five years', value: false },
-          ],
-        })
-      );
+      expect(postRequests.length).eq(3);
+
+      for (let i = 0; i < 3; i++) {
+        expect(JSON.stringify(await postRequests[i].json())).equal(
+          JSON.stringify({
+            catalogue_item_id: '1',
+            system_id: '65328f34a40ff5301575a4e3',
+            purchase_order_number: null,
+            is_defective: false,
+            usage_status: 0,
+            warranty_end_date: null,
+            asset_number: null,
+            serial_number: `test ${i + 2}`,
+            delivered_date: null,
+            notes: null,
+            properties: [
+              { name: 'Resolution', value: 12 },
+              { name: 'Frame Rate', value: 30 },
+              { name: 'Sensor Type', value: 'CMOS' },
+              { name: 'Sensor brand', value: null },
+              { name: 'Broken', value: true },
+              { name: 'Older than five years', value: false },
+            ],
+          })
+        );
+      }
     });
   });
 
diff --git a/src/api/items.test.tsx b/src/api/items.test.tsx
index a4c8d193d..d68416c20 100644
--- a/src/api/items.test.tsx
+++ b/src/api/items.test.tsx
@@ -25,7 +25,7 @@ import {
 import SystemsJSON from '../mocks/Systems.json';
 import { imsApi } from './api';
 
-describe('catalogue items api functions', () => {
+describe('items api functions', () => {
   afterEach(() => {
     vi.clearAllMocks();
   });
diff --git a/src/items/itemDialog.component.test.tsx b/src/items/itemDialog.component.test.tsx
index 31c2be7a6..21ce08704 100644
--- a/src/items/itemDialog.component.test.tsx
+++ b/src/items/itemDialog.component.test.tsx
@@ -277,84 +277,47 @@ describe('ItemDialog', () => {
 
       await user.click(screen.getByRole('button', { name: 'Finish' }));
 
-      expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
-        asset_number: null,
-        catalogue_item_id: '1',
-        delivered_date: null,
-        is_defective: false,
-        notes: null,
-        properties: [
-          {
-            name: 'Resolution',
-            value: 12,
-          },
-          {
-            name: 'Frame Rate',
-            value: 30,
-          },
-          {
-            name: 'Sensor Type',
-            value: 'CMOS',
-          },
-          {
-            name: 'Sensor brand',
-            value: null,
-          },
-          {
-            name: 'Broken',
-            value: true,
-          },
-          {
-            name: 'Older than five years',
-            value: false,
-          },
-        ],
-        purchase_order_number: null,
-        serial_number: 'test12 10',
-        system_id: '65328f34a40ff5301575a4e3',
-        usage_status: 0,
-        warranty_end_date: null,
-      });
-
-      expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
-        asset_number: null,
-        catalogue_item_id: '1',
-        delivered_date: null,
-        is_defective: false,
-        notes: null,
-        properties: [
-          {
-            name: 'Resolution',
-            value: 12,
-          },
-          {
-            name: 'Frame Rate',
-            value: 30,
-          },
-          {
-            name: 'Sensor Type',
-            value: 'CMOS',
-          },
-          {
-            name: 'Sensor brand',
-            value: null,
-          },
-          {
-            name: 'Broken',
-            value: true,
-          },
-          {
-            name: 'Older than five years',
-            value: false,
-          },
-        ],
-        purchase_order_number: null,
-        serial_number: 'test12 11',
-        system_id: '65328f34a40ff5301575a4e3',
-        usage_status: 0,
-        warranty_end_date: null,
-      });
-    });
+      for (let i = 0; i < 2; i++) {
+        expect(axiosPostSpy).toHaveBeenCalledWith('/v1/items', {
+          asset_number: null,
+          catalogue_item_id: '1',
+          delivered_date: null,
+          is_defective: false,
+          notes: null,
+          properties: [
+            {
+              name: 'Resolution',
+              value: 12,
+            },
+            {
+              name: 'Frame Rate',
+              value: 30,
+            },
+            {
+              name: 'Sensor Type',
+              value: 'CMOS',
+            },
+            {
+              name: 'Sensor brand',
+              value: null,
+            },
+            {
+              name: 'Broken',
+              value: true,
+            },
+            {
+              name: 'Older than five years',
+              value: false,
+            },
+          ],
+          purchase_order_number: null,
+          serial_number: `test12 ${i + 10}`,
+          system_id: '65328f34a40ff5301575a4e3',
+          usage_status: 0,
+          warranty_end_date: null,
+        });
+      }
+    }, 10000);
 
     it('navigates through the stepper using the labels', async () => {
       createView();