@openmrs/esm-billing-app 1.0.2-pre.613 → 1.0.2-pre.619

package/src/invoice/invoice-table.component.tsx

@@ -65,13 +65,13 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
   }, [debouncedSearchTerm, lineItems]);
 
   const tableHeaders = [
-    { header: 'No', key: 'no', width: 7 }, // Width as a percentage
-    { header: 'Bill item', key: 'billItem', width: 25 },
-    { header: 'Bill code', key: 'billCode', width: 20 },
-    { header: 'Status', key: 'status', width: 25 },
-    { header: 'Quantity', key: 'quantity', width: 15 },
-    { header: 'Price', key: 'price', width: 24 },
-    { header: 'Total', key: 'total', width: 15 },
+    { header: t('number', 'No'), key: 'no', width: 7 }, // Width as a percentage
+    { header: t('billItem', 'Bill item'), key: 'billItem', width: 25 },
+    { header: t('billCode', 'Bill code'), key: 'billCode', width: 20 },
+    { header: t('status', 'Status'), key: 'status', width: 25 },
+    { header: t('quantity', 'Quantity'), key: 'quantity', width: 15 },
+    { header: t('price', 'Price'), key: 'price', width: 24 },
+    { header: t('total', 'Total'), key: 'total', width: 15 },
     { header: t('actions', 'Actions'), key: 'actionButton' },
   ];
 
