@kenyaemr/esm-service-queues-app 7.0.3-pre.89 → 8.0.1-pre.95

package/src/queue-table/default-queue-table.test.tsx

@@ -2,33 +2,26 @@ import React from 'react';
 import { of } from 'rxjs';
 import { screen } from '@testing-library/react';
 import { useConfig, useSession, getDefaultsFromConfigSchema } from '@openmrs/esm-framework';
-import { mockServices, mockSession, mockQueueEntries } from '__mocks__';
+import {
+  mockServices,
+  mockSession,
+  mockQueueEntries,
+  mockQueueRooms,
+  mockLocationTriage,
+  mockLocationSurgery,
+} from '__mocks__';
 import { renderWithSwr } from 'tools';
 import { useQueueEntries } from '../hooks/useQueueEntries';
 import { useQueueRooms } from '../add-provider-queue-room/add-provider-queue-room.resource';
 import { useQueueLocations } from '../patient-search/hooks/useQueueLocations';
+import { type ConfigObject, configSchema } from '../config-schema';
 import DefaultQueueTable from '../queue-table/default-queue-table.component';
-import { configSchema } from '../config-schema';
-
-const mockedUseConfig = useConfig as jest.Mock;
-const mockUseQueueEntries = useQueueEntries as jest.Mock;
-const mockQueueLocations = useQueueLocations as jest.Mock;
-const mockUseQueueRooms = useQueueRooms as jest.Mock;
-const mockUseSession = useSession as jest.Mock;
-
-mockedUseConfig.mockReturnValue({
-  ...getDefaultsFromConfigSchema(configSchema),
-  visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
-  customPatientChartUrl: 'someUrl',
-});
 
