@openmrs/esm-stock-management-app 3.0.1-pre.845 → 3.0.1-pre.853

package/src/stock-operations/stock-operations-forms/step2.test.tsx

@@ -1,44 +1,27 @@
 import React from 'react';
-import { render, waitFor, screen, fireEvent } from '@testing-library/react';
-import { showSnackbar, useConfig, ErrorState, launchWorkspace } from '@openmrs/esm-framework';
-import { useStockOperationTypes, useUser } from '../../stock-lookups/stock-lookups.resource';
-import { getStockOperationLinks, useStockOperations } from '../stock-operations.resource';
-import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
-import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { closeOverlay } from '../../core/components/overlay/hook';
-import StockOperationForm from './stock-operation-form.component';
-import useParties from './hooks/useParties';
 import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useFormContext, type UseFormReturn } from 'react-hook-form';
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import { formatForDatePicker } from '../../constants';
+import { receiptOperationTypeMock } from '@mocks';
+import { type BaseStockOperationItemFormData } from '../validation-schema';
 import { type StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-import { useStockItem, useStockItems, useStockBatches } from '../../stock-items/stock-items.resource';
-import { initialStockOperationValue } from '../../core/utils/utils';
-import { useForm, useFormContext, Controller, FormProvider } from 'react-hook-form';
-import { type BaseStockOperationItemFormData, StockOperationItemFormData } from '../validation-schema';
-import { useStockItemBatchInformationHook } from '../../stock-items/add-stock-item/batch-information/batch-information.resource';
 import { useFilterableStockItems } from './hooks/useFilterableStockItems';
-import { formatForDatePicker } from '../../constants';
-import { receiptOperationTypeMock } from '../../../__mocks__';
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn().mockReturnValue({ t: (key) => key }),
-}));
+import { useStockItem } from '../../stock-items/stock-items.resource';
+import { useStockOperations } from '../stock-operations.resource';
+import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import useParties from './hooks/useParties';
+import StockOperationForm from './stock-operation-form.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ActionMenu: jest.fn(() => null),
-  showSnackbar: jest.fn(),
-  useDebounce: jest.fn((x) => x),
-  getGlobalStore: jest.fn(() => ({
-    getState: jest.fn(),
-    subscribe: jest.fn(),
-    setState: jest.fn(),
-  })),
-  parseDate: jest.fn((date) => new Date(date)),
-  showNotification: jest.fn(),
-  usePagination: jest.fn(() => ({ currentPage: 1, setPage: jest.fn() })),
-  useSession: jest.fn(() => ({ user: { display: 'Test User' } })),
-  useConfig: jest.fn(),
-  ErrorState: jest.fn(({ error }: { error: any }) => <div>{error}</div>),
-  launchWorkspace: jest.fn(),
-}));
+const mockUseConfig = jest.mocked(useConfig);
+const mockUseFilterableStockItems = jest.mocked(useFilterableStockItems);
+const mockUseFormContext = jest.mocked(useFormContext);
+const mockUseParties = jest.mocked(useParties);
+const mockUseSession = jest.mocked(useSession);
+const mockUseStockItem = jest.mocked(useStockItem);
+const mockUseStockOperations = jest.mocked(useStockOperations);
+const mockUseStockOperationTypes = jest.mocked(useStockOperationTypes);
 
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
   useStockOperationTypes: jest.fn(),
@@ -50,7 +33,11 @@ jest.mock('../stock-operations.resource', () => ({
   operationStatusColor: jest.fn(() => 'some-color'),
   getStockOperationLinks: jest.fn(),
   useStockOperations: jest.fn().mockReturnValue({
-    items: { results: [] },
+    items: {
+      results: [],
+      links: [],
+      totalCount: 0,
+    },
     isLoading: false,
     error: null,
   }),
@@ -78,6 +65,7 @@ jest.mock('../../stock-items/stock-items.resource', () => ({
     items: {},
   }),
 }));
+
 jest.mock('./hooks/useFilterableStockItems', () => ({
   useFilterableStockItems: jest.fn().mockReturnValue({
     stockItemsList: [],
@@ -87,7 +75,9 @@ jest.mock('./hooks/useFilterableStockItems', () => ({
     isLoading: false,
   }),
 }));
+
 jest.mock('./hooks/useParties', () => jest.fn());
+
 jest.mock('react-hook-form', () => ({
   useForm: jest.fn().mockReturnValue({
     watch: jest.fn(),
@@ -103,6 +93,17 @@ jest.mock('react-hook-form', () => ({
     watch: jest.fn(),
     formState: {
       errors: {},
+      isDirty: false,
+      isLoading: false,
+      isSubmitted: false,
+      isSubmitSuccessful: false,
+      isSubmitting: false,
+      isValid: true,
+      isValidating: false,
+      submitCount: 0,
+      touchedFields: {},
+      dirtyFields: {},
+      disabled: false,
     },
     resetField: jest.fn(),
     getValues: jest.fn(),
@@ -134,21 +135,71 @@ jest.mock('../../stock-items/add-stock-item/batch-information/batch-information.
 
 describe('Stock Operation step 2 (stock operation items details)', () => {
   beforeEach(() => {
-    const mockStockOperationTypes = { results: [] };
-    (useStockOperationTypes as jest.Mock).mockReturnValue(mockStockOperationTypes);
-    (useStockOperations as jest.Mock).mockReturnValue({ items: { results: [] }, isLoading: false, error: null });
-    (useConfig as jest.Mock).mockReturnValue({ autoPopulateResponsiblePerson: true });
-    (useParties as jest.Mock).mockReturnValue({
-      destinationParties: [],
-      sourceParties: [],
+    const mockStockOperationTypes = {
+      types: {
+        results: [],
+        links: [],
+        totalCount: 0,
+      },
+      isLoading: false,
+      error: null,
+    };
+
+    mockUseStockOperationTypes.mockReturnValue(mockStockOperationTypes);
+
+    mockUseStockOperations.mockReturnValue({
+      items: {
+        results: [],
+        links: [],
+        totalCount: 0,
+      },
       isLoading: false,
+      error: null,
+    });
+
+    mockUseConfig.mockReturnValue({ autoPopulateResponsiblePerson: true });
+
+    mockUseParties.mockReturnValue({
+      destinationParties: [],
+      destinationPartiesFilter: jest.fn(),
+      destinationTags: [],
       error: undefined,
+      isLoading: false,
+      mutate: jest.fn(),
+      parties: [],
+      sourceParties: [],
+      sourcePartiesFilter: jest.fn(),
       sourceTags: [],
-      destinationTags: [],
+    });
+
+    mockUseSession.mockReturnValue({
+      authenticated: true,
+      sessionId: 'test-session-id',
+      user: {
+        uuid: 'test-user-uuid',
+        display: 'Test User',
+        username: 'testuser',
+        systemId: 'test-system-id',
+        userProperties: {},
+        person: { uuid: 'test-person-uuid' },
+        privileges: [],
+        roles: [],
+        retired: false,
+        links: [],
+        locale: 'en',
+        allowedLocales: ['en'],
+      },
+      sessionLocation: {
+        uuid: 'test-location-uuid',
+        display: 'Test Location',
+        links: [],
+      },
     });
   });
 
   it('should have both previous and next btns', async () => {
+    const user = userEvent.setup();
+
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -159,13 +210,15 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
 
     expect(screen.getByRole('button', { name: /Next/i })).toBeInTheDocument();
     expect(screen.getByTestId('previous-btn')).toBeInTheDocument();
   });
 
   it('should render stock operation items table with item search component', async () => {
+    const user = userEvent.setup();
+
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -175,16 +228,17 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
+
     const nextButton = screen.getByRole('button', { name: /Next/i });
     expect(nextButton).toBeInTheDocument();
-    await userEvent.click(nextButton);
+    await user.click(nextButton);
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(
       screen.getByRole('searchbox', {
         name(accessibleName, element) {
           return (
             element.getAttribute('id') === 'search-stock-operation-item' &&
-            element.getAttribute('placeholder') === 'findItems' &&
+            element.getAttribute('placeholder') === 'Find your items' &&
             element.getAttribute('name') === 'search-stock-operation-item'
           );
         },
@@ -193,8 +247,10 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
   });
 
   it('should search stock operation item and render results', async () => {
+    const user = userEvent.setup();
+
     const mocksetSearchString = jest.fn();
-    (useFilterableStockItems as jest.Mock).mockReturnValue({
+    mockUseFilterableStockItems.mockReturnValue({
       stockItemsList: [
         { uuid: 'mock-uuid', commonName: 'mock-common-name', drugName: 'mock-common-name' },
       ] as Array<StockItemDTO>,
@@ -203,6 +259,7 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       isLoading: false,
       setSearchString: mocksetSearchString,
     });
+
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -212,21 +269,24 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
+
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
     const searchInput = screen.getByRole('searchbox', {
-      name: (_, element) => element.getAttribute('id') === 'search-stock-operation-item',
+      name: /search/i,
     });
     expect(searchInput).toBeInTheDocument();
-    await userEvent.click(searchInput);
-    await userEvent.type(searchInput, 'stock');
+    await user.click(searchInput);
+    await user.type(searchInput, 'stock');
     expect(mocksetSearchString).toHaveBeenCalledWith('stock');
     expect(screen.getByText('mock-common-name'));
   });
 
   it('should properly handle stock operation item selection', async () => {
-    (useFilterableStockItems as jest.Mock).mockReturnValue({
+    const user = userEvent.setup();
+
+    mockUseFilterableStockItems.mockReturnValue({
       stockItemsList: [
         { uuid: 'mock-uuid', commonName: 'mock-common-name', drugName: 'mock-common-name' },
       ] as Array<StockItemDTO>,
@@ -235,6 +295,7 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       isLoading: false,
       setSearchString: jest.fn(),
     });
+
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -245,27 +306,30 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       />,
     );
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
     const searchInput = screen.getByRole('searchbox', {
       name: (_, element) => element.getAttribute('id') === 'search-stock-operation-item',
     });
-    await userEvent.click(searchInput);
-    await userEvent.type(searchInput, 'stock');
-    await userEvent.click(screen.getByText('mock-common-name'));
+    await user.click(searchInput);
+    await user.type(searchInput, 'stock');
+    await user.click(screen.getByText('mock-common-name'));
     // Look for common name at the top of workspace
-    expect(screen.getByText(/noDrugNameAvailable|noCommonNameAvailable|mock-common-name/i)).toBeInTheDocument();
+    expect(screen.getByText(/no drug name available|no common name available|mock-common-name/i)).toBeInTheDocument();
   });
 
   it('should render stock operation items in data table', async () => {
-    (useStockItem as jest.Mock).mockReturnValue({
+    const user = userEvent.setup();
+
+    mockUseStockItem.mockReturnValue({
       isLoading: false,
       error: null,
       item: { commonName: 'mock-stock-item-common name', uuid: 'mock-uuid' } as StockItemDTO,
     });
+
     const mockQuantity = 99999;
     const mockExpiration = new Date();
-    (useFormContext as jest.Mock).mockReturnValue({
+    mockUseFormContext.mockReturnValue({
       watch: jest.fn().mockReturnValue([
         {
           quantity: mockQuantity,
@@ -275,11 +339,23 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       resetField: jest.fn(),
       formState: {
         errors: {},
+        isDirty: false,
+        isLoading: false,
+        isSubmitted: false,
+        isSubmitSuccessful: false,
+        isSubmitting: false,
+        isValid: true,
+        isValidating: false,
+        submitCount: 0,
+        touchedFields: {},
+        dirtyFields: {},
+        disabled: false,
       },
       getValues: jest.fn(),
       setValue: jest.fn(),
       handleSubmit: jest.fn(),
-    });
+    } as unknown as UseFormReturn<BaseStockOperationItemFormData>);
+
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -289,8 +365,9 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
+
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await user.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
     expect(screen.getByText(mockQuantity.toLocaleString())).toBeInTheDocument(); //Find by quentity
     expect(screen.getByText(formatForDatePicker(mockExpiration))).toBeInTheDocument(); //Find by quentity

package/src/stock-operations/stock-operations-forms/step3.test.tsx

@@ -1,44 +1,18 @@
-import { render, waitFor, screen, fireEvent } from '@testing-library/react';
-import { showSnackbar, useConfig, ErrorState, launchWorkspace } from '@openmrs/esm-framework';
-import { useStockOperationTypes, useUser } from '../../stock-lookups/stock-lookups.resource';
-import { getStockOperationLinks, useStockOperation, useStockOperations } from '../stock-operations.resource';
-import { StockOperationDTO } from '../../core/api/types/stockOperation/StockOperationDTO';
-import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
-import { closeOverlay } from '../../core/components/overlay/hook';
-import StockOperationForm from './stock-operation-form.component';
-import useParties from './hooks/useParties';
-import userEvent from '@testing-library/user-event';
-import { StockItemDTO } from '../../core/api/types/stockItem/StockItem';
-import { useStockItem, useStockItems } from '../../stock-items/stock-items.resource';
-import { initialStockOperationValue } from '../../core/utils/utils';
-import { useForm, useFormContext, Controller, FormProvider } from 'react-hook-form';
-import { BaseStockOperationItemFormData, StockOperationItemFormData } from '../validation-schema';
-import { useStockItemBatchInformationHook } from '../../stock-items/add-stock-item/batch-information/batch-information.resource';
-import { useFilterableStockItems } from './hooks/useFilterableStockItems';
-import { formatForDatePicker } from '../../constants';
 import React from 'react';
-import { receiptOperationTypeMock, returnOperationTypeMock, stockIssueOperationtypeMock } from '../../../__mocks__';
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn().mockReturnValue({ t: (key) => key }),
-}));
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import { receiptOperationTypeMock, returnOperationTypeMock, stockIssueOperationtypeMock } from '@mocks';
+import { useStockOperations } from '../stock-operations.resource';
+import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import useParties from './hooks/useParties';
+import StockOperationForm from './stock-operation-form.component';
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ActionMenu: jest.fn(() => null),
-  showSnackbar: jest.fn(),
-  useDebounce: jest.fn((x) => x),
-  getGlobalStore: jest.fn(() => ({
-    getState: jest.fn(),
-    subscribe: jest.fn(),
-    setState: jest.fn(),
-  })),
-  parseDate: jest.fn((date) => new Date(date)),
-  showNotification: jest.fn(),
-  usePagination: jest.fn(() => ({ currentPage: 1, setPage: jest.fn() })),
-  useSession: jest.fn(() => ({ user: { display: 'Test User' } })),
-  useConfig: jest.fn(),
-  ErrorState: jest.fn(({ error }: { error: any }) => <div>{error}</div>),
-  launchWorkspace: jest.fn(),
-}));
+const mockUseParties = jest.mocked(useParties);
+const mockUseStockOperationTypes = jest.mocked(useStockOperationTypes);
+const mockUseStockOperations = jest.mocked(useStockOperations);
+const mockUseConfig = jest.mocked(useConfig);
+const mockUseSession = jest.mocked(useSession);
 
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
   useStockOperationTypes: jest.fn(),
@@ -78,6 +52,7 @@ jest.mock('../../stock-items/stock-items.resource', () => ({
     items: {},
   }),
 }));
+
 jest.mock('./hooks/useFilterableStockItems', () => ({
   useFilterableStockItems: jest.fn().mockReturnValue({
     stockItemsList: [],
@@ -87,7 +62,9 @@ jest.mock('./hooks/useFilterableStockItems', () => ({
     isLoading: false,
   }),
 }));
+
 jest.mock('./hooks/useParties', () => jest.fn());
+
 jest.mock('react-hook-form', () => ({
   useForm: jest.fn().mockReturnValue({
     watch: jest.fn(),
@@ -134,17 +111,55 @@ jest.mock('../../stock-items/add-stock-item/batch-information/batch-information.
 
 describe('Stock Operation form step 3 (stock submision)', () => {
   beforeEach(() => {
-    const mockStockOperationTypes = { results: [] };
-    (useStockOperationTypes as jest.Mock).mockReturnValue(mockStockOperationTypes);
-    (useStockOperations as jest.Mock).mockReturnValue({ items: { results: [] }, isLoading: false, error: null });
-    (useConfig as jest.Mock).mockReturnValue({ autoPopulateResponsiblePerson: true });
-    (useParties as jest.Mock).mockReturnValue({
+    mockUseStockOperationTypes.mockReturnValue({
+      types: { results: [], links: [], totalCount: 0 },
+      isLoading: false,
+      error: null,
+    });
+
+    mockUseStockOperations.mockReturnValue({
+      items: { results: [], links: [], totalCount: 0 },
+      isLoading: false,
+      error: null,
+    });
+
+    mockUseConfig.mockReturnValue({ autoPopulateResponsiblePerson: true });
+
+    mockUseParties.mockReturnValue({
       destinationParties: [],
       sourceParties: [],
       isLoading: false,
       error: undefined,
       sourceTags: [],
       destinationTags: [],
+      parties: [],
+      mutate: jest.fn(),
+      sourcePartiesFilter: () => true,
+      destinationPartiesFilter: () => true,
+    });
+
+    mockUseSession.mockReturnValue({
+      authenticated: true,
+      sessionId: 'test-session-id',
+      user: {
+        uuid: 'test-user-uuid',
+        display: 'Test User',
+        username: 'testuser',
+        systemId: 'test-system-id',
+        userProperties: {},
+        person: { uuid: 'test-person-uuid' },
+        privileges: [],
+        roles: [],
+        retired: false,
+        links: [],
+        locale: 'en',
+        allowedLocales: ['en'],
+      },
+      sessionLocation: {
+        uuid: 'test-location-uuid',
+        display: 'Test Location',
+        links: [],
+      },
     });
   });
 
@@ -159,11 +174,11 @@ describe('Stock Operation form step 3 (stock submision)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
     // MOVE TO STEP3
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
 
-    expect(screen.queryByRole('button', { name: /Next/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /next/i })).not.toBeInTheDocument();
     expect(screen.getByTestId('previous-btn')).toBeInTheDocument();
   });
 
@@ -178,14 +193,15 @@ describe('Stock Operation form step 3 (stock submision)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
     // MOVE TO STEP3
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
 
     // Shouls have save button
     expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument();
     expect(screen.getAllByRole('radio', { name: /yes|no/i })).toHaveLength(2);
   });
+
   it('should render submitForReview button when require aprroval radion button is checked yes', async () => {
     render(
       <StockOperationForm
@@ -197,18 +213,19 @@ describe('Stock Operation form step 3 (stock submision)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
     // MOVE TO STEP3
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
 
     const yesRadioButton = screen.getByRole('radio', { name: /yes/i });
     expect(yesRadioButton).toBeInTheDocument();
     // Submit for review shouldnt be in doc
-    expect(screen.queryByRole('button', { name: /submitForReview/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /submit for review/i })).not.toBeInTheDocument();
     await userEvent.click(yesRadioButton);
     // On require aprooval should now show
-    expect(screen.getByRole('button', { name: /submitForReview/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /submit for review/i })).toBeInTheDocument();
   });
+
   it('should render complete button when require aprroval radion button is checked no', async () => {
     render(
       <StockOperationForm
@@ -220,9 +237,9 @@ describe('Stock Operation form step 3 (stock submision)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
     // MOVE TO STEP3
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
 
     const noRadioButton = screen.getByRole('radio', { name: /no/i });
     expect(noRadioButton).toBeInTheDocument();
@@ -230,6 +247,7 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     // On require aprooval should now show complete btn
     expect(screen.getByTestId('complete-button')).toBeInTheDocument();
   });
+
   it('should render dispatch btn for stock return operation and dont require aproval', async () => {
     render(
       <StockOperationForm
@@ -241,9 +259,9 @@ describe('Stock Operation form step 3 (stock submision)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
     // MOVE TO STEP3
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
 
     const noRadioButton = screen.getByRole('radio', { name: /no/i });
     expect(noRadioButton).toBeInTheDocument();
@@ -251,6 +269,7 @@ describe('Stock Operation form step 3 (stock submision)', () => {
     // On require aprooval should now show complete btn
     expect(screen.getByTestId('dipatch-button')).toBeInTheDocument();
   });
+
   it('should render dispatch btn for stock issue operation and dont require aproval', async () => {
     render(
       <StockOperationForm
@@ -262,14 +281,14 @@ describe('Stock Operation form step 3 (stock submision)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
     // MOVE TO STEP3
-    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /next/i }));
 
     const noRadioButton = screen.getByRole('radio', { name: /no/i });
     expect(noRadioButton).toBeInTheDocument();
     await userEvent.click(noRadioButton);
-    // On require aprooval should now show complete btn
+    // On require approval should now show complete btn
     expect(screen.getByTestId('dipatch-button')).toBeInTheDocument();
   });
 });

package/src/stock-operations/stock-operations-forms/steps/stock-operation-items-form-step.component.tsx

@@ -1,3 +1,5 @@
+import React, { useCallback, useId, useMemo } from 'react';
+import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
 import {
   Button,
   DataTable,
@@ -9,8 +11,6 @@ import {
   TableHeader,
   TableRow,
 } from '@carbon/react';
-import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
-import React, { useCallback, useMemo } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { type StockOperationDTO } from '../../../core/api/types/stockOperation/StockOperationDTO';
@@ -42,6 +42,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
+  const uniqueId = useId();
 
   const form = useFormContext<StockOperationItemDtoSchema>();
   const observableOperationItems = form.watch('stockOperationItems');
@@ -111,7 +112,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
   );
 
   const tableRows = useMemo(() => {
-    return observableOperationItems?.map((item) => {
+    return observableOperationItems?.map((item, index) => {
       const {
         batchNo,
         expiration,
@@ -124,7 +125,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
       } = item;
 
       return {
-        id: uuid,
+        id: uuid || `${uniqueId}-${index}`,
         item: stockItemUuid ? <StockOperationItemCell stockItemUuid={stockItemUuid} /> : '--',
         itemDetails: stockItemUuid ? <StockAvailability stockItemUuid={stockItemUuid} /> : '--',
         batch: (
@@ -178,7 +179,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
         ),
       };
     });
-  }, [observableOperationItems, onLaunchItemsForm, stockOperationType]);
+  }, [observableOperationItems, onLaunchItemsForm, stockOperationType, uniqueId]);
 
   const headerTitle = t('stockoperationItems', 'Stock operation items');