@openmrs/esm-billing-app 1.0.2-pre.112 → 1.0.2-pre.1124

package/e2e/pages/billing-form-page.ts

@@ -0,0 +1,114 @@
+import { expect, type Page } from '@playwright/test';
+import { extractNumericValue } from '../commands';
+
+export class BillingFormPage {
+  constructor(readonly page: Page) {}
+
+  readonly billableServicesCombobox = () => this.page.getByRole('combobox', { name: /search items and services/i });
+  readonly quantityInput = (itemUuid: string) => this.page.locator(`#quantity-${itemUuid}`);
+  readonly paymentMethodCombobox = (itemUuid: string) => this.page.locator(`#payment-method-${itemUuid}`);
+  readonly selectedItemCards = () => this.page.locator('[class*="itemCard"]');
+  readonly removeItemButton = () => this.page.getByRole('button', { name: /remove/i });
+  readonly saveButton = () => this.page.getByRole('button', { name: /save and close/i });
+  readonly discardButton = () => this.page.getByRole('button', { name: /discard/i });
+  readonly grandTotalLabel = () => this.page.getByText(/grand total/i);
+
+  async openBillingForm(patientUuid: string) {
+    await this.page.goto(`patient/${patientUuid}/chart`);
+    await this.page.getByRole('button', { name: /add bill/i }).click();
+  }
+
+  async searchAndSelectBillableService(serviceName: string) {
+    await this.billableServicesCombobox().click();
+    await this.billableServicesCombobox().fill(serviceName);
+    await this.page.getByRole('option', { name: new RegExp(serviceName, 'i') }).click();
+  }
+
+  async clearBillableServiceCombobox() {
+    const combobox = this.billableServicesCombobox();
+    // Carbon ComboBox has a clear button (X icon) - try to find it
+    // The button is typically inside the combobox container
+    const comboboxContainer = combobox.locator('..');
+    const clearButton = comboboxContainer
+      .getByRole('button', { name: /clear|close/i })
+      .or(comboboxContainer.locator('button[aria-label*="clear" i]'));
+
+    const isClearButtonVisible = await clearButton.isVisible().catch(() => false);
+
+    if (isClearButtonVisible) {
+      await clearButton.click();
+      await expect
+        .poll(async () => {
+          const value = await combobox.inputValue();
+          return value === '';
+        })
+        .toBe(true);
+    } else {
+      // Fallback: clear the input field directly by selecting all and deleting
+      await combobox.click();
+      await combobox.selectText();
+      await combobox.press('Backspace');
+      await combobox.press('Escape');
+    }
+  }
+
+  async updateQuantity(itemUuid: string, quantity: number) {
+    const input = this.quantityInput(itemUuid);
+    await input.clear();
+    await input.fill(quantity.toString());
+  }
+
+  async selectPaymentMethod(itemUuid: string, paymentMethod: string) {
+    const combobox = this.paymentMethodCombobox(itemUuid);
+    await combobox.click();
+    await this.page.getByRole('option', { name: new RegExp(paymentMethod, 'i') }).click();
+  }
+
+  async removeItem(index = 0) {
+    const removeButtons = await this.removeItemButton().all();
+    if (removeButtons[index]) {
+      await removeButtons[index].click();
+    }
+  }
+
+  async getLineItemsCount() {
+    const items = await this.selectedItemCards().all();
+    return items.length;
+  }
+
+  async getGrandTotal() {
+    const totalText = await this.grandTotalLabel().textContent();
+    return totalText;
+  }
+
+  async saveBill() {
+    await this.saveButton().click();
+  }
+
+  async discardBill() {
+    await this.discardButton().click();
+  }
+
+  async verifyItemAdded(itemName: string) {
+    return this.page.getByText(itemName).isVisible();
+  }
+
+  async selectPaymentMethodIfVisible(paymentMethodName: string = 'Cash') {
+    const dropdown = this.page.getByPlaceholder('Select payment method').first();
+    const isVisible = await dropdown.isVisible().catch(() => false);
+
+    if (isVisible) {
+      await dropdown.click();
+      await this.page
+        .getByRole('option', { name: new RegExp(paymentMethodName, 'i') })
+        .first()
+        .click();
+    }
+  }
+
+  async verifyGrandTotal(expectedTotal: number) {
+    const grandTotal = await this.getGrandTotal();
+    const grandTotalValue = extractNumericValue(grandTotal || '');
+    expect(grandTotalValue).toBeCloseTo(expectedTotal, 2);
+  }
+}

