@openmrs/esm-stock-management-app 1.0.1-pre.777 → 1.0.1-pre.785

package/src/stock-operations/stock-operations-forms/input-components/user-selector.test.tsx

@@ -0,0 +1,110 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useUser } from '../../../stock-lookups/stock-lookups.resource';
+import useSearchUser from '../hooks/useSearchUser';
+import UsersSelector from './users-selector.component';
+import { otherUser } from '../../../core/utils/utils';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../hooks/useSearchUser');
+jest.mock('../../../stock-lookups/stock-lookups.resource');
+jest.mock('react-hook-form', () => ({
+  useFormContext: jest.fn(),
+  Controller: ({ render }) => render({ field: {}, fieldState: {} }),
+}));
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
+}));
+
+const mockUseSearchUser = useSearchUser as jest.Mock;
+const mockUseUser = useUser as jest.Mock;
+const mockUseFormContext = useFormContext as jest.Mock;
+
+describe('UsersSelector', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseFormContext.mockReturnValue({
+      control: {},
+      watch: jest.fn().mockImplementation((field) => {
+        if (field === 'responsiblePersonUuid') return 'responsibleperson.uuid';
+        if (field === 'responsiblePersonOther') return 'responsiblepersonother.uuid';
+        return '';
+      }),
+      resetField: jest.fn(),
+    });
+  });
+
+  it('renders loading state', async () => {
+    mockUseSearchUser.mockReturnValue({ isLoading: true, userList: [], setSearchString: jest.fn() });
+    mockUseUser.mockReturnValue({ isLoading: true, data: null, error: null });
+
+    render(<UsersSelector />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders error state', () => {
+    const errorMessage = 'Error message';
+    mockUseSearchUser.mockReturnValue({ isLoading: false, userList: [], setSearchString: jest.fn() });
+    mockUseUser.mockReturnValue({ isLoading: false, data: null, error: new Error(errorMessage) });
+    render(<UsersSelector />);
+    expect(screen.getByText('responsiblePersonError')).toBeInTheDocument();
+    expect(screen.getByText(errorMessage)).toBeInTheDocument();
+  });
+
+  it('renders ComboBox with user list', async () => {
+    mockUseSearchUser.mockReturnValue({
+      isLoading: false,
+      userList: [
+        { uuid: '1', person: { display: 'User 1' } },
+        { uuid: '2', person: { display: 'User 2' } },
+      ],
+      setSearchString: jest.fn(),
+    });
+
+    mockUseUser.mockReturnValue({ isLoading: false, data: null, error: null });
+    render(<UsersSelector />);
+    expect(screen.getByText('responsiblePerson')).toBeInTheDocument();
+    const combobox = screen.getByRole('combobox');
+    fireEvent.click(combobox);
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+    expect(screen.getByText('User 2')).toBeInTheDocument();
+  });
+
+  it('renders TextInput for other user', async () => {
+    mockUseSearchUser.mockReturnValue({ isLoading: false, userList: [], setSearchString: jest.fn() });
+    mockUseFormContext.mockReturnValue({
+      control: {},
+      watch: jest.fn().mockImplementation((field) => {
+        if (field === 'responsiblePersonUuid') return otherUser.uuid;
+        if (field === 'responsiblePersonOther') return '';
+        return '';
+      }),
+      resetField: jest.fn(),
+    });
+    mockUseUser.mockReturnValue({ isLoading: false, data: null, error: null });
+
+    render(<UsersSelector />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('pleaseSpecify')).toBeInTheDocument();
+  });
+
+  it('calls setSearchString on input change after delay simulating debounce timout', async () => {
+    const setSearchString = jest.fn();
+    mockUseSearchUser.mockReturnValue({
+      isLoading: false,
+      userList: [],
+      setSearchString,
+    });
+
+    mockUseUser.mockReturnValue({ isLoading: false, data: null, error: null });
+
+    render(<UsersSelector />);
+    const combobox = screen.getByRole('combobox');
+    await userEvent.click(combobox);
+    await userEvent.type(combobox, 'test');
+    await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate debounce
+    expect(setSearchString).toHaveBeenCalledWith('test');
+  });
+});

package/src/stock-operations/stock-operations-forms/input-components/users-selector.component.tsx

