@openmrs/esm-billing-app 1.0.2-pre.90 → 1.0.2-pre.901

package/src/invoice/invoice.test.tsx

@@ -1,71 +1,51 @@
 import React from 'react';
-import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
 import { useReactToPrint } from 'react-to-print';
-import { mockBill } from '../../__mocks__/bills.mock';
-import { useBill, processBillPayment } from '../billing.resource';
+import { getDefaultsFromConfigSchema, useConfig, usePatient } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
+import { mockBill, mockPatient } from '../../__mocks__/bills.mock';
+import { useBill } from '../billing.resource';
 import { usePaymentModes } from './payments/payment.resource';
 import Invoice from './invoice.component';
 
-// Mock convertToCurrency
+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);
+
 jest.mock('../helpers/functions', () => ({
   convertToCurrency: jest.fn((amount) => `USD ${amount}`),
 }));
 
-// Mock i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
-}));
-
-// 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',
@@ -73,49 +53,11 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-// Mock react-to-print
 jest.mock('react-to-print', () => ({
   useReactToPrint: jest.fn(),
 }));
 
-// Mock OpenMRS framework
-jest.mock('@openmrs/esm-framework', () => ({
-  showSnackbar: jest.fn(),
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-  useConfig: jest.fn(() => ({
-    defaultCurrency: 'USD',
-  })),
-  formatDate: jest.fn((date) => date?.toString() ?? ''),
-  ExtensionSlot: jest.fn(({ children }) => <div data-testid="extension-slot">{children}</div>),
-  usePatient: jest.fn().mockReturnValue({
-    patient: {
-      id: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
-      name: [{ given: ['John'], family: 'Doe' }],
-    },
-    patientUuid: 'b2fcf02b-7ee3-4d16-a48f-576be2b103aa',
-    isLoading: false,
-    error: null,
-  }),
-  createGlobalStore: jest.fn(),
-  getGlobalStore: jest.fn(() => ({
-    subscribe: jest.fn(),
-    getState: jest.fn(),
-    setState: jest.fn(),
-  })),
-}));
-
-// Mock patient common lib
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  ErrorState: jest.fn(({ error }) => <div data-testid="error-state">Error: {error?.message || error}</div>),
-}));
-
 describe('Invoice', () => {
-  const mockedBill = useBill 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',
@@ -131,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,
@@ -144,7 +94,14 @@ describe('Invoice', () => {
       mutate: jest.fn(),
     });
 
-    mockedUsePaymentModes.mockReturnValue({
+    mockUsePatient.mockReturnValue({
+      patient: mockPatient as any,
+      isLoading: false,
+      error: null,
+      patientUuid: 'patientUuid',
+    });
+
+    mockUsePaymentModes.mockReturnValue({
       paymentModes: [
         { uuid: 'cash-uuid', name: 'Cash', description: 'Cash Method', retired: false },
         { uuid: 'mpesa-uuid', name: 'MPESA', description: 'MPESA Method', retired: false },
@@ -154,46 +111,77 @@ describe('Invoice', () => {
       mutate: jest.fn(),
     });
 
-    // Setup print handler mock
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
+
     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();
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
+  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.getByTestId('error-state')).toBeInTheDocument();
-    expect(screen.getByText(/Test error/i)).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);
+  });
 
-    // Check mock components
-    expect(screen.getByTestId('mock-invoice-table')).toBeInTheDocument();
-    expect(screen.getByTestId('mock-payments')).toBeInTheDocument();
+  it('should render invoice table with line items', () => {
+    render(<Invoice />);
+
+    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',
@@ -209,64 +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 pass mutate function to Payments component', () => {
+    const mockMutate = jest.fn();
+    mockUseBill.mockReturnValue({
+      bill: defaultBillData,
+      isLoading: false,
+      error: null,
+      isValidating: false,
+      mutate: mockMutate,
+    });
+
+    render(<Invoice />);
+
+    // Payments component should be rendered
+    expect(screen.getByText(/payments/i)).toBeInTheDocument();
+  });
+
+  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 show patient information correctly', () => {
+  it('should render ExtensionSlot when patient and patientUuid exist', () => {
     render(<Invoice />);
-    expect(screen.getByTestId('extension-slot')).toBeInTheDocument();
+
+    // 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();
   });
 
-  // Add more test cases as needed for specific features or edge cases
+  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/invoice-breakdown/invoice-breakdown.scss

@@ -5,25 +5,25 @@
 .invoiceBreakdown {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  align-items: flex-end;
-  margin: layout.$spacing-02 0;
+  align-items: center;
+  margin: layout.$spacing-03 0;
 }
 
 .label {
-  @include type.type-style('heading-03');
+  @include type.type-style('body-compact-01');
   color: colors.$gray-100;
-  text-align: end;
+  text-align: left;
 }
 
 .value {
-  @extend .label;
-  font-weight: bold;
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-100;
+  text-align: left;
   margin-left: layout.$spacing-03;
-  text-align: start;
 }
 
 .extendedLabel {
-  @extend .label;
-  font-weight: bold;
+  @include type.type-style('heading-compact-01');
   color: crimson;
+  text-align: left;
 }