added test cases

Author: Bawanthathilan

packages/framework/esm-styleguide/src/location-selector/location-selector.test.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable */
 import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useConfig, useSession, type LoggedInUser, type Session } from '@openmrs/esm-framework';
+import { type LoggedInUser, type Session } from '@openmrs/esm-api';
+import { useConfig, useSession } from '@openmrs/esm-react-utils';
 import {
   inpatientWardResponse,
   locationResponseForNonExistingSearch,
@@ -14,9 +16,10 @@ import { LocationSelector } from './location-selector.component';
 
 const validLocationUuid = '1ce1b7d4-c865-4178-82b0-5932e51503d6';
 const inpatientWardLocationUuid = 'ba685651-ed3b-4e63-9b35-78893060758a';
+const inpatientWardLocation = 'Inpatient Ward';
 
-const mockUseConfig = jest.mocked(useConfig);
-const mockUseSession = jest.mocked(useSession);
+const mockUseConfig = vi.mocked(useConfig);
+const mockUseSession = vi.mocked(useSession);
 
 mockUseConfig.mockReturnValue(mockConfig);
 mockUseSession.mockReturnValue({
@@ -27,13 +30,9 @@ mockUseSession.mockReturnValue({
   } as LoggedInUser,
 } as Session);
 
-jest.mock('@openmrs/esm-framework', () => ({
-  ...jest.requireActual('@openmrs/esm-framework'),
-  setSessionLocation: jest.fn().mockResolvedValue({}),
-  setUserProperties: jest.fn().mockResolvedValue({}),
-  navigate: jest.fn(),
-  showToast: jest.fn(),
-  openmrsFetch: jest.fn((url) => {
+vi.mock('@openmrs/esm-api', async () => ({
+  ...(await import('@openmrs/esm-api')),
+  openmrsFetch: vi.fn((url) => {
     if (url === `/ws/fhir2/R4/Location?_id=${inpatientWardLocationUuid}`) {
       return inpatientWardResponse;
     }
@@ -45,41 +44,103 @@ jest.mock('@openmrs/esm-framework', () => ({
     }
     return mockLoginLocations;
   }),
+  setSessionLocation: vi.fn().mockResolvedValue({}),
+  setUserProperties: vi.fn().mockResolvedValue({}),
 }));
 
-describe('LocationSelector', () => {
-  //   it('renders a combo box with locations', async () => {
-  //     await act(async () => {
-  //       render(
-  //         <LocationSelector
-  //           selectedLocationUuid={inpatientWardLocationUuid}
-  //           onChange={jest.fn()}
-  //           Locationlabel="Select Location"
-  //           comBoxLabel="Location"
-  //         />,
-  //       );
-  //     });
-  //     expect(
-  //       screen.getByRole('combobox', {
-  //         name: /location/i,
-  //       }),
-  //     ).toBeInTheDocument();
-  //     expect(screen.getByText('Inpatient Ward')).toBeInTheDocument();
-  //   });
-  // it('calls onChange when a location is selected', async () => {
-  //     const onChangeMock = jest.fn();
-  //     await act(async () => {
-  //         render(
-  //             <LocationSelector
-  //                 selectedLocationUuid={inpatientWardLocationUuid}
-  //                 onChange={onChangeMock}
-  //                 Locationlabel="Select Location"
-  //                 comBoxLabel="Location"
-  //             />
-  //         );
-  //     });
-  //     const comboBox = screen.getByRole('combobox', { name: /location/i });
-  //     await userEvent.selectOptions(comboBox, 'Inpatient Ward');
-  //     expect(onChangeMock).toHaveBeenCalledWith(inpatientWardLocationUuid);
-  // })
+describe('LocationPicker', () => {
+  it('renders correctly', async () => {
+    await act(async () => {
+      render(
+        <LocationSelector
+          comBoxLabel="search for a location"
+          Locationlabel="Login Location"
+          selectedLocationUuid={inpatientWardLocationUuid}
+          onChange={vi.fn()}
+        />,
+      );
+    });
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('renders a list of login locations', async () => {
+    await act(async () => {
+      render(
+        <LocationSelector
+          comBoxLabel="search for a location"
+          Locationlabel="Login Location"
+          selectedLocationUuid={inpatientWardLocationUuid}
+          onChange={vi.fn()}
+        />,
+      );
+    });
+
+    expect(
+      screen.getByRole('combobox', {
+        name: /search for a location/i,
+      }),
+    ).toBeInTheDocument();
+
+    const combo = screen.getByRole('combobox', {
+      name: /search for a location/i,
+    });
+    await userEvent.click(combo);
+
+    const locations = screen.getAllByRole('option');
+    expect(locations.length).toBe(4);
+    const expectedLocations = [/community outreach/, /inpatient ward/, /mobile clinic/, /outpatient clinic/];
+    expectedLocations.forEach((row) =>
+      expect(screen.getByRole('option', { name: new RegExp(row, 'i') })).toBeInTheDocument(),
+    );
+  });
+
+  it('selects the provided selectedLocation when the component is rendered', async () => {
+    await act(async () => {
+      render(
+        <LocationSelector
+          comBoxLabel="search for a location"
+          Locationlabel="Login Location"
+          selectedLocationUuid={inpatientWardLocationUuid}
+          onChange={vi.fn()}
+        />,
+      );
+    });
+
+    const combo = screen.getByRole('combobox', {
+      name: /search for a location/i,
+    });
+
+    expect(combo).toHaveValue('Inpatient Ward');
+  });
+
+  it('loads the default location on top of the list', async () => {
+    await act(async () => {
+      render(
+        <LocationSelector
+          comBoxLabel="search for a location"
+          Locationlabel="Login Location"
+          selectedLocationUuid={inpatientWardLocationUuid}
+          defaultLocationUuid={inpatientWardLocationUuid}
+          onChange={vi.fn()}
+        />,
+      );
+    });
+
+    expect(
+      screen.getByRole('combobox', {
+        name: /search for a location/i,
+      }),
+    ).toBeInTheDocument();
+
+    const combo = screen.getByRole('combobox', {
+      name: /search for a location/i,
+    });
+    await userEvent.click(combo);
+
+    const locations = screen.getAllByRole('option');
+
+    expect(locations.length).toBe(4);
+    locations[0].setAttribute('name', inpatientWardLocation);
+    expect(locations[0].getAttribute('name')).toBe(inpatientWardLocation);
+  });
 });