From 12827a40f91c6eca5f1a6ab351ea66b8a720d131 Mon Sep 17 00:00:00 2001 From: Ayush Date: Mon, 3 Jul 2023 01:54:59 +0530 Subject: [PATCH 01/11] test for edit-patient-details-button.component --- .../edit-patient-details-button.test.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx new file mode 100644 index 000000000..2f985c3de --- /dev/null +++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; +import EditPatientDetailsButton from './edit-patient-details-button.component'; +import * as esmFramework from '@openmrs/esm-framework'; + +describe('EditPatientDetailsButton', () => { + it('should navigate to the edit page when clicked', () => { + const navigateMock = jest.fn(); + jest.spyOn(esmFramework, 'navigate').mockImplementation(navigateMock); + + const patientUuid = '12345'; + const { getByRole } = render(); + + const button = getByRole('menuitem'); + fireEvent.click(button); + + expect(navigateMock).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) }); + }); + + it('should call the onTransition function when provided', () => { + const patientUuid = '12345'; + const onTransitionMock = jest.fn(); + const { getByRole } = render( + , + ); + + const button = getByRole('menuitem'); + fireEvent.click(button); + + expect(onTransitionMock).toHaveBeenCalled(); + }); +}); From 78cdaf734bfa7658594a437f1c35b94742318696 Mon Sep 17 00:00:00 2001 From: Ayush Date: Mon, 3 Jul 2023 03:34:15 +0530 Subject: [PATCH 02/11] test for display-photo.component --- .../src/widgets/display-photo.test.tsx | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx diff --git a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx new file mode 100644 index 000000000..7f4761215 --- /dev/null +++ b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import DisplayPatientPhoto from './display-photo.component'; + +jest.mock('../patient-registration/patient-registration.resource', () => ({ + usePatientPhoto: jest.fn().mockReturnValue({ data: { imageSrc: 'test-image-src' } }), +})); +jest.mock('geopattern', () => ({ + generate: jest.fn().mockReturnValue({ + toDataUri: jest.fn().mockReturnValue('test-pattern-url'), + }), +})); + +describe('DisplayPatientPhoto', () => { + it('should render the component with the patient photo', () => { + const patientUuid = '12345'; + const patientName = 'John Doe'; + const { getByTitle, getByTestId } = render( + , + ); + + const avatarImage = getByTitle(`${patientName}`); + + expect(avatarImage).toBeInTheDocument(); + }); +}); From d298ae8ccba2a666590ed3c6565b12b6545fec4e Mon Sep 17 00:00:00 2001 From: Ayush Date: Mon, 3 Jul 2023 03:39:04 +0530 Subject: [PATCH 03/11] removed unwanted selector --- .../src/widgets/display-photo.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx index 7f4761215..9a01fcf28 100644 --- a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx @@ -15,7 +15,7 @@ describe('DisplayPatientPhoto', () => { it('should render the component with the patient photo', () => { const patientUuid = '12345'; const patientName = 'John Doe'; - const { getByTitle, getByTestId } = render( + const { getByTitle } = render( , ); From 5cb9b11c876d10b306372fa4bcf5bb9cdf105317 Mon Sep 17 00:00:00 2001 From: Ayush Date: Tue, 4 Jul 2023 17:09:34 +0530 Subject: [PATCH 04/11] test name updated --- .../src/widgets/display-photo.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx index 9a01fcf28..b9525d5e9 100644 --- a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx @@ -11,7 +11,7 @@ jest.mock('geopattern', () => ({ }), })); -describe('DisplayPatientPhoto', () => { +describe('DisplayPatientPhoto Component', () => { it('should render the component with the patient photo', () => { const patientUuid = '12345'; const patientName = 'John Doe'; From 407d83d81e0bf16de7850a0dae8436ee2b273021 Mon Sep 17 00:00:00 2001 From: Ayush Date: Wed, 5 Jul 2023 22:48:12 +0530 Subject: [PATCH 05/11] added test for non small size --- .../src/widgets/display-photo.test.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx index b9525d5e9..4862771c7 100644 --- a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import DisplayPatientPhoto from './display-photo.component'; jest.mock('../patient-registration/patient-registration.resource', () => ({ @@ -12,15 +12,25 @@ jest.mock('geopattern', () => ({ })); describe('DisplayPatientPhoto Component', () => { - it('should render the component with the patient photo', () => { + it('should render the component with the patient photo and size should not be small', () => { const patientUuid = '12345'; const patientName = 'John Doe'; - const { getByTitle } = render( - , - ); + render(); - const avatarImage = getByTitle(`${patientName}`); + const avatarImage = screen.getByTitle(`${patientName}`); expect(avatarImage).toBeInTheDocument(); + expect(avatarImage).toHaveAttribute('style', expect.stringContaining('width: 80px; height: 80px')); + }); + + it('should render the component with the patient photo and size should be small i.e. 48px', () => { + const patientUuid = '12345'; + const patientName = 'John Doe'; + render(); + + const avatarImage = screen.getByTitle(`${patientName}`); + + expect(avatarImage).toBeInTheDocument(); + expect(avatarImage).toHaveAttribute('style', expect.stringContaining('width: 48px; height: 48px')); }); }); From b8731d061818dae731a7275ee801e0b6842a1a9c Mon Sep 17 00:00:00 2001 From: Ayush Date: Wed, 5 Jul 2023 23:05:13 +0530 Subject: [PATCH 06/11] minor fix --- .../src/widgets/edit-patient-details-button.test.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx index 2f985c3de..b7c028327 100644 --- a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; +import { render, fireEvent, screen } from '@testing-library/react'; import EditPatientDetailsButton from './edit-patient-details-button.component'; import * as esmFramework from '@openmrs/esm-framework'; @@ -9,9 +9,9 @@ describe('EditPatientDetailsButton', () => { jest.spyOn(esmFramework, 'navigate').mockImplementation(navigateMock); const patientUuid = '12345'; - const { getByRole } = render(); + render(); - const button = getByRole('menuitem'); + const button = screen.getByRole('menuitem'); fireEvent.click(button); expect(navigateMock).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) }); @@ -20,11 +20,9 @@ describe('EditPatientDetailsButton', () => { it('should call the onTransition function when provided', () => { const patientUuid = '12345'; const onTransitionMock = jest.fn(); - const { getByRole } = render( - , - ); + render(); - const button = getByRole('menuitem'); + const button = screen.getByRole('menuitem'); fireEvent.click(button); expect(onTransitionMock).toHaveBeenCalled(); From e1d61da4e544091419c61ea5620fad4ad6069c51 Mon Sep 17 00:00:00 2001 From: Ayush Date: Thu, 13 Jul 2023 19:15:09 +0530 Subject: [PATCH 07/11] changed the mock implementation --- .../src/widgets/edit-patient-details-button.test.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx index b7c028327..99880a210 100644 --- a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx @@ -1,12 +1,16 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import EditPatientDetailsButton from './edit-patient-details-button.component'; -import * as esmFramework from '@openmrs/esm-framework'; +import { navigate } from '@openmrs/esm-framework'; describe('EditPatientDetailsButton', () => { it('should navigate to the edit page when clicked', () => { - const navigateMock = jest.fn(); - jest.spyOn(esmFramework, 'navigate').mockImplementation(navigateMock); + jest.mock('@openmrs/esm-framework', () => { + const originalModule = jest.requireActual('@openmrs/esm-framework'); + return { + ...originalModule, + }; + }); const patientUuid = '12345'; render(); @@ -14,7 +18,7 @@ describe('EditPatientDetailsButton', () => { const button = screen.getByRole('menuitem'); fireEvent.click(button); - expect(navigateMock).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) }); + expect(navigate).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) }); }); it('should call the onTransition function when provided', () => { From 2029a0157759da75284fdf176fe9cccffea9b290 Mon Sep 17 00:00:00 2001 From: Ayush Date: Thu, 13 Jul 2023 19:27:04 +0530 Subject: [PATCH 08/11] using navigate as mock --- .../src/widgets/edit-patient-details-button.test.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx index 99880a210..4c4ac58b9 100644 --- a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx @@ -5,6 +5,7 @@ import { navigate } from '@openmrs/esm-framework'; describe('EditPatientDetailsButton', () => { it('should navigate to the edit page when clicked', () => { + const mockNavigate = navigate as jest.Mock; jest.mock('@openmrs/esm-framework', () => { const originalModule = jest.requireActual('@openmrs/esm-framework'); return { @@ -18,7 +19,7 @@ describe('EditPatientDetailsButton', () => { const button = screen.getByRole('menuitem'); fireEvent.click(button); - expect(navigate).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) }); + expect(mockNavigate).toHaveBeenCalledWith({ to: expect.stringContaining(`/patient/${patientUuid}/edit`) }); }); it('should call the onTransition function when provided', () => { From 75f89ef51384a60fcc704292d3bc7ef122afd7a7 Mon Sep 17 00:00:00 2001 From: Ayush Date: Thu, 20 Jul 2023 00:49:03 +0530 Subject: [PATCH 09/11] fixed spaces and variables --- .../src/widgets/display-photo.test.tsx | 9 +++++---- .../src/widgets/edit-patient-details-button.test.tsx | 4 +++- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx index 4862771c7..559a7fad3 100644 --- a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx @@ -1,20 +1,23 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import DisplayPatientPhoto from './display-photo.component'; +import { mockPatient } from '../../../../__mocks__/appointments.mock'; jest.mock('../patient-registration/patient-registration.resource', () => ({ usePatientPhoto: jest.fn().mockReturnValue({ data: { imageSrc: 'test-image-src' } }), })); + jest.mock('geopattern', () => ({ generate: jest.fn().mockReturnValue({ toDataUri: jest.fn().mockReturnValue('test-pattern-url'), }), })); +const patientUuid = mockPatient.uuid; +const patientName = mockPatient.name; + describe('DisplayPatientPhoto Component', () => { it('should render the component with the patient photo and size should not be small', () => { - const patientUuid = '12345'; - const patientName = 'John Doe'; render(); const avatarImage = screen.getByTitle(`${patientName}`); @@ -24,8 +27,6 @@ describe('DisplayPatientPhoto Component', () => { }); it('should render the component with the patient photo and size should be small i.e. 48px', () => { - const patientUuid = '12345'; - const patientName = 'John Doe'; render(); const avatarImage = screen.getByTitle(`${patientName}`); diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx index 4c4ac58b9..294d3f692 100644 --- a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx @@ -2,10 +2,13 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import EditPatientDetailsButton from './edit-patient-details-button.component'; import { navigate } from '@openmrs/esm-framework'; +import { mockPatient } from '../../../../__mocks__/appointments.mock'; describe('EditPatientDetailsButton', () => { + const patientUuid = mockPatient.uuid; it('should navigate to the edit page when clicked', () => { const mockNavigate = navigate as jest.Mock; + jest.mock('@openmrs/esm-framework', () => { const originalModule = jest.requireActual('@openmrs/esm-framework'); return { @@ -13,7 +16,6 @@ describe('EditPatientDetailsButton', () => { }; }); - const patientUuid = '12345'; render(); const button = screen.getByRole('menuitem'); From fd88118eb0b3c8561f257568d9ed4a2194a2e409 Mon Sep 17 00:00:00 2001 From: Ayush Date: Thu, 20 Jul 2023 00:50:33 +0530 Subject: [PATCH 10/11] minor fix --- .../src/widgets/edit-patient-details-button.test.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx index 294d3f692..ee2496b9c 100644 --- a/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/edit-patient-details-button.test.tsx @@ -25,7 +25,6 @@ describe('EditPatientDetailsButton', () => { }); it('should call the onTransition function when provided', () => { - const patientUuid = '12345'; const onTransitionMock = jest.fn(); render(); From 232430d3dcf9b8ea27db5e674e05bee087466d91 Mon Sep 17 00:00:00 2001 From: Ayush Date: Sat, 19 Aug 2023 03:27:20 +0530 Subject: [PATCH 11/11] used the sample url --- .../src/widgets/display-photo.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx index 559a7fad3..7e9a16725 100644 --- a/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx +++ b/packages/esm-patient-registration-app/src/widgets/display-photo.test.tsx @@ -9,7 +9,7 @@ jest.mock('../patient-registration/patient-registration.resource', () => ({ jest.mock('geopattern', () => ({ generate: jest.fn().mockReturnValue({ - toDataUri: jest.fn().mockReturnValue('test-pattern-url'), + toDataUri: jest.fn().mockReturnValue('https://example.com'), }), }));