-jest.mock('@openmrs/esm-framework', () => {
-  const originalModule = jest.requireActual('@openmrs/esm-framework');
-  return {
-    ...originalModule,
-    openmrsFetch: jest.fn(),
-  };
-});
+const mockUseConfig = jest.mocked(useConfig<ConfigObject>);
+const mockUseQueueEntries = jest.mocked(useQueueEntries);
+const mockQueueLocations = jest.mocked(useQueueLocations);
+const mockUseQueueRooms = jest.mocked(useQueueRooms);
+const mockUseSession = jest.mocked(useSession);
 
 jest.mock('../hooks/useQueues', () => {
   return {
@@ -36,51 +29,47 @@ jest.mock('../hooks/useQueues', () => {
   };
 });
 
-jest.mock('../patient-search/hooks/useQueueLocations', () => {
-  const originalModule = jest.requireActual('../patient-search/hooks/useQueueLocations');
-
-  return {
-    ...originalModule,
-    useQueueLocations: jest.fn(),
-  };
-});
-
-jest.mock('../add-provider-queue-room/add-provider-queue-room.resource', () => {
-  const originalModule = jest.requireActual('../add-provider-queue-room/add-provider-queue-room.resource');
-
-  return {
-    ...originalModule,
-    useQueueRooms: jest.fn(),
-  };
-});
-
-jest.mock('../hooks/useQueueEntries', () => {
-  const originalModule = jest.requireActual('../hooks/useQueueEntries');
+jest.mock('../patient-search/hooks/useQueueLocations', () => ({
+  ...jest.requireActual('../patient-search/hooks/useQueueLocations'),
+  useQueueLocations: jest.fn(),
+}));
 
-  return {
-    ...originalModule,
-    useQueueEntries: jest.fn(),
-  };
-});
+jest.mock('../add-provider-queue-room/add-provider-queue-room.resource', () => ({
+  ...jest.requireActual('../add-provider-queue-room/add-provider-queue-room.resource'),
+  useQueueRooms: jest.fn(),
+}));
 
-jest.mock('../helpers/helpers', () => {
-  const originalModule = jest.requireActual('../helpers/helpers');
+jest.mock('../hooks/useQueueEntries', () => ({
+  ...jest.requireActual('../hooks/useQueueEntries'),
+  useQueueEntries: jest.fn(),
+}));
 
-  return {
-    ...originalModule,
-    getSelectedServiceName: jest.fn().mockReturnValue(of({ serviceName: 'All' })),
-  };
-});
+jest.mock('../helpers/helpers', () => ({
+  ...jest.requireActual('../helpers/helpers'),
+  getSelectedServiceName: jest.fn().mockReturnValue(of({ serviceName: 'All' })),
+}));
 
-describe('DefaultQueueTable: ', () => {
+describe('DefaultQueueTable', () => {
   beforeEach(() => {
-    mockUseSession.mockReturnValue(mockSession);
+    mockUseConfig.mockReturnValue({
+      ...getDefaultsFromConfigSchema(configSchema),
+      customPatientChartUrl: 'someUrl',
+      visitQueueNumberAttributeUuid: 'c61ce16f-272a-41e7-9924-4c555d0932c5',
+    });
+    mockUseSession.mockReturnValue(mockSession.data);
   });
 
   it('renders an empty state view if data is unavailable', async () => {
-    mockQueueLocations.mockReturnValue({ queueLocations: [] });
-    mockUseQueueRooms.mockReturnValue({ rooms: [] });
-    mockUseQueueEntries.mockReturnValue({ queueEntries: [], isLoading: false });
+    mockQueueLocations.mockReturnValue({ queueLocations: [], isLoading: false, error: null });
+    mockUseQueueRooms.mockReturnValue({ rooms: [], isLoading: false, error: undefined });
+    mockUseQueueEntries.mockReturnValue({
+      queueEntries: [],
+      isLoading: false,
+      error: undefined,
+      totalCount: 0,
+      isValidating: false,
+      mutate: jest.fn(),
+    });
 
     rendeDefaultQueueTable();
 
@@ -92,9 +81,20 @@ describe('DefaultQueueTable: ', () => {
   });
 
   it('renders a tabular overview of visit queue entry data when available', async () => {
-    mockQueueLocations.mockReturnValue({ queueLocations: mockQueueLocations });
-    mockUseQueueRooms.mockReturnValue({ rooms: mockUseQueueRooms });
-    mockUseQueueEntries.mockReturnValue({ queueEntries: mockQueueEntries, isLoading: false });
+    mockQueueLocations.mockReturnValue({
+      queueLocations: [mockLocationSurgery, mockLocationTriage],
+      isLoading: false,
+      error: null,
+    });
+    mockUseQueueRooms.mockReturnValue({ rooms: mockQueueRooms.data.results, isLoading: false, error: undefined });
+    mockUseQueueEntries.mockReturnValue({
+      queueEntries: mockQueueEntries,
+      error: undefined,
+      isLoading: false,
+      isValidating: false,
+      mutate: jest.fn(),
+      totalCount: 2,
+    });
 
     rendeDefaultQueueTable();
 

package/src/queue-table/queue-entry-actions/queue-entry-actions-modal.scss

@@ -0,0 +1,36 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.radioButtonGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: layout.$spacing-03;
+  min-height: layout.$spacing-10;
+  width: 100%;
+  @include type.type-style('body-compact-01');
+}
+
+.radioButton {
+  padding: layout.$spacing-02 layout.$spacing-02;
+  margin: layout.$spacing-03 0;
+}
+
+section {
+  margin: layout.$spacing-03;
+}
+
+.sectionTitle {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-04;
+}
+
+.queueEntryActionModalBody {
+  padding-bottom: layout.$spacing-05;
+}
+
+.dateTimeFields {
+  display: flex;
+}

package/src/queue-table/queue-entry-actions/queue-entry-actions.modal.tsx

@@ -1,3 +1,5 @@
+import React, { useMemo, useState } from 'react';
+import dayjs from 'dayjs';
 import {
   Button,
   Checkbox,
@@ -18,16 +20,14 @@ import {
   TimePicker,
   TimePickerSelect,
 } from '@carbon/react';
-import { showSnackbar, type FetchResponse } from '@openmrs/esm-framework';
-import dayjs from 'dayjs';
-import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { showSnackbar, type FetchResponse } from '@openmrs/esm-framework';
 import { datePickerFormat, datePickerPlaceHolder, time12HourFormatRegexPattern } from '../../constants';
 import { convertTime12to24, type amPm } from '../../helpers/time-helpers';
 import { useMutateQueueEntries } from '../../hooks/useQueueEntries';
 import { useQueues } from '../../hooks/useQueues';
 import { type QueueEntry } from '../../types';
-import styles from './queue-entry-actons-modal.scss';
+import styles from './queue-entry-actions-modal.scss';
 
 interface QueueEntryActionModalProps {
   queueEntry: QueueEntry;
@@ -172,15 +172,35 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
       });
   };
 
-  const isTimeInvalid = useMemo(() => {
+  // non-null if the selected date+time is invalid
+  const timeInvalidMessage = useMemo(() => {
     const now = new Date();
     const startAtDate = new Date(formState.transitionDate);
     const [hour, minute] = convertTime12to24(formState.transitionTime, formState.transitionTimeFormat);
     startAtDate.setHours(hour, minute, 0, 0);
-    return startAtDate > now;
-  }, [formState.transitionDate, formState.transitionTime, formState.transitionTimeFormat]);
 
-  const selectedPriorityIndex = priorities.findIndex((p) => p.uuid == formState.selectedPriority);
+    const previousQueueEntryStartTimeStr = queueEntry.previousQueueEntry?.startedAt;
+    const previousQueueEntryStartTime = previousQueueEntryStartTimeStr
+      ? new Date(previousQueueEntryStartTimeStr)
+      : null;
+
+    if (startAtDate > now) {
+      return t('timeCannotBeInFuture', 'Time cannot be in the future');
+    }
+    if (startAtDate <= previousQueueEntryStartTime) {
+      return t(
+        'timeCannotBePriorToPreviousQueueEntry',
+        'Time cannot be before start of previous queue entry: {{time}}',
+        {
+          time: previousQueueEntryStartTime.toLocaleString(),
+          interpolation: { escapeValue: false },
+        },
+      );
+    }
+    return null;
+  }, [formState.transitionDate, formState.transitionTime, formState.transitionTimeFormat, t]);
+
+  const selectedPriorityIndex = priorities?.findIndex((p) => p.uuid == formState.selectedPriority);
 
   return (
     <>
@@ -329,8 +349,8 @@ export const QueueEntryActionModal: React.FC<QueueEntryActionModalProps> = ({
                   onChange={(event) => setTransitionTime(event.target.value)}
                   pattern={time12HourFormatRegexPattern}
                   value={formState.transitionTime}
-                  invalid={isTimeInvalid}
-                  invalidText={t('timeCannotBeInFuture', 'Time cannot be in the future')}
+                  invalid={timeInvalidMessage != null}
+                  invalidText={timeInvalidMessage}
                   disabled={!formState.modifyDefaultTransitionDateTime}>
                   <TimePickerSelect
                     id="visitStartTimeSelect"

package/src/queue-table/queue-entry-actions/queue-entry-actions.test.tsx

@@ -1,13 +1,13 @@
-import { openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
-import { screen } from '@testing-library/react';
-import { mockQueueEntryBrian, mockQueueSurgery, mockStatusInService, mockQueues } from '__mocks__';
 import React from 'react';
-import { renderWithSwr } from 'tools';
-import TransitionQueueEntryModal from './transition-queue-entry.modal';
 import userEvent from '@testing-library/user-event';
-import EditQueueEntryModal from './edit-queue-entry.modal';
+import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import { screen } from '@testing-library/react';
+import { mockQueues, mockQueueEntryAlice } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import UndoTransitionQueueEntryModal from './undo-transition-queue-entry.modal';
+import VoidQueueEntryModal from './void-queue-entry.modal';
 
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 jest.mock('../../hooks/useQueues', () => {
   return {
@@ -17,136 +17,67 @@ jest.mock('../../hooks/useQueues', () => {
   };
 });
 
-describe('TransitionQueueEntryModal: ', () => {
-  const queueEntry = mockQueueEntryBrian;
-  const { queue } = queueEntry;
-  const { allowedStatuses, allowedPriorities } = queue;
-
-  const nextQueue = mockQueueSurgery;
-
-  it('renders the dialog with the right status and priority options', () => {
-    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
-    expect(screen.getByText(queueEntry.patient.display)).toBeInTheDocument();
-
-    for (const status of allowedStatuses) {
-      const expectedStatusDisplay =
-        queueEntry.status.uuid == status.uuid ? `${status.display} (Current)` : status.display;
-      expect(screen.getByRole('radio', { name: expectedStatusDisplay })).toBeInTheDocument();
-    }
-
-    for (const pri of allowedPriorities) {
-      const expectedPriorityDisplay = queueEntry.priority.uuid == pri.uuid ? `${pri.display} (Current)` : pri.display;
-      expect(screen.getByRole('radio', { name: expectedPriorityDisplay })).toBeInTheDocument();
-    }
-  });
+describe('UndoTransitionQueueEntryModal', () => {
+  const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
     const closeModal = jest.fn();
     const user = userEvent.setup();
 
-    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+
     const cancelButton = screen.getByText('Cancel');
     await user.click(cancelButton);
     expect(closeModal).toHaveBeenCalled();
   });
 
-  it('has a disabled submit button when selected queue and status is same as before', () => {
-    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
-    const submitButton = screen.getByRole('button', { name: /Transition patient/ });
-    expect(submitButton).toBeDisabled();
-  });
-
-  it('has an working submit button when selected queue and status is different from before', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+  it('has an working submit button', async () => {
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
-    const user = userEvent.setup();
-    renderWithSwr(<TransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+      data: [],
+    } as unknown as FetchResponse);
 
-    // change queue
-    const queueDropdown = screen.getByRole('combobox', { name: /Select a queue/ });
-    await queueDropdown.click();
-    const queueSelection = screen.getByRole('option', {
-      name: `${nextQueue.display} - ${nextQueue.location?.display}`,
-    });
-    await user.selectOptions(queueDropdown, queueSelection);
+    const user = userEvent.setup();
 
-    // change status
-    const inServiceRadioButton = screen.getByText(mockStatusInService.display);
-    await inServiceRadioButton.click();
+    renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
-    const submitButton = screen.getByRole('button', { name: /Transition patient/ });
-    expect(submitButton).not.toBeDisabled();
-    await submitButton.click();
+    const submitButton = screen.getByRole('button', { name: /Undo transition/ });
+    expect(submitButton).toBeEnabled();
+    await user.click(submitButton);
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(mockOpenmrsFetch).toHaveBeenCalled();
     expect(showSnackbar).toHaveBeenCalled();
   });
 });
 
-describe('EditQueueEntryModal: ', () => {
-  const queueEntry = mockQueueEntryBrian;
-  const { queue } = queueEntry;
-  const { allowedStatuses, allowedPriorities } = queue;
-
-  const nextQueue = mockQueueSurgery;
-
-  it('renders the dialog with the right status and priority options', () => {
-    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
-    expect(screen.getByText(queueEntry.patient.display)).toBeInTheDocument();
-
-    for (const status of allowedStatuses) {
-      const expectedStatusDisplay =
-        queueEntry.status.uuid == status.uuid ? `${status.display} (Current)` : status.display;
-      expect(screen.getByRole('radio', { name: expectedStatusDisplay })).toBeInTheDocument();
-    }
-
-    for (const pri of allowedPriorities) {
-      const expectedPriorityDisplay = queueEntry.priority.uuid == pri.uuid ? `${pri.display} (Current)` : pri.display;
-      expect(screen.getByRole('radio', { name: expectedPriorityDisplay })).toBeInTheDocument();
-    }
-  });
+describe('VoidQueueEntryModal', () => {
+  const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
     const closeModal = jest.fn();
     const user = userEvent.setup();
 
-    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+    renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
     const cancelButton = screen.getByText('Cancel');
     await user.click(cancelButton);
     expect(closeModal).toHaveBeenCalled();
   });
 
-  it('has a enabled submit button when selected queue and status is same as before', () => {
-    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
-    const submitButton = screen.getByRole('button', { name: /Edit queue entry/ });
-    expect(submitButton).toBeEnabled();
-  });
-
-  it('has an working submit button when selected queue and status is different from before', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+  it('has an working submit button', async () => {
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
-    const user = userEvent.setup();
-    renderWithSwr(<EditQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
+      data: [],
+    } as unknown as FetchResponse);
 
-    // change queue
-    const queueDropdown = screen.getByRole('combobox', { name: /Select a queue/ });
-    await queueDropdown.click();
-    const queueSelection = screen.getByRole('option', {
-      name: `${nextQueue.display} - ${nextQueue.location?.display}`,
-    });
-    await user.selectOptions(queueDropdown, queueSelection);
+    const user = userEvent.setup();
 
-    // change status
-    const inServiceRadioButton = screen.getByText(mockStatusInService.display);
-    await inServiceRadioButton.click();
+    renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
-    const submitButton = screen.getByRole('button', { name: /Edit queue entry/ });
-    expect(submitButton).not.toBeDisabled();
-    await submitButton.click();
+    const submitButton = screen.getByRole('button', { name: /Delete queue entry/ });
+    expect(submitButton).toBeEnabled();
+    await user.click(submitButton);
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(mockOpenmrsFetch).toHaveBeenCalled();
     expect(showSnackbar).toHaveBeenCalled();
   });
 });

package/src/queue-table/queue-entry-actions/queue-entry-confirm-action.test.tsx

@@ -1,14 +1,14 @@
-import { openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/react';
+import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
 import { mockQueues, mockQueueEntryAlice } from '__mocks__';
-import React from 'react';
 import { renderWithSwr } from 'tools';
-import userEvent from '@testing-library/user-event';
+import EndQueueEntryModal from './end-queue-entry.modal';
 import UndoTransitionQueueEntryModal from './undo-transition-queue-entry.modal';
 import VoidQueueEntryModal from './void-queue-entry.modal';
-import EndQueueEntryModal from './end-queue-entry.modal';
 
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 jest.mock('../../hooks/useQueues', () => {
   return {
@@ -18,7 +18,7 @@ jest.mock('../../hooks/useQueues', () => {
   };
 });
 
-describe('UndoTransitionQueueEntryModal: ', () => {
+describe('UndoTransitionQueueEntryModal', () => {
   const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
@@ -32,22 +32,28 @@ describe('UndoTransitionQueueEntryModal: ', () => {
   });
 
   it('has an working submit button', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
+    } as unknown as FetchResponse);
+
     const user = userEvent.setup();
+
     renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
-    const submitButton = screen.getByRole('button', { name: /Undo transition/ });
-    expect(submitButton).not.toBeDisabled();
-    await user.click(submitButton);
+    const submitButton = screen.getByRole('button', { name: /undo transition/i });
+    expect(submitButton).toBeEnabled();
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
-    expect(showSnackbar).toHaveBeenCalled();
+    await user.click(submitButton);
+    expect(showSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      subtitle: 'Queue entry transition undo success',
+      title: 'Undo transition success',
+    });
   });
 });
 
-describe('VoidQueueEntryModal: ', () => {
+describe('VoidQueueEntryModal', () => {
   const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
@@ -61,22 +67,27 @@ describe('VoidQueueEntryModal: ', () => {
   });
 
   it('has an working submit button', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
+    } as unknown as FetchResponse);
+
     const user = userEvent.setup();
     renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
     const submitButton = screen.getByRole('button', { name: /Delete queue entry/ });
-    expect(submitButton).not.toBeDisabled();
+    expect(submitButton).toBeEnabled();
     await user.click(submitButton);
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
-    expect(showSnackbar).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      subtitle: 'Queue entry deleted successfully',
+      title: 'Queue entry deleted successfully',
+    });
   });
 });
 
-describe('EndQueueEntryModal: ', () => {
+describe('EndQueueEntryModal', () => {
   const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
@@ -90,17 +101,23 @@ describe('EndQueueEntryModal: ', () => {
   });
 
   it('has an working submit button', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
+    } as unknown as FetchResponse);
+
     const user = userEvent.setup();
+
     renderWithSwr(<EndQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
     const submitButton = screen.getByRole('button', { name: /Remove patient/ });
-    expect(submitButton).not.toBeDisabled();
+    expect(submitButton).toBeEnabled();
     await user.click(submitButton);
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
-    expect(showSnackbar).toHaveBeenCalled();
+    expect(showSnackbar).toHaveBeenCalledWith({
+      isLowContrast: true,
+      kind: 'success',
+      subtitle: 'Paient removed from queue successfully',
+      title: 'Patient removed',
+    });
   });
 });

package/src/queue-table/queue-entry-actions/queue-entry-undo-actions.test.tsx

@@ -1,13 +1,13 @@
-import { openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { type FetchResponse, openmrsFetch, showSnackbar } from '@openmrs/esm-framework';
 import { screen } from '@testing-library/react';
 import { mockQueues, mockQueueEntryAlice } from '__mocks__';
-import React from 'react';
 import { renderWithSwr } from 'tools';
-import userEvent from '@testing-library/user-event';
 import UndoTransitionQueueEntryModal from './undo-transition-queue-entry.modal';
 import VoidQueueEntryModal from './void-queue-entry.modal';
 
-const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
 
 jest.mock('../../hooks/useQueues', () => {
   return {
@@ -17,7 +17,7 @@ jest.mock('../../hooks/useQueues', () => {
   };
 });
 
-describe('UndoTransitionQueueEntryModal: ', () => {
+describe('UndoTransitionQueueEntryModal', () => {
   const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
@@ -25,28 +25,31 @@ describe('UndoTransitionQueueEntryModal: ', () => {
     const user = userEvent.setup();
 
     renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={closeModal} />);
+
     const cancelButton = screen.getByText('Cancel');
     await user.click(cancelButton);
     expect(closeModal).toHaveBeenCalled();
   });
 
   it('has an working submit button', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
+    } as unknown as FetchResponse);
+
     const user = userEvent.setup();
+
     renderWithSwr(<UndoTransitionQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
     const submitButton = screen.getByRole('button', { name: /Undo transition/ });
-    expect(submitButton).not.toBeDisabled();
+    expect(submitButton).toBeEnabled();
     await user.click(submitButton);
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(mockOpenmrsFetch).toHaveBeenCalled();
     expect(showSnackbar).toHaveBeenCalled();
   });
 });
 
-describe('VoidQueueEntryModal: ', () => {
+describe('VoidQueueEntryModal', () => {
   const queueEntry = mockQueueEntryAlice;
 
   it('has a cancel button that closes the modal', async () => {
@@ -60,17 +63,19 @@ describe('VoidQueueEntryModal: ', () => {
   });
 
   it('has an working submit button', async () => {
-    mockedOpenmrsFetch.mockResolvedValue({
+    mockOpenmrsFetch.mockResolvedValue({
       status: 200,
-    });
+    } as unknown as FetchResponse);
+
     const user = userEvent.setup();
+
     renderWithSwr(<VoidQueueEntryModal queueEntry={queueEntry} closeModal={() => {}} />);
 
     const submitButton = screen.getByRole('button', { name: /Delete queue entry/ });
-    expect(submitButton).not.toBeDisabled();
+    expect(submitButton).toBeEnabled();
     await user.click(submitButton);
 
-    expect(mockedOpenmrsFetch).toHaveBeenCalled();
+    expect(mockOpenmrsFetch).toHaveBeenCalled();
     expect(showSnackbar).toHaveBeenCalled();
   });
 });