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

package/e2e/support/github/Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1.3
-FROM --platform=$BUILDPLATFORM node:18-alpine as dev
+FROM --platform=$BUILDPLATFORM node:22-alpine as dev
 
 ARG APP_SHELL_VERSION=next
 

package/e2e/support/github/run-e2e-docker-env.sh

@@ -4,46 +4,43 @@
 script_dir=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 # create a temporary working directory
 working_dir=$(mktemp -d "${TMPDIR:-/tmp/}openmrs-e2e-frontends.XXXXXXXXXX")
-# get a list of all the apps in this workspace
-apps=$(yarn workspaces list --json | jq -r 'if ((.location == ".") or (.location | test("form-engine-app")) or (.location | test("-app") | not)) then halt else .name end')
-# this array will hold all of the packed app names
-app_names=()
+# cleanup temp directory on exit
+trap 'rm -rf "$working_dir"' EXIT
+# get the app name
+app_name=$(jq -r '.name' "$script_dir/../../../package.json")
 
-echo "Creating packed archives of apps..."
-# for each app
-for app in $apps
-do
-  # @openmrs/esm-whatever -> _openmrs_esm_whatever
-  app_name=$(echo "$app" | tr '[:punct:]' '_');
-  # add to our array
-  app_names+=("$app_name.tgz");
-  # run yarn pack for our app and add it to the working directory
-  yarn workspace "$app" pack -o "$working_dir/$app_name.tgz" >/dev/null;
-done;
-echo "Created packed app archives"
+echo "Creating packed archive of the app for Docker build..."
+# @openmrs/esm-whatever -> _openmrs_esm_whatever
+packed_app_name=$(echo "$app_name" | tr '[:punct:]' '_');
+# run yarn pack for our app and add it to the working directory
+yarn pack -o "$working_dir/$packed_app_name.tgz" >/dev/null;
+echo "Successfully created packed app archive: $packed_app_name.tgz"
 
-echo "Creating dynamic spa-assemble-config.json..."
-# dynamically assemble our list of frontend modules, prepending the login app and
-# primary navigation apps; apps will all be in the /app directory of the Docker
+echo "Creating dynamic spa-assemble-config.json with frontend modules..."
+# dynamically assemble our list of frontend modules, prepending the primary navigation
+# and patient banner apps; apps will all be in the /app directory of the Docker
 # container
 jq -n \
-  --arg apps "$apps" \
-  --arg app_names "$(echo ${app_names[@]})" \
-  '{"@openmrs/esm-primary-navigation-app": "next", "@openmrs/esm-home-app": "next"} + (
-    ($apps | split("\n")) as $apps | ($app_names | split(" ") | map("/app/" + .)) as $app_files
-    | [$apps, $app_files]
-    | transpose
-    | map({"key": .[0], "value": .[1]})
-    | from_entries
-  )' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
-echo "Created dynamic spa-assemble-config.json"
+  --arg app_name "$app_name" \
+  --arg app_file "/app/$packed_app_name.tgz" \
+  '{
+    "@openmrs/esm-home-app": "next",
+    "@openmrs/esm-patient-banner-app": "next",
+    "@openmrs/esm-patient-chart-app": "next",
+    "@openmrs/esm-patient-forms-app": "next",
+    "@openmrs/esm-primary-navigation-app": "next",
+    "@openmrs/esm-system-admin-app": "next",
+  } + {
+    ($app_name): $app_file
+  }' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
+echo "Successfully created spa-assemble-config.json with frontend modules"
 
-echo "Copying Docker configuration..."
+echo "Copying Docker configuration files to working directory..."
 cp "$script_dir/Dockerfile" "$working_dir/Dockerfile"
 cp "$script_dir/docker-compose.yml" "$working_dir/docker-compose.yml"
 
-cd $working_dir
-echo "Starting Docker containers..."
+cd "$working_dir"
+echo "Building and starting Docker containers for e2e testing..."
 # CACHE_BUST to ensure the assemble step is always run
 docker compose build --build-arg CACHE_BUST=$(date +%s) frontend
 docker compose up -d

package/example.env

@@ -2,5 +2,19 @@
 E2E_BASE_URL=http://localhost:8080/openmrs
 E2E_USER_ADMIN_USERNAME=admin
 E2E_USER_ADMIN_PASSWORD=Admin123
+
+# "Outpatient Clinic" location UUID
 E2E_LOGIN_DEFAULT_LOCATION_UUID=44c3efb0-2583-4c80-a79e-1f756a03c0a1
