@openmrs/esm-stock-management-app 3.0.1-pre.853 → 3.0.1-pre.855

package/src/stock-items/stock-items-table.test.tsx

@@ -1,13 +1,10 @@
 import React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor } from '@testing-library/react';
-import { type StockItemDTO } from '../core/api/types/stockItem/StockItem';
-import { handleMutate } from '../utils';
-import { launchAddOrEditStockItemWorkspace } from './stock-item.utils';
-import { useStockItemsPages } from './stock-items-table.resource';
 import StockItemsTableComponent from './stock-items-table.component';
-
-const mockUseStockItemsPages = jest.mocked(useStockItemsPages);
+import { useStockItemsPages } from './stock-items-table.resource';
+import { handleMutate } from '../utils';
+import { launchAddOrStockItemWorkspace } from './stock-item.utils';
 
 jest.mock('./stock-items-table.resource', () => ({
   useStockItemsPages: jest.fn(),
@@ -18,146 +15,109 @@ jest.mock('../utils', () => ({
 }));
 
 jest.mock('./stock-item.utils', () => ({
-  launchAddOrEditStockItemWorkspace: jest.fn(),
+  launchAddOrStockItemWorkspace: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
 }));
 
 describe('StockItemsTableComponent', () => {
+  const mockUseStockItemsPages = {
+    isLoading: false,
+    items: Array(25)
+      .fill(null)
+      .map((_, index) => ({
+        uuid: `item-${index}`,
+        commonName: `Test Item ${index}`,
+        drugUuid: index % 2 === 0 ? `drug-${index}` : null,
+        conceptName: `Concept ${index}`,
+        dispensingUnitName: `Unit ${index}`,
+        defaultStockOperationsUoMName: `UoM ${index}`,
+        reorderLevel: index * 10,
+        reorderLevelUoMName: 'Units',
+      })),
+    totalCount: 25,
+    currentPageSize: 10,
+    setPageSize: jest.fn(),
+    pageSizes: [10, 20, 30],
+    currentPage: 1,
+    setCurrentPage: jest.fn(),
+    isDrug: '',
+    setDrug: jest.fn(),
+    setSearchString: jest.fn(),
+  };
+
   beforeEach(() => {
-    mockUseStockItemsPages.mockReturnValue({
-      isLoading: false,
-      items: Array(25)
-        .fill(null)
-        .map((_, index) => ({
-          uuid: `item-${index}`,
-          commonName: `Test Item ${index}`,
-          drugUuid: index % 2 === 0 ? `drug-${index}` : null,
-          conceptName: `Concept ${index}`,
-          dispensingUnitName: `Unit ${index}`,
-          defaultStockOperationsUoMName: `UoM ${index}`,
-          reorderLevel: index * 10,
-          reorderLevelUoMName: 'Units',
-        })) as StockItemDTO[],
-      pagination: {
-        results: [],
-        totalPages: 3,
-        currentPage: 1,
-        paginated: true,
-        showNextButton: true,
-        showPreviousButton: false,
-        goTo: jest.fn(),
-        goToNext: jest.fn(),
-        goToPrevious: jest.fn(),
-      },
-      error: null,
-      totalCount: 25,
-      currentPageSize: 10,
-      setPageSize: jest.fn(),
-      pageSizes: [10, 20, 30],
-      currentPage: 1,
-      setCurrentPage: jest.fn(),
-      isDrug: '',
-      setDrug: jest.fn(),
-      setSearchString: jest.fn(),
-    });
+    jest.clearAllMocks();
+    (useStockItemsPages as jest.Mock).mockReturnValue(mockUseStockItemsPages);
   });
 
   it('renders initial state and UI elements correctly', async () => {
+    render(<StockItemsTableComponent />);
+    expect(screen.getByText('panelDescription')).toBeInTheDocument();
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+
     const user = userEvent.setup();
+    const menuButton = screen.getByTestId('stock-items-menu');
+    await user.click(menuButton);
 
-    render(<StockItemsTableComponent />);
+    await screen.findByText('Refresh');
 
-    expect(screen.getByRole('radio', { name: /all/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /^pharmaceuticals$/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /non pharmaceuticals/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /import/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /settings/i })).toBeInTheDocument();
-    expect(screen.getByRole('searchbox', { name: /filter table/i })).toBeInTheDocument();
-
-    const settingsMenuButton = screen.getByRole('button', { name: /settings/i });
-    await user.click(settingsMenuButton);
-    await screen.findByText(/refresh/i);
-
-    expect(screen.getByRole('button', { name: /generic name/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /common name/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /dispensing uom/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /bulk packaging/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /reorder level/i })).toBeInTheDocument();
+    expect(screen.getByText('type')).toBeInTheDocument();
+    expect(screen.getByText('genericName')).toBeInTheDocument();
+    expect(screen.getByText('commonName')).toBeInTheDocument();
   });
 
   it('displays skeleton loader when isLoading is true', () => {
-    mockUseStockItemsPages.mockReturnValue({
-      ...mockUseStockItemsPages,
-      isLoading: true,
-      items: [],
-      pagination: undefined,
-      totalCount: 0,
-      currentPageSize: 0,
-      currentPage: 0,
-      setCurrentPage: function (value: React.SetStateAction<number>): void {
-        throw new Error('Function not implemented.');
-      },
-      setPageSize: function (value: React.SetStateAction<number>): void {
-        throw new Error('Function not implemented.');
-      },
-      pageSizes: [],
-      error: undefined,
-      isDrug: '',
-      setDrug: undefined,
-      setSearchString: function (value: any): void {
-        throw new Error('Function not implemented.');
-      },
-    });
-
+    (useStockItemsPages as jest.Mock).mockReturnValue({ ...mockUseStockItemsPages, isLoading: true });
     render(<StockItemsTableComponent />);
-
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   it('renders table rows correctly based on items prop', () => {
     render(<StockItemsTableComponent />);
-
-    expect(screen.getByRole('cell', { name: /test item 0/i })).toBeInTheDocument();
-    expect(screen.getAllByRole('cell', { name: /drug/i }).length).toBeGreaterThan(0);
-    expect(screen.getAllByRole('cell', { name: /other/i }).length).toBeGreaterThan(0);
+    expect(screen.getByText('Test Item 0')).toBeInTheDocument();
+    expect(screen.getAllByText('drug').length).toBeGreaterThan(0);
+    expect(screen.getAllByText('other').length).toBeGreaterThan(0);
   });
 
   it('updates search input and triggers search function', async () => {
-    const user = userEvent.setup();
-
     render(<StockItemsTableComponent />);
-
+    const user = userEvent.setup();
     const searchInput = screen.getByRole('searchbox');
     await user.type(searchInput, 'test search');
     await waitFor(
       () => {
-        expect(mockUseStockItemsPages().setSearchString).toHaveBeenCalledWith('test search');
+        expect(mockUseStockItemsPages.setSearchString).toHaveBeenCalledWith('test search');
       },
       { timeout: 2000 },
     );
   });
 
   it('updates pagination when page or page size changes', async () => {
-    const user = userEvent.setup();
     render(<StockItemsTableComponent />);
-
-    const nextPageButton = screen.getByLabelText(/next page/i);
+    const user = userEvent.setup();
+    const nextPageButton = screen.getByLabelText('Next page');
     await user.click(nextPageButton);
-    expect(mockUseStockItemsPages().setCurrentPage).toHaveBeenCalled();
+    expect(mockUseStockItemsPages.setCurrentPage).toHaveBeenCalled();
 
-    const pageSizeSelect = screen.getByLabelText(/items per page/i);
+    const pageSizeSelect = screen.getByLabelText('Items per page:');
     await user.selectOptions(pageSizeSelect, '20');
-    expect(mockUseStockItemsPages().setPageSize).toHaveBeenCalledWith(20);
+    expect(mockUseStockItemsPages.setPageSize).toHaveBeenCalledWith(20);
   });
 
   it('triggers handleRefresh when refresh button is clicked', async () => {
-    const user = userEvent.setup();
     render(<StockItemsTableComponent />);
 
+    const user = userEvent.setup();
     const menuButton = screen.getByTestId('stock-items-menu');
     expect(menuButton).toBeInTheDocument();
     await user.click(menuButton);
 
-    const refreshButton = await screen.findByText(/refresh/i);
+    const refreshButton = await screen.findByText('Refresh');
     expect(refreshButton).toBeInTheDocument();
     await user.click(refreshButton);
     await waitFor(() => {
@@ -165,14 +125,13 @@ describe('StockItemsTableComponent', () => {
     });
   });
 
-  it('triggers launchAddOrEditStockItemWorkspace when edit button is clicked', async () => {
-    const user = userEvent.setup();
+  it('triggers launchAddOrEditDialog when edit button is clicked', async () => {
     render(<StockItemsTableComponent />);
-
-    const editButtons = screen.getAllByLabelText(/edit stock item/i);
+    const user = userEvent.setup();
+    const editButtons = screen.getAllByLabelText('Edit Stock Item');
     await user.click(editButtons[0]);
 
-    expect(launchAddOrEditStockItemWorkspace).toHaveBeenCalledWith(
+    expect(launchAddOrStockItemWorkspace).toHaveBeenCalledWith(
       expect.any(Function),
       expect.objectContaining({ uuid: 'item-0' }),
     );

package/src/stock-locations/location-admin-form.component.tsx

@@ -5,20 +5,19 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import {
   Button,
   ComposedModal,
-  FilterableMultiSelect,
   FormGroup,
-  InlineNotification,
   ModalBody,
   ModalFooter,
   ModalHeader,
   Stack,
   TextInput,
+  InlineNotification,
+  FilterableMultiSelect,
 } from '@carbon/react';
-import { getCoreTranslation } from '@openmrs/esm-framework';
 import { useTranslation } from 'react-i18next';
 import { type locationData } from '../stock-items/types';
-import { useLocationTags } from './stock-locations-table.resource';
 import styles from './stock-locations-table.scss';
+import { useLocationTags } from './stock-locations-table.resource';
 
 const LocationAdministrationSchema = z.object({
   name: z.string().max(255),
@@ -147,7 +146,7 @@ const LocationAdministrationForm: React.FC<LocationAdministrationFormProps> = ({
         </ModalBody>
         <ModalFooter>
           <Button onClick={() => onModalChange(false)} kind="secondary">
-            {getCoreTranslation('cancel')}
+            {t('cancel', 'Cancel')}
           </Button>
           <Button disabled={!isDirty} type="submit">
             <span>{t('save', 'Save')}</span>

package/src/stock-locations/stock-locations-table.component.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useStockLocationPages } from './stock-locations-table.resource';
 import {
   Button,
   DataTableSkeleton,
@@ -7,16 +8,15 @@ import {
   TableToolbarSearch,
   Tile,
 } from '@carbon/react';
-import { Add } from '@carbon/react/icons';
-import { useTranslation } from 'react-i18next';
-import { mutate } from 'swr';
-import { restBaseUrl } from '@openmrs/esm-framework';
-import { handleMutate } from '../utils';
+import styles from '../stock-items/stock-items-table.scss';
 import { ResourceRepresentation } from '../core/api/api';
-import { useStockLocationPages } from './stock-locations-table.resource';
 import DataList from '../core/components/table/table.component';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
 import NewLocationForm from './add-locations-form.workspace';
-import styles from '../stock-items/stock-items-table.scss';
+import { Add } from '@carbon/react/icons';
+import { handleMutate } from '../utils';
+import { restBaseUrl } from '@openmrs/esm-framework';
 
 interface StockLocationsTableProps {
   status?: string;
@@ -46,9 +46,7 @@ const StockLocationsItems: React.FC<StockLocationsTableProps> = () => {
           <>
             <TableToolbarSearch persistent onChange={onInputChange} />
             <TableToolbarMenu>
-              <TableToolbarAction className={styles.toolbarMenuAction} onClick={handleRefresh}>
-                {t('refresh', 'Refresh')}
-              </TableToolbarAction>
+              <TableToolbarAction onClick={handleRefresh}>Refresh</TableToolbarAction>
             </TableToolbarMenu>
             {showLocationModal ? (
               <NewLocationForm onModalChange={setAddLocationModal} showModal={showLocationModal} mutate={mutate} />

package/src/stock-lookups/stock-lookups.resource.ts

@@ -190,10 +190,9 @@ export function useConcept(conceptUuid: string) {
       data: Concept;
     },
     Error
-  >(conceptUuid ? apiUrl : null, openmrsFetch);
-
+  >(apiUrl, openmrsFetch);
   return {
-    items: data?.data,
+    items: data?.data || <Concept>{},
     isLoading,
     error,
   };

package/src/stock-operations/stock-operations-dialog/stock-operations-dialog.component.tsx

@@ -8,7 +8,7 @@ import {
   type StopOperationActionType,
 } from '../../core/api/types/stockOperation/StockOperationAction';
 import { executeStockOperationAction } from '../stock-operations.resource';
-import { getCoreTranslation, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
 import { closeOverlay } from '../../core/components/overlay/hook';
 import { extractErrorMessagesFromResponse } from '../../constants';
 import { handleMutate } from '../../utils';
@@ -135,7 +135,7 @@ const StockOperationDialog: React.FC<StockOperationDialogProps> = ({ title, requ
         </ModalBody>
         <ModalFooter>
           <Button kind="secondary" onClick={closeModal}>
-            {getCoreTranslation('cancel')}
+            {t('cancel', 'Cancel')}
           </Button>
           {isApproving ? <InlineLoading /> : <Button type="submit">{t('submit', 'Submit')}</Button>}
         </ModalFooter>

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

@@ -1,10 +1,10 @@
+import { ComboBox, SelectSkeleton } from '@carbon/react';
 import React, { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ComboBox, SelectSkeleton } from '@carbon/react';
 import { type StockBatchDTO } from '../../../core/api/types/stockItem/StockBatchDTO';
-import { formatForDatePicker } from '../../../constants';
 import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
 import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
+import { formatForDatePicker } from '../../../constants';
 
 interface BatchNoSelectorProps {
   stockItemUuid: string;
@@ -48,23 +48,23 @@ const BatchNoSelector: React.FC<BatchNoSelectorProps> = ({ stockItemUuid, error,
 
   return (
     <ComboBox
+      style={{ flexGrow: '1' }}
+      titleText={t('batchNo', 'Batch')}
+      name={'stockBatchUuid'}
       id={'stockBatchUuid'}
-      invalid={!!error}
-      invalidText={error}
       items={filteredBatches || []}
+      onChange={(data: { selectedItem?: StockBatchDTO }) => {
+        onValueChange(data.selectedItem?.uuid);
+      }}
+      selectedItem={initialSelectedItem}
       itemToString={(s: StockBatchDTO) =>
         s?.batchNo
           ? `${s?.batchNo} | Qty: ${s?.quantity ?? 'Unknown'} | Expiry: ${formatForDatePicker(s.expiration)}`
           : ''
       }
-      name={'stockBatchUuid'}
-      onChange={(data: { selectedItem?: StockBatchDTO }) => {
-        onValueChange(data.selectedItem?.uuid);
-      }}
       placeholder={t('filter', "'Filter") + '...'}
-      selectedItem={initialSelectedItem}
-      style={{ flexGrow: '1' }}
-      titleText={t('batchNo', 'Batch no.')}
+      invalid={error}
+      invalidText={error}
     />
   );
 };

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

@@ -1,127 +1,64 @@
-import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { type StockBatchDTO } from '../../../core/api/types/stockItem/StockBatchDTO';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
 import { type StockItemInventory } from '../../../core/api/types/stockItem/StockItemInventory';
-import { formatForDatePicker } from '../../../constants';
 import { useStockItemBatchInformationHook } from '../../../stock-items/add-stock-item/batch-information/batch-information.resource';
 import { useStockItemBatchNumbers } from '../hooks/useStockItemBatchNumbers';
 import BatchNoSelector from './batch-no-selector.component';
+import { formatForDatePicker } from '../../../constants';
 
-jest.mock('../hooks/useStockItemBatchNumbers', () => ({
-  useStockItemBatchNumbers: jest.fn(),
-}));
-
-jest.mock('../../../stock-items/add-stock-item/batch-information/batch-information.resource', () => ({
-  useStockItemBatchInformationHook: jest.fn(),
+jest.mock('../hooks/useStockItemBatchNumbers');
+jest.mock('../../../stock-items/add-stock-item/batch-information/batch-information.resource');
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({ t: (key: string) => key }),
 }));
 
-const mockUseStockItemBatchNumbers = jest.mocked(useStockItemBatchNumbers);
-const mockUseStockItemBatchInformationHook = jest.mocked(useStockItemBatchInformationHook);
+const mockUseStockItemBatchNumbers = useStockItemBatchNumbers as jest.Mock;
+const mockUseStockItemBatchInformationHook = useStockItemBatchInformationHook as jest.Mock;
 
 describe('BatchNoSelector', () => {
   const mockOnValueChange = jest.fn();
   const mockStockItemUuid = 'test-uuid';
   const mockExpiration = new Date();
-
   beforeEach(() => {
+    jest.clearAllMocks();
+
     mockUseStockItemBatchNumbers.mockReturnValue({
       isLoading: false,
       stockItemBatchNos: [
-        {
-          uuid: '1',
-          batchNo: 'BATCH-001',
-          quantity: '10',
-          expiration: mockExpiration,
-          stockItemUuid: 'item1',
-          voided: false,
-        },
-        {
-          uuid: '2',
-          batchNo: 'BATCH-002',
-          quantity: '20',
-          expiration: mockExpiration,
-          stockItemUuid: 'item2',
-          voided: false,
-        },
+        { uuid: '1', batchNo: 'BATCH-001', quantity: 10, expiration: mockExpiration },
+        { uuid: '2', batchNo: 'BATCH-002', quantity: 20, expiration: mockExpiration },
       ],
-      setLimit: jest.fn(),
-      setRepresentation: jest.fn(),
-      setSearchString: jest.fn(),
     });
-
     mockUseStockItemBatchInformationHook.mockReturnValue({
       items: [
         { batchNumber: 'BATCH-001', quantity: 10 },
         { batchNumber: 'BATCH-002', quantity: 20 },
       ] as StockItemInventory[],
-      totalCount: 2,
-      currentPage: 1,
-      currentPageSize: 10,
-      setCurrentPage: jest.fn(),
-      setStockBatchUuid: jest.fn(),
       setStockItemUuid: jest.fn(),
-      setPageSize: jest.fn(),
-      pageSizes: [10, 20, 50],
-      isLoading: false,
-      error: null,
-      setLocationUuid: jest.fn(),
-      setPartyUuid: jest.fn(),
-      setSearchString: jest.fn(),
     });
   });
 
-  it('should render a loading skeleton when "isLoading" is true', () => {
-    mockUseStockItemBatchNumbers.mockReturnValue({
-      isLoading: true,
-      stockItemBatchNos: [] as StockBatchDTO[],
-      setLimit: jest.fn(),
-      setRepresentation: jest.fn(),
-      setSearchString: jest.fn(),
-    });
-
-    mockUseStockItemBatchInformationHook.mockReturnValue({
-      isLoading: true,
-      items: [],
-      setStockItemUuid: jest.fn(),
-      totalCount: 0,
-      currentPage: 1,
-      currentPageSize: 10,
-      setCurrentPage: jest.fn(),
-      setStockBatchUuid: jest.fn(),
-      setPageSize: jest.fn(),
-      pageSizes: [10, 20, 50],
-      error: null,
-      setLocationUuid: jest.fn(),
-      setPartyUuid: jest.fn(),
-      setSearchString: jest.fn(),
-    });
-
+  it('should render loading skeleton when isLoading is true', () => {
+    mockUseStockItemBatchNumbers.mockReturnValue({ isLoading: true, stockItemBatchNos: [] });
+    mockUseStockItemBatchInformationHook.mockReturnValue({ isLoading: true, items: [], setStockItemUuid: jest.fn() });
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
-
     expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
-  it('should render a combobox with batch numbers', async () => {
+  it('should render combobox with batch numbers', async () => {
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
-
     expect(screen.getByRole('combobox')).toBeInTheDocument();
-    expect(screen.getByText(/batch no./i)).toBeInTheDocument();
+    expect(screen.getByText('batchNo')).toBeInTheDocument();
   });
 
   it('should handle batch selection', async () => {
-    const user = userEvent.setup();
-
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
-
     const combobox = screen.getByRole('combobox');
-    await user.click(combobox);
-    await user.type(combobox, 'BATCH-001');
-
+    await userEvent.click(combobox);
+    await userEvent.type(combobox, 'BATCH-001');
     const option = screen.getByText(`BATCH-001 | Qty: 10 | Expiry: ${formatForDatePicker(mockExpiration)}`);
-
-    await user.click(option);
-
+    await userEvent.click(option);
     expect(mockOnValueChange).toHaveBeenCalledWith('1');
   });
 
@@ -134,45 +71,18 @@ describe('BatchNoSelector', () => {
   });
 
   it('should filter out batches with zero or undefined quantity', async () => {
-    const user = userEvent.setup();
-
     mockUseStockItemBatchNumbers.mockReturnValue({
       isLoading: false,
       stockItemBatchNos: [
-        {
-          uuid: '1',
-          batchNo: 'BATCH-001',
-          quantity: '10',
-          expiration: mockExpiration,
-          stockItemUuid: 'item1',
-          voided: false,
-        },
-        {
-          uuid: '2',
-          batchNo: 'BATCH-002',
-          quantity: '0',
-          expiration: mockExpiration,
-          stockItemUuid: 'item2',
-          voided: false,
-        },
-        {
-          uuid: '3',
-          batchNo: 'BATCH-003',
-          quantity: undefined,
-          expiration: mockExpiration,
-          stockItemUuid: 'item3',
-          voided: false,
-        },
+        { uuid: '1', batchNo: 'BATCH-001', quantity: 10 },
+        { uuid: '2', batchNo: 'BATCH-002', quantity: 0 },
+        { uuid: '3', batchNo: 'BATCH-003', quantity: undefined },
       ],
-      setLimit: jest.fn(),
-      setRepresentation: jest.fn(),
-      setSearchString: jest.fn(),
     });
 
     render(<BatchNoSelector stockItemUuid={mockStockItemUuid} onValueChange={mockOnValueChange} />);
-
     const combobox = screen.getByRole('combobox');
-    await user.click(combobox);
+    await userEvent.click(combobox);
 
     expect(screen.queryByText('BATCH-002')).not.toBeInTheDocument();
     expect(screen.queryByText('BATCH-003')).not.toBeInTheDocument();