@openmrs/esm-patient-orders-app 5.0.1-pre.2175

package/src/order-basket-action-button/order-basket-action-button.test.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { screen, render, waitFor, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useLayoutType, usePatient } from '@openmrs/esm-framework';
+import { OrderBasketItem, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import { mockPatient } from '../../../../tools/test-helpers';
+import OrderBasketActionButton from './order-basket-action-button.extension';
+import { orderBasketStore } from '@openmrs/esm-patient-common-lib/src/orders/store';
+
+const mockedUseLayoutType = useLayoutType as jest.Mock;
+const mockUsePatient = usePatient as jest.Mock;
+
+// This pattern of mocking seems to be required: defining the mocked function here and
+// then assigning it with an arrow function wrapper in jest.mock. It is very particular.
+// I think it is related to this: https://github.com/swc-project/jest/issues/14#issuecomment-1238621942
+const mockLaunchPatientWorkspace = jest.fn();
+const mockLaunchStartVisitPrompt = jest.fn();
+const mockUseVisitOrOfflineVisit = jest.fn(() => ({
+  activeVisit: {
+    uuid: '8ef90c91-14be-42dd-a1c0-e67fbf904470',
+  },
+  currentVisit: {
+    uuid: '8ef90c91-14be-42dd-a1c0-e67fbf904470',
+  },
+}));
+const mockGetPatientUuidFromUrl = jest.fn(() => mockPatient.id);
+
+jest.mock('@openmrs/esm-patient-common-lib', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-patient-common-lib');
+
+  return {
+    ...originalModule,
+    getPatientUuidFromUrl: () => mockGetPatientUuidFromUrl(),
+    launchPatientWorkspace: (arg) => mockLaunchPatientWorkspace(arg),
+    launchStartVisitPrompt: () => mockLaunchStartVisitPrompt(),
+    useWorkspaces: jest.fn(() => {
+      return { workspaces: [{ name: 'order-basket' }] };
+    }),
+    useVisitOrOfflineVisit: () => mockUseVisitOrOfflineVisit(),
+    useSystemVisitSetting: jest.fn().mockReturnValue({ data: true }),
+  };
+});
+
+jest.mock('@openmrs/esm-patient-common-lib/src/get-patient-uuid-from-url', () => {
+  return { getPatientUuidFromUrl: () => mockGetPatientUuidFromUrl() };
+});
+
+describe('<OrderBasketActionButton/>', () => {
+  beforeAll(() => {
+    orderBasketStore.setState({
+      items: {
+        [mockPatient.id]: {
+          medications: [{ name: 'order-01', uuid: 'some-uuid' } as unknown as OrderBasketItem],
+        },
+      },
+    });
+    mockUsePatient.mockReturnValue({ patientUuid: mockPatient.id });
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should display tablet view action button', async () => {
+    const user = userEvent.setup();
+    mockedUseLayoutType.mockReturnValue('tablet');
+    render(<OrderBasketActionButton />);
+
+    const orderBasketButton = screen.getByRole('button', { name: /Order Basket/i });
+    expect(orderBasketButton).toBeInTheDocument();
+    await waitFor(() => user.click(orderBasketButton));
+    expect(mockLaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
+    expect(orderBasketButton).toHaveClass('active');
+  });
+
+  it('should display desktop view action button', async () => {
+    const user = userEvent.setup();
+    mockedUseLayoutType.mockReturnValue('desktop');
+    render(<OrderBasketActionButton />);
+
+    const orderBasketButton = screen.getByRole('button', { name: /Medications/i });
+    expect(orderBasketButton).toBeInTheDocument();
+    await waitFor(() => user.click(orderBasketButton));
+    expect(mockLaunchPatientWorkspace).toHaveBeenCalledWith('order-basket');
+    expect(orderBasketButton).toHaveClass('active');
+  });
+
+  it('should prompt user to start visit if no currentVisit found', async () => {
+    const user = userEvent.setup();
+    mockedUseLayoutType.mockReturnValue('desktop');
+    mockUseVisitOrOfflineVisit.mockImplementation(() => ({
+      activeVisit: null,
+      currentVisit: null,
+    }));
+    const screen = render(<OrderBasketActionButton />);
+
+    const orderBasketButton = screen.getByRole('button', { name: /Medications/i });
+    expect(orderBasketButton).toBeInTheDocument();
+    await waitFor(() => user.click(orderBasketButton));
+    expect(mockLaunchPatientWorkspace).not.toBeCalled();
+    expect(mockLaunchStartVisitPrompt).toHaveBeenCalled();
+    expect(orderBasketButton).toHaveClass('active');
+  });
+
+  it('should display a count tag when orders are present on the desktop view', () => {
+    mockedUseLayoutType.mockReturnValue('desktop');
+    const { result } = renderHook(useOrderBasket);
+    expect(result.current.orders).toHaveLength(1); // sanity check
+    render(<OrderBasketActionButton />);
+
+    expect(screen.getByText(/medications/i)).toBeInTheDocument();
+    expect(screen.getByText(/1/i)).toBeInTheDocument();
+  });
+
+  it('should display the count tag when orders are present on the tablet view', () => {
+    mockedUseLayoutType.mockReturnValue('tablet');
+    render(<OrderBasketActionButton />);
+
+    expect(screen.getByRole('button', { name: /1 order basket/i })).toBeInTheDocument();
+  });
+});

package/src/root.scss

@@ -0,0 +1,67 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars'; 
+
+.productiveHeading01 {
+  @include type.type-style("heading-compact-01");
+  margin-bottom: spacing.$spacing-03;
+}
+
+.productiveHeading02 {
+  @include type.type-style("heading-compact-02");
+  margin-bottom: spacing.$spacing-05;
+}
+
+.productiveHeading03 {
+  @include type.type-style("heading-03");
+  margin-bottom: spacing.$spacing-05;
+}
+
+.productiveHeading04 {
+  @include type.type-style("heading-04");
+  margin-bottom: spacing.$spacing-05;
+}
+
+.productiveHeading05 {
+  @include type.type-style("heading-05");
+  margin-bottom: spacing.$spacing-05;
+}
+
+.productiveHeading06 {
+  @include type.type-style("heading-06");
+  margin-bottom: spacing.$spacing-06;
+}
+
+.bodyShort01 {
+  @include type.type-style("body-compact-01");
+}
+
+.bodyShort02 {
+  @include type.type-style("body-compact-02");
+}
+
+.bodyLong01 {
+  @include type.type-style("body-01");
+}
+
+.bodyLong02 {
+  @include type.type-style("body-02");
+}
+
+.label01 {
+  @include type.type-style("label-01");
+}
+
+.caption01 {
+  @include type.type-style("legal-01");
+}
+
+.clipTextWithEllipsis {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.text02 { 
+  color: $text-02;
+}

package/src/routes.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.2.0"
+  },
+  "extensions": [
+    {
+      "name": "order-basket-action-menu",
+      "component": "orderBasketActionMenu",
+      "slot": "action-menu-chart-items-slot",
+      "order": 0
+    }
+  ]
+}

package/src/types/order.ts

@@ -0,0 +1,5 @@
+import { Order } from '@openmrs/esm-patient-common-lib';
+
+export interface PatientMedicationFetchResponse {
+  results: Array<Order>;
+}

package/translations/am.json

@@ -0,0 +1,3 @@
+{
+  "Medications": "Medications"
+}

package/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "Medications": "Medications"
+}

package/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "Medications": "Medications"
+}

package/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "Medications": "Medications"
+}

package/translations/he.json

@@ -0,0 +1,3 @@
+{
+  "Medications": "Medications"
+}

package/translations/km.json

@@ -0,0 +1,3 @@
+{
+  "Medications": "Medications"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');