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

package/src/stock-items/stock-items-table.test.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
-import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import StockItemsTableComponent from './stock-items-table.component';
-import { useStockItemsPages } from './stock-items-table.resource';
+import { render, screen, waitFor } from '@testing-library/react';
+import { type StockItemDTO } from '../core/api/types/stockItem/StockItem';
 import { handleMutate } from '../utils';
-import { launchAddOrStockItemWorkspace } from './stock-item.utils';
+import { launchAddOrEditStockItemWorkspace } from './stock-item.utils';
+import { useStockItemsPages } from './stock-items-table.resource';
+import StockItemsTableComponent from './stock-items-table.component';
+
+const mockUseStockItemsPages = jest.mocked(useStockItemsPages);
 
 jest.mock('./stock-items-table.resource', () => ({
   useStockItemsPages: jest.fn(),
@@ -15,109 +18,146 @@ jest.mock('../utils', () => ({
 }));
 
 jest.mock('./stock-item.utils', () => ({
-  launchAddOrStockItemWorkspace: jest.fn(),
-}));
-
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
+  launchAddOrEditStockItemWorkspace: jest.fn(),
 }));
 
 describe('StockItemsTableComponent', () => {
-  const mockUseStockItemsPages = {
-    isLoading: false,
-    items: Array(25)
-      .fill(null)
-      .map((_, index) => ({
-        uuid: `item-${index}`,
-        commonName: `Test Item ${index}`,
-        drugUuid: index % 2 === 0 ? `drug-${index}` : null,
-        conceptName: `Concept ${index}`,
-        dispensingUnitName: `Unit ${index}`,
-        defaultStockOperationsUoMName: `UoM ${index}`,
-        reorderLevel: index * 10,
-        reorderLevelUoMName: 'Units',
-      })),
-    totalCount: 25,
-    currentPageSize: 10,
-    setPageSize: jest.fn(),
-    pageSizes: [10, 20, 30],
-    currentPage: 1,
-    setCurrentPage: jest.fn(),
-    isDrug: '',
-    setDrug: jest.fn(),
-    setSearchString: jest.fn(),
-  };
-
   beforeEach(() => {
-    jest.clearAllMocks();
-    (useStockItemsPages as jest.Mock).mockReturnValue(mockUseStockItemsPages);
+    mockUseStockItemsPages.mockReturnValue({
+      isLoading: false,
+      items: Array(25)
+        .fill(null)
+        .map((_, index) => ({
+          uuid: `item-${index}`,
+          commonName: `Test Item ${index}`,
+          drugUuid: index % 2 === 0 ? `drug-${index}` : null,
+          conceptName: `Concept ${index}`,
+          dispensingUnitName: `Unit ${index}`,
+          defaultStockOperationsUoMName: `UoM ${index}`,
+          reorderLevel: index * 10,
+          reorderLevelUoMName: 'Units',
+        })) as StockItemDTO[],
+      pagination: {
+        results: [],
+        totalPages: 3,
+        currentPage: 1,
+        paginated: true,
+        showNextButton: true,
+        showPreviousButton: false,
+        goTo: jest.fn(),
+        goToNext: jest.fn(),
+        goToPrevious: jest.fn(),
+      },
+      error: null,
+      totalCount: 25,
+      currentPageSize: 10,
+      setPageSize: jest.fn(),
+      pageSizes: [10, 20, 30],
+      currentPage: 1,
+      setCurrentPage: jest.fn(),
+      isDrug: '',
+      setDrug: jest.fn(),
+      setSearchString: jest.fn(),
+    });
   });
 
   it('renders initial state and UI elements correctly', async () => {
-    render(<StockItemsTableComponent />);
-    expect(screen.getByText('panelDescription')).toBeInTheDocument();
-    expect(screen.getByRole('searchbox')).toBeInTheDocument();
-
     const user = userEvent.setup();
-    const menuButton = screen.getByTestId('stock-items-menu');
-    await user.click(menuButton);
 
-    await screen.findByText('Refresh');
+    render(<StockItemsTableComponent />);
 
-    expect(screen.getByText('type')).toBeInTheDocument();
-    expect(screen.getByText('genericName')).toBeInTheDocument();
-    expect(screen.getByText('commonName')).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /all/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /^pharmaceuticals$/i })).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /non pharmaceuticals/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /import/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /settings/i })).toBeInTheDocument();
+    expect(screen.getByRole('searchbox', { name: /filter table/i })).toBeInTheDocument();
+
+    const settingsMenuButton = screen.getByRole('button', { name: /settings/i });
+    await user.click(settingsMenuButton);
+    await screen.findByText(/refresh/i);
+
+    expect(screen.getByRole('button', { name: /generic name/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /common name/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /dispensing uom/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /bulk packaging/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /reorder level/i })).toBeInTheDocument();
   });
 
   it('displays skeleton loader when isLoading is true', () => {
-    (useStockItemsPages as jest.Mock).mockReturnValue({ ...mockUseStockItemsPages, isLoading: true });
+    mockUseStockItemsPages.mockReturnValue({
+      ...mockUseStockItemsPages,
+      isLoading: true,
+      items: [],
+      pagination: undefined,
+      totalCount: 0,
+      currentPageSize: 0,
+      currentPage: 0,
+      setCurrentPage: function (value: React.SetStateAction<number>): void {
+        throw new Error('Function not implemented.');
+      },
+      setPageSize: function (value: React.SetStateAction<number>): void {
+        throw new Error('Function not implemented.');
+      },
+      pageSizes: [],
+      error: undefined,
+      isDrug: '',
+      setDrug: undefined,
+      setSearchString: function (value: any): void {
+        throw new Error('Function not implemented.');
+      },
+    });
+
     render(<StockItemsTableComponent />);
+
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   it('renders table rows correctly based on items prop', () => {
     render(<StockItemsTableComponent />);
-    expect(screen.getByText('Test Item 0')).toBeInTheDocument();
-    expect(screen.getAllByText('drug').length).toBeGreaterThan(0);
-    expect(screen.getAllByText('other').length).toBeGreaterThan(0);
+
+    expect(screen.getByRole('cell', { name: /test item 0/i })).toBeInTheDocument();
+    expect(screen.getAllByRole('cell', { name: /drug/i }).length).toBeGreaterThan(0);
+    expect(screen.getAllByRole('cell', { name: /other/i }).length).toBeGreaterThan(0);
   });
 
   it('updates search input and triggers search function', async () => {
-    render(<StockItemsTableComponent />);
     const user = userEvent.setup();
+
+    render(<StockItemsTableComponent />);
+
     const searchInput = screen.getByRole('searchbox');
     await user.type(searchInput, 'test search');
     await waitFor(
       () => {
-        expect(mockUseStockItemsPages.setSearchString).toHaveBeenCalledWith('test search');
+        expect(mockUseStockItemsPages().setSearchString).toHaveBeenCalledWith('test search');
       },
       { timeout: 2000 },
     );
   });
 
   it('updates pagination when page or page size changes', async () => {
-    render(<StockItemsTableComponent />);
     const user = userEvent.setup();
-    const nextPageButton = screen.getByLabelText('Next page');
+    render(<StockItemsTableComponent />);
+
+    const nextPageButton = screen.getByLabelText(/next page/i);
     await user.click(nextPageButton);
-    expect(mockUseStockItemsPages.setCurrentPage).toHaveBeenCalled();
+    expect(mockUseStockItemsPages().setCurrentPage).toHaveBeenCalled();
 
-    const pageSizeSelect = screen.getByLabelText('Items per page:');
+    const pageSizeSelect = screen.getByLabelText(/items per page/i);
     await user.selectOptions(pageSizeSelect, '20');
-    expect(mockUseStockItemsPages.setPageSize).toHaveBeenCalledWith(20);
+    expect(mockUseStockItemsPages().setPageSize).toHaveBeenCalledWith(20);
   });
 
   it('triggers handleRefresh when refresh button is clicked', async () => {
+    const user = userEvent.setup();
     render(<StockItemsTableComponent />);
 
-    const user = userEvent.setup();
     const menuButton = screen.getByTestId('stock-items-menu');
     expect(menuButton).toBeInTheDocument();
     await user.click(menuButton);
 
-    const refreshButton = await screen.findByText('Refresh');
+    const refreshButton = await screen.findByText(/refresh/i);
     expect(refreshButton).toBeInTheDocument();
     await user.click(refreshButton);
     await waitFor(() => {
@@ -125,13 +165,14 @@ describe('StockItemsTableComponent', () => {
     });
   });
 
-  it('triggers launchAddOrEditDialog when edit button is clicked', async () => {
-    render(<StockItemsTableComponent />);
+  it('triggers launchAddOrEditStockItemWorkspace when edit button is clicked', async () => {
     const user = userEvent.setup();
-    const editButtons = screen.getAllByLabelText('Edit Stock Item');
+    render(<StockItemsTableComponent />);
+
+    const editButtons = screen.getAllByLabelText(/edit stock item/i);
     await user.click(editButtons[0]);
 
-    expect(launchAddOrStockItemWorkspace).toHaveBeenCalledWith(
+    expect(launchAddOrEditStockItemWorkspace).toHaveBeenCalledWith(
       expect.any(Function),
       expect.objectContaining({ uuid: 'item-0' }),
     );

package/src/stock-locations/location-admin-form.component.tsx

@@ -5,19 +5,20 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,
   ComposedModal,
+  FilterableMultiSelect,
   FormGroup,
+  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
   Stack,
   TextInput,
-  InlineNotification,
-  FilterableMultiSelect,
 } from '@carbon/react';
+import { getCoreTranslation } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type locationData } from '../stock-items/types';
-import styles from './stock-locations-table.scss';
 import { useLocationTags } from './stock-locations-table.resource';
+import styles from './stock-locations-table.scss';
 
 const LocationAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -146,7 +147,7 @@ const LocationAdministrationForm: React.FC<LocationAdministrationFormProps> = ({
         </ModalBody>
         <ModalFooter>
           <Button onClick={() => onModalChange(false)} kind="secondary">
-            {t('cancel', 'Cancel')}
+            {getCoreTranslation('cancel')}
           </Button>
           <Button disabled={!isDirty} type="submit">
             <span>{t('save', 'Save')}</span>

package/src/stock-locations/stock-locations-table.component.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { useStockLocationPages } from './stock-locations-table.resource';
 import {
   Button,
   DataTableSkeleton,
@@ -8,15 +7,16 @@ import {
   TableToolbarSearch,
   Tile,
 } from '@carbon/react';
-import styles from '../stock-items/stock-items-table.scss';
-import { ResourceRepresentation } from '../core/api/api';
-import DataList from '../core/components/table/table.component';
+import { Add } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
-import NewLocationForm from './add-locations-form.workspace';
-import { Add } from '@carbon/react/icons';
-import { handleMutate } from '../utils';
 import { restBaseUrl } from '@openmrs/esm-framework';
+import { handleMutate } from '../utils';
+import { ResourceRepresentation } from '../core/api/api';
+import { useStockLocationPages } from './stock-locations-table.resource';
+import DataList from '../core/components/table/table.component';
+import NewLocationForm from './add-locations-form.workspace';
+import styles from '../stock-items/stock-items-table.scss';
 
 interface StockLocationsTableProps {
   status?: string;
@@ -46,7 +46,9 @@ const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
           <>
             <TableToolbarSearch persistent onChange={onInputChange} />
             <TableToolbarMenu>
-              <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
+              <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
+                {t('refresh', 'Refresh')}
+              </TableToolbarAction>
             </TableToolbarMenu>
             {showLocationModal ? (
               <NewLocationForm onModalChange={setAddLocationModal} showModal={showLocationModal} mutate={mutate} />

package/src/stock-lookups/stock-lookups.resource.ts

@@ -1,3 +1,6 @@
+import { useMemo } from 'react';
+import { uniqBy } from 'lodash-es';
+import useSWR from 'swr';
 import {
   type FetchResponse,
   type OpenmrsResource,
@@ -6,30 +9,24 @@ import {
   useSession,
   restBaseUrl,
 } from '@openmrs/esm-framework';
-import { type ResourceFilterCriteria, toQueryParams } from '../core/api/api';
-import { type PageableResult } from '../core/api/types/PageableResult';
-import { type OpenMRSLocation, type OpenMRSLocationTag } from '../core/api/types/Location';
-import useSWR from 'swr';
-import { type Role } from '../core/api/types/identity/Role';
-import { type User } from '../core/api/types/identity/User';
-import { type StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
 import { type Concept } from '../core/api/types/concept/Concept';
-import { type Party } from '../core/api/types/Party';
 import { type Drug } from '../core/api/types/concept/Drug';
+import { type OpenMRSLocation, type OpenMRSLocationTag } from '../core/api/types/Location';
+import { type PageableResult } from '../core/api/types/PageableResult';
+import { type Party } from '../core/api/types/Party';
 import { type Patient } from '../core/api/types/identity/Patient';
-import { useMemo } from 'react';
-import { uniqBy } from 'lodash-es';
+import { type ResourceFilterCriteria, toQueryParams } from '../core/api/api';
+import { type Role } from '../core/api/types/identity/Role';
+import { type StockOperationType } from '../core/api/types/stockOperation/StockOperationType';
+import { type User } from '../core/api/types/identity/User';
 import { type UserRoleScope } from '../core/api/types/identity/UserRoleScope';
 
+export type ConceptFilterCriteria = ResourceFilterCriteria;
+export type DrugFilterCriteria = ResourceFilterCriteria;
+export type LocationFilterCriteria = ResourceFilterCriteria;
 export type PatientFilterCriteria = ResourceFilterCriteria;
-
 export type UserFilterCriteria = ResourceFilterCriteria;
 
-export type DrugFilterCriteria = ResourceFilterCriteria;
-
-export type ConceptFilterCriteria = ResourceFilterCriteria;
-
-export type LocationFilterCriteria = ResourceFilterCriteria;
 interface FHIRResponse {
   entry: Array<{ resource: fhir.Location }>;
   total: number;
@@ -190,7 +187,10 @@ export function useConcept(conceptUuid: string) {
       data: Concept;
     },
     Error
-  >(apiUrl, openmrsFetch);
+  >(conceptUuid ? apiUrl : null, openmrsFetch, {
+    errorRetryCount: 2,
+  });
+
   return {
     items: data?.data || <Concept>{},
     isLoading,
@@ -207,6 +207,7 @@ export function useParties() {
     },
     Error
   >(apiUrl, openmrsFetch);
+
   return {
     items: data?.data || <PageableResult<Party>>{},
     isLoading,

package/src/stock-operations/stock-operations-dialog/stock-operations-dialog.component.tsx

@@ -8,7 +8,7 @@ import {
   type StopOperationActionType,
 } from '../../core/api/types/stockOperation/StockOperationAction';
 import { executeStockOperationAction } from '../stock-operations.resource';
-import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { getCoreTranslation, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import { closeOverlay } from '../../core/components/overlay/hook';
 import { extractErrorMessagesFromResponse } from '../../constants';
 import { handleMutate } from '../../utils';
@@ -135,7 +135,7 @@ const StockOperationDialog: React.FC<StockOperationDialogProps> = ({ title, requ
         </ModalBody>
         <ModalFooter>
           <Button kind="secondary" onClick={closeModal}>
-            {t('cancel', 'Cancel')}
+            {getCoreTranslation('cancel')}
           </Button>
           {isApproving ? <InlineLoading /> : <Button type="submit">{t('submit', 'Submit')}</Button>}
         </ModalFooter>

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.component.tsx

@@ -1,10 +1,10 @@
-import { ComboBox, SelectSkeleton } from '@carbon/react';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ComboBox, SelectSkeleton } from '@carbon/react';
 import { type StockBatchDTO } from '../../../core/api/types/stockItem/StockBatchDTO';
+import { formatForDatePicker } from '../../../constants';
 import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
 import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
-import { formatForDatePicker } from '../../../constants';
 
 interface BatchNoSelectorProps {
   stockItemUuid: string;
@@ -48,23 +48,23 @@ const BatchNoSelector: React.FC<BatchNoSelectorProps> = ({ stockItemUuid, error,
 
   return (
     <ComboBox
-      style={{ flexGrow: '1' }}
-      titleText={t('batchNo', 'Batch')}
-      name={'stockBatchUuid'}
       id={'stockBatchUuid'}
+      invalid={!!error}
+      invalidText={error}
       items={filteredBatches || []}
-      onChange={(data: { selectedItem?: StockBatchDTO }) => {
-        onValueChange(data.selectedItem?.uuid);
-      }}
-      selectedItem={initialSelectedItem}
       itemToString={(s: StockBatchDTO) =>
         s?.batchNo
           ? `${s?.batchNo} | Qty: ${s?.quantity ?? 'Unknown'} | Expiry: ${formatForDatePicker(s.expiration)}`
           : ''
       }
+      name={'stockBatchUuid'}
+      onChange={(data: { selectedItem?: StockBatchDTO }) => {
+        onValueChange(data.selectedItem?.uuid);
+      }}
       placeholder={t('filter', "'Filter") + '...'}
-      invalid={error}
-      invalidText={error}
+      selectedItem={initialSelectedItem}
+      style={{ flexGrow: '1' }}
+      titleText={t('batchNo', 'Batch no.')}
     />
   );
 };

package/src/stock-operations/stock-operations-forms/input-components/batch-no-selector.test.tsx

@@ -1,64 +1,127 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { type StockBatchDTO } from '../../../core/api/types/stockItem/StockBatchDTO';
 import { type StockItemInventory } from '../../../core/api/types/stockItem/StockItemInventory';
+import { formatForDatePicker } from '../../../constants';
 import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
 import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
 import BatchNoSelector from './batch-no-selector.component';
-import { formatForDatePicker } from '../../../constants';
 
-jest.mock('../hooks/useStockItemBatchNumbers');
-jest.mock('../../../stock-items/add-stock-item/batch-information/batch-information.resource');
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: (key: string) => key }),
+jest.mock('../hooks/useStockItemBatchNumbers', () => ({
+  useStockItemBatchNumbers: jest.fn(),
+}));
+
+jest.mock('../../../stock-items/add-stock-item/batch-information/batch-information.resource', () => ({
+  useStockItemBatchInformationHook: jest.fn(),
 }));
 
-const mockUseStockItemBatchNumbers = useStockItemBatchNumbers as jest.Mock;
-const mockUseStockItemBatchInformationHook = useStockItemBatchInformationHook as jest.Mock;
+const mockUseStockItemBatchNumbers = jest.mocked(useStockItemBatchNumbers);
+const mockUseStockItemBatchInformationHook = jest.mocked(useStockItemBatchInformationHook);
 
 describe('BatchNoSelector', () => {
   const mockOnValueChange = jest.fn();
   const mockStockItemUuid = 'test-uuid';
   const mockExpiration = new Date();
-  beforeEach(() => {
-    jest.clearAllMocks();
 
+  beforeEach(() => {
     mockUseStockItemBatchNumbers.mockReturnValue({
       isLoading: false,
       stockItemBatchNos: [
-        { uuid: '1', batchNo: 'BATCH-001', quantity: 10, expiration: mockExpiration },
-        { uuid: '2', batchNo: 'BATCH-002', quantity: 20, expiration: mockExpiration },
+        {
+          uuid: '1',
+          batchNo: 'BATCH-001',
+          quantity: '10',
+          expiration: mockExpiration,
+          stockItemUuid: 'item1',
+          voided: false,
+        },
+        {
+          uuid: '2',
+          batchNo: 'BATCH-002',
+          quantity: '20',
+          expiration: mockExpiration,
+          stockItemUuid: 'item2',
+          voided: false,
+        },
       ],
+      setLimit: jest.fn(),
+      setRepresentation: jest.fn(),
+      setSearchString: jest.fn(),
     });
+
     mockUseStockItemBatchInformationHook.mockReturnValue({
       items: [
         { batchNumber: 'BATCH-001', quantity: 10 },
         { batchNumber: 'BATCH-002', quantity: 20 },
       ] as StockItemInventory[],
+      totalCount: 2,
+      currentPage: 1,
+      currentPageSize: 10,
+      setCurrentPage: jest.fn(),
+      setStockBatchUuid: jest.fn(),
       setStockItemUuid: jest.fn(),
+      setPageSize: jest.fn(),
+      pageSizes: [10, 20, 50],
+      isLoading: false,
+      error: null,
+      setLocationUuid: jest.fn(),
+      setPartyUuid: jest.fn(),
+      setSearchString: jest.fn(),
     });
   });
 
-  it('should render loading skeleton when isLoading is true', () => {
-    mockUseStockItemBatchNumbers.mockReturnValue({ isLoading: true, stockItemBatchNos: [] });
-    mockUseStockItemBatchInformationHook.mockReturnValue({ isLoading: true, items: [], setStockItemUuid: jest.fn() });
+  it('should render a loading skeleton when "isLoading" is true', () => {
+    mockUseStockItemBatchNumbers.mockReturnValue({
+      isLoading: true,
+      stockItemBatchNos: [] as StockBatchDTO[],
+      setLimit: jest.fn(),
+      setRepresentation: jest.fn(),
+      setSearchString: jest.fn(),
+    });
+
+    mockUseStockItemBatchInformationHook.mockReturnValue({
+      isLoading: true,
+      items: [],
+      setStockItemUuid: jest.fn(),
+      totalCount: 0,
+      currentPage: 1,
+      currentPageSize: 10,
+      setCurrentPage: jest.fn(),
+      setStockBatchUuid: jest.fn(),
+      setPageSize: jest.fn(),
+      pageSizes: [10, 20, 50],
+      error: null,
+      setLocationUuid: jest.fn(),
+      setPartyUuid: jest.fn(),
+      setSearchString: jest.fn(),
+    });
+
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('should render combobox with batch numbers', async () => {
+  it('should render a combobox with batch numbers', async () => {
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-    expect(screen.getByText('batchNo')).toBeInTheDocument();
+    expect(screen.getByText(/batch no./i)).toBeInTheDocument();
   });
 
   it('should handle batch selection', async () => {
+    const user = userEvent.setup();
+
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+
     const combobox = screen.getByRole('combobox');
-    await userEvent.click(combobox);
-    await userEvent.type(combobox, 'BATCH-001');
+    await user.click(combobox);
+    await user.type(combobox, 'BATCH-001');
+
     const option = screen.getByText(`BATCH-001 | Qty: 10 | Expiry: ${formatForDatePicker(mockExpiration)}`);
-    await userEvent.click(option);
+
+    await user.click(option);
+
     expect(mockOnValueChange).toHaveBeenCalledWith('1');
   });
 
@@ -71,18 +134,45 @@ describe('BatchNoSelector', () => {
   });
 
   it('should filter out batches with zero or undefined quantity', async () => {
+    const user = userEvent.setup();
+
     mockUseStockItemBatchNumbers.mockReturnValue({
       isLoading: false,
       stockItemBatchNos: [
-        { uuid: '1', batchNo: 'BATCH-001', quantity: 10 },
-        { uuid: '2', batchNo: 'BATCH-002', quantity: 0 },
-        { uuid: '3', batchNo: 'BATCH-003', quantity: undefined },
+        {
+          uuid: '1',
+          batchNo: 'BATCH-001',
+          quantity: '10',
+          expiration: mockExpiration,
+          stockItemUuid: 'item1',
+          voided: false,
+        },
+        {
+          uuid: '2',
+          batchNo: 'BATCH-002',
+          quantity: '0',
+          expiration: mockExpiration,
+          stockItemUuid: 'item2',
+          voided: false,
+        },
+        {
+          uuid: '3',
+          batchNo: 'BATCH-003',
+          quantity: undefined,
+          expiration: mockExpiration,
+          stockItemUuid: 'item3',
+          voided: false,
+        },
       ],
+      setLimit: jest.fn(),
+      setRepresentation: jest.fn(),
+      setSearchString: jest.fn(),
     });
 
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
+
     const combobox = screen.getByRole('combobox');
-    await userEvent.click(combobox);
+    await user.click(combobox);
 
     expect(screen.queryByText('BATCH-002')).not.toBeInTheDocument();
     expect(screen.queryByText('BATCH-003')).not.toBeInTheDocument();