@@ -149,7 +149,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
   };
 
   return (
-    <div className={styles.invoiceContainer}>
+    <>
       <DataTable headers={tableHeaders} isSortable rows={tableRows} size={responsiveSize} useZebraStyles>
         {({ rows, headers, getRowProps, getSelectionProps, getTableProps, getToolbarProps }) => (
           <TableContainer
@@ -221,7 +221,7 @@ const InvoiceTable: React.FC<InvoiceTableProps> = ({ bill, isSelectable = true,
           </Layer>
         </div>
       )}
-    </div>
+    </>
   );
 };
 

package/src/invoice/invoice-table.scss

@@ -29,11 +29,7 @@
 
 .headerContainer {
   background-color: colors.$gray-10;
-}
-
-.invoiceContainer {
-  border: 1px solid $ui-03;
-}
+}c
 
 .searchbox {
   input:focus {

package/src/invoice/invoice-table.test.tsx

@@ -1,43 +1,24 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import { showModal } from '@openmrs/esm-framework';
-import InvoiceTable from './invoice-table.component';
+import userEvent from '@testing-library/user-event';
+import { render, screen, act } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, showModal, useConfig } from '@openmrs/esm-framework';
 import { type MappedBill } from '../types';
+import { configSchema, type BillingConfig } from '../config-schema';
+import InvoiceTable from './invoice-table.component';
 
-// Mocking dependencies
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn(() => ({
-    t: jest.fn((key, fallback) => fallback || key),
-    i18n: { language: 'en' },
-  })),
-}));
-
-jest.mock('@openmrs/esm-framework', () => ({
-  showModal: jest.fn(),
-  useConfig: jest.fn(() => ({
-    defaultCurrency: 'USD',
-    showEditBillButton: true,
-  })),
-  useDebounce: jest.fn((value) => value),
-  useLayoutType: jest.fn(() => 'desktop'),
-  isDesktop: jest.fn(() => true),
-}));
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
 
 jest.mock('../helpers', () => ({
   convertToCurrency: jest.fn((price) => `USD ${price}`),
 }));
 
 describe('InvoiceTable', () => {
-  const mockT = jest.fn((key) => key);
-
   beforeEach(() => {
-    (useTranslation as jest.Mock).mockReturnValue({ t: mockT, i18n: { language: 'en' } });
-    jest.useFakeTimers();
-  });
-
-  afterEach(() => {
-    jest.useRealTimers();
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      defaultCurrency: 'USD',
+      showEditBillButton: true,
+    });
   });
 
   const bill: MappedBill = {
@@ -103,11 +84,12 @@ describe('InvoiceTable', () => {
     expect(screen.getByTestId('receipt-number-0')).toHaveTextContent('12345');
   });
 
-  it('renders the edit button and calls showModal when clicked', () => {
+  it('renders the edit button and calls showModal when clicked', async () => {
+    const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);
 
     const editButton = screen.getByTestId('edit-button-1');
-    fireEvent.click(editButton);
+    await user.click(editButton);
     expect(showModal).toHaveBeenCalledWith('edit-bill-line-item-dialog', expect.anything());
   });
 
@@ -117,31 +99,34 @@ describe('InvoiceTable', () => {
     expect(screen.getByTestId('loader')).toBeInTheDocument();
   });
 
-  it('filters line items based on the search term', () => {
+  it('filters line items based on the search term', async () => {
+    const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);
-    const searchInput = screen.getByPlaceholderText('searchThisTable'); //
+    const searchInput = screen.getByPlaceholderText(/search this table/i);
 
-    fireEvent.change(searchInput, { target: { value: 'Item 2' } });
+    await user.type(searchInput, 'Item 2');
 
     expect(screen.queryByText('Item 1')).not.toBeInTheDocument();
     expect(screen.getByText('Item 2')).toBeInTheDocument();
   });
 
-  it('correctly handles row selection', () => {
+  it('correctly handles row selection', async () => {
+    const user = userEvent.setup();
     const onSelectItem = jest.fn();
     render(<InvoiceTable bill={bill} onSelectItem={onSelectItem} />);
 
     const checkboxes = screen.getAllByLabelText('Select row');
-    fireEvent.click(checkboxes[0]);
+    await user.click(checkboxes[0]);
 
     expect(onSelectItem).toHaveBeenCalledWith([bill.lineItems[0]]);
   });
 
-  it('resets isRedirecting to false after timeout', () => {
+  it('resets isRedirecting to false after timeout', async () => {
+    const user = userEvent.setup();
     render(<InvoiceTable bill={bill} />);
 
     const button = screen.getByTestId('edit-button-1');
-    fireEvent.click(button);
+    await user.click(button);
     act(() => {
       jest.advanceTimersByTime(1000);
     });

package/src/invoice/invoice.component.tsx

@@ -4,7 +4,7 @@ import { Printer } from '@carbon/react/icons';
 import { useParams } from 'react-router-dom';
 import { useReactToPrint } from 'react-to-print';
 import { useTranslation } from 'react-i18next';
-import { ExtensionSlot, useConfig, usePatient } from '@openmrs/esm-framework';
+import { ExtensionSlot, showSnackbar, useConfig, usePatient } from '@openmrs/esm-framework';
 import { ErrorState } from '@openmrs/esm-patient-common-lib';
 import { convertToCurrency } from '../helpers';
 import { type LineItem } from '../types';
@@ -13,6 +13,7 @@ import InvoiceTable from './invoice-table.component';
 import Payments from './payments/payments.component';
 import PrintReceipt from './printable-invoice/print-receipt.component';
 import PrintableInvoice from './printable-invoice/printable-invoice.component';
+import type { BillingConfig } from '../config-schema';
 import styles from './invoice.scss';
 
 interface InvoiceDetailsProps {
@@ -29,7 +30,7 @@ const Invoice: React.FC = () => {
   const [selectedLineItems, setSelectedLineItems] = useState<LineItem[]>([]);
   const componentRef = useRef<HTMLDivElement>(null);
   const onBeforeGetContentResolve = useRef<(() => void) | null>(null);
-  const { defaultCurrency } = useConfig();
+  const { defaultCurrency } = useConfig<BillingConfig>();
   const handleSelectItem = (lineItems: LineItem[]) => {
     setSelectedLineItems(lineItems);
   };
@@ -51,11 +52,12 @@ const Invoice: React.FC = () => {
   }, [bill, patient]);
 
   const handlePrint = useReactToPrint({
-    content: reactToPrintContent,
     documentTitle: `Invoice ${bill?.receiptNumber} - ${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`,
-    onBeforeGetContent: handleOnBeforeGetContent,
+    onBeforePrint: handleOnBeforeGetContent,
     onAfterPrint: handleAfterPrint,
-    removeAfterPrint: true,
+    preserveAfterPrint: false,
+    onPrintError: (_, error) =>
+      showSnackbar({ title: t('printError', 'Error printing invoice'), kind: 'error', subtitle: error.message }),
   });
 
   useEffect(() => {
@@ -110,7 +112,7 @@ const Invoice: React.FC = () => {
         <div>
           <Button
             disabled={isPrinting}
-            onClick={handlePrint}
+            onClick={() => handlePrint(reactToPrintContent)}
             renderIcon={(props) => <Printer size={24} {...props} />}
             iconDescription="Print bill"
             size="md">

package/src/invoice/invoice.scss

@@ -78,16 +78,19 @@
   color: colors.$cool-gray-90;
 }
 
-@media screen {
-  .printContainer {
-    background-color: colors.$white;
-    display: none;
+.printContainer {
+  background-color: colors.$white;
+  display: none;
+
+  @media print {
+    display: block !important;
   }
 }
 
 @media print {
   html,
   body {
+    display: block !important;
     background-color: colors.$white !important;
   }
 }

package/src/invoice/invoice.test.tsx

@@ -1,24 +1,21 @@
 import React from 'react';
-import { screen, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { screen, render } from '@testing-library/react';
 import { useReactToPrint } from 'react-to-print';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { mockBill } from '../../__mocks__/bills.mock';
 import { useBill, processBillPayment } from '../billing.resource';
 import { usePaymentModes } from './payments/payment.resource';
 import Invoice from './invoice.component';
 
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+
 // Mock convertToCurrency
 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',
@@ -78,38 +75,6 @@ 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;
@@ -154,15 +119,13 @@ describe('Invoice', () => {
       mutate: jest.fn(),
     });
 
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
+
     // Setup print handler mock
     const printHandler = jest.fn();
     mockedUseReactToPrint.mockReturnValue(printHandler);
   });
 
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
   it('should render error state correctly', () => {
     mockedBill.mockReturnValue({
       bill: null,
@@ -173,8 +136,8 @@ describe('Invoice', () => {
     });
 
     render(<Invoice />);
-    expect(screen.getByTestId('error-state')).toBeInTheDocument();
-    expect(screen.getByText(/Test error/i)).toBeInTheDocument();
+    expect(screen.getByText(/Invoice error/i)).toBeInTheDocument();
+    expect(screen.getByText(/Error/)).toBeInTheDocument();
   });
 
   it('should render invoice details correctly', () => {
@@ -265,7 +228,9 @@ describe('Invoice', () => {
 
   it('should show patient information correctly', () => {
     render(<Invoice />);
-    expect(screen.getByTestId('extension-slot')).toBeInTheDocument();
+    // Check that the invoice details are rendered
+    expect(screen.getByText('Invoice Number')).toBeInTheDocument();
+    expect(screen.getByText('RCPT-001')).toBeInTheDocument();
   });
 
   // Add more test cases as needed for specific features or edge cases

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

@@ -1,10 +1,10 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
 import { FormProvider, useForm } from 'react-hook-form';
 import type { PaymentFormValue } from '../payments.component';
 import PaymentForm from './payment-form.component';
 
-// Mock the payment resource
 jest.mock('../payment.resource', () => ({
   usePaymentModes: jest.fn(),
 }));
@@ -21,10 +21,6 @@ const Wrapper: React.FC<WrapperProps> = ({ children }) => {
 };
 
 describe('PaymentForm Component', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
   test('should render skeleton while loading payment modes', () => {
     usePaymentModes.mockReturnValue({
       paymentModes: [],
@@ -96,7 +92,8 @@ describe('PaymentForm Component', () => {
     expect(screen.getByPlaceholderText(/enter amount/i)).toBeInTheDocument();
   });
 
-  test('should append a payment field when add payment option button is clicked', () => {
+  test('should append a payment field when add payment option button is clicked', async () => {
+    const user = userEvent.setup();
     usePaymentModes.mockReturnValue({
       paymentModes: [{ uuid: '1', name: 'Credit Card' }],
       isLoading: false,
@@ -116,7 +113,7 @@ describe('PaymentForm Component', () => {
     );
 
     const addButton = screen.getByText(/add payment option/i);
-    fireEvent.click(addButton);
+    await user.click(addButton);
     const paymentMethodElements = screen.getAllByLabelText(/payment method/i);
     expect(paymentMethodElements).toHaveLength(2);
   });
@@ -144,6 +141,7 @@ describe('PaymentForm Component', () => {
   });
 
   test('should remove payment field when trash can icon is clicked', async () => {
+    const user = userEvent.setup();
     usePaymentModes.mockReturnValue({
       paymentModes: [{ uuid: '1', name: 'Credit Card' }],
       isLoading: false,
@@ -162,10 +160,10 @@ describe('PaymentForm Component', () => {
       </Wrapper>,
     );
 
-    fireEvent.click(screen.getByText(/add payment option/i));
+    await user.click(screen.getByText(/add payment option/i));
 
     const trashCanIcon = screen.getByTestId('trash-can-icon');
-    fireEvent.click(trashCanIcon);
+    await user.click(trashCanIcon);
 
     await waitFor(() => {
       expect(screen.queryByPlaceholderText(/enter amount/i)).not.toBeInTheDocument();

package/src/invoice/payments/payment-history/payment-history.component.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { DataTable, Table, TableHead, TableRow, TableHeader, TableBody, TableCell } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { type MappedBill } from '../../../types';
 import { formatDate, useConfig } from '@openmrs/esm-framework';
 import { convertToCurrency } from '../../../helpers';
@@ -9,23 +10,24 @@ type PaymentHistoryProps = {
 };
 
 const PaymentHistory: React.FC<PaymentHistoryProps> = ({ bill }) => {
+  const { t } = useTranslation();
   const { defaultCurrency } = useConfig();
   const headers = [
     {
       key: 'dateCreated',
-      header: 'Date of payment',
+      header: t('dateOfPayment', 'Date of payment'),
     },
     {
       key: 'amount',
-      header: 'Bill amount',
+      header: t('billAmount', 'Bill amount'),
     },
     {
       key: 'amountTendered',
-      header: 'Amount tendered',
+      header: t('amountTendered', 'Amount tendered'),
     },
     {
       key: 'paymentMethod',
-      header: 'Payment method',
+      header: t('paymentMethod', 'Payment method'),
     },
   ];
   const rows = bill?.payments?.map((payment, index) => {

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

@@ -1,24 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useConfig } from '@openmrs/esm-framework';
-import PaymentHistory from './payment-history.component';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { type BillingConfig, configSchema } from '../../../config-schema';
 import { type MappedBill } from '../../../types';
-
-// Mocking useConfig to return a default currency
-jest.mock('@openmrs/esm-framework', () => ({
-  useConfig: jest.fn(),
-  formatDate: jest.fn((date) => date.toISOString().split('T')[0]),
-}));
+import PaymentHistory from './payment-history.component';
 
 jest.mock('../../../helpers', () => ({
   convertToCurrency: jest.fn((amount, currency) => `${currency} ${amount.toFixed(2)}`),
 }));
 
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+
 describe('PaymentHistory Component', () => {
   beforeEach(() => {
-    (useConfig as jest.Mock).mockReturnValue({
-      defaultCurrency: 'USD',
-    });
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
   const mockBill: MappedBill = {
@@ -129,12 +124,12 @@ describe('PaymentHistory Component', () => {
   test('renders correct data in the rows', () => {
     render(<PaymentHistory bill={mockBill} />);
 
-    expect(screen.getByText('2023-09-01')).toBeInTheDocument();
+    expect(screen.getByText('01-Sept-2023')).toBeInTheDocument();
     expect(screen.getByText('USD 80.00')).toBeInTheDocument();
     expect(screen.getByText('USD 100.00')).toBeInTheDocument();
     expect(screen.getByText('Credit Card')).toBeInTheDocument();
 
-    expect(screen.getByText('2023-09-05')).toBeInTheDocument();
+    expect(screen.getByText('05-Sept-2023')).toBeInTheDocument();
     expect(screen.getByText('USD 180.00')).toBeInTheDocument();
     expect(screen.getByText('USD 200.00')).toBeInTheDocument();
     expect(screen.getByText('Cash')).toBeInTheDocument();
@@ -153,7 +148,7 @@ describe('PaymentHistory Component', () => {
   test('formats dates and converts amounts correctly', () => {
     render(<PaymentHistory bill={mockBill} />);
 
-    expect(screen.getByText('2023-09-01')).toBeInTheDocument();
+    expect(screen.getByText('01-Sept-2023')).toBeInTheDocument();
     expect(screen.getByText('USD 80.00')).toBeInTheDocument();
     expect(screen.getByText('USD 100.00')).toBeInTheDocument();
   });

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

@@ -1,12 +1,21 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { useVisit, useConfig, navigate } from '@openmrs/esm-framework';
+import {
+  useVisit,
+  useConfig,
+  navigate,
+  getDefaultsFromConfigSchema,
+  type VisitReturnType,
+} from '@openmrs/esm-framework';
 import { useBillableServices } from '../../billable-services/billable-service.resource';
 import { type MappedBill, type LineItem } from '../../types';
+import { configSchema, type BillingConfig } from '../../config-schema';
 import Payments from './payments.component';
 
-// Add this mock for currency formatting
+const mockUseVisit = jest.mocked(useVisit);
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBillableServices = jest.mocked(useBillableServices);
 const mockFormatToParts = jest.fn().mockReturnValue([{ type: 'integer', value: '1000' }]);
 const mockFormat = jest.fn().mockReturnValue('$1000.00');
 global.Intl.NumberFormat = jest.fn().mockImplementation(() => ({
@@ -87,10 +96,15 @@ describe('Payments', () => {
   const mockSelectedLineItems: LineItem[] = [];
 
   beforeEach(() => {
-    jest.clearAllMocks();
-    (useVisit as jest.Mock).mockReturnValue({ currentVisit: null });
-    (useConfig as jest.Mock).mockReturnValue({ defaultCurrency: 'USD' });
-    (useBillableServices as jest.Mock).mockReturnValue({ billableServices: [], isLoading: false });
+    mockUseVisit.mockReturnValue({ currentVisit: null } as unknown as VisitReturnType);
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
+    mockUseBillableServices.mockReturnValue({
+      billableServices: [],
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      mutate: jest.fn(),
+    });
   });
 
   it('renders payment form and history', () => {

package/src/invoice/printable-invoice/print-receipt.component.tsx

@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { Button } from '@carbon/react';
 import { Printer } from '@carbon/react/icons';
 import { useTranslation } from 'react-i18next';
-import styles from './print-receipt.scss';
 import { apiBasePath } from '../../constants';
+import styles from './print-receipt.scss';
 
 interface PrintReceiptProps {
   billId: number;

package/src/invoice/printable-invoice/print-receipt.test.tsx

@@ -1,50 +1,39 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { useTranslation } from 'react-i18next';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import PrintReceipt from './print-receipt.component';
 
-jest.mock('react-i18next', () => ({
-  useTranslation: jest.fn(),
-}));
-
-jest.mock('@carbon/react/icons', () => ({
-  Printer: jest.fn(() => <div data-testid="printer-icon" />),
-}));
-
 describe('PrintReceipt', () => {
-  const mockT = jest.fn((key) => key);
-
   beforeEach(() => {
-    (useTranslation as jest.Mock).mockReturnValue({ t: mockT });
-    jest.useFakeTimers();
     window.URL.createObjectURL = jest.fn();
   });
 
-  afterEach(() => {
-    jest.useRealTimers();
-  });
-
   it('renders button with correct text and icon', () => {
     render(<PrintReceipt billId={123} />);
-    expect(screen.getByText('printReceipt')).toBeInTheDocument();
-    expect(screen.getByTestId('printer-icon')).toBeInTheDocument();
+    expect(screen.getByText('Print receipt')).toBeInTheDocument();
   });
 
-  it('displays "Loading" and disables button when isRedirecting is true', () => {
+  it('displays "Loading" and disables button when isRedirecting is true', async () => {
+    const user = userEvent.setup();
+
     render(<PrintReceipt billId={123} />);
+
     const button = screen.getByRole('button');
-    fireEvent.click(button);
-    expect(screen.getByText('loading')).toBeInTheDocument();
+
+    await user.click(button);
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
     expect(button).toBeDisabled();
   });
 
-  it('applies correct CSS class to button', () => {
+  it('applies correct CSS class to button', async () => {
+    const user = userEvent.setup();
+
     render(<PrintReceipt billId={123} />);
     expect(screen.getByRole('button')).toHaveClass('button');
   });
 
   it('translates button text correctly', () => {
     render(<PrintReceipt billId={123} />);
-    expect(mockT).toHaveBeenCalledWith('printReceipt', 'Print receipt');
+    expect(screen.getByText('Print receipt')).toBeInTheDocument();
   });
 });

package/src/invoice/printable-invoice/printable-footer.component.tsx

@@ -3,9 +3,9 @@ import { useDefaultFacility } from '../../billing.resource';
 import styles from './printable-footer.scss';
 
 const PrintableFooter = () => {
-  const { data, isLoading } = useDefaultFacility();
+  const { data } = useDefaultFacility();
 
-  if (isLoading) {
+  if (!data) {
     return <div>--</div>;
   }