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

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-items/stock-items.component.tsx

@@ -3,7 +3,7 @@ import StockItemsTableComponent from './stock-items-table.component';
 
 const StockItems = () => {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockItemsTableComponent />
     </div>
   );

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-locations/stock-locations.component.tsx

@@ -3,7 +3,7 @@ import StockLocationsItems from './stock-locations-table.component';
 
 function StockLocations() {
   return (
-    <div style={{ margin: '5px' }}>
+    <div style={{ margin: '1rem' }}>
       <StockLocationsItems />
     </div>
   );

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

@@ -190,9 +190,10 @@ export function useConcept(conceptUuid: string) {
       data: Concept;
     },
     Error
-  >(apiUrl, openmrsFetch);
+  >(conceptUuid ? apiUrl : null, openmrsFetch);
+
   return {
-    items: data?.data || <Concept>{},
+    items: data?.data,
     isLoading,
     error,
   };

package/src/stock-management-header/stock-management-header.scss

@@ -1,7 +1,7 @@
 @use '@carbon/colors';
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .header {
   @include type.type-style('body-compact-02');

package/src/stock-operations/add-stock-operation/stock-operations-expanded-row/stock-operation-expanded-row.scss

@@ -1,6 +1,6 @@
 @use '@carbon/layout';
 @use '@carbon/type';
-@use '~@openmrs/esm-styleguide/src/vars' as *;
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .textHeading {
   font-weight: bold;

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-filters.component.tsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
-import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { DropdownSkeleton, MultiSelect } from '@carbon/react';
+import { getStockOperationTypes, useConcept } from '../stock-lookups/stock-lookups.resource';
 import { StockFilters } from '../constants';
 import { StockOperationStatusTypes } from '../core/api/types/stockOperation/StockOperationStatus';
 import styles from '../stock-items/stock-items-table.scss';
 
 interface StockOperationFiltersProps {
   conceptUuid?: string;
-  onFilterChange: (selectedItems: any[], filterType: string) => void;
   filterName: string;
+  onFilterChange: (selectedItems: any[], filterType: string) => void;
 }
 
 const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptUuid, onFilterChange, filterName }) => {
@@ -58,11 +58,12 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
 
   return (
     <MultiSelect
+      autoAlign
       className={styles.filtersAlign}
+      disabled={!dataItems.length}
       id="multiSelect"
       label={filterName}
-      size="md"
-      labelInline={true}
+      labelInline
       items={dataItems}
       itemToString={(item) => (item ? item.display : 'Not Set')}
       onChange={({ selectedItems }) => {
@@ -74,7 +75,6 @@ const StockOperationsFilters: React.FC<StockOperationFiltersProps> = ({ conceptU
         }
       }}
       placeholder={`Filter by ${filterName}`}
-      style={{ minWidth: 'auto', width: 'auto' }}
     />
   );
 };

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();