@openmrs/esm-billing-app 1.0.2-pre.764 → 1.0.2-pre.768

package/src/invoice/invoice.test.tsx

@@ -1,68 +1,51 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { screen, render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { useReactToPrint } from 'react-to-print';
 import { getDefaultsFromConfigSchema, useConfig, usePatient } from '@openmrs/esm-framework';
 import { configSchema, type BillingConfig } from '../config-schema';
 import { mockBill, mockPatient } from '../../__mocks__/bills.mock';
-import { useBill, processBillPayment } from '../billing.resource';
+import { useBill } from '../billing.resource';
 import { usePaymentModes } from './payments/payment.resource';
 import Invoice from './invoice.component';
 
 const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBill = jest.mocked(useBill);
+const mockUsePatient = jest.mocked(usePatient);
+const mockUsePaymentModes = jest.mocked(usePaymentModes);
+const mockUseReactToPrint = jest.mocked(useReactToPrint);
 
-// Mock convertToCurrency
 jest.mock('../helpers/functions', () => ({
   convertToCurrency: jest.fn((amount) => `USD ${amount}`),
 }));
 
-// Set window.i18next
 window.i18next = {
   language: 'en',
 } as any;
 
-// Mock InvoiceTable component
-jest.mock('./invoice-table.component', () =>
-  jest.fn(({ bill }) => <div data-testid="mock-invoice-table">Invoice Table Mock</div>),
-);
-
-// Mock payments component
-jest.mock('./payments/payments.component', () =>
-  jest.fn(({ bill, mutate, selectedLineItems }) => (
-    <div data-testid="mock-payments">
-      <h2>Payments</h2>
-      <button>Add payment option</button>
-    </div>
-  )),
-);
-
-// Mock PrintReceipt component
 jest.mock('./printable-invoice/print-receipt.component', () =>
-  jest.fn(({ billId }) => <div data-testid="mock-print-receipt">Print Receipt Mock</div>),
+  jest.fn(() => <div data-testid="mock-print-receipt">Print Receipt Mock</div>),
 );
 
-// Mock PrintableInvoice component
 jest.mock('./printable-invoice/printable-invoice.component', () =>
-  jest.fn(({ bill, patient }) => <div data-testid="mock-printable-invoice">Printable Invoice Mock</div>),
+  jest.fn(() => <div data-testid="mock-printable-invoice">Printable Invoice Mock</div>),
 );
 
-// Mock payment resource
 jest.mock('./payments/payment.resource', () => ({
   usePaymentModes: jest.fn(),
   updateBillVisitAttribute: jest.fn(),
 }));
 
-// Mock billing resource
 jest.mock('../billing.resource', () => ({
   useBill: jest.fn(),
-  processBillPayment: jest.fn(),
   useDefaultFacility: jest.fn().mockReturnValue({
-    uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590',
-    display: 'MTRH',
+    data: {
+      uuid: '54065383-b4d4-42d2-af4d-d250a1fd2590',
+      display: 'MTRH',
+    },
   }),
 }));
 
-// Mock react-router-dom
 jest.mock('react-router-dom', () => ({
   useParams: jest.fn().mockReturnValue({
     patientUuid: 'patientUuid',
@@ -70,18 +53,11 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-// Mock react-to-print
 jest.mock('react-to-print', () => ({
   useReactToPrint: jest.fn(),
 }));
 
 describe('Invoice', () => {
-  const mockedBill = useBill as jest.Mock;
-  const mockedPatient = usePatient as jest.Mock;
-  const mockedProcessBillPayment = processBillPayment as jest.Mock;
-  const mockedUsePaymentModes = usePaymentModes as jest.Mock;
-  const mockedUseReactToPrint = useReactToPrint as jest.Mock;
-
   const defaultBillData = {
     ...mockBill,
     uuid: 'test-uuid',
@@ -97,12 +73,20 @@ describe('Invoice', () => {
         quantity: 1,
         price: 1000,
         paymentStatus: 'PENDING',
+        billableService: 'Test Service',
+        display: '',
+        voided: false,
+        voidReason: '',
+        priceName: '',
+        priceUuid: '',
+        lineItemOrder: 0,
+        resourceVersion: '',
       },
     ],
   };
 
   beforeEach(() => {
-    mockedBill.mockReturnValue({
+    mockUseBill.mockReturnValue({
       bill: defaultBillData,
       isLoading: false,
       error: null,
@@ -110,15 +94,14 @@ describe('Invoice', () => {
       mutate: jest.fn(),
     });
 
-    mockedPatient.mockReturnValue({
-      patient: mockPatient,
+    mockUsePatient.mockReturnValue({
+      patient: mockPatient as any,
       isLoading: false,
       error: null,
-      isValidating: false,
-      mutate: jest.fn(),
+      patientUuid: 'patientUuid',
     });
 
-    mockedUsePaymentModes.mockReturnValue({
+    mockUsePaymentModes.mockReturnValue({
       paymentModes: [
         { uuid: 'cash-uuid', name: 'Cash', description: 'Cash Method', retired: false },
         { uuid: 'mpesa-uuid', name: 'MPESA', description: 'MPESA Method', retired: false },
@@ -130,42 +113,75 @@ describe('Invoice', () => {
 
     mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
 
-    // Setup print handler mock
     const printHandler = jest.fn();
-    mockedUseReactToPrint.mockReturnValue(printHandler);
+    mockUseReactToPrint.mockReturnValue(printHandler);
+  });
+
+  it('should render loading state when bill is loading', () => {
+    mockUseBill.mockReturnValue({
+      bill: null,
+      isLoading: true,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    expect(screen.getByText(/loading bill information/i)).toBeInTheDocument();
+  });
+
+  it('should render loading state when patient is loading', () => {
+    mockUsePatient.mockReturnValue({
+      patient: null as any,
+      isLoading: true,
+      error: null,
+      patientUuid: 'patientUuid',
+    });
+
+    render(<Invoice />);
+    expect(screen.getByText(/loading bill information/i)).toBeInTheDocument();
   });
 
-  it('should render error state correctly', () => {
-    mockedBill.mockReturnValue({
+  it('should render error state when bill fails to load', () => {
+    mockUseBill.mockReturnValue({
       bill: null,
       isLoading: false,
-      error: new Error('Test error'),
+      error: new Error('Failed to load bill'),
       isValidating: false,
       mutate: jest.fn(),
     });
 
     render(<Invoice />);
-    expect(screen.getByText(/Invoice error/i)).toBeInTheDocument();
-    expect(screen.getByText(/Error/)).toBeInTheDocument();
+    expect(screen.getByText(/invoice error/i)).toBeInTheDocument();
   });
 
   it('should render invoice details correctly', () => {
     render(<Invoice />);
 
-    // Check invoice details
-    expect(screen.getByText(/Total Amount/i)).toBeInTheDocument();
-    expect(screen.getByText(/Amount Tendered/i)).toBeInTheDocument();
-    expect(screen.getByText(/Invoice Number/i)).toBeInTheDocument();
-    expect(screen.getByText(/Date And Time/i)).toBeInTheDocument();
-    expect(screen.getByText(/Invoice Status/i)).toBeInTheDocument();
+    expect(screen.getAllByText(/total amount/i).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/amount tendered/i).length).toBeGreaterThan(0);
+    expect(screen.getByText(/invoice number/i)).toBeInTheDocument();
+    expect(screen.getByText(/date and time/i)).toBeInTheDocument();
+    expect(screen.getByText(/invoice status/i)).toBeInTheDocument();
+    expect(screen.getAllByText('RCPT-001').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('PENDING').length).toBeGreaterThan(0);
+  });
+
+  it('should render invoice table with line items', () => {
+    render(<Invoice />);
 
-    // Check mock components
-    expect(screen.getByTestId('mock-invoice-table')).toBeInTheDocument();
-    expect(screen.getByTestId('mock-payments')).toBeInTheDocument();
+    expect(screen.getByText(/line items/i)).toBeInTheDocument();
+    expect(screen.getByText('Test Service')).toBeInTheDocument();
+  });
+
+  it('should render payments section', () => {
+    render(<Invoice />);
+
+    expect(screen.getByText(/payments/i)).toBeInTheDocument();
   });
 
   it('should show print receipt button for paid bills', () => {
-    mockedBill.mockReturnValue({
+    mockUseBill.mockReturnValue({
       bill: {
         ...defaultBillData,
         status: 'PAID',
@@ -181,66 +197,280 @@ describe('Invoice', () => {
     expect(screen.getByTestId('mock-print-receipt')).toBeInTheDocument();
   });
 
-  it('should handle bill payment processing', async () => {
-    const user = userEvent.setup();
-    const mockMutate = jest.fn();
-
-    mockedBill.mockReturnValue({
-      bill: defaultBillData,
+  it('should show print receipt button for bills with tendered amount', () => {
+    mockUseBill.mockReturnValue({
+      bill: {
+        ...defaultBillData,
+        status: 'PENDING',
+        tenderedAmount: 500,
+      },
       isLoading: false,
       error: null,
       isValidating: false,
-      mutate: mockMutate,
+      mutate: jest.fn(),
     });
 
-    mockedProcessBillPayment.mockResolvedValue({});
+    render(<Invoice />);
+    expect(screen.getByTestId('mock-print-receipt')).toBeInTheDocument();
+  });
+
+  it('should not show print receipt button for unpaid bills', () => {
+    render(<Invoice />);
+    expect(screen.queryByTestId('mock-print-receipt')).not.toBeInTheDocument();
+  });
+
+  it('should handle print button click', async () => {
+    const handlePrintMock = jest.fn();
+    const user = userEvent.setup();
+    mockUseReactToPrint.mockReturnValue(handlePrintMock);
 
     render(<Invoice />);
 
-    // Add payment flow would go here
-    // Note: Detailed payment interaction testing should be in the Payments component tests
+    const printButton = screen.getByRole('button', { name: /print bill/i });
+    await user.click(printButton);
 
-    expect(screen.getByText(/Payments/i)).toBeInTheDocument();
+    await waitFor(() => {
+      expect(handlePrintMock).toHaveBeenCalled();
+    });
   });
 
-  it('should update line items when bill data changes', () => {
-    const { rerender } = render(<Invoice />);
+  it('should disable print button while printing', () => {
+    render(<Invoice />);
 
-    // Update bill with new line items
-    const updatedBill = {
+    const printButton = screen.getByRole('button', { name: /print bill/i });
+    expect(printButton).toBeEnabled();
+  });
+
+  it('should render patient header when patient data is available', () => {
+    render(<Invoice />);
+
+    // Patient header is rendered via ExtensionSlot
+    expect(screen.getByText(/line items/i)).toBeInTheDocument();
+  });
+
+  it('should search and filter line items in the table', async () => {
+    const billWithMultipleItems = {
       ...defaultBillData,
       lineItems: [
-        ...defaultBillData.lineItems,
+        {
+          uuid: 'item-1',
+          item: 'Lab Test',
+          quantity: 1,
+          price: 500,
+          paymentStatus: 'PENDING',
+          billableService: 'Lab Test',
+          display: '',
+          voided: false,
+          voidReason: '',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 0,
+          resourceVersion: '',
+        },
         {
           uuid: 'item-2',
-          item: 'New Service',
+          item: 'X-Ray',
           quantity: 1,
           price: 500,
           paymentStatus: 'PENDING',
+          billableService: 'X-Ray',
+          display: '',
+          voided: false,
+          voidReason: '',
+          priceName: '',
+          priceUuid: '',
+          lineItemOrder: 1,
+          resourceVersion: '',
         },
       ],
     };
 
-    mockedBill.mockReturnValue({
-      bill: updatedBill,
+    mockUseBill.mockReturnValue({
+      bill: billWithMultipleItems,
       isLoading: false,
       error: null,
       isValidating: false,
       mutate: jest.fn(),
     });
 
+    const user = userEvent.setup();
+    render(<Invoice />);
+
+    expect(screen.getByText('Lab Test')).toBeInTheDocument();
+    expect(screen.getByText('X-Ray')).toBeInTheDocument();
+
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
+    await user.type(searchInput, 'Lab Test');
+
+    await waitFor(() => {
+      expect(screen.getByText('Lab Test')).toBeInTheDocument();
+      expect(screen.queryByText('X-Ray')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should handle bill data updates via mutate', () => {
+    const mockMutate = jest.fn();
+    mockUseBill.mockReturnValue({
+      bill: defaultBillData,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+
+    const { rerender } = render(<Invoice />);
+
+    const updatedBill = {
+      ...defaultBillData,
+      status: 'PAID',
+      tenderedAmount: 1000,
+    };
+
+    mockUseBill.mockReturnValue({
+      bill: updatedBill,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+
     rerender(<Invoice />);
 
-    // The mock invoice table should receive updated props
-    expect(screen.getByTestId('mock-invoice-table')).toBeInTheDocument();
+    expect(screen.getByText('PAID')).toBeInTheDocument();
+  });
+
+  it('should display correct currency formatting', () => {
+    render(<Invoice />);
+
+    // convertToCurrency is mocked to return "USD ${amount}"
+    expect(screen.getAllByText('USD 1000').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('USD 0').length).toBeGreaterThan(0);
+  });
+
+  it('should disable print button when isPrinting state is true', () => {
+    // Mock isPrinting state by checking the button's disabled state when loading
+    mockUseBill.mockReturnValue({
+      bill: defaultBillData,
+      isLoading: true,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    // When bill is loading, component shows loading state, not the button
+    expect(screen.getByText(/loading bill information/i)).toBeInTheDocument();
+  });
+
+  it('should not render PrintableInvoice when bill is missing', () => {
+    mockUseBill.mockReturnValue({
+      bill: null,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    mockUsePatient.mockReturnValue({
+      patient: mockPatient as any,
+      isLoading: false,
+      error: null,
+      patientUuid: 'patientUuid',
+    });
+
+    render(<Invoice />);
+
+    // PrintableInvoice should not be rendered when bill is null
+    // Since it's in a hidden div, we can't easily assert its absence
+    // but we can verify the main content doesn't have the print container
+    expect(screen.queryByTestId('mock-printable-invoice')).not.toBeInTheDocument();
+  });
+
+  it('should not render PrintableInvoice when patient is missing', () => {
+    mockUsePatient.mockReturnValue({
+      patient: null as any,
+      isLoading: false,
+      error: null,
+      patientUuid: 'patientUuid',
+    });
+
+    render(<Invoice />);
+
+    // PrintableInvoice requires both bill and patient
+    expect(screen.queryByTestId('mock-printable-invoice')).not.toBeInTheDocument();
+  });
+
+  it('should render PrintableInvoice when both bill and patient exist', () => {
+    render(<Invoice />);
+
+    // PrintableInvoice should be rendered with both bill and patient
+    expect(screen.getByTestId('mock-printable-invoice')).toBeInTheDocument();
+  });
+
+  it('should pass correct props to InvoiceTable', () => {
+    render(<Invoice />);
+
+    // Verify InvoiceTable is rendered with line items
+    expect(screen.getByText('Test Service')).toBeInTheDocument();
+    expect(screen.getByText(/line items/i)).toBeInTheDocument();
   });
 
-  it('should show patient information correctly', () => {
+  it('should pass mutate function to Payments component', () => {
+    const mockMutate = jest.fn();
+    mockUseBill.mockReturnValue({
+      bill: defaultBillData,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+
     render(<Invoice />);
-    // Check that the invoice details are rendered
-    expect(screen.getByText('Invoice Number')).toBeInTheDocument();
-    expect(screen.getByText('RCPT-001')).toBeInTheDocument();
+
+    // Payments component should be rendered
+    expect(screen.getByText(/payments/i)).toBeInTheDocument();
   });
 
-  // Add more test cases as needed for specific features or edge cases
+  it('should show print receipt for bills with partial payment', () => {
+    mockUseBill.mockReturnValue({
+      bill: {
+        ...defaultBillData,
+        status: 'PENDING',
+        totalAmount: 1000,
+        tenderedAmount: 500, // Partial payment
+      },
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    expect(screen.getByTestId('mock-print-receipt')).toBeInTheDocument();
+  });
+
+  it('should render ExtensionSlot when patient and patientUuid exist', () => {
+    render(<Invoice />);
+
+    // The component renders, which includes the ExtensionSlot
+    // We can verify this indirectly by checking the main content is present
+    expect(screen.getByText(/invoice number/i)).toBeInTheDocument();
+  });
+
+  it('should not show print receipt for bills with zero tendered amount', () => {
+    mockUseBill.mockReturnValue({
+      bill: {
+        ...defaultBillData,
+        status: 'PENDING',
+        tenderedAmount: 0,
+      },
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
+
+    render(<Invoice />);
+    expect(screen.queryByTestId('mock-print-receipt')).not.toBeInTheDocument();
+  });
 });

package/src/invoice/payments/payment-form/payment-form.test.tsx

@@ -34,13 +34,15 @@ describe('PaymentForm Component', () => {
       mutate: jest.fn(),
     });
 
-    const { container } = render(
+    render(
       <Wrapper>
         <PaymentForm disablePayment={false} isSingleLineItem={false} />
       </Wrapper>,
     );
 
-    expect(container.querySelector('.cds--skeleton')).toBeInTheDocument();
+    // When loading, payment method elements should not be present
+    expect(screen.queryByText(/select payment method/i)).not.toBeInTheDocument();
+    expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();
   });
 
   test('should render error message when payment modes fail to load', () => {

package/src/invoice/payments/payments.test.tsx

@@ -226,7 +226,7 @@ describe('Payments', () => {
 
   it('should return null when bill is not provided', () => {
     const { container } = render(<Payments bill={null} mutate={mockMutate} />);
-    expect(container.firstChild).toBeNull();
+    expect(container).toBeEmptyDOMElement();
   });
 
   it('should render add payment method button for bills with amount due', () => {
@@ -241,7 +241,7 @@ describe('Payments', () => {
 
     // Verify add payment method button is available
     expect(screen.getByText(/add payment method/i)).toBeInTheDocument();
-    expect(screen.getByText(/add payment method/i)).not.toBeDisabled();
+    expect(screen.getByText(/add payment method/i)).toBeEnabled();
   });
 
   it('should display process payment button', () => {

package/src/left-panel-link.test.tsx

@@ -23,7 +23,6 @@ describe('LinkExtension Component', () => {
 });
 
 describe('createLeftPanelLink Function', () => {
-  const user = userEvent.setup();
   test('returns a component that renders LinkExtension', () => {
     const config = { name: 'billing', title: 'Billing' };
     const TestComponent = createLeftPanelLink(config);
@@ -31,8 +30,6 @@ describe('createLeftPanelLink Function', () => {
     render(<TestComponent />);
     expect(screen.getByText('Billing')).toBeInTheDocument();
     const testLink = screen.getByRole('link', { name: 'Billing' });
-    user.click(testLink);
-    expect(window.location.pathname).toBe('/billing/6eb8d678-514d-46ad-9554-51e48d96d567');
-    // expect(testLink).toHaveClass('active-left-nav-link');
+    expect(testLink).toHaveAttribute('href', '/openmrs/spa/home/billing');
   });
 });