@@ -0,0 +1,111 @@
+import { ComboBox, InlineNotification, SelectSkeleton } from '@carbon/react';
+import React, { useEffect } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { User } from '../../../core/api/types/identity/User';
+import { useDebounce } from '../../../core/hooks/debounce-hook';
+import { otherUser } from '../../../core/utils/utils';
+import { useUser } from '../../../stock-lookups/stock-lookups.resource';
+import useSearchUser from '../hooks/useSearchUser';
+import { Column } from '@carbon/react';
+import { TextInput } from '@carbon/react';
+
+const UsersSelector = () => {
+  const { isLoading, userList, setSearchString } = useSearchUser();
+  const { t } = useTranslation();
+  const debouncedSearch = useDebounce((query: string) => {
+    setSearchString(query);
+  }, 1000);
+
+  const form = useFormContext<{ responsiblePersonUuid: string; responsiblePersonOther: string }>();
+  const observableresponsiblePersonUuid = form.watch('responsiblePersonUuid');
+  const observableresponsiblePersonOther = form.watch('responsiblePersonOther');
+  const {
+    data,
+    isLoading: isLoadingUser,
+    error: userError,
+  } = useUser(observableresponsiblePersonUuid ?? null, 'custom:(uuid,display,person:(uuid,display))');
+  useEffect(() => {
+    // Whenever person uuid changes and not equal to other person, the other is reset to initial default value
+    if (observableresponsiblePersonUuid && observableresponsiblePersonUuid !== otherUser.uuid) {
+      form.resetField('responsiblePersonOther');
+    }
+  }, [observableresponsiblePersonUuid, form]);
+
+  if (isLoadingUser && observableresponsiblePersonUuid !== otherUser.uuid && observableresponsiblePersonUuid)
+    return <SelectSkeleton role="progressbar" />;
+
+  if (observableresponsiblePersonUuid && observableresponsiblePersonUuid !== otherUser.uuid && userError)
+    return (
+      <InlineNotification
+        lowContrast
+        title={t('responsiblePersonError', 'Error loading responsible person')}
+        subtitle={userError?.message}
+      />
+    );
+
+  return (
+    <React.Fragment>
+      <Column>
+        <Controller
+          name={'responsiblePersonUuid'}
+          control={form.control}
+          render={({ field, fieldState: { error } }) => (
+            <ComboBox
+              readOnly={field.disabled}
+              titleText={t('responsiblePerson', 'Responsible Person')}
+              name={'responsiblePersonUuid'}
+              id={'responsiblePersonUuid'}
+              size={'xl'}
+              items={[...(userList || []), otherUser]}
+              onChange={(data: { selectedItem: User }) => {
+                field.onChange(data.selectedItem?.uuid);
+              }}
+              initialSelectedItem={
+                field.value
+                  ? field.value === otherUser.uuid
+                    ? otherUser
+                    : data
+                  : observableresponsiblePersonOther && !observableresponsiblePersonUuid
+                  ? otherUser
+                  : ''
+              }
+              itemToString={(item) => item?.person?.display || ''}
+              onInputChange={debouncedSearch}
+              placeholder={t('filter', 'Filter ...')}
+              invalid={error?.message}
+              invalidText={error?.message}
+              ref={field.ref}
+            />
+          )}
+        />
+      </Column>
+      {(observableresponsiblePersonUuid === otherUser.uuid ||
+        (observableresponsiblePersonOther && !observableresponsiblePersonUuid)) && (
+        <Column>
+          <Controller
+            control={form.control}
+            name="responsiblePersonOther"
+            render={({ field, fieldState: { error } }) => (
+              <TextInput
+                {...field}
+                readOnly={field.disabled}
+                disabled={false}
+                id="responsiblePersonOther"
+                name="responsiblePersonOther"
+                size={'xl'}
+                labelText={t('responsiblePerson', 'Responsible Person')}
+                placeholder={t('pleaseSpecify', 'Please Specify')}
+                invalid={error?.message}
+                invalidText={error?.message}
+              />
+            )}
+          />
+        </Column>
+      )}
+    </React.Fragment>
+    // {isLoading && <InlineLoading status="active" iconDescription="Searching" description="Searching..." />}
+  );
+};
+
+export default UsersSelector;

package/src/stock-operations/stock-operations-forms/step1.test.tsx