-# The above location UUID is for the "Outpatient Clinic" location in the reference application
+
+# Billing Module Test Configuration
+# Default UUIDs from openmrs-content-referenceapplication-demo
+# These should work if you're using the reference application demo data
+
+# Cash Point UUID - OPD Cash Point from reference application demo
+E2E_CASH_POINT_UUID=54065383-b4d4-42d2-af4d-d250a1fd2590
+
+# Admin User UUID
+E2E_USER_ADMIN_UUID=82f18b44-6814-11e8-923f-e9a88dcb533f
+
+# Billable Service UUID - OPD Consultation from reference application demo
+E2E_TEST_SERVICE_UUID=360fab13-d92b-4a9f-ad4e-0ac223e7f54c

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-billing-app",
-  "version": "1.0.2-pre.112",
+  "version": "1.0.2-pre.1124",
   "description": "O3 frontend module for handling billing concerns in healthcare settings",
   "browser": "dist/openmrs-esm-billing-app.js",
   "main": "src/index.ts",
@@ -13,7 +13,7 @@
     "build": "webpack --mode production",
     "coverage": "yarn test --coverage",
     "debug": "npm run serve",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/index.ts' --config ./tools/i18next-parser.config.js",
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.workspace.tsx' 'src/**/*.modal.tsx' 'src/index.ts' --config ./tools/i18next-parser.config.js",
     "lint": "eslint src --ext ts,tsx --max-warnings=0",
     "postinstall": "husky install",
     "prettier": "prettier --config prettier.config.js --write \"src/**/*.{ts,tsx,css,scss}\" \"e2e/**/*.ts\"",
@@ -47,22 +47,22 @@
     "fuzzy": "^0.1.3",
     "lodash-es": "^4.17.21",
     "react-hook-form": "^7.49.3",
-    "react-to-print": "^2.14.15",
+    "react-to-print": "^3.1.1",
     "zod": "^3.22.4"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "6.x",
-    "@openmrs/esm-patient-common-lib": "10.x",
+    "@openmrs/esm-framework": "8.x",
+    "@openmrs/esm-patient-common-lib": "11.x",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-i18next": "11.x",
+    "react-i18next": "16.x",
     "rxjs": "6.x",
     "swr": "2.x"
   },
   "devDependencies": {
     "@openmrs/esm-framework": "next",
     "@openmrs/esm-patient-common-lib": "next",
-    "@playwright/test": "^1.49.0",
+    "@playwright/test": "^1.53.2",
     "@swc/cli": "^0.3.2",
     "@swc/core": "^1.3.106",
     "@swc/jest": "^0.2.31",
@@ -72,8 +72,8 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.11",
     "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
     "@types/webpack-env": "^1.18.4",
     "@typescript-eslint/eslint-plugin": "^6.19.1",
     "@typescript-eslint/parser": "^6.19.1",
@@ -86,10 +86,13 @@
     "dotenv": "^16.4.1",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-playwright": "^2.2.2",
     "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-testing-library": "^7.13.1",
     "husky": "^9.0.6",
-    "i18next": "^23.7.20",
-    "i18next-parser": "^8.12.0",
+    "i18next": "^25.0.0",
+    "i18next-parser": "^9.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -99,16 +102,16 @@
     "openmrs": "next",
     "pinst": "^3.0.0",
     "prettier": "^3.2.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^14.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-i18next": "^16.0.0",
     "react-router-dom": "^6.21.3",
     "rxjs": "^6.6.7",
     "sass": "^1.70.0",
     "swc-loader": "^0.2.3",
     "swr": "^2.2.4",
     "turbo": "^2.5.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.1"
@@ -117,6 +120,6 @@
     "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
     "*.{css,scss,ts,tsx}": "prettier --write --list-different"
   },
-  "packageManager": "yarn@4.9.1",
+  "packageManager": "yarn@4.10.3",
   "stableVersion": "1.0.1"
 }

package/playwright.config.ts

@@ -1,4 +1,4 @@
-import { devices, PlaywrightTestConfig } from '@playwright/test';
+import { devices, type PlaywrightTestConfig } from '@playwright/test';
 import * as dotenv from 'dotenv';
 dotenv.config();
 
