Remove comments and change from fireEvent to userEvent

openmrs · Oct 18, 2024 · e2f1678 · e2f1678
1 parent 0aba4d1
commit e2f1678
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 75 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -23,7 +23,7 @@ moduleNameMapper: {
   '^lodash-es/(.*)$': 'lodash/$1',
   'lodash-es': 'lodash',
   '^dexie$': require.resolve('dexie'),
-  '^@testing-library/jest-dom/extend-expect$': '@testing-library/jest-dom', // <-- Add this line
+  '^@testing-library/jest-dom/extend-expect$': '@testing-library/jest-dom',
 },
   setupFilesAfterEnv: ['<rootDir>/src/setup-tests.ts'],
   testPathIgnorePatterns: [path.resolve(__dirname, 'e2e')],

diff --git a/src/components/interactive-builder/add-columns-modal.component.test.tsx b/src/components/interactive-builder/add-columns-modal.component.test.tsx
@@ -116,11 +116,11 @@ const mockProps = {
     launchOptions: { displayText: 'Launch Tab 1' },
     formList: [],
   },
-  definitionType: DefinitionTypes.TAB_DEFINITION, // Use the enum value
+  definitionType: DefinitionTypes.TAB_DEFINITION,
 };
 
 describe('ConfigureDashboardModal', () => {
-  const user = userEvent.setup(); // Initialize userEvent
+  const user = userEvent.setup();
 
   it('renders without crashing', () => {
     render(<ConfigureDashboardModal {...mockProps} />);

diff --git a/src/components/interactive-builder/add-columns-modal.component.tsx b/src/components/interactive-builder/add-columns-modal.component.tsx
@@ -92,8 +92,6 @@ const ConfigureDashboardModal: React.FC<ConfigureDashboardModalProps> = ({
         },
       };
       onSchemaChange(updatedSchema);
-
-      // Show success notification
       setColumnTitle('');
       setColumnConcept('');
       setIsColumnDate(false);
@@ -218,20 +216,20 @@ const ConfigureDashboardModal: React.FC<ConfigureDashboardModalProps> = ({
                 name="isDate"
                 orientation="horizontal"
                 legendText={t('isDate', 'Is date')}
-                defaultSelected={isColumnDate ? 'true' : 'false'} // Cast boolean to string
-                onChange={(value) => setIsColumnDate(value === 'true')} // Convert string back to boolean
+                defaultSelected={isColumnDate ? 'true' : 'false'}
+                onChange={(value) => setIsColumnDate(value === 'true')}
               >
                 <RadioButton
                   className={styles.radioButton}
                   id="isDateTrue"
                   labelText={t('true', 'True')}
-                  value="true" // Value as string
+                  value="true"
                 />
                 <RadioButton
                   className={styles.radioButton}
                   id="isDateFalse"
                   labelText={t('false', 'False')}
-                  value="false" // Value as string
+                  value="false"
                 />
               </RadioButtonGroup>
 
@@ -240,20 +238,20 @@ const ConfigureDashboardModal: React.FC<ConfigureDashboardModalProps> = ({
                 orientation="horizontal"
                 legendText={t('isLink', 'Is link')}
                 className={styles.label}
-                defaultSelected={isColumnLink ? 'true' : 'false'} // Cast boolean to string
-                onChange={(value) => setIsColumnLink(value === 'true')} // Convert string back to boolean
+                defaultSelected={isColumnLink ? 'true' : 'false'}
+                onChange={(value) => setIsColumnLink(value === 'true')}
               >
                 <RadioButton
                   className={styles.radioButton}
                   id="isLinkTrue"
                   labelText={t('true', 'True')}
-                  value="true" // Value as string
+                  value="true"
                 />
                 <RadioButton
                   className={styles.radioButton}
                   id="isLinkFalse"
                   labelText={t('false', 'False')}
-                  value="false" // Value as string
+                  value="false"
                 />
               </RadioButtonGroup>
             </FormGroup>

diff --git a/src/components/interactive-builder/add-package-modal.component.test.tsx b/src/components/interactive-builder/add-package-modal.component.test.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
 import PackageModal from './add-package-modal.component';
 import type { Schema } from '../../types';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('react-i18next', () => ({
   useTranslation: jest.fn(),
@@ -57,31 +58,34 @@ describe('PackageModal', () => {
     expect(screen.getByText('save')).toBeInTheDocument();
   });
 
-  it('updates key when title changes', () => {
+  it('updates key when title changes', async () => {
+    const user = userEvent.setup();
     render(<PackageModal closeModal={closeModal} schema={schema} onSchemaChange={onSchemaChange} />);
 
-    fireEvent.change(screen.getByLabelText('enterClinicalViewTitle'), { target: { value: 'New Title' } });
+    await user.type(screen.getByLabelText('enterClinicalViewTitle'), 'New Title');
 
     expect(mockToCamelCase).toHaveBeenCalledWith('New Title');
   });
 
-  it('shows error when slot name is invalid', () => {
+  it('shows error when slot name is invalid', async () => {
     mockIsValidSlotName.mockReturnValue(false);
+    const user = userEvent.setup();
 
     render(<PackageModal closeModal={closeModal} schema={schema} onSchemaChange={onSchemaChange} />);
 
-    fireEvent.change(screen.getByLabelText('enterSlotName'), { target: { value: 'Invalid Slot Name' } });
+    await user.type(screen.getByLabelText('enterSlotName'), 'Invalid Slot Name');
 
     expect(screen.getByText('invalidSlotName')).toBeInTheDocument();
   });
 
-  it('calls updatePackages and closeModal on save', () => {
+  it('calls updatePackages and closeModal on save', async () => {
+    const user = userEvent.setup();
     render(<PackageModal closeModal={closeModal} schema={schema} onSchemaChange={onSchemaChange} />);
 
-    fireEvent.change(screen.getByLabelText('enterClinicalViewTitle'), { target: { value: 'New Title' } });
-    fireEvent.change(screen.getByLabelText('enterSlotName'), { target: { value: 'valid-slot-name' } });
+    await user.type(screen.getByLabelText('enterClinicalViewTitle'), 'New Title');
+    await user.type(screen.getByLabelText('enterSlotName'), 'valid-slot-name');
 
-    fireEvent.click(screen.getByText('save'));
+    await user.click(screen.getByText('save'));
 
     expect(onSchemaChange).toHaveBeenCalled();
     expect(closeModal).toHaveBeenCalled();
@@ -93,17 +97,18 @@ describe('PackageModal', () => {
     });
   });
 
-  it('shows error snackbar on updatePackages error', () => {
+  it('shows error snackbar on updatePackages error', async () => {
+    const user = userEvent.setup();
     onSchemaChange.mockImplementation(() => {
       throw new Error('Test error');
     });
 
     render(<PackageModal closeModal={closeModal} schema={schema} onSchemaChange={onSchemaChange} />);
 
-    fireEvent.change(screen.getByLabelText('enterClinicalViewTitle'), { target: { value: 'New Title' } });
-    fireEvent.change(screen.getByLabelText('enterSlotName'), { target: { value: 'valid-slot-name' } });
+    await user.type(screen.getByLabelText('enterClinicalViewTitle'), 'New Title');
+    await user.type(screen.getByLabelText('enterSlotName'), 'valid-slot-name');
 
-    fireEvent.click(screen.getByText('save'));
+    await user.click(screen.getByText('save'));
 
     expect(mockShowSnackbar).toHaveBeenCalledWith({
       title: 'errorCreatingPackage',

diff --git a/src/components/interactive-builder/add-submenu-modal.component.test.tsx b/src/components/interactive-builder/add-submenu-modal.component.test.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { useTranslation } from 'react-i18next';
 import { showSnackbar } from '@openmrs/esm-framework';
 import NewSubMenuModal from './add-submenu-modal.component';
 import { type Schema } from '../../types';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('react-i18next', () => ({
   useTranslation: jest.fn(),
@@ -26,7 +27,7 @@ describe('NewSubMenuModal', () => {
           configure: {
             'nav-group#example': {
               slotName: 'example-slot',
-              title: 'Example Title', // Add the missing title property here
+              title: 'Example Title',
             },
           },
         },
@@ -61,7 +62,7 @@ describe('NewSubMenuModal', () => {
           'patient-chart-dashboard-slot': {
             add: [],
             configure: {},
-          }, // Add 'patient-chart-dashboard-slot' here, even if it's empty
+          },
         },
       },
     };
@@ -78,12 +79,12 @@ describe('NewSubMenuModal', () => {
   });
 
   it('updates schema and shows success snackbar on valid input', async () => {
+    const user = userEvent.setup();
     render(<NewSubMenuModal schema={schema} onSchemaChange={onSchemaChange} closeModal={closeModal} />);
 
-    fireEvent.change(screen.getByLabelText('programIdentifier'), { target: { value: 'Hiv Care and Treatment' } });
-    fireEvent.change(screen.getByLabelText('menuName'), { target: { value: 'Patient Summary' } });
-
-    fireEvent.click(screen.getByText('createSubMenu'));
+    await user.type(screen.getByLabelText('programIdentifier'), 'Hiv Care and Treatment');
+    await user.type(screen.getByLabelText('menuName'), 'Patient Summary');
+    await user.click(screen.getByText('createSubMenu'));
 
     await waitFor(() => {
       expect(onSchemaChange).toHaveBeenCalled();
@@ -100,9 +101,8 @@ describe('NewSubMenuModal', () => {
   it('disables create button if inputs are empty', () => {
     render(<NewSubMenuModal schema={schema} onSchemaChange={onSchemaChange} closeModal={closeModal} />);
 
-    // Find the button by its role instead of using getByText
     const createButton = screen.getByRole('button', { name: 'createSubMenu' });
 
-    expect(createButton).toBeDisabled(); // This should now work as you're targeting the actual button
+    expect(createButton).toBeDisabled();
   });
 });
diff --git a/src/components/interactive-builder/delete-config-detail-modal.component.test.tsx b/src/components/interactive-builder/delete-config-detail-modal.component.test.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import DeleteConfigDetailModal from './delete-config-detail-modal.component';
-import { showSnackbar } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
 import { WidgetTypes } from '../../types';
+import userEvent from '@testing-library/user-event';
 
 jest.mock('@openmrs/esm-framework', () => ({
   showSnackbar: jest.fn(),
@@ -27,12 +26,12 @@ const mockProps = {
         'patient-chart-dashboard-slot': {
           configure: {
             configKey1: {
-              title: 'Sample Title', // Required property
-              slotName: 'sample-slot', // Required property
-              isExpanded: true, // Optional
+              title: 'Sample Title',
+              slotName: 'sample-slot',
+              isExpanded: true,
               tabDefinitions: [
                 {
-                  id: 'tab1', // Add id property here
+                  id: 'tab1',
                   tabName: 'tab1',
                   headerTitle: 'Header 1',
                   displayText: 'Tab 1',
@@ -48,8 +47,8 @@ const mockProps = {
         slot1: {
           configure: {
             configKey1: {
-              title: 'Another Title', // Add required title here
-              slotName: 'slot1', // Add required slotName here
+              title: 'Another Title',
+              slotName: 'slot1',
               widgetType1: [{ tabName: 'tab1' }],
             },
           },
@@ -59,22 +58,22 @@ const mockProps = {
   },
   onSchemaChange: mockOnSchemaChange,
   slotDetails: {
-    title: 'Sample Slot Title', // Required by DashboardConfig
-    path: 'sample/slot/path', // Required by DashboardConfig
-    slot: 'slot1', // Slot identifier
+    title: 'Sample Slot Title',
+    path: 'sample/slot/path',
+    slot: 'slot1',
   },
   tabDefinition: {
-    id: 'tab1', // Add required id
+    id: 'tab1',
     tabName: 'tab1',
     headerTitle: 'Header 1',
-    displayText: 'Tab 1', // Add required displayText
-    encounterType: 'encounter1', // Add required encounterType
-    columns: [], // Add required columns
-    launchOptions: { displayText: 'Launch' }, // Add required launchOptions
-    formList: [], // Add required formList
+    displayText: 'Tab 1',
+    encounterType: 'encounter1',
+    columns: [],
+    launchOptions: { displayText: 'Launch' },
+    formList: [],
   },
   configurationKey: 'configKey1',
-  widgetType: WidgetTypes.ENCOUNTER_LIST_TABLE_TABS, // Updated to match WidgetTypes
+  widgetType: WidgetTypes.ENCOUNTER_LIST_TABLE_TABS,
 };
 
 describe('DeleteConfigDetailModal', () => {
@@ -87,10 +86,11 @@ describe('DeleteConfigDetailModal', () => {
     expect(screen.getByText('headerTitle : Header 1')).toBeInTheDocument();
   });
 
-  it('calls closeModal when cancel button is clicked', () => {
+  it('calls closeModal when cancel button is clicked', async () => {
+    const user = userEvent.setup();
     render(<DeleteConfigDetailModal {...mockProps} />);
 
-    fireEvent.click(screen.getByText('cancel'));
+    await user.click(screen.getByText('cancel'));
     expect(mockCloseModal).toHaveBeenCalled();
   });
 });
diff --git a/src/components/interactive-builder/edit-tab-definition-modal.test.tsx b/src/components/interactive-builder/edit-tab-definition-modal.test.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
 import EditTabDefinitionModal from './edit-tab-definition-modal';
+import userEvent from '@testing-library/user-event';
 
-const renderWithI18n = (ui) => {
+const renderWithI18n = (ui: React.ReactElement) => {
   return render(<I18nextProvider i18n={i18n}>{ui}</I18nextProvider>);
 };
 
@@ -27,15 +28,19 @@ describe('EditTabDefinitionModal', () => {
     expect(getByLabelText('Header Title')).toHaveValue('Initial Header');
   });
 
-  it('calls onSave with updated values', () => {
+  it('calls onSave with updated values', async () => {
+    const user = userEvent.setup();
     const { getByLabelText, getByText } = renderWithI18n(
       <EditTabDefinitionModal tabDefinition={tabDefinition} onSave={mockOnSave} onCancel={mockOnCancel} />,
     );
 
-    fireEvent.change(getByLabelText('Tab Name'), { target: { value: 'Updated Tab' } });
-    fireEvent.change(getByLabelText('Header Title'), { target: { value: 'Updated Header' } });
+    await user.clear(getByLabelText('Tab Name'));
+    await user.type(getByLabelText('Tab Name'), 'Updated Tab');
 
-    fireEvent.click(getByText('Save'));
+    await user.clear(getByLabelText('Header Title'));
+    await user.type(getByLabelText('Header Title'), 'Updated Header');
+
+    await user.click(getByText('Save'));
 
     expect(mockOnSave).toHaveBeenCalledWith({
       ...tabDefinition,
@@ -44,12 +49,13 @@ describe('EditTabDefinitionModal', () => {
     });
   });
 
-  it('calls onCancel when cancel button is clicked', () => {
+  it('calls onCancel when cancel button is clicked', async () => {
+    const user = userEvent.setup();
     const { getByText } = renderWithI18n(
       <EditTabDefinitionModal tabDefinition={tabDefinition} onSave={mockOnSave} onCancel={mockOnCancel} />,
     );
 
-    fireEvent.click(getByText('Cancel'));
+    await user.click(getByText('Cancel'));
 
     expect(mockOnCancel).toHaveBeenCalled();
   });