package/e2e/pages/index.ts

@@ -1 +1,4 @@
-export * from './home-page';
+export * from './billing-dashboard-page';
+export * from './billing-form-page';
+export * from './invoice-page';
+export * from './payment-page';

package/e2e/pages/invoice-page.ts

@@ -0,0 +1,113 @@
+import { type Page } from '@playwright/test';
+
+export class InvoicePage {
+  constructor(readonly page: Page) {}
+
+  readonly invoiceNumberLabel = () => this.page.getByRole('heading', { name: /invoice #/i });
+  readonly totalAmountLabel = () => this.page.getByText(/total amount/i).first();
+  readonly amountTenderedLabel = () => this.page.getByText(/amount tendered/i);
+  readonly amountDueLabel = () => this.page.getByText(/amount due/i);
+  readonly invoiceStatusLabel = () => this.page.getByText(/invoice status/i);
+  readonly dateAndTimeLabel = () => this.page.getByText(/date and time/i);
+  readonly printBillButton = () => this.page.getByRole('button', { name: /print bill/i });
+  readonly printReceiptButton = () => this.page.getByRole('button', { name: /print receipt/i });
+  readonly invoiceTable = () => this.page.getByRole('table').first();
+  readonly discardButton = () => this.page.getByRole('button', { name: /discard/i });
+
+  async goto(patientUuid: string, billUuid: string) {
+    await this.page.goto(`home/billing/patient/${patientUuid}/${billUuid}`);
+  }
+
+  async waitForInvoiceToLoad() {
+    await this.invoiceTable().waitFor({ state: 'visible' });
+
+    // Wait for billableServices API to complete before allowing payment processing
+    // This is a workaround for a production race condition where payment processing
+    // requires billableServices data to map service names back to UUIDs
+    try {
+      await this.page.waitForResponse(
+        (response) => response.url().includes('billableService') && response.status() === 200,
+        { timeout: 5000 },
+      );
+    } catch {
+      // If billableServices already loaded or request times out, continue
+      // The data might be cached from a previous page
+    }
+  }
+
+  async getInvoiceNumber() {
+    await this.invoiceNumberLabel().waitFor({ state: 'visible' });
+    const parent = this.invoiceNumberLabel().locator('..');
+    const valueElement = parent.locator('[class*="value"]');
+    await valueElement.waitFor({ state: 'visible' });
+    const value = await valueElement.textContent();
+    return value?.trim();
+  }
+
+  async getTotalAmount() {
+    const parent = this.totalAmountLabel().locator('..');
+    const value = await parent.locator('[class*="value"]').textContent();
+    return value?.trim();
+  }
+
+  async getAmountTendered() {
+    const parent = this.amountTenderedLabel().locator('..');
+    const value = await parent.locator('[class*="value"]').textContent();
+    return value?.trim();
+  }
+
+  async getAmountDue() {
+    const parent = this.amountDueLabel().locator('..');
+    const value = await parent.locator('[class*="value"]').textContent();
+    return value?.trim();
+  }
+
+  async getInvoiceStatus() {
+    const parent = this.invoiceStatusLabel().locator('..');
+    const value = await parent.locator('[class*="value"]').textContent();
+    return value?.trim();
+  }
+
+  async getDateAndTime() {
+    const parent = this.dateAndTimeLabel().locator('..');
+    const value = await parent.locator('[class*="value"]').textContent();
+    return value?.trim();
+  }
+
+  async getLineItems() {
+    const rows = await this.invoiceTable().locator('tbody tr').all();
+    const items = [];
+
+    const headers = await this.invoiceTable().locator('thead th').allTextContents();
+    const itemIndex = headers.findIndex((h) => h.includes('Bill item'));
+    const quantityIndex = headers.findIndex((h) => h.includes('Quantity'));
+    const priceIndex = headers.findIndex((h) => h.includes('Price'));
+    const totalIndex = headers.findIndex((h) => h.includes('Total'));
+    // Look for "Status" column (case-insensitive, handles "Status" or "Service status")
+    const statusIndex = headers.findIndex((h) => h.toLowerCase().includes('status'));
+
+    for (const row of rows) {
+      const cells = await row.locator('td').allTextContents();
+      items.push({
+        item: cells[itemIndex],
+        quantity: cells[quantityIndex],
+        price: cells[priceIndex],
+        total: cells[totalIndex],
+        status: statusIndex >= 0 && cells[statusIndex] ? cells[statusIndex].trim() : undefined,
+      });
+    }
+    return items;
+  }
+
+  async clickPrintBill() {
+    await this.printBillButton().click();
+  }
+
+  async clickPrintReceipt() {
+    await this.printReceiptButton().click();
+  }
+
+  async navigateToBillingDashboard() {
+    await this.discardButton().click();
+  }
+}

package/e2e/pages/payment-page.ts

@@ -0,0 +1,104 @@
+import { expect, type Page } from '@playwright/test';
+
+export class PaymentPage {
+  constructor(readonly page: Page) {}
+
+  readonly addPaymentButton = () => this.page.getByRole('button', { name: /add payment/i });
+  readonly paymentMethodCombobox = () => this.page.getByRole('combobox', { name: /payment method/i }).first();
+  readonly amountInput = () => this.page.getByLabel(/amount/i).first();
+  readonly referenceCodeInput = () => this.page.getByLabel(/reference number/i).first();
+  readonly processPaymentButton = () => this.page.getByRole('button', { name: /process payment/i });
+  readonly paymentHistorySection = () =>
+    this.page.getByRole('table').filter({ has: this.page.getByText('Date of payment') });
+  readonly addPaymentMethodButton = () => this.page.getByRole('button', { name: /add payment method/i });
+  readonly removePaymentButton = () => this.page.getByRole('button', { name: /remove/i });
+
+  async waitForPaymentForm() {
+    // For single line item bills, wait for the auto-created payment row to be interactive
+    // The payment method combobox only appears after payment modes have loaded
+    // (while loading, the form shows a skeleton instead)
+    await this.paymentMethodCombobox().waitFor({ state: 'visible', timeout: 30000 });
+  }
+
+  async addPayment(paymentMethod: string, amount: number, referenceCode?: string) {
+    await this.paymentMethodCombobox().click();
+    await this.page.getByRole('option', { name: new RegExp(paymentMethod, 'i') }).click();
+
+    await this.amountInput().fill(amount.toString());
+
+    if (referenceCode) {
+      await this.referenceCodeInput().fill(referenceCode);
+    }
+  }
+
+  async addMultiplePayments(payments: Array<{ method: string; amount: number; referenceCode?: string }>) {
+    const addButton = this.addPaymentMethodButton();
+    const isAddButtonVisible = await addButton.isVisible().catch(() => false);
+    const existingRows = await this.page.locator('[class*="paymentMethodContainer"]').count();
+
+    if (isAddButtonVisible && payments.length > existingRows) {
+      const rowsToAdd = payments.length - existingRows;
+      for (let i = 0; i < rowsToAdd; i++) {
+        await addButton.click();
+        const expectedRowCount = existingRows + i + 1;
+        await expect(this.page.locator('[class*="paymentMethodContainer"]')).toHaveCount(expectedRowCount);
+      }
+    }
+
+    const paymentRows = await this.page.locator('[class*="paymentMethodContainer"]').all();
+
+    for (let i = 0; i < payments.length && i < paymentRows.length; i++) {
+      const row = paymentRows[i];
+
+      const methodDropdown = row.getByRole('combobox', { name: /payment method/i });
+      await methodDropdown.click();
+      await this.page.getByRole('option', { name: new RegExp(payments[i].method, 'i') }).click();
+
+      const amountInput = row.getByLabel(/amount/i);
+      await amountInput.fill(payments[i].amount.toString());
+
+      if (payments[i].referenceCode) {
+        const refInput = row.getByLabel(/reference number/i);
+        await refInput.fill(payments[i].referenceCode);
+      }
+    }
+  }
+
+  async processPayment() {
+    await this.processPaymentButton().click();
+  }
+
+  async isProcessPaymentButtonEnabled() {
+    return await this.processPaymentButton().isEnabled();
+  }
+
+  async removePayment(index = 0) {
+    const removeButtons = await this.removePaymentButton().all();
+    await removeButtons[index].click();
+  }
+
+  async getPaymentHistory() {
+    const rows = await this.paymentHistorySection().locator('tbody tr').all();
+    const payments = [];
+    for (const row of rows) {
+      const cells = await row.locator('td').allTextContents();
+      payments.push({
+        date: cells[0],
+        billAmount: cells[1],
+        amountTendered: cells[2],
+        method: cells[3],
+      });
+    }
+    return payments;
+  }
+
+  async verifyPaymentProcessed(amount: string) {
+    const history = await this.getPaymentHistory();
+    return history.some((payment) => payment.amountTendered.includes(amount));
+  }
+
+  async getAmountDue() {
+    const amountDueText = await this.page.getByText(/amount due/i).textContent();
+    return amountDueText;
+  }
+}

package/e2e/specs/billing-dashboard.spec.ts

@@ -0,0 +1,203 @@
+import { expect } from '@playwright/test';
+import { test } from '../core/test';
+import { deleteBill, extractNumericValue, ensureServiceHasPrices, waitForSuccessNotification } from '../commands';
+import { BillingDashboardPage, BillingFormPage, InvoicePage, PaymentPage } from '../pages';
+
+test.describe('Billing Dashboard workflow', () => {
+  // Run tests serially to avoid race conditions when setting up service prices
+  test.describe.configure({ mode: 'serial' });
+
+  let testServiceName: string;
+  let expectedServicePrice: number;
+  const billsToCleanup = new Set<string>();
+
+  test.beforeAll(async ({ api }) => {
+    const serviceUuid = process.env.E2E_TEST_SERVICE_UUID;
+    if (!serviceUuid) {
+      throw new Error('E2E_TEST_SERVICE_UUID must be configured in .env file');
+    }
+
+    // Ensure the test service has prices configured (required for billing tests)
+    // If prices already exist, this will skip; otherwise it adds a default Cash price of 30.00
+    const service = await ensureServiceHasPrices(api, serviceUuid, 30.0);
+
+    testServiceName = service.name;
+
+    const cashPrice = service.servicePrices.find((sp) => sp.name === 'Cash');
+    if (!cashPrice) {
+      throw new Error('Cash price not found for test service');
+    }
+    expectedServicePrice = parseFloat(cashPrice.price);
+  });
+
+  test.afterEach(async ({ api }) => {
+    // Cleanup: delete all bills created during tests
+    for (const billUuid of billsToCleanup) {
+      try {
+        await deleteBill(api, billUuid);
+      } catch (error) {
+        // Log but don't fail test if cleanup fails
+        console.error(`Failed to delete bill ${billUuid}:`, error);
+      }
+    }
+    billsToCleanup.clear();
+  });
+
+  test('Process payment from dashboard and verify bill moves from pending to paid bills', async ({
+    page,
+    api,
+    patient,
+  }) => {
+    const billingDashboardPage = new BillingDashboardPage(page);
+    const billingFormPage = new BillingFormPage(page);
+    const invoicePage = new InvoicePage(page);
+    const paymentPage = new PaymentPage(page);
+    const patientUuid = patient.uuid;
+    const patientName = patient.person.display;
+    let billUuid: string;
+
+    await test.step('Given I have created and saved a bill', async () => {
+      await page.goto(`patient/${patientUuid}/chart/Billing history`);
+
+      const createBillButton = page.getByRole('button', { name: /launch bill form|add bill/i });
+      await createBillButton.click();
+
+      await billingFormPage.searchAndSelectBillableService(testServiceName);
+      await billingFormPage.selectPaymentMethodIfVisible();
+      await billingFormPage.saveBill();
+      await waitForSuccessNotification(page, 'Bill processed successfully');
+
+      const billsResponse = await api.get(`billing/bill?patient=${patientUuid}&v=full`);
+      const billsData = await billsResponse.json();
+      billUuid = billsData.results[0].uuid;
+      billsToCleanup.add(billUuid);
+    });
+
+    await test.step('When I navigate to the Billing dashboard', async () => {
+      await billingDashboardPage.goto();
+      await billingDashboardPage.waitForBillsTableToLoad();
+    });
+
+    await test.step('Then the Bill List should display pending bills', async () => {
+      await expect(billingDashboardPage.filterDropdown()).toBeVisible();
+
+      await billingDashboardPage.verifyBillInTable(patientName, true);
+    });
+
+    await test.step('When I click on a patient name in the Bill List', async () => {
+      await billingDashboardPage.clickPatientNameLink(patientName);
+      await invoicePage.waitForInvoiceToLoad();
+    });
+
+    await test.step("Then the patient's bill details page should open", async () => {
+      const totalAmount = await invoicePage.getTotalAmount();
+      expect(totalAmount).toBeTruthy();
+      const totalValue = extractNumericValue(totalAmount);
+      expect(totalValue).toBeCloseTo(expectedServicePrice, 2);
+
+      const amountTendered = await invoicePage.getAmountTendered();
+      expect(amountTendered).toBeTruthy();
+      const tenderedValue = extractNumericValue(amountTendered);
+      expect(tenderedValue).toBe(0);
+
+      const receiptNumber = await invoicePage.getInvoiceNumber();
+      expect(receiptNumber).toBeTruthy();
+      await expect(invoicePage.invoiceNumberLabel()).toBeVisible();
+
+      const dateAndTime = await invoicePage.getDateAndTime();
+      expect(dateAndTime).toBeTruthy();
+
+      const invoiceStatus = await invoicePage.getInvoiceStatus();
+      expect(invoiceStatus).toBe('PENDING');
+    });
+
+    await test.step('And the Payments section should be displayed', async () => {
+      await paymentPage.waitForPaymentForm();
+
+      await expect(paymentPage.paymentMethodCombobox()).toBeVisible();
+      await expect(paymentPage.amountInput()).toBeVisible();
+      await expect(paymentPage.referenceCodeInput()).toBeVisible();
+    });
+
+    await test.step('When I select a payment method and enter an amount matching the bill total', async () => {
+      const amountDue = await invoicePage.getAmountDue();
+      const amountDueValue = extractNumericValue(amountDue);
+
+      await paymentPage.addPayment('Cash', amountDueValue);
+      await expect(paymentPage.amountInput()).toHaveValue(amountDueValue.toString());
+
+      const isEnabled = await paymentPage.isProcessPaymentButtonEnabled();
+      expect(isEnabled).toBe(true);
+    });
+
+    await test.step('When I click "Process Payment"', async () => {
+      await paymentPage.processPayment();
+      await waitForSuccessNotification(page, 'Payment processed successfully');
+    });
+
+    await test.step('Then the invoice status should update to PAID', async () => {
+      await page.reload();
+      await invoicePage.waitForInvoiceToLoad();
+
+      const updatedStatus = await invoicePage.getInvoiceStatus();
+      expect(updatedStatus).toBe('PAID');
+
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      expect(billData.status).toBe('PAID');
+    });
+
+    await test.step('And the Amount Tendered should update to reflect the payment', async () => {
+      const totalAmount = await invoicePage.getTotalAmount();
+      const updatedAmountTendered = await invoicePage.getAmountTendered();
+      expect(updatedAmountTendered).toEqual(totalAmount);
+
+      const updatedAmountDue = await invoicePage.getAmountDue();
+      expect(extractNumericValue(updatedAmountDue)).toBe(0);
+    });
+
+    await test.step('And the Service status in the Line items table should change to PAID', async () => {
+      const lineItems = await invoicePage.getLineItems();
+      expect(lineItems.length).toBeGreaterThan(0);
+      lineItems.forEach((lineItem) => {
+        expect(lineItem.status).toBe('PAID');
+      });
+
+      // Also verify backend line items have paymentStatus set to PAID
+      const billResponse = await api.get(`billing/bill/${billUuid}`);
+      const billData = await billResponse.json();
+      billData.lineItems.forEach((lineItem: { paymentStatus: string }) => {
+        expect(lineItem.paymentStatus).toBe('PAID');
+      });
+    });
+
+    await test.step('And the Payments section should display a payment record', async () => {
+      const paymentHistory = await paymentPage.getPaymentHistory();
+      expect(paymentHistory.length).toBeGreaterThan(0);
+
+      const payment = paymentHistory[0];
+      expect(payment.date).toBeTruthy();
+      expect(payment.billAmount).toBeTruthy();
+      expect(payment.amountTendered).toBeTruthy();
+      expect(payment.method).toContain('Cash');
+    });
+
+    await test.step('When I navigate back to the Billing dashboard landing page', async () => {
+      await billingDashboardPage.goto();
+      await billingDashboardPage.waitForBillsTableToLoad();
+    });
+
+    await test.step('Then the processed bill should no longer appear in the pending bills list', async () => {
+      await expect(billingDashboardPage.filterDropdown()).toBeVisible();
+
+      await billingDashboardPage.verifyBillInTable(patientName, false);
+    });
+
+    await test.step('And the bill should appear under Paid bills', async () => {
+      await billingDashboardPage.selectFilter('Paid bills');
+      await billingDashboardPage.waitForBillsTableToLoad();
+
+      await billingDashboardPage.verifyBillInTable(patientName, true);
+    });
+  });
+});