@@ -7,7 +7,7 @@ const config: PlaywrightTestConfig = {
   testDir: './e2e/specs',
   timeout: 3 * 60 * 1000,
   expect: {
-    timeout: 40 * 1000,
+    timeout: 20 * 1000,
   },
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
@@ -16,7 +16,9 @@ const config: PlaywrightTestConfig = {
   globalSetup: require.resolve('./e2e/core/global-setup'),
   use: {
     baseURL: `${process.env.E2E_BASE_URL}/spa/`,
+    locale: 'en-US',
     storageState: 'e2e/storageState.json',
+    trace: 'retain-on-failure',
     video: 'retain-on-failure',
   },
   projects: [

package/src/bill-history/bill-history.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
@@ -19,7 +19,7 @@ import {
   Tile,
 } from '@carbon/react';
 import { Add } from '@carbon/react/icons';
-import { isDesktop, launchWorkspace, useConfig, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { launchWorkspace, useConfig, usePagination } from '@openmrs/esm-framework';
 import { CardHeader, EmptyDataIllustration, ErrorState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 import { convertToCurrency } from '../helpers';
 import { useBills } from '../billing.resource';
@@ -33,11 +33,9 @@ interface BillHistoryProps {
 const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
   const { t } = useTranslation();
   const { bills, isLoading, error } = useBills(patientUuid);
-  const layout = useLayoutType();
-  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
   const { paginated, goTo, results, currentPage } = usePagination(bills);
   const { pageSize, defaultCurrency } = useConfig();
-  const [currentPageSize, setCurrentPageSize] = React.useState(pageSize);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
   const { pageSizes } = usePaginationInfo(pageSize, bills?.length, currentPage, results?.length);
 
   const headerData = [
@@ -74,7 +72,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
   if (isLoading) {
     return (
       <div className={styles.loaderContainer}>
-        <DataTableSkeleton showHeader={false} showToolbar={false} zebra size={responsiveSize} />
+        <DataTableSkeleton showHeader={false} showToolbar={false} zebra size="md" />
       </div>
     );
   }
@@ -83,7 +81,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
     return (
       <div className={styles.errorContainer}>
         <Layer>
-          <ErrorState error={error} headerTitle={t('billsList', 'Bill list')} />
+          <ErrorState error={error} headerTitle={t('billList', 'Bill list')} />
         </Layer>
       </div>
     );
@@ -109,22 +107,22 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
     <div>
       <CardHeader title={t('billingHistory', 'Billing History')}>
         <Button renderIcon={Add} onClick={() => launchWorkspace('billing-form-workspace', {})} kind="ghost">
-          {t('addBill', 'Add bill item(s)')}
+          {t('addBill', 'Add bill items')}
         </Button>
       </CardHeader>
       <div className={styles.billHistoryContainer}>
-        <DataTable isSortable rows={rowData} headers={headerData} size={responsiveSize} useZebraStyles>
+        <DataTable isSortable rows={rowData} headers={headerData} size="md" useZebraStyles>
           {({
-            rows,
-            headers,
             getExpandHeaderProps,
-            getTableProps,
-            getTableContainerProps,
             getHeaderProps,
             getRowProps,
+            getTableContainerProps,
+            getTableProps,
+            headers,
+            rows,
           }) => (
             <TableContainer {...getTableContainerProps}>
-              <Table className={styles.table} {...getTableProps()} aria-label="Bill list">
+              <Table className={styles.table} {...getTableProps()} aria-label={t('billList', 'Bill list')}>
                 <TableHead>
                   <TableRow>
                     <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
@@ -153,9 +151,9 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
                           ))}
                         </TableExpandRow>
                         {row.isExpanded ? (
-                          <TableExpandedRow className={styles.expandedRow} colSpan={headers.length + 1}>
+                          <TableExpandedRow colSpan={headers.length + 1}>
                             <div className={styles.container} key={i}>
-                              <InvoiceTable bill={currentBill} isSelectable={false} />
+                              <InvoiceTable bill={currentBill} />
                             </div>
                           </TableExpandedRow>
                         ) : (
@@ -178,7 +176,7 @@ const BillHistory: React.FC<BillHistoryProps> = ({ patientUuid }) => {
             pageSizes={pageSizes}
             totalItems={bills.length}
             className={styles.pagination}
-            size={responsiveSize}
+            size="md"
             onChange={({ page: newPage, pageSize }) => {
               if (newPage !== currentPage) {
                 goTo(newPage);

package/src/bill-history/bill-history.scss

@@ -3,7 +3,7 @@
 @use '@openmrs/esm-styleguide/src/vars' as *;
 
 .container {
-  margin: layout.$spacing-07 0;
+  margin: layout.$spacing-03 0;
 }
 
 .emptyStateContainer,
@@ -21,27 +21,8 @@
   padding-bottom: 0;
 }
 
-.headerContainer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
-  background-color: $ui-02;
-}
-
-.backgroundDataFetchingIndicator {
-  align-items: center;
-  display: flex;
-  flex: 1 1 0%;
-  justify-content: center;
-}
-
-.tableContainer section {
-  position: relative;
-}
-
-.tableContainer a {
-  text-decoration: none;
+.errorContainer {
+  @extend .container;
 }
 
 .pagination {
@@ -56,34 +37,6 @@
   display: none;
 }
 
-.emptyRow {
-  padding: 0 layout.$spacing-05;
-  display: flex;
-  align-items: center;
-}
-
-.visitSummaryContainer {
-  width: 100%;
-  max-width: 768px;
-  margin: layout.$spacing-05 auto;
-}
-
-.expandedActiveVisitRow > td > div {
-  max-height: max-content !important;
-}
-
-.expandedActiveVisitRow td {
-  padding: 0 layout.$spacing-07;
-}
-
-.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
-  padding: 0 layout.$spacing-05;
-}
-
-.action {
-  margin-bottom: layout.$spacing-03;
-}
-
 .illo {
   margin-top: layout.$spacing-05;
 }
@@ -95,55 +48,11 @@
   margin-bottom: layout.$spacing-03;
 }
 
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-
-  h4 {
-    @include type.type-style('heading-compact-02');
-    color: $text-02;
-
-    &:after {
-      content: '';
-      display: block;
-      width: layout.$spacing-07;
-      padding-top: 3px;
-      border-bottom: 0.375rem solid;
-      @include brand-03(border-bottom-color);
-    }
-  }
-}
-
 .tile {
   text-align: center;
   border: 1px solid $ui-03;
 }
 
-.filterEmptyState {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: layout.$spacing-05;
-  margin: layout.$spacing-09;
-  text-align: center;
-}
-
-.filterEmptyStateTile {
-  margin: auto;
-}
-
-.filterEmptyStateContent {
-  @include type.type-style('heading-compact-02');
-  color: $text-02;
-  margin-bottom: 0.5rem;
-}
-
-.filterEmptyStateHelper {
-  @include type.type-style('body-compact-01');
-  color: $text-02;
-}
-
 .table {
   width: 100%;
   table-layout: fixed; // This helps with uniform column sizing
@@ -156,6 +65,7 @@
       text-overflow: unset;
     }
   }
+
   :global(tr.cds--parent-row.cds--expandable-row + tr[data-child-row]) td {
     padding-left: layout.$spacing-05;
   }

package/src/bill-history/bill-history.test.tsx

@@ -1,17 +1,23 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { configSchema, type BillingConfig } from '../config-schema';
 import { useBills } from '../billing.resource';
 import BillHistory from './bill-history.component';
 
-// Mock i18next
-jest.mock('react-i18next', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-  }),
+const mockUseConfig = jest.mocked(useConfig<BillingConfig>);
+const mockUseBills = jest.mocked(useBills);
+
+jest.mock('../billing.resource', () => ({
+  useBills: jest.fn(() => ({
+    bills: mockBillData,
+    isLoading: false,
+    isValidating: false,
+    error: null,
+  })),
 }));
 
-// Mock window.i18next
 window.i18next = {
   language: 'en-US',
 } as any;
@@ -20,9 +26,7 @@ const testProps = {
   patientUuid: 'some-uuid',
 };
 
-const mockbills = useBills as jest.MockedFunction<typeof useBills>;
-
-const mockBillsData = [
+const mockBillData = [
   { uuid: '1', patientName: 'John Doe', identifier: '12345678', billingService: 'Checkup', totalAmount: 500 },
   { uuid: '2', patientName: 'John Doe', identifier: '12345678', billingService: 'Consulatation', totalAmount: 600 },
   { uuid: '3', patientName: 'John Doe', identifier: '12345678', billingService: 'Child services', totalAmount: 700 },
@@ -37,69 +41,19 @@ const mockBillsData = [
   { uuid: '12', patientName: 'John Doe', identifier: '12345678', billingService: 'MCH', totalAmount: 1300 },
 ];
 
-// Mock the invoice table component
-jest.mock('../invoice/invoice-table.component', () => jest.fn(() => <div>Invoice table</div>));
-
-// Mock the billing resource
-jest.mock('../billing.resource', () => ({
-  useBills: jest.fn(() => ({
-    bills: mockBillsData,
-    isLoading: false,
-    isValidating: false,
-    error: null,
-  })),
-}));
-
-// Mock esm-patient-common-lib
-jest.mock('@openmrs/esm-patient-common-lib', () => ({
-  CardHeader: jest.fn(({ children }) => <div>{children}</div>),
-  EmptyDataIllustration: jest.fn(() => <div>Empty state illustration</div>),
-  ErrorState: jest.fn(({ error }) => <div>Error: {error?.message}</div>),
-  usePaginationInfo: jest.fn(() => ({
-    pageSizes: [10, 20, 30],
-    currentPage: 1,
-  })),
-}));
-
-// Mock esm-framework
-jest.mock('@openmrs/esm-framework', () => ({
-  useLayoutType: jest.fn(() => 'small-desktop'),
-  isDesktop: jest.fn(() => true),
-  usePagination: jest.fn().mockImplementation((data) => ({
-    currentPage: 1,
-    goTo: jest.fn(),
-    results: data,
-    paginated: true,
-  })),
-  showToast: jest.fn(),
-  showNotification: jest.fn(),
-  createErrorHandler: jest.fn(),
-  createGlobalStore: jest.fn(),
-  getGlobalStore: jest.fn(() => ({
-    subscribe: jest.fn(),
-    getState: jest.fn(),
-    setState: jest.fn(),
-  })),
-  useConfig: jest.fn(() => ({
-    pageSize: 10,
-    defaultCurrency: 'USD',
-  })),
-  useSession: jest.fn(() => ({
-    sessionLocation: { uuid: 'some-uuid', display: 'Location' },
-  })),
-  formatDate: jest.fn((date) => date?.toString() ?? ''),
-  formatDatetime: jest.fn((date) => date?.toString() ?? ''),
-  parseDate: jest.fn((dateString) => new Date(dateString)),
-  ExtensionSlot: jest.fn(({ children }) => <>{children}</>),
-}));
-
 describe('BillHistory', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
+  beforeEach(() => {
+    mockUseConfig.mockReturnValue({ ...getDefaultsFromConfigSchema(configSchema), defaultCurrency: 'USD' });
   });
 
   test('should render loading datatable skeleton', () => {
-    mockbills.mockReturnValueOnce({ isLoading: true, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    mockUseBills.mockReturnValueOnce({
+      isLoading: true,
+      isValidating: false,
+      error: null,
+      bills: [],
+      mutate: jest.fn(),
+    });
     render(<BillHistory {...testProps} />);
     const loadingSkeleton = screen.getByRole('table');
     expect(loadingSkeleton).toBeInTheDocument();
@@ -107,7 +61,7 @@ describe('BillHistory', () => {
   });
 
   test('should render error state when API call fails', () => {
-    mockbills.mockReturnValueOnce({
+    mockUseBills.mockReturnValueOnce({
       isLoading: false,
       isValidating: false,
       error: new Error('some error'),
@@ -115,31 +69,31 @@ describe('BillHistory', () => {
       mutate: jest.fn(),
     });
     render(<BillHistory {...testProps} />);
-    const errorState = screen.getByText('Error: some error');
+    const errorState = screen.getByText(/Error/);
     expect(errorState).toBeInTheDocument();
   });
 
   test('should render bills table', async () => {
     const user = userEvent.setup();
-    mockbills.mockReturnValueOnce({
+    mockUseBills.mockReturnValueOnce({
       isLoading: false,
       isValidating: false,
       error: null,
-      bills: mockBillsData as any,
+      bills: mockBillData as any,
       mutate: jest.fn(),
     });
     render(<BillHistory {...testProps} />);
 
     // Verify headers
-    expect(screen.getByText('visitTime')).toBeInTheDocument();
-    expect(screen.getByText('identifier')).toBeInTheDocument();
+    expect(screen.getByText('Visit time')).toBeInTheDocument();
+    expect(screen.getByText('Identifier')).toBeInTheDocument();
 
     const tableRowGroup = screen.getAllByRole('rowgroup');
     expect(tableRowGroup).toHaveLength(2);
 
     // Page navigation should work as expected
-    const nextPageButton = screen.getByRole('button', { name: /nextPage/ });
-    const prevPageButton = screen.getByRole('button', { name: /previousPage/ });
+    const nextPageButton = screen.getByRole('button', { name: /Next page/ });
+    const prevPageButton = screen.getByRole('button', { name: /Previous page/ });
 
     expect(nextPageButton).toBeInTheDocument();
     expect(prevPageButton).toBeInTheDocument();
@@ -155,7 +109,13 @@ describe('BillHistory', () => {
   });
 
   test('should render empty state view when there are no bills', () => {
-    mockbills.mockReturnValueOnce({ isLoading: false, isValidating: false, error: null, bills: [], mutate: jest.fn() });
+    mockUseBills.mockReturnValueOnce({
+      isLoading: false,
+      isValidating: false,
+      error: null,
+      bills: [],
+      mutate: jest.fn(),
+    });
     render(<BillHistory {...testProps} />);
     const emptyState = screen.getByText(/There are no bills to display./);
     expect(emptyState).toBeInTheDocument();