@@ -0,0 +1,303 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { StockOperationType } from '../../core/api/types/stockOperation/StockOperationType';
+import { useStockOperationTypes } from '../../stock-lookups/stock-lookups.resource';
+import { useStockOperations } from '../stock-operations.resource';
+import useParties from './hooks/useParties';
+import StockOperationForm from './stock-operation-form.component';
+import { MAIN_STORE_LOCATION_TAG } from '../../constants';
+import {
+  adjustmentOpeationTypeMock,
+  disposalOperationTypeMock,
+  openingStockOperationTypeMock,
+  receiptOperationTypeMock,
+  requisitionOperationTypeMock,
+  returnOperationTypeMock,
+  stockIssueOperationtypeMock,
+  stockTakeOperationTypeMock,
+  tranferOutOperationTypeMock,
+} from '../../../__mocks__';
+jest.mock('react-i18next', () => ({
+  useTranslation: jest.fn().mockReturnValue({ t: (key) => key }),
+}));
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ActionMenu: jest.fn(() => null),
+  showSnackbar: jest.fn(),
+  useDebounce: jest.fn((x) => x),
+  getGlobalStore: jest.fn(() => ({
+    getState: jest.fn(),
+    subscribe: jest.fn(),
+    setState: jest.fn(),
+  })),
+  parseDate: jest.fn((date) => new Date(date)),
+  showNotification: jest.fn(),
+  usePagination: jest.fn(() => ({ currentPage: 1, setPage: jest.fn() })),
+  useSession: jest.fn(() => ({ user: { display: 'Test User' } })),
+  useConfig: jest.fn(),
+  ErrorState: jest.fn(({ error }: { error: any }) => <div>{error}</div>),
+  launchWorkspace: jest.fn(),
+}));
+
+jest.mock('../../stock-lookups/stock-lookups.resource', () => ({
+  useStockOperationTypes: jest.fn(),
+  useUsers: jest.fn().mockReturnValue({ items: { results: [] }, isLoading: false }),
+  useUser: jest.fn().mockReturnValue({ data: { display: 'Test User' }, isLoading: false, error: null }),
+  useConcept: jest.fn().mockReturnValue({ items: { answers: [] }, isLoading: false, error: null }),
+}));
+
+jest.mock('../stock-operations.resource', () => ({
+  operationStatusColor: jest.fn(() => 'some-color'),
+  getStockOperationLinks: jest.fn(),
+  useStockOperations: jest.fn().mockReturnValue({
+    items: { results: [] },
+    isLoading: false,
+    error: null,
+  }),
+  useStockOperation: jest.fn().mockReturnValue({
+    items: undefined,
+    isLoading: false,
+    error: null,
+  }),
+}));
+
+jest.mock('./hooks/useParties', () => jest.fn());
+
+describe('Stock Operation step 1 (baseoperation details)', () => {
+  beforeEach(() => {
+    const mockStockOperationTypes = { results: [] };
+    (useStockOperationTypes as jest.Mock).mockReturnValue(mockStockOperationTypes);
+    (useStockOperations as jest.Mock).mockReturnValue({ items: { results: [] }, isLoading: false, error: null });
+    (useConfig as jest.Mock).mockReturnValue({ autoPopulateResponsiblePerson: true });
+  });
+
+  it('should render loading state when loading  parties info', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: true,
+      error: null,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should render error state when parties loading fails', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: 'error',
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(screen.getByText('error')).toBeInTheDocument();
+  });
+
+  it('should have only next btn and not previous btn', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(screen.getByRole('button', { name: /next/i })).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /previous/i })).not.toBeInTheDocument();
+  });
+  it('should render operation type in title', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(screen.getByText(`${receiptOperationTypeMock.name} details`)).toBeInTheDocument();
+  });
+
+  it("should render combobox with 'from' name and 'chooseAsource' placeholder for receipt operation", async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    const sourceInput = screen.getByRole('combobox', {
+      name: (_, element) =>
+        element.getAttribute('placeholder') === 'chooseASource' && element.getAttribute('name') === 'sourceUuid',
+    });
+    expect(sourceInput).toBeInTheDocument();
+    expect(screen.getByLabelText('from')).toBeInTheDocument();
+  });
+  it("should render combobox with 'to' name and defaulted to 'main store' location in receipt operation", async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(screen.getByLabelText('to')).toBeInTheDocument();
+  });
+
+  it("should render combobox with 'destinationUuid' name and 'chooseADestination' placeholder", async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(
+      screen.getByRole('combobox', {
+        name: (_, element) =>
+          element.getAttribute('placeholder') === 'chooseADestination' &&
+          element.getAttribute('name') === 'destinationUuid',
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText('to')).toBeInTheDocument();
+  });
+  it("should render combobox with 'sourceUuid' name and 'chooseALocation' placeholder for disposal opertaion", async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={disposalOperationTypeMock as any} />);
+    expect(
+      screen.getByRole('combobox', {
+        name: (_, element) =>
+          element.getAttribute('placeholder') === 'chooseALocation' && element.getAttribute('name') === 'sourceUuid',
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByLabelText('location')).toBeInTheDocument();
+  });
+
+  it('should not render reason input field for receipt operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={receiptOperationTypeMock as any} />);
+    expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
+  });
+  it('should render reason input field for adjustment operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={adjustmentOpeationTypeMock as any} />);
+    expect(screen.getByLabelText(/.*reason.*/i)).toBeInTheDocument();
+  });
+  it('should not render reason input field for opening stock operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={openingStockOperationTypeMock as any} />);
+    expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
+  });
+  it('should not render reason input field for requisition operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={requisitionOperationTypeMock as any} />);
+    expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
+  });
+  it('should not render reason input field for return operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={returnOperationTypeMock as any} />);
+    expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
+  });
+  it('should not render reason input field for issue operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={stockIssueOperationtypeMock as any} />);
+    expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
+  });
+  it('should not render reason input field for tranfer out operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={tranferOutOperationTypeMock as any} />);
+    expect(screen.queryByLabelText(/.*reason.*/i)).not.toBeInTheDocument();
+  });
+  it('should render reason input field for disposal operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={disposalOperationTypeMock as any} />);
+    expect(screen.getByLabelText(/.*reason.*/i)).toBeInTheDocument();
+  });
+  it('should render reason input field for stock take operation', async () => {
+    (useParties as jest.Mock).mockReturnValue({
+      destinationParties: [],
+      sourceParties: [],
+      isLoading: false,
+      error: undefined,
+      sourceTags: [],
+      destinationTags: [],
+    });
+    render(<StockOperationForm stockOperationType={stockTakeOperationTypeMock as any} />);
+    expect(screen.getByLabelText(/.*reason.*/i)).toBeInTheDocument();
+  });
+});