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

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

@@ -1,27 +1,44 @@
 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 { 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';
+import { formatForDatePicker } from '../../constants';
+import { receiptOperationTypeMock } from '../../../__mocks__';
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn().mockReturnValue({ t: (key) => key }),
+}));
 
-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('@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(),
+}));
 
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
   useStockOperationTypes: jest.fn(),
@@ -33,11 +50,7 @@ jest.mock('../stock-operations.resource', () => ({
   operationStatusColor: jest.fn(() => 'some-color'),
   getStockOperationLinks: jest.fn(),
   useStockOperations: jest.fn().mockReturnValue({
-    items: {
-      results: [],
-      links: [],
-      totalCount: 0,
-    },
+    items: { results: [] },
     isLoading: false,
     error: null,
   }),
@@ -65,7 +78,6 @@ jest.mock('../../stock-items/stock-items.resource', () => ({
     items: {},
   }),
 }));
-
 jest.mock('./hooks/useFilterableStockItems', () => ({
   useFilterableStockItems: jest.fn().mockReturnValue({
     stockItemsList: [],
@@ -75,9 +87,7 @@ jest.mock('./hooks/useFilterableStockItems', () => ({
     isLoading: false,
   }),
 }));
-
 jest.mock('./hooks/useParties', () => jest.fn());
-
 jest.mock('react-hook-form', () => ({
   useForm: jest.fn().mockReturnValue({
     watch: jest.fn(),
@@ -93,17 +103,6 @@ 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(),
@@ -135,71 +134,21 @@ jest.mock('../../stock-items/add-stock-item/batch-information/batch-information.
 
 describe('Stock Operation step 2 (stock operation items details)', () => {
   beforeEach(() => {
-    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({
+    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: [],
-      destinationPartiesFilter: jest.fn(),
-      destinationTags: [],
-      error: undefined,
-      isLoading: false,
-      mutate: jest.fn(),
-      parties: [],
       sourceParties: [],
-      sourcePartiesFilter: jest.fn(),
+      isLoading: false,
+      error: undefined,
       sourceTags: [],
-    });
-
-    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: [],
-      },
+      destinationTags: [],
     });
   });
 
   it('should have both previous and next btns', async () => {
-    const user = userEvent.setup();
-
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -210,15 +159,13 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       />,
     );
     // MOVE TO STEP 2
-    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.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}
@@ -228,17 +175,16 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-
     const nextButton = screen.getByRole('button', { name: /Next/i });
     expect(nextButton).toBeInTheDocument();
-    await user.click(nextButton);
+    await userEvent.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') === 'Find your items' &&
+            element.getAttribute('placeholder') === 'findItems' &&
             element.getAttribute('name') === 'search-stock-operation-item'
           );
         },
@@ -247,10 +193,8 @@ 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();
-    mockUseFilterableStockItems.mockReturnValue({
+    (useFilterableStockItems as jest.Mock).mockReturnValue({
       stockItemsList: [
         { uuid: 'mock-uuid', commonName: 'mock-common-name', drugName: 'mock-common-name' },
       ] as Array<StockItemDTO>,
@@ -259,7 +203,6 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       isLoading: false,
       setSearchString: mocksetSearchString,
     });
-
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -269,24 +212,21 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
-    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
     const searchInput = screen.getByRole('searchbox', {
-      name: /search/i,
+      name: (_, element) => element.getAttribute('id') === 'search-stock-operation-item',
     });
     expect(searchInput).toBeInTheDocument();
-    await user.click(searchInput);
-    await user.type(searchInput, 'stock');
+    await userEvent.click(searchInput);
+    await userEvent.type(searchInput, 'stock');
     expect(mocksetSearchString).toHaveBeenCalledWith('stock');
     expect(screen.getByText('mock-common-name'));
   });
 
   it('should properly handle stock operation item selection', async () => {
-    const user = userEvent.setup();
-
-    mockUseFilterableStockItems.mockReturnValue({
+    (useFilterableStockItems as jest.Mock).mockReturnValue({
       stockItemsList: [
         { uuid: 'mock-uuid', commonName: 'mock-common-name', drugName: 'mock-common-name' },
       ] as Array<StockItemDTO>,
@@ -295,7 +235,6 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       isLoading: false,
       setSearchString: jest.fn(),
     });
-
     render(
       <StockOperationForm
         stockOperationType={receiptOperationTypeMock as any}
@@ -306,30 +245,27 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
       />,
     );
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
-    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Next/i }));
     // -------------------------------
     const searchInput = screen.getByRole('searchbox', {
       name: (_, element) => element.getAttribute('id') === 'search-stock-operation-item',
     });
-    await user.click(searchInput);
-    await user.type(searchInput, 'stock');
-    await user.click(screen.getByText('mock-common-name'));
+    await userEvent.click(searchInput);
+    await userEvent.type(searchInput, 'stock');
+    await userEvent.click(screen.getByText('mock-common-name'));
     // Look for common name at the top of workspace
-    expect(screen.getByText(/no drug name available|no common name available|mock-common-name/i)).toBeInTheDocument();
+    expect(screen.getByText(/noDrugNameAvailable|noCommonNameAvailable|mock-common-name/i)).toBeInTheDocument();
   });
 
   it('should render stock operation items in data table', async () => {
-    const user = userEvent.setup();
-
-    mockUseStockItem.mockReturnValue({
+    (useStockItem as jest.Mock).mockReturnValue({
       isLoading: false,
       error: null,
       item: { commonName: 'mock-stock-item-common name', uuid: 'mock-uuid' } as StockItemDTO,
     });
-
     const mockQuantity = 99999;
     const mockExpiration = new Date();
-    mockUseFormContext.mockReturnValue({
+    (useFormContext as jest.Mock).mockReturnValue({
       watch: jest.fn().mockReturnValue([
         {
           quantity: mockQuantity,
@@ -339,23 +275,11 @@ 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}
@@ -365,9 +289,8 @@ describe('Stock Operation step 2 (stock operation items details)', () => {
         promptBeforeClosing={jest.fn()}
       />,
     );
-
     // ----- CLICK NEXT TO MOVE TO STEP 2 ---------
-    await user.click(screen.getByRole('button', { name: /Next/i }));
+    await userEvent.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,18 +1,44 @@
-import React from 'react';
-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 { 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 }),
+}));
 
-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('@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(),
+}));
 
 jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
   useStockOperationTypes: jest.fn(),
@@ -52,7 +78,6 @@ jest.mock('../../stock-items/stock-items.resource', () => ({
     items: {},
   }),
 }));
-
 jest.mock('./hooks/useFilterableStockItems', () => ({
   useFilterableStockItems: jest.fn().mockReturnValue({
     stockItemsList: [],
@@ -62,9 +87,7 @@ jest.mock('./hooks/useFilterableStockItems', () => ({
     isLoading: false,
   }),
 }));
-
 jest.mock('./hooks/useParties', () => jest.fn());
-
 jest.mock('react-hook-form', () => ({
   useForm: jest.fn().mockReturnValue({
     watch: jest.fn(),
@@ -111,55 +134,17 @@ jest.mock('../../stock-items/add-stock-item/batch-information/batch-information.
 
 describe('Stock Operation form step 3 (stock submision)', () => {
   beforeEach(() => {
-    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({
+    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: [],
       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: [],
-      },
     });
   });
 
@@ -174,11 +159,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();
   });
 
@@ -193,15 +178,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 }));
 
     // 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
@@ -213,19 +197,18 @@ 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: /submit for review/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /submitForReview/i })).not.toBeInTheDocument();
     await userEvent.click(yesRadioButton);
     // On require aprooval should now show
-    expect(screen.getByRole('button', { name: /submit for review/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /submitForReview/i })).toBeInTheDocument();
   });
-
   it('should render complete button when require aprroval radion button is checked no', async () => {
     render(
       <StockOperationForm
@@ -237,9 +220,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();
@@ -247,7 +230,6 @@ 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
@@ -259,9 +241,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();
@@ -269,7 +251,6 @@ 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
@@ -281,14 +262,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 approval should now show complete btn
+    // On require aprooval 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,5 +1,3 @@
-import React, { useCallback, useId, useMemo } from 'react';
-import { ArrowLeft, ArrowRight, Edit, TrashCan } from '@carbon/react/icons';
 import {
   Button,
   DataTable,
@@ -11,6 +9,8 @@ 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,7 +42,6 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
 }) => {
   const { t } = useTranslation();
   const operationTypePermision = useOperationTypePermisions(stockOperationType);
-  const uniqueId = useId();
 
   const form = useFormContext<StockOperationItemDtoSchema>();
   const observableOperationItems = form.watch('stockOperationItems');
@@ -112,7 +111,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
   );
 
   const tableRows = useMemo(() => {
-    return observableOperationItems?.map((item, index) => {
+    return observableOperationItems?.map((item) => {
       const {
         batchNo,
         expiration,
@@ -125,7 +124,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
       } = item;
 
       return {
-        id: uuid || `${uniqueId}-${index}`,
+        id: uuid,
         item: stockItemUuid ? <StockOperationItemCell stockItemUuid={stockItemUuid} /> : '--',
         itemDetails: stockItemUuid ? <StockAvailability stockItemUuid={stockItemUuid} /> : '--',
         batch: (
@@ -179,7 +178,7 @@ const StockOperationItemsFormStep: React.FC<StockOperationItemsFormStepProps> =
         ),
       };
     });
-  }, [observableOperationItems, onLaunchItemsForm, stockOperationType, uniqueId]);
+  }, [observableOperationItems, onLaunchItemsForm, stockOperationType]);
 
   const headerTitle = t('stockoperationItems', 'Stock operation items');