From e2f16783638cd8bc431a10742a675fd399fe77c0 Mon Sep 17 00:00:00 2001 From: AJAL ODORA JONATHAN <43242517+ODORA0@users.noreply.github.com> Date: Fri, 18 Oct 2024 13:43:37 +0300 Subject: [PATCH] Remove comments and change from fireEvent to userEvent --- jest.config.js | 2 +- .../add-columns-modal.component.test.tsx | 4 +- .../add-columns-modal.component.tsx | 18 ++++---- .../add-package-modal.component.test.tsx | 31 ++++++++------ .../add-submenu-modal.component.test.tsx | 18 ++++---- ...ete-config-detail-modal.component.test.tsx | 42 +++++++++---------- .../edit-tab-definition-modal.test.tsx | 22 ++++++---- .../interactive-builder.component.test.tsx | 20 ++++----- 8 files changed, 82 insertions(+), 75 deletions(-) diff --git a/jest.config.js b/jest.config.js index c472496..6b7f3be 100644 --- 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: ['/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 index 2df749e..fef61c3 100644 --- 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(); diff --git a/src/components/interactive-builder/add-columns-modal.component.tsx b/src/components/interactive-builder/add-columns-modal.component.tsx index 8f42003..ed61092 100644 --- 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 = ({ }, }; onSchemaChange(updatedSchema); - - // Show success notification setColumnTitle(''); setColumnConcept(''); setIsColumnDate(false); @@ -218,20 +216,20 @@ const ConfigureDashboardModal: React.FC = ({ 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')} > @@ -240,20 +238,20 @@ const ConfigureDashboardModal: React.FC = ({ 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')} > diff --git a/src/components/interactive-builder/add-package-modal.component.test.tsx b/src/components/interactive-builder/add-package-modal.component.test.tsx index ba9018f..d013aed 100644 --- 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(); - 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(); - 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(); - 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(); - 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 index 37f13c6..173ed4d 100644 --- 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(); - 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(); - // 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 index caa08cb..8d05af4 100644 --- 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(); - 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 index ddccb8f..2ca112b 100644 --- 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({ui}); }; @@ -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( , ); - 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( , ); - fireEvent.click(getByText('Cancel')); + await user.click(getByText('Cancel')); expect(mockOnCancel).toHaveBeenCalled(); }); diff --git a/src/components/interactive-builder/interactive-builder.component.test.tsx b/src/components/interactive-builder/interactive-builder.component.test.tsx index 31fb98b..f1f1821 100644 --- a/src/components/interactive-builder/interactive-builder.component.test.tsx +++ b/src/components/interactive-builder/interactive-builder.component.test.tsx @@ -1,10 +1,11 @@ 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 { showModal, showSnackbar } from '@openmrs/esm-framework'; import InteractiveBuilder from './interactive-builder.component'; import { v4 as uuidv4 } from 'uuid'; import { type Schema } from '../../types'; +import userEvent from '@testing-library/user-event'; jest.mock('@openmrs/esm-framework', () => ({ showModal: jest.fn(), @@ -22,7 +23,7 @@ describe('InteractiveBuilder', () => { '@openmrs/esm-patient-chart-app': { extensionSlots: { 'patient-chart-dashboard-slot': { - add: ['navGroup1'], // This ensures that submenus are added + add: ['navGroup1'], configure: { navGroup1: { title: 'Sample Clinical View', @@ -61,18 +62,16 @@ describe('InteractiveBuilder', () => { it('renders interactive builder with initial state and start button', () => { render(); - // Check that the explainer text and start button are rendered expect(screen.getByText(/interactive builder/i)).toBeInTheDocument(); expect(screen.getByText(/start building/i)).toBeInTheDocument(); }); - it('opens the "Add Clinical View" modal when start button is clicked', () => { + it('opens the "Add Clinical View" modal when start button is clicked', async () => { + const user = userEvent.setup(); render(); - // Simulate click on start button - fireEvent.click(screen.getByText(/start building/i)); + await user.click(screen.getByText(/start building/i)); - // Expect showModal to be called with correct arguments expect(showModal).toHaveBeenCalledWith( 'new-package-modal', expect.objectContaining({ @@ -81,13 +80,12 @@ describe('InteractiveBuilder', () => { ); }); - it('opens the "Add Submenu" modal when "Add Submenu" button is clicked', () => { + it('opens the "Add Submenu" modal when "Add Submenu" button is clicked', async () => { + const user = userEvent.setup(); render(); - // Simulate click on "Add Submenu" button - fireEvent.click(screen.getByText(/add clinical view submenu/i)); + await user.click(screen.getByText(/add clinical view submenu/i)); - // Expect showModal to be called with correct arguments expect(showModal).toHaveBeenCalledWith( 'new-menu-modal', expect.